//
// Component: Tab
//
// ========================================================================


// Variables
// ========================================================================

@tab-border:                                    @global-border;
@tab-border-width:                              @global-border-width;
@tab-color:                                     fade(@global-panel-color, 70%);
@tab-padding-horizontal:                        24px;
@tab-padding-vertical:                          16px;
@tab-margin-horizontal:                         0;
@tab-margin-vertical:                           0;
@tab-hover-border:                              @tab-border;
@tab-inactive-background:						darken(@global-background, 2%);
@tab-hover-background:                          @global-panel-color;
@tab-hover-color:                               @global-heading-color;
@tab-active-border:                             @tab-border;
@tab-active-background:                         @global-background;
@tab-active-color:                              @tab-color;
@tab-disabled-color:                            @global-muted-color;


// Component
// ========================================================================

//
// Items
//

.hook-tab() {
	border-width: 0 0 @tab-border-width 0;
    border-color: @tab-border;
}

// Hover
.hook-tab-hover() {}

// Active
.hook-tab-active() {}

// Disabled
.hook-tab-disabled() {}


// Miscellaneous
// ========================================================================

.hook-tab-misc() {

    .uk-tab { border-bottom-width: 0; }

    .uk-tab > li:not(.uk-disabled):not(.uk-active) > a { background: @tab-inactive-background; }

    .uk-tab:not(.uk-tab-flip):not(.uk-tab-left):not(.uk-tab-right) > li:nth-child(n+2):not(.uk-tab-responsive) > a { border-left-width: @tab-border-width; }

    .uk-tab-grid { z-index: 1; }

    .uk-tab:not(.uk-tab-flip) > li.uk-disabled > a:hover,
    .uk-tab:not(.uk-tab-flip) > li.uk-disabled > a:focus { border-left-color: @tab-border; }

    .uk-tab > li:not(.uk-active) > a:hover,
    .uk-tab > li:not(.uk-active) > a:focus,
    .uk-tab > li.uk-open:not(.uk-active) > a {
        margin-bottom: 0;
        padding-bottom: @tab-padding-bottom;
    }

    .uk-tab > li.uk-disabled > a:hover,
    .uk-tab > li.uk-disabled > a:focus,
    .uk-tab > li.uk-disabled.uk-active > a { border-color: @tab-border; }

    // 'tab-flip'
    .uk-tab-flip > li:nth-child(n+2):not(.uk-tab-responsive) > a {
        border-left-width: 0;
        border-right-width: @tab-border-width;
    }

    .uk-tab-responsive > a:before {
        font-family: @global-gravity-icon;
        content: "\e871";
        font-size: 20px;
        vertical-align: top;
        padding-right: 10px;
    }

    // 'tab-top'
    .uk-tab-top {

        > li.uk-active > a {
            box-shadow: inset 0 2px 0 @global-primary-background;
        }

        + .uk-tab-content > li {
            padding: @panel-box-padding;
        }

    }

    // 'tab-left'
    .tm-tab-grid {

        div .uk-tab li.uk-active > a {
            box-shadow: inset 2px 0 0 @global-primary-background;
        }

        .uk-tab-content > li {
            padding: @panel-box-padding;
        }
    }

    // 'tab-bottom'
    .uk-tab-bottom { border-top-width: 0; }

    .uk-tab-bottom > li > a { border-width: @tab-border-width 0 0 0; }

    .uk-tab-bottom > li:not(.uk-active) > a:hover,
    .uk-tab-bottom > li:not(.uk-active) > a:focus,
    .uk-tab-bottom > li.uk-open:not(.uk-active) > a {
        margin-top: 0;
        padding-top: @tab-padding-bottom;
    }

    .uk-tab-left > li > a,
    .uk-tab-right > li > a { border-bottom-width: @tab-border-width; }

    // Phone only
    @media (max-width: @breakpoint-small-max) {

        .uk-tab-left > li:not(:first-child) > a,
        .uk-tab-right > li:not(:first-child) > a { border-left-width: @tab-border-width; }

    }

    // Tablet and bigger
    @media (min-width: @breakpoint-medium) {

        // 'tab-left'
        .uk-tab-left { border-right-width: 0; }

        .uk-tab-left > li > a { border-width: 0 @tab-border-width 0 0; }

        .uk-tab-left > li:nth-child(n+2):not(.uk-tab-responsive) > a { 
        	border-top-width: @tab-border-width; 
        	box-shadow: inset -2px 3px 5px rgba(0, 0, 0, 0.03);
        }

        .uk-tab-left > li:not(.uk-active) > a:hover,
        .uk-tab-left > li:not(.uk-active) > a:focus,
        .uk-tab-left > li.uk-open:not(.uk-active) > a {
            margin-right: 0;
            padding-right: @tab-padding-horizontal;
        }

        // 'tab-right'
        .uk-tab-right { border-left-width: 0; }

        .uk-tab-right > li > a { border-width: 0 0 0 @tab-border-width; }

        .uk-tab-right > li:nth-child(n+2):not(.uk-tab-responsive) > a { border-top-width: @tab-border-width; }

        .uk-tab-right > li:not(.uk-active) > a:hover,
        .uk-tab-right > li:not(.uk-active) > a:focus,
        .uk-tab-right > li.uk-open:not(.uk-active) > a {
            margin-left: 0;
            padding-left: @tab-padding-horizontal;
        }

    }
}