$series-wrap-width: 756px; //585px;
$series-narrow-width: 1720px;
$nav-tab-border-color: #a0a0a0;
$nav-tab-border-style: 1px solid $nav-tab-border-color;
$nav-tab-border-radius: 4px;
$tab-color: #a8a8a8;

.tab-nav {
    position: relative;
    background-color: #f0f0f0;
    border-bottom: 1px solid #a0a0a0;
    overflow: hidden;
}

.nav-tabs {
    display: flex;
    margin: 0;
    padding: 5px 5px 0;
    position: relative;
    list-style: none;
    z-index: 1;
    top: 1px;
    border: none;

    /* stylelint-disable-next-line media-feature-name-disallowed-list */
    @media screen and (max-width: $screen-md-min) {
        padding: 5px 5px 0;
    }

    > li {
        display: block;
        flex: 0 1 auto;

        &.tab-button {
            a {
                padding: 0;
            }
        }

        a {
            text-decoration: none;
            margin: 0;
            padding: 5px 10px;
            color: #000;
            height: 100%;
            width: 100%;

            &:hover {
                color: #000;
            }
        }

        &.active {
            a {
                pointer-events: none;
            }
        }
    }
}

.tab-flange {
    position: relative;
    height: 5px;
    background-color: #fff;
    z-index: 0;
    border-top: $nav-tab-border-style;
    border-right: $nav-tab-border-style;
    border-bottom: 0;
    border-left: $nav-tab-border-style;
}

.tab-container, .tab-nav {
    background-color: white;
}

.tab-container {
    overflow: hidden;
    justify-content: left;
}

.tab-nav {
    justify-content: left;
    border-bottom: 0;
}

.tab-container {
    &.body-map {
        .tab-button {
            padding: 0;
            flex: 0 1 auto;

            &:hover:not(.active) {
                background: #efefef;
            }

            a {
                padding: 10px 20px;
                display: inline-block;
                width: 100%;
                height: 100%;
                cursor: default;

                &:hover:not([disabled]):not(.active) {
                    background: #e2e2e2;
                    cursor: pointer;
                }
            }
        }
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.chip-seq-matrix__data-wrapper {
    .tab-nav {
        overflow: visible;
        margin-bottom: 1px;

        .organism-tab {
            font-family: 'Oswald';
            font-weight: 300;
        }
    }
}

.nav-tabs {
    flex-wrap: wrap;
    top: 0;

    &::after {
        border-bottom: 1px solid $tab-color;
    }

    .tab-button {
        flex: 0 1 calc(33% - 10px);
        font-family: 'Oswald';
        text-align: center;

        @media screen and (min-width: $series-wrap-width) {
            flex: 0 1 12%;
        }

        @media screen and (min-width: $series-narrow-width) {
            flex: 0 1 214px;
        }
    }
}

.matrix__data-wrapper {
    .tab-border {
        bottom: 0;

        &.mobile {
            display: none;
        }
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.tab-nav-Homosapiens .nav-tabs li, .tab-nav-Musmusculus .nav-tabs li {
    margin: 5px 5px 0 5px;

    .tab-border {
        bottom: 0;
    }
}

.matrix__content--reference-epigenome {
    .tab-content {
        padding-top: 10px;
        border: 0;

        @media screen and (min-width: $series-wrap-width) {
            border-top: 0;
            border-bottom: 1px solid $tab-color;
            border-right: 1px solid $tab-color;
            border-left: 1px solid $tab-color;
        }
    }

    .tab-nav {
        margin-bottom: 0;
    }
}

.summary-controls {
    .tab-content {
        border: 0;
        padding: 0;

        @media screen and (min-width: $series-wrap-width) {
            border-top: 0;
            border-bottom: 1px solid $tab-color;
            border-right: 1px solid $tab-color;
            border-left: 1px solid $tab-color;
            padding: 0 20px;
        }
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.tab-button, .tab-nav-Homosapiens .nav-tabs li, .tab-nav-Musmusculus .nav-tabs li {
    font-family: 'Oswald';
    font-size: 1.3rem;
    font-weight: 300;

    /* stylelint-disable-next-line media-feature-name-disallowed-list */
    @media screen and (max-width: $screen-md-min) {
        font-size: 1rem;
    }
}

.series-tabs .nav-tabs li, .epigenome-tabs .nav-tabs li, .cart__display-content .tab-nav .nav-tabs li {
    padding: 0;

    a {
        display: inline-block;
    }
}

.nav-tabs li {
    padding: 5px 10px;
    border-radius: 3px;
    color: #000;
    margin: 5px 3px 0 3px;
    background: #efefef;
    border: 1px solid #efefef;

    @media screen and (min-width: $series-wrap-width) {
        border: 1px solid transparent;
        border-bottom: 1px solid $tab-color;
        border-radius: 3px 3px 0 0;
    }

    &:hover {
        background: #e2e2e2;
    }

    .disabled {
        background: #efefef;
        opacity: 0.3;
        cursor: default;

        &:hover {
            background: #efefef;
        }
    }

    a {
        position: relative;
    }

    .tab-inner {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 5px;

        @media screen and (min-width: $screen-sm-min) {
            padding: 10px;
        }
    }

    &.selected, &.active {
        background: white;
        z-index: 9;

        a {
            border: none;
        }

        border: 1px solid $tab-color;

        @media screen and (min-width: $series-wrap-width) {
            border-bottom: white 1px solid;
        }
    }

    .tab-icon {
        width: 60px;
        margin: auto;

        img {
            width: 60px;
        }
    }
}

.matrix__data-wrapper {
    border: 0;
}

.tab-border {
    border: 0;
    margin-top: 0;
    z-index: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 0;

    @media screen and (min-width: $series-wrap-width) {
        border-bottom: 1px solid $tab-color;
    }

    &.mobile {
        display: none;
    }
}

.outer-tab-container {
    position: relative;
    width: 100%;
    margin-top: 20px;

    .tab-border {
        bottom: 0;

        &.mobile {
            bottom: calc(50% - 1px);
            display: block;

            @media screen and (min-width: $series-wrap-width) {
                display: none;
            }
        }
    }
}

.tab-description {
    padding: 20px 10px;
    font-size: 0.8rem;

    @media screen and (min-width: $screen-md-min) {
        font-size: 1rem;
    }

    @media screen and (min-width: $series-wrap-width) {
        padding: 20px 0;
    }
}

.tab-body {
    @media screen and (min-width: $series-wrap-width) {
        border: 1px solid $tab-color;
        padding: 0 20px;
        margin-top: -1px;
    }
}

.organism-button {
    img {
        vertical-align: middle;
        width: 30px;
        margin-right: 7px;

        /* stylelint-disable-next-line media-feature-name-disallowed-list */
        @media screen and (max-width: $screen-md-min) {
            display: none;
        }
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.ReferenceEpigenomeMatrix {
    .nav-tabs {
        li {
            .organism-button {
                background-color: unset;
                border: 0;
                margin: 0;

                &:hover {
                    background-color: unset;
                }
            }

            a[disabled] {
                pointer-events: none;
                cursor: unset;
            }
        }
    }
}
