/* TabView */

body .ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-top: 3px solid @tabview-border-top-color;

    .tabviewSolid(@tabview-border-top-color, #fff);

    &.box-default {
        border-top: 3px solid @gray-lte;
        .tabviewSolid(@gray-lte, #444);
    }

    &.box-danger {
        border-top: 3px solid @red;
        .tabviewSolid(@red, #fff);
    }

    &.box-fatal {
        border-top: 3px solid @dark-red;
        .tabviewSolid(@dark-red, #fff);
    }

    &.box-warning {
        border-top: 3px solid @yellow;
        .tabviewSolid(@yellow, #fff);
    }

    &.box-success {
        border-top: 3px solid @green;
        .tabviewSolid(@green, #fff);
    }

    &.box-info {
        border-top: 3px solid @aqua;
        .tabviewSolid(@aqua, #fff);
    }

    &.box-teal {
        border-top: 3px solid @admin-teal;
        .tabviewSolid(@admin-teal, #fff);
    }

    &.no-color {
        border-top: 1px solid #d2d6de;
        .tabviewSolid(#f6f7f9, @admin-text-color);
    }
}

body .ui-tabs.ui-tabs-left .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-top: 3px solid @tabview-border-top-color;
    .tabviewSolid(@tabview-border-top-color, #fff);

    &.box-default {
        border-top: 3px solid @gray-lte;
        .tabviewSolid(@gray-lte, #444);
    }

    &.box-danger {
        border-top: 3px solid @red;
        .tabviewSolid(@red, #fff);
    }

    &.box-fatal {
        border-top: 3px solid @dark-red;
        .tabviewSolid(@dark-red, #fff);
    }

    &.box-warning {
        border-top: 3px solid @yellow;
        .tabviewSolid(@yellow, #fff);
    }

    &.box-success {
        border-top: 3px solid @green;
        .tabviewSolid(@green, #fff);
    }

    &.box-info {
        border-top: 3px solid @aqua;
        .tabviewSolid(@aqua, #fff);
    }

    &.no-color {
        border-top: 1px solid #d2d6de;
        .tabviewSolid(#f6f7f9, @admin-text-color);
    }
}

body .ui-tabs.ui-tabs-right .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-top: 3px solid @tabview-border-top-color;

    &.box-default {
        border-top: 3px solid @gray-lte;
        .tabviewSolid(@gray-lte, #444);
    }

    &.box-danger {
        border-top: 3px solid @red;
        .tabviewSolid(@red, #fff);
    }

    &.box-fatal {
        border-top: 3px solid @dark-red;
        .tabviewSolid(@dark-red, #fff);
    }

    &.box-warning {
        border-top: 3px solid @yellow;
        .tabviewSolid(@yellow, #fff);
    }

    &.box-success {
        border-top: 3px solid @green;
        .tabviewSolid(@green, #fff);
    }

    &.box-info {
        border-top: 3px solid @aqua;
        .tabviewSolid(@aqua, #fff);
    }

    &.no-color {
        border-top: 1px solid #d2d6de;
        .tabviewSolid(#f6f7f9, @admin-text-color);
    }
}

body .ui-tabs .ui-tabs-nav li {
    line-height: 1.5687;
    overflow: hidden;

    a {
        padding: .5em 1.1em;
        position: relative;
    }
}

body .ui-tabs li:hover {
    background: transparent;
}


body div:not(.ui-tabs-scrollable).ui-tabs ul.ui-tabs-nav li {
    @media (max-width: @screen-xm) {
        width: 100%;
    }
}

body .ui-tabs > ul > li > a {
    color: @admin-text-color;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header {
    border-bottom: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-top {
    border-bottom: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-color: @tabview-border-color @tabview-border-color transparent @tabview-border-color;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li {
    border-radius: 4px 4px 0 0;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li.ui-state-active {
    margin-bottom: -1px;
}

.ui-tabs.ui-tabs-bottom .ui-tabs-nav.ui-widget-header {
    border-top: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-bottom {
    border-top: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-bottom .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-color: transparent @tabview-border-color @tabview-border-color @tabview-border-color;
}

.ui-tabs.ui-tabs-bottom .ui-tabs-nav.ui-widget-header li {
    border-radius: 0 0 4px 4px;
}

.ui-tabs.ui-tabs-bottom .ui-tabs-nav.ui-widget-header li.ui-state-active {
    margin-top: -1px;
}

.ui-tabs.ui-tabs-left .ui-tabs-nav.ui-widget-header {
    border-right: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-left {
    border-right: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-left .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-color: @tabview-border-color transparent @tabview-border-color @tabview-border-color;
}

.ui-tabs.ui-tabs-left .ui-tabs-nav.ui-widget-header li {
    border-radius: 4px 0 0 4px;
}

.ui-tabs.ui-tabs-left .ui-tabs-nav.ui-widget-header li.ui-state-active {
    margin-right: -1px;
}

.ui-tabs.ui-tabs-right .ui-tabs-nav.ui-widget-header {
    border-left: 1px solid @tabview-border-color;
}

.ui-tabs.ui-tabs-right {
    border-left: 1px solid @tabview-border-color;
}

.ui-tabs .ui-tabs-nav li {
    line-height: 1.5687;
}

.ui-tabs.ui-tabs-right .ui-tabs-nav.ui-widget-header li.ui-state-active {
    border-color: @tabview-border-color @tabview-border-color @tabview-border-color transparent;
}

.ui-tabs.ui-tabs-right .ui-tabs-nav.ui-widget-header li {
    border-radius: 0 4px 4px 0;
}

.ui-tabs.ui-tabs-right .ui-tabs-nav.ui-widget-header li.ui-state-active {
    margin-left: -1px;
}

.ui-tabs.ui-tabs-top {
    border-bottom: none;
}

.ui-tabs.ui-widget-content:not(.ui-ribbon) {
    border: 0px none;
}

.ui-tabs:not(.ui-ribbon) .ui-tabs-nav {
    background: transparent;
}



body .ui-tabs .ui-tabs-nav {

    > li.ui-state-default {
        background: #f6f7f9;
        &.ui-state-hover {
            background: @tabview-hover-color;
        }

        &.ui-state-active {
            background: #ffffff;
            font-weight: normal;
            color: #555555;
        }
    }


    li span.ui-icon-close {
        background-image: none !important;
        display: inline;
        float: none;

        &:before {
            font-family: FontAwesome;
            color: @admin-text-color;
            display: inline !important;
            position: relative;
            font-size: @font-awesome-icon-size - 2;
            margin-right: 2px;
            overflow: hidden;
            content: "\f00d" !important;
        }

        &:hover:before {
            color: @hover-icon-color;
        }
    }
}

div.ui-tabs-navscroller a.ui-tabs-navscroller-btn {
    span.ui-icon-carat-1-e {
        background-image: none;
        display: inline;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: #444444;
            position: relative;
            font-size: 10px;
            font-weight: bold;
            padding: 0 4px;
            top: 2px;
            overflow: hidden;
            content: "\e258" !important;
        }
    }

    .ui-icon-carat-1-w {
        background-image: none;
        display: inline;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: #444444;
            position: relative;
            font-size: 10px;
            font-weight: bold;
            padding: 0 4px;
            top: 2px;
            overflow: hidden;
            content: "\e257" !important;
        }
    }
}

@media (max-width: @screen-xs) {
    body .ui-tabs .ui-tabs-nav li span.ui-icon-close:before {
        font-size: @font-awesome-icon-size - 1;
    }
}


.tabviewSolid(@color, @text-color) {
    &.box-solid {
        background: @color;
        border-color: @color;
        .border-radius(@default-border-radius);

        a {
            color: @text-color;
        }

        span.ui-icon:before {
            color: @text-color;
        }
    }
}
