// Name:            Tab
// Description:     Defines styles for a tabbed navigation
//
// Component:       `uk-tab`
//
// Modifiers:       `uk-tab-flip`
//                  `uk-tab-center`
//                  `uk-tab-grid`
//                  `uk-tab-bottom`
//                  `uk-tab-left`
//                  `uk-tab-right`
//                  `uk-tab-responsive`
//
// States:          `uk-active`
//                  `uk-disabled`
//
// ========================================================================


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

@tab-border:                                    #ddd;
@tab-padding-horizontal:                        12px;
@tab-padding-vertical:                          8px;
@tab-color:                                     #07D;
@tab-hover-border:                              #f5f5f5;
@tab-hover-background:                          #f5f5f5;
@tab-hover-color:                               #059;
@tab-active-border:                             #ddd;
@tab-active-background:                         #fff;
@tab-active-color:                              #444;
@tab-disabled-color:                            #999;


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

.uk-tab {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid @tab-border;
}

/*
 * Micro clearfix on the deepest container
 */

.uk-tab:before,
.uk-tab:after {
    content: " ";
    display: table;
}

.uk-tab:after { clear: both; }

/*
 * Items
 * 1. Create position context for dropdowns
 */

.uk-tab > li {
    position: relative; /* 1 */
    margin-bottom: -1px;
    float: left;
}

.uk-tab > li > a {
    display: block;
    padding: @tab-padding-vertical @tab-padding-horizontal;
    border: 1px solid transparent;
    border-bottom-width: 0;
    color: @tab-color;
    text-decoration: none;
    .hook-tab;
}

.uk-tab > li:nth-child(n+2) > a { margin-left: 5px; }

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Also apply if dropdown is opened
 * 3. Remove default focus style
 */

.uk-tab > li > a:hover,
.uk-tab > li > a:focus, /* 1 */
.uk-tab > li.uk-open > a { /* 2 */
    border-color: @tab-hover-border;
    background: @tab-hover-background;
    color: @tab-hover-color;
    outline: none; /* 3 */
    .hook-tab-hover;
}

.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: 1px;
    padding-bottom: @tab-padding-vertical - 1;
}

/* Active */
.uk-tab > li.uk-active > a {
    border-color: @tab-active-border;
    border-bottom-color: transparent;
    background: @tab-active-background;
    color: @tab-active-color;
    .hook-tab-active;
}

/* Disabled */
.uk-tab > li.uk-disabled > a {
    color: @tab-disabled-color;
    cursor: auto;
    .hook-tab-disabled;
}

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


/* Modifier: 'tab-flip'
 ========================================================================== */

.uk-tab-flip > li { float: right; }

.uk-tab-flip > li:nth-child(n+2) > a {
    margin-left: 0;
    margin-right: 5px;
}


/* Modifier: 'tab-responsive'
 ========================================================================== */

/*
 * Hidden by default
 */

.uk-tab-responsive { display: none; }

.uk-tab-responsive > a:before {
    content: "\f0c9\00a0";
    font-family: FontAwesome;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

    [data-uk-tab] > li { display: none; }

    [data-uk-tab] > li.uk-tab-responsive { display: block; }

    [data-uk-tab] > li.uk-tab-responsive > a {
        margin-left: 0;
        margin-right: 0;
    }

}


/* Modifier: 'tab-center'
 ========================================================================== */

.uk-tab-center { border-bottom: 1px solid @tab-border; }

.uk-tab-center-bottom {
    border-bottom: none;
    border-top: 1px solid @tab-border;
}

.uk-tab-center:before,
.uk-tab-center:after {
    content: " ";
    display: table;
}

.uk-tab-center:after { clear: both; }

.uk-tab-center .uk-tab {
    position: relative;
    left: 50%;
    border: none;
    float: left;
}

.uk-tab-center .uk-tab > li {
    position: relative;
    left: -50%;
}

.uk-tab-center .uk-tab > li > a { text-align: center; }


/* Modifier: 'tab-bottom'
 ========================================================================== */

.uk-tab-bottom {
    border-top: 1px solid @tab-border;
    border-bottom: none;
}

.uk-tab-bottom > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.uk-tab-bottom > li > a {
    border-bottom-width: 1px;
    border-top-width: 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-bottom: 0;
    margin-top: 1px;
    padding-bottom: @tab-padding-vertical;
    padding-top: @tab-padding-vertical - 1;
}

.uk-tab-bottom > li.uk-active > a {
    border-top-color: transparent;
    border-bottom-color: @tab-active-border;
}


/* Modifier: 'tab-grid'
 ========================================================================== */

/*
 * 1. Create position context to prevent hidden border because of negative `z-index`
 */

.uk-tab-grid {
    position: relative;
    z-index: 0; /* 1 */
    margin-left: -5px;
    border-bottom: none;
}

.uk-tab-grid:before {
    display: block;
    position: absolute;
    left: 5px;
    right: 0px;
    bottom: -1px;
    z-index: -1; /* 1 */
    border-top: 1px solid @tab-border;
}

.uk-tab-grid > li:first-child > a { margin-left: 5px; }

.uk-tab-grid > li > a { text-align: center; }

/*
 * If `uk-tab-bottom`
 */

.uk-tab-grid.uk-tab-bottom { border-top: none; }
.uk-tab-grid.uk-tab-bottom:before {
    top: -1px;
    bottom: auto;
}


/* Modifier: 'tab-left', 'tab-right'
 ========================================================================== */

/* Only tablets and desktops */
@media (min-width: @breakpoint-medium) {

    .uk-tab-left,
    .uk-tab-right { border-bottom: none; }

    .uk-tab-left > li,
    .uk-tab-right > li {
        margin-bottom: 0;
        float: none;
    }

    .uk-tab-left > li:nth-child(n+2) > a,
    .uk-tab-right > li:nth-child(n+2) > a {
        margin-left: 0;
        margin-top: 5px;
    }

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

    /*
     * Modifier: 'tab-left'
     */

    .uk-tab-left { border-right: 1px solid @tab-border; }
    .uk-tab-left > li { margin-right: -1px; }
    .uk-tab-left > li > a {
        border-bottom-width: 1px;
        border-right-width: 0;
    }
    .uk-tab-left > li:not(.uk-active) > a:hover,
    .uk-tab-left > li:not(.uk-active) > a:focus {
        margin-bottom: 0;
        margin-right: 1px;
        padding-bottom: @tab-padding-vertical;
        padding-right: @tab-padding-horizontal - 1;
    }
    .uk-tab-left > li.uk-active > a { border-right-color: transparent; }

    /*
     * Modifier: 'tab-right'
     */

    .uk-tab-right { border-left: 1px solid @tab-border; }
    .uk-tab-right > li { margin-left: -1px; }
    .uk-tab-right > li > a {
        border-bottom-width: 1px;
        border-left-width: 0;
    }
    .uk-tab-right > li:not(.uk-active) > a:hover,
    .uk-tab-right > li:not(.uk-active) > a:focus {
        margin-bottom: 0;
        margin-left: 1px;
        padding-bottom: @tab-padding-vertical;
        padding-left: @tab-padding-horizontal - 1;
    }
    .uk-tab-right > li.uk-active > a { border-left-color: transparent; }

}


// Hooks
// ========================================================================

.hook-tab-misc;

.hook-tab() {}
.hook-tab-hover() {}
.hook-tab-active() {}
.hook-tab-disabled() {}
.hook-tab-misc() {}