///*------------------------------------*\
//    #TABS
//\*------------------------------------*/

// Tabs
.tabs {
    position: relative;
    overflow: hidden;
}

@each $key, $color in $colors {
    .tabs--theme-light.tabs--color-#{$key} {
        .tabs__link:not(.tabs__link--is-disabled) .ripple {
            background-color: $color;
        }

        .tabs__link:not(.tabs__link--is-disabled):hover,
        .tabs__link:not(.tabs__link--is-disabled).tabs__link--is-active {
            color: $color;
        }

        .tabs__indicator {
            background-color: $color;
        }
    }

    .tabs--theme-dark.tabs--color-#{$key} {
        .tabs__links {
            background-color: $color;
        }

        .tabs__link:not(.tabs__link--is-disabled) .ripple {
            background-color: $white;
        }
    }

    .tabs--theme-dark.tabs--indicator-#{$key} {
        .tabs__indicator {
            background-color: $color;
        }
    }
}

    // Tabs: links
    .tabs__links {
        position: relative;
        @include display(flex);
        @include flex-direction(row);

        .tabs--layout-center & {
            @include justify-content(center);
        }

        .tabs--theme-light &:after {
            content: '';
            @include position(absolute, null 0 0 0);
            height: 1px;
            background-color: $black-4;
        }
    }

    // Tabs: link
    .tabs__link {
        display: block;
        height: 48px;
        cursor: pointer;
        font-weight: 500;
        line-height: 48px;
        text-align: center;
        text-transform: uppercase;
        @include transition-property(color);
        @include transition-duration(0.2s);

        @include mq($until: desktop) {
            @include font-size(14px);
        }

        @include mq($from: desktop) {
            @include font-size(13px);
        }

        .#{$mdi-css-prefix} {
            @include font-size(24px);
            line-height: 48px;
        }

        .tabs--layout-full & {
            @include flex(1);
        }

        .tabs--layout-inline &,
        .tabs--layout-center & {
            @include mq($until: tablet) {
                padding-left: $base-spacing-unit * 1.5;
                padding-right: $base-spacing-unit * 1.5;
            }

            @include mq($from: tablet) {
                padding-left: $base-spacing-unit * 3;
                padding-right: $base-spacing-unit * 3;
            }
        }

        .tabs--theme-light & {
            color: $black-2;
        }

        .tabs--theme-dark & {
            color: $white-2;

            &:not(.tabs__link--is-disabled):hover,
            &:not(.tabs__link--is-disabled).tabs__link--is-active {
                color: $white-1;
            }
        }
    }

    .tabs__link--is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    // Tabs: indicator
    .tabs__indicator {
        height: 2px;
    }

    .tabs__indicator--top {
        @include position(absolute, 46px 0 null 0);
    }

    .tabs__indicator--bottom {
        @include position(absolute, null 0 46px 0);
    }

    // Tabs: pane
    .tabs--separate .tabs__pane {
        display: none;
    }