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

.tabbar-style(@theme, @color) {
    &--@{theme}&--current {
        color: @color;
    }
}

.@{wuxClassNamePrefix}-tabbar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #80848f;
    padding: 3px 0 0;
    box-sizing: border-box;
    float: left;

    &__icon {
        display: flex;
        justify-content: center;
    }

    &__title {
        font-size: 12px;
        margin: 3px 0 0;
        line-height: 1;
        text-align: center;
    }

    &--current {
        color: @balanced;
    }

    &--disabled {
        opacity: .3;
    }

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