// Tabbar component.

@import "../../global/source/slash.global.less";
@import "slash.mixin.less";
@import "slash.variable.less";

// tabbar-group
.tabbar-group {
    margin-bottom: 15px;
}

// tabbar-header
.tabbar-header {
    font-size: 0px;
    display: block;
    text-align: center;
    position: relative;
}

.tabbar-btn {
    font-size: @font-size-base;
    display: inline-block;
    padding: @tabbar-btn-default;
    text-decoration: none;
    text-align: center;
    border-radius: 0;
    border: none;
    box-shadow: -1px 0 0 @tarbar-btn-highlight-color, 0 -1px 0 @tarbar-btn-highlight-color, 0 1px 0 @tarbar-btn-highlight-color, 1px 0 0 @tarbar-btn-highlight-color;
    background-color: @tabbar-btn-default-color;
    &:first-of-type {
        border-top-left-radius: @tabbar-btn-radius;
        border-bottom-left-radius: @tabbar-btn-radius;
    }
    &:last-of-type {
        border-top-right-radius: @tabbar-btn-radius;
        border-bottom-right-radius: @tabbar-btn-radius;
    }
    &.active {
        color: #FFF;
        background-color: @tarbar-btn-highlight-color;
    }
    &.tabbar-btn-sm {
        padding: @tabbar-btn-sm;
    }
    &.tabbar-btn-lg {
        padding: @tabbar-btn-lg;
    }
}

.loop-tabbar-btn(@i: length(@color-status)) when (@i > 0) {
    @state: e(extract(@color-status, @i));
    @color: ~"@{color-@{state}}";
    @reverse-color: ~"@{reverse-color-@{state}}";
    .tabbar-btn-@{state} {
        .tabbar-variant(@color, @reverse-color);
    }
    .loop-tabbar-btn(@i - 1);
} .loop-tabbar-btn;

.tabbar-section {
    .tabbar-body {
        padding: 5px 0;
        display: none;
        &.active {
            display: block;
        }
    }
}

.tabbar-header.tabbar-underline {
    .tabbar-btn {
        box-shadow: none;
        border-radius: 0;
    }
    .loop-tabbar-underline-color(@i: length(@color-status)) when (@i > 0) {
        @state: e(extract(@color-status, @i));
        @color: ~"@{color-@{state}}";
        .tabbar-btn-@{state} {
            .tabbar-underline-variant(@tabbar-active-border-width, @color);
        }
        .loop-tabbar-underline-color(@i - 1);
    } .loop-tabbar-underline-color;
}