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


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

@tab-padding-horizontal:                        20px;
@tab-padding-vertical:                          15px;
@tab-padding-top:                               @tab-padding-vertical;
@tab-padding-bottom:                            @tab-padding-vertical;
@tab-margin-horizontal:                         5px;
@tab-margin-vertical:                           5px;

@tab-border:                                    @global-primary-light-background;
@tab-color:                                     @global-color;
@tab-hover-background:                          rgba(0,0,0,0);
@tab-hover-color:                               @global-color;
@tab-hover-border:                              @global-primary-background;
@tab-active-border:                             @global-primary-background;
@tab-active-background:                         rgba(0,0,0,0);
@tab-active-color:                              @global-primary-background;
@tab-disabled-color:                            @global-muted-color;

@tab-font-family:                               @global-heading-font-family;
@tab-font-size:                                 round((@global-font-size*0.85));
@tab-text-transform:                            uppercase;
@tab-letter-spacing:                            0;

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

//
// Items
//

.hook-tab() {

    position: relative;
    border: none;
    font-family: @tab-font-family;
    font-size: @tab-font-size;
    text-transform: @tab-text-transform;
    letter-spacing: @tab-letter-spacing;
    transition: @global-transition;

    &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        border-bottom: @tab-border-width solid @tab-hover-border;
        opacity: 0;
        transition: opacity 0.35s, transform 0.35s;
        transform: scale(0,1);
    }

}

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

	&::after {
        opacity: 1;
        transform: scale(1);
    }

}

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

    &::after {
        border-width: (@tab-border-width * 2);
        border-color: @tab-active-border;
        opacity: 1;
        transition: border-width 0.2s, transform 0.35s;
        transform: scale(1);
    }

}

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

    &::after { opacity: 0; }

}


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

.hook-tab-misc() {

    // Onclick event
    .uk-tab > li > a:active {

        color: @tab-active-color;

        &::after {
            border-color: @tab-active-border;
            opacity: 1;
            transform: scale(1);
        }

    }

    // Modifier: 'tab-bottom'
    .uk-tab-bottom > li > a {

        &::after {
            top: 0;
            bottom: auto;
        }

    }

    // Reseting border width
    .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-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;
    }

    // Modifier: 'tab-left', 'tab-right'
    .uk-tab-left > li > a::after,
    .uk-tab-right > li > a::after {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        border-right: @tab-border-width solid @tab-hover-border;
        border-bottom: 0;
        webkit-transform: scale(1,0);
        transform: scale(1,0);
    }

    .uk-tab-right > li > a::after {
        right: auto;
        left: 0;
    }

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

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

	.uk-tab-top:before{
		border-width: 1px;
	}

	.uk-tab-right,
	.uk-tab-left {
		border-width: 1px;
	}

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

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

	.uk-tab-content {
	    box-shadow: 0 1px 0 1px @global-primary-light-background;
	    margin: 0 !important;
	    padding: 40px !important;
	    border-radius: 0 0 4px 4px;
	}

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