@import '../bootstrap'
@import '../theme'

/*Theme*/
v-tabs__bar($material)
    background-color: $material.cards

    .v-tabs__div
        color: $material.tabs.active

    .v-tabs__item--disabled
        color: $material.buttons.disabled

theme(v-tabs__bar, 'v-tabs__bar')

.v-tabs
    position: relative

.v-tabs__bar
    position: relative

.v-tabs__icon
    align-items: center
    cursor: pointer
    display: inline-flex
    height: 100%
    position: absolute
    top: 0
    user-select: none
    width: 32px

    &--prev
        left: 4px

    &--next
        right: 4px

.v-tabs__wrapper
    overflow: hidden
    contain: content
    display: flex

    &--show-arrows
        margin-left: 40px
        margin-right: 40px

        .v-tabs__container--align-with-title
            padding-left: 16px

            /*
            OVERRIDE
            ================================
            @media $display-breakpoints.xs-only
                padding-left: 24px
            ================================
             */
            +Override(xs-only)
                padding-left: 24px

.v-tabs__container
    flex: 1 0 auto
    display: flex
    height: 48px
    list-style-type: none
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)
    white-space: nowrap
    position: relative

    &--overflow
        .v-tabs__div
            flex: 1 0 auto

    &--grow
        .v-tabs__div
            flex: 1 0 auto
            max-width: none

    &--icons-and-text
        height: 72px

    &--align-with-title
        padding-left: 56px

    &--fixed-tabs, &--icons-and-text
        .v-tabs__div
            min-width: 72px

            /*
            OVERRIDE
            =====================================
            @media $display-breakpoints.sm-and-up
                min-width: 160px
            =====================================
             */
            +Override(sm-and-up)
                min-width: 160px

    &--fixed-tabs
        .v-tabs__div
            /*
            OVERRIDE
            =====================================
            @media $display-breakpoints.xs-only
                flex: 1 0 auto
            =====================================
            */
            +Override(xs-only)
                flex: 1 0 auto

    &--centered, &--fixed-tabs, &--right
        > .v-tabs__div:first-child
            margin-left: auto

        .v-tabs__slider-wrapper + .v-tabs__div
            margin-left: auto

    &--centered, &--fixed-tabs
        > .v-tabs__div:last-child
            margin-right: auto

    &--icons-and-text
        .v-tabs__item
            flex-direction: column-reverse

            .v-icon
                margin-bottom: 6px

.v-tabs__div
    align-items: center
    display: inline-flex
    flex: 0 1 auto
    font-size: 14px
    font-weight: 500
    line-height: normal
    height: inherit
    max-width: 264px
    text-align: center
    text-transform: $tab-text-transform
    vertical-align: middle

.v-tabs__item
    align-items: center
    color: inherit
    display: flex
    flex: 1 1 auto
    height: 100%
    justify-content: center
    max-width: inherit
    padding: 6px 12px
    text-decoration: none
    transition: $primary-transition
    user-select: none
    white-space: normal

    &:not(.v-tabs__item--active)
        opacity: 0.7

    &--disabled
        pointer-events: none

.v-tabs__slider
    height: 2px
    width: 100%

    &-wrapper
        bottom: 0
        margin: 0 !important
        position: absolute
        transition: $primary-transition