@import url('meta');
@import url('color');
@import url('glue');

@{NS}.tab {
    position: relative;
    margin-bottom: @gap;
    .__bar() {
        margin-bottom: -1px;
    }
    .__item(){
        cursor: pointer;
        border: 1px solid transparent;
        padding: @padding / 2 @padding * 2;
        display: inline-block;
        border-top-left-radius: @radius;
        border-top-right-radius: @radius;
    }
    .__itemActive(){
        border-color: @light_gray;
        border-bottom-color: transparent;
        background: @white;
    }
    .__content() {
        .bordered;
        .box_shadow;
        min-height: @min_input_width;
        padding: @gap;
        border-radius: 0 0 @radius @radius;
    }
    >.bar {
        .__bar();
        >.item {
            .__item();
            &.active {
                .__itemActive();
            }
        }
    }
    >._tab {
        .__bar();
        >._item {
            .__item();
        }
        >._item._active {
            .__itemActive();
        }
    }
    >.content {
        .__content;
        >.item {
            display: none;
            &.active {
                display: block;
            }
        }
    }
    >._content {
        .__content;
        >._item {
            display: none;
            &._active {
                display: block;
            }
        }
    }

    .__bottomItem(){
        margin: -1px 0 0;
        border-radius: 0 0 @radius @radius;
        border-top: 0;
    }

    &.bottom {
        >.content, >._content {
            border-radius: @radius @radius 0 0;
        }
        >.bar {
            >.item {
                .__bottomItem();
                &.active {
                    border-color: @light_gray;
                    border-top-color: transparent;
                }
            }
        }
        >._tab {
            >._item {
                .__bottomItem();
                &._active {
                    border-color: @light_gray;
                    border-top-color: transparent;
                }
            }
        }
    }
}

@{NS}.section.tab {
    .__bar(){
        .bordered;
        border-radius: @radius @radius 0 0;
        border-bottom: 0;
    }
    .__item(){
        border: 0;
        margin: 0;
        border-radius: 0;
        -webkit-transition: background .3s, color .3s;
        -o-transition: background .3s, color .3s;
        transition: background .3s, color .3s;
        &:last-child {
            border-right: 1px solid @light_gray;
        }
        &:hover {
            background: @tiny_gray;
        }
    }
    >.bar {
        .__bar();
        >.item {
            .__item();
            &+.item {
               border-left: 1px solid @light_gray; 
            }
            &.active {
                background: @light_gray;
            }
        }
    }
    >._tab {
        .__bar();
        >._item {
            .__item();
            &+._item {
               border-left: 1px solid @light_gray; 
            }
            &._active {
                background: @light_gray;
            }
        }
    }
    &.bottom {
        >.bar, >._tab {
            .bordered;
            border-radius: 0 0 @radius @radius;
            border-top: 0;
            margin: -1px 0 0 0;
        }
    }
}

@{NS}.vertical.tab {
    .__bar() {
        width: @min_input_width;
        float: left;
    }
    .__item(){
        margin-top: 0;
        display: block;
        border: 1px solid transparent;
        margin-right: -1px;
        border-radius: @radius;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .__itemActive(){
        border-color: @light_gray;
        border-right-color: transparent;
    }

    >.bar {
        .__bar();
        >.item {
            .__item();
            &.active {
                .__itemActive();
            }
        }
    }
    >._tab {
        .__bar();
        >._item {
            .__item();
            &._active {
                .__itemActive();
            }
        }
    }
    >.content, >._content {
        border-top-right-radius: @radius;
        margin-left: @min_input_width;
    }
    &.bottom {
        .__bar(){
            vertical-align: top;
            display: table-cell;
            float: initial;
        }
        .__item(){
            margin-left: -1px;
            border-radius: 0 @radius @radius 0;
        }
        .__itemActive(){
            border-color: @light_gray;
            border-left-color: transparent;
        }
        display: table;
        table-layout: fixed;
        width: 100%;
        min-height: @min_input_width;
        >.content, >._content {
            margin-left: 0;
            display: table-cell;
            border-radius: @radius 0 @radius @radius;
        }
        >.bar {
            .__bar();
            >.item {
                .__item();
                &.active {
                    .__itemActive();
                }
            }
        }
        >._tab {
            .__bar();
            >._item {
                .__item();
                &._active {
                    .__itemActive();
                }
            }
        }
    }
}
