.ui-tabs when (@componentsJS-tabs) {
    position : relative; // position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed")
    .clearfix-mixin();

//    &.ui-widget-content{
//        border : none;
//    }
//
//    &.ui-tabs-collapsible .ui-tabs-active a{
//        cursor : pointer;
//    }

    .ui-tabs-nav {
        .clearfix-mixin();
        position   : relative;
        z-index    : 1;
        background : @tabs-nav-bg;
        margin     : 0;
        padding    : 0;

        // Style li
        li {
            position     : relative;
            float        : left;
            margin       : 2px -1px 0 0;
            background   : @tabs-nav-li-bg;
            white-space  : nowrap;
            list-style   : none;
            color        : @tabs-nav-li-color;
            border       : 1px solid @tabs-nav-li-border;
            border-bottom-width :0;

            a {
                color           : inherit;
                text-decoration : none;
            }

            ul {
                display  : none;
                position : absolute;
                top      : 100%;
                right    : 0;
                width    : 200px;
                margin   : 0;
                padding  : 0;
                border   : 1px solid @tabs-nav-li-border;
                .box-shadow(0px 1px 3px @gray-light);

                li {
                    margin       : -1px !important;
                    float        : none;
                    border-width : 1px;
                    z-index      : 0;

                    &.ui-tabs-active, &:hover {
                        z-index      : 1;
                        border-width : 1px 3px 1px 1px;
                    }

                    & + li {
                    }
                }
            }

            &.ui-tabs-active, &:hover {
                margin-top       : 0;
                border-top-width : 3px;
            }

            &:hover {
                cursor       : pointer;
                background   : @tabs-nav-li-bg-hover;
                border-color : @tabs-nav-li-border-hover;
                color        : @tabs-nav-li-color-hover;

                ul {
                    display : block;
                }

                a {
                }
            }

            &.ui-tabs-active {
                font-weight    : bold;
                background     : @tabs-nav-li-bg-active;
                position       : relative;
                padding-bottom : 1px;
                margin-bottom  : -1px;
                border-color   : @tabs-nav-li-border-active;
                color          : @tabs-nav-li-color-active;

                a {
                    cursor : default;
                }
            }

            &.ui-tabs-loading, &.ui-state-disabled {

                a {
                }
            }
        }

        // Style a in li
        .ui-tabs-anchor {
            display         : block;
            padding         : @padding-base-vertical @padding-large-horizontal;
            text-decoration : none;
        }
    }

    .ui-tabs-panel {
        position   : relative;
        z-index    : 0;
        //        display    : block;
        border     : 1px solid @tabs-nav-li-border-active;
        overflow   : hidden;
        background : @tabs-container-bg;
        padding    : @padding-base-vertical @padding-base-horizontal;
    }

    &.vertical {
        & > .ui-tabs-nav {
            float : left;
            width : 25%;

            li {
                float        : none;
                display      : block;
                margin       : 0 -1px -1px 2px;
                border-width : 1px;

                &.ui-tabs-active, &:hover {
                    margin-left       : 0;
                    border-left-width : 3px;
                }

                &.ui-tabs-active {
                    border-right-color : @tabs-container-bg;
                }
            }
        }

        & > .ui-tabs-panel {
            clear : none;
        }
    }

    // Tabs => Blocks
    @tabs-bg : @brand-primary;
    @tabs-color : @brand-primary;
    @tabs-border-color : @tabs-nav-li-border-active;

    &.blocks when (@tabs-type-blocks) and (@tabs-type) {
        border : 3px solid @tabs-border-color;

        & > .ui-tabs-nav {
            border-bottom : 3px solid @brand-primary;

            li {
                margin  : 0;
                padding : 0;
                border  : none;
                color   : @tabs-color;

                & + li {
                    border-left : 3px solid @brand-primary;
                }

                &:hover {
                    background : lighten(@tabs-bg, 7%);
                    color      : #fff;

                    .ui-tabs-anchor {
                    }
                }
            }

            .ui-tabs-active {
                background : @tabs-bg;
                color      : #fff;

                .ui-tabs-anchor {
                }
            }

            .ui-tabs-anchor {
            }
        }

        & > .ui-tabs-panel {
            border : none;
        }

        &.vertical {
            & > .ui-tabs-nav {
                margin-right : -3px;
                border       : none;
                border-right : inherit;

                li {
                    border : none;

                    & + li {
                        border-top : 3px solid @brand-primary;
                    }

                    &.ui-tabs-active, &:hover {
                    }
                }
            }

            & > .ui-tabs-panel {
                border-left : 3px solid @brand-primary;
            }
        }
    }
}