/* *****************************************************************************
*
*  Tab
*
* ***************************************************************************** */

.bf-tab {
    position: relative;
    width: 100%;

    & > div {
        position: static;
        overflow-x: auto;
        padding:0 2.5rem var(--bf-spacer-2);

        @include media-breakpoint-down(md) {
            padding-left: var(--bf-spacer-1);
        }

        ::-webkit-scrollbar,
        ::-webkit-scrollbar-button {
            @include size(5px);
            background-color: var(--bf-color-stroke-secondary);

            @include media-breakpoint-down(md) {
                @include size(3px);
            }
        }

        &:before {
            position: absolute;
            right: 0;
            top: 0;
            width: 5.5rem;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            background-image: var(--bf-color-bg-linear-ground-x);
            background-repeat: repeat-y;
            content: '';
        }
    }

    &__slider {
        display: flex;
        width: max-content;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid var(--bf-color-stroke-secondary);
    }

    .nav-link {
        @extend .h3;
        padding:0;
        line-height: 3.5rem;
        color: var(--bf-color-neutral-secondary) ;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        text-align: center;
        transition: color .25s;

        &.active,
        &:hover {
            color: inherit;

            &:before {
                position: absolute;
                background-color: var(--bf-color-bg-action-primary);
                bottom: -1px;
            }
        }
    }
}

.bf-color-bg-underground .bf-tab > div:before {
    background-image: var(--bf-color-bg-linear-underground-x);
}