@import "../styles/base/fn.wxss";

.tab-style(@theme, @color) {
    &--@{theme} &-bar {
        background: @color;
    }

    &--@{theme}&--current {
        color: @color;
    }
}

.@{wuxClassNamePrefix}-tabs {
    &__tab {
        flex: 1;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        box-sizing: border-box;
        font-size: 14px;
        color: #80848f;
    
        &-bar {
            display: block;
            width: 100%;
            height: 2px;
            background: transparent;
            position: absolute;
            bottom: 0;
            left: 0;
            background: @balanced;
        }

        &--vertical {
            padding: 0 15px;
        }

        &--vertical &-bar {
            width: 2px;
            height: 100%;
            right: 0;
            left: auto;
        }
    
        &--current {
            color: @balanced;
        }
    
        &--horizontal&--scroll {
            display: inline-flex;
            padding: 0 15px;
            width: auto;
        }
    
        &--disabled {
            opacity: .3;
        }

        .tab-style(light, @light-inverse);
        .tab-style(stable, @stable-inverse);
        .tab-style(positive, @positive);
        .tab-style(calm, @calm);
        .tab-style(assertive, @assertive);
        .tab-style(balanced, @balanced);
        .tab-style(energized, @energized);
        .tab-style(royal, @royal);
        .tab-style(dark, @dark);
    }
}