.tabs {
    display: flex;
    flex-direction: column;
}

.tab-bar {
    flex: 0 0 auto;
    display: flex;
    overflow-x: auto;

    &__tab,
    &__spacer,
    &__end-fragment-other-element {
        border-color: transparent;
        border-top-width: 0;
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-radius: 0;
    }
    &:not(&--empty) &__spacer,
    &:not(&--empty) &__end-fragment-other-element {
        border-bottom-color: $color-border;
    }

    &__spacer,
    &__tab--inactive,
    &__end-fragment-other-element {
        opacity: 0.6;
    }

    &__tab {
        &--flex-grow {
            flex: 1;
        }

        border-bottom-color: $color-bg-3;

        &,
        &:hover {
            text-decoration: none !important; // override .btn-link:focus
        }
        &:hover {
            opacity: 1;
            border-bottom-color: $color-border-hover;
        }
        &--active {
            border-bottom-color: $color-border-active !important; // override .btn-link:focus
        }

        &--h5like {
            // Mimic h5 style.
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: $color-text !important;
        }
    }

    &__close-button {
        font-size: 12px;
        flex: 0 0 auto;
        padding-right: 0.125rem;
    }

    &__spacer {
        flex: 1;
    }
}

.theme-light {
    .tab-bar {
        &__tab,
        &:not(.tab-bar--empty) .tab-bar__spacer,
        &:not(.tab-bar--empty) .tab-bar__end-fragment-other-element {
            border-bottom-color: $color-light-border;
        }
        &__tab {
            &--active {
                border-bottom-color: $primary;
            }
            &--h5like {
                color: $color-light-text-1 !important;
            }
        }
        &__close-button {
            &:hover {
                color: $color-light-text-5;
            }
        }
    }
}