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


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

@tab-border:                                    @global-border;
@tab-padding-horizontal:                        20px;
@tab-padding-vertical:                          10px;
@tab-margin-horizontal:                         10px;
@tab-color:                                     @global-muted-color;
@tab-hover-border:                              transparent;
@tab-hover-background:                          transparent;
@tab-hover-color:                               @global-link-hover-color;
@tab-active-border:                             @global-primary-background;
@tab-active-background:                         transparent;
@tab-active-color:                              @global-color;
@tab-disabled-color:                            @global-muted-color;


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

//
// Items
//

.hook-tab() {
    position: relative;
    border-width: 0 !important;
    letter-spacing: 1px;
    -webkit-transition: color 0.05s linear;
    transition: color 0.05s linear;

    &:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
    }
}


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

    &:after { background: @tab-hover-border; }

}

// Active
.hook-tab-active() {
    font-weight: bold;
    &:after { background: @tab-active-border; }

}

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

    &:after { background: transparent; }

}


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

.hook-tab-misc() {

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

    .uk-tab-bottom > li > a:after {
        top: 0;
        bottom: auto;
    }

    .uk-tab-noborder {
        border: none;
    }


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

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

        .uk-tab-left > li > a,
        .uk-tab-right > li > a { padding: 0; }

        .uk-tab-left > li > a:after,
        .uk-tab-right > li > a:after {
            top: 0;
            bottom: 0;
            left: auto;
            width: 2px;
            height: auto;
        }

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

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

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

        .uk-tab-right > li > a {

            padding-left: @tab-padding-horizontal;

            &:after {
                right: auto;
                left: 0;
            }

        }

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

    }

}
