/*************************************************
* ---- Tabs ----
*/

.w2ui-tabs {
    cursor: default;
    overflow: hidden !important;
    position: relative;
    background-color: @tabs-background-color;
    padding: 3px 0px;

    &:not(.w2ui-tabs-up) {
        padding-bottom: 0px !important;
    }

    &.w2ui-tabs-up {
        padding-top: 0px !important;
    }

    table {
        border-bottom: 1px solid silver;
        padding: 0px 7px;
    }

    .w2ui-tab {
        padding: 6px 20px;
        text-align: center;
        color: @tabs-tab-color;
        background-color: @tabs-tab-background-color;
        border: @tabs-tab-border;
        border-bottom: 1px solid silver;
        white-space: nowrap;
        margin: 1px 1px -1px 0px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        cursor: default;
        .user-select;
        &.active {
            color: @tabs-tab-active-color;
            background-color: @tabs-tab-active-background-color;
            border: @tabs-tab-active-border;
            border-bottom: 1px solid transparent;
        }
        &.closable {
            padding: 6px 28px 6px 20px
        }
    }

    .w2ui-tab-close {
        color: #555;
        text-shadow: 1px 1px 1px #bbb;
        float: right;
        margin: 6px 4px 0px 0px;
        padding: 0px 0px 0px 5px;
        width: 16px;
        height: 16px;
        opacity: 0.9;
        border: 0px;
        border-top: 3px solid transparent;
        border-radius: 9px;
        &:hover {
            background-color: #D77F7F;
            color: white;
        }
        &:before {
            position: relative;
            top: -2px;
            left: 0px;
            opacity: 0.6;
            color: inherit;
            text-shadow: inherit;
            content: 'x';
        }
    }

    // upwards tabs
    &.w2ui-tabs-up {
        table {
            border-top: 1px solid #c0c0c0;
            border-bottom: 0px;
        }
        .w2ui-tab {
            border-top: 1px solid #C0C0C0;
            margin: -1px 1px 0px 0px;
            border-radius: 0px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            &.active {
                border: @tabs-tab-active-border;
                border-top: 1px solid transparent;
            }
        }
        .w2ui-tab-close {
            margin-top: 4px;
        }
    }
}