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


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

//
// New
//

@tab-border-width:                                  @global-border-width;
@tab-border:                                        @global-border;

@tab-item-border-width:                             @global-border-width;
@tab-item-border:                                   @global-border;

@tab-item-hover-border:                             currentColor;
@tab-item-active-border:                            @global-primary-background;

@internal-tab-item-hover-border-gradient:           ~'';
@internal-tab-item-active-border-gradient:          ~'';

@internal-tab-item-active-border-image-slice:       ~'';
@internal-tab-item-active-border-image:             ~'';
@internal-tab-vertical-item-active-border-image:    ~'';

@tab-item-line-left:                                0;
@tab-item-line-right:                               100%;
@tab-item-line-hover-left:                          0;
@tab-item-line-hover-right:                         0;
@tab-item-line-transition-duration:                 0.3s;
@tab-item-line-transition-timing-function:          ease-out;


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

.hook-tab() when not (@tab-border-width = 0) {

    position: relative;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: @tab-margin-horizontal;
        right: 0;
        border-bottom: @tab-border-width solid @tab-border;
    }

}

.hook-tab() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {

    &::before,
    > .uk-active { z-index: 1; }

}


// Items
// ========================================================================

// Need to remove default `border-width` of 4px if `border-image` is used in Safari and Edge
// Note: A `transparent` border color overrides the border image in Safari
.hook-tab-item() when not (@tab-item-border-width = 0) and not (@internal-tab-item-hover-border-gradient = ~''),
                      not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-gradient = ~'') {
    border-width: 0;
}

//
// Border + Line
//

.hook-tab-item() when (@tab-item-mode = border) and not (@tab-item-border-width = 0),
                      (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    border-bottom: @tab-item-border-width solid transparent;
}

.hook-tab-item-hover() when (@tab-item-mode = border) and not (@tab-item-border-width = 0) {
    border-color: @tab-item-hover-border;
}

.hook-tab-item-active() when (@tab-item-mode = border) and not (@tab-item-border-width = 0),
                             (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    border-color: @tab-item-active-border;
}

// Gradient
.hook-tab-item() {}

.hook-tab-item-hover() when (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-hover-border-gradient = ~'') {
    border-image: @internal-tab-item-hover-border-gradient 1;
}

.hook-tab-item-active() when (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-gradient = ~''),
                             (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-gradient = ~'') {
    border-image: @internal-tab-item-active-border-gradient 1;
}

// Image
.hook-tab-item() {}

.hook-tab-item-hover() {}

.hook-tab-item-active() when (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~''),
                             (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~'') {
    .svg-fill(@internal-tab-item-active-border-image, "#000", @tab-item-active-border, border-image-source);
    border-image-slice: @internal-tab-item-active-border-image-slice;
}

.hook-tab-item-disabled() {}

//
// Line
//

.hook-tab() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {

    > :not(.uk-active, .uk-disabled) > a { position: relative; }

    > :not(.uk-active, .uk-disabled) > a::before {
        content: "";
        position: absolute;
        bottom: -@tab-item-border-width;
        left: @tab-item-line-left;
        right: @tab-item-line-right;
        border-bottom: @tab-item-border-width solid @tab-item-hover-border;
        transition: @tab-item-line-transition-duration @tab-item-line-transition-timing-function;
        transition-property: left, right;
    }

    > :not(.uk-active, .uk-disabled) > a:hover::before {
        left: @tab-item-line-hover-left;
        right: @tab-item-line-hover-right;
    }

}

.hook-tab() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-hover-border-gradient = ~'') {

    > :not(.uk-active, .uk-disabled) > a::before {
        border-image: @internal-tab-item-hover-border-gradient 1;
    }

}

//
// Background
//

.hook-tab-item() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border: @tab-item-border-width solid @tab-item-border;
    border-bottom-width: 0;
    padding-bottom: ~'calc(@{tab-item-padding-vertical} + @{tab-item-border-width})';
}

.hook-tab-item-hover() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-color: @tab-item-hover-border;
}

.hook-tab-item-active() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-color: @tab-item-active-border;
}


// Position modifiers
// ========================================================================

.hook-tab-bottom() when not (@tab-border-width = 0) {

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

}

// `0` needed for to reset `border-width` if `border-image` is used in Safari and Edge
.hook-tab-bottom-item() when (@tab-item-mode = border) and not (@tab-item-border-width = 0),
                             (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    border-top: @tab-item-border-width solid transparent;
    border-bottom: 0 none;
}

// Line
.hook-tab-bottom() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {

    > :not(.uk-active, .uk-disabled) > a::before {
        top: -@tab-item-border-width;
        bottom: auto;
    }

}

// Background
.hook-tab-bottom-item() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-bottom-width: @tab-item-border-width;
    padding-bottom: @tab-item-padding-vertical;
    border-top-width: 0;
    padding-top: ~'calc(@{tab-item-padding-vertical} + @{tab-item-border-width})';
}

.hook-tab-left() when not (@tab-border-width = 0) {

    &::before {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        border-left: @tab-border-width solid @tab-border;
        border-bottom: none;
    }

}

// `0` needed for to reset `border-width` if `border-image` is used in Safari and Edge
.hook-tab-left-item() when (@tab-item-mode = border) and not (@tab-item-border-width = 0),
                           (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    border-right: @tab-item-border-width solid transparent;
    border-bottom: 0 none;
}

// Line
.hook-tab-left() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {

    > :not(.uk-active, .uk-disabled) > a::before {
        right: -@tab-item-border-width;
        top: @tab-item-line-left;
        bottom: @tab-item-line-right;
        border-bottom: 0;
        border-right: @tab-item-border-width solid @tab-item-hover-border;
        transition-property: top, bottom;
    }

    > :not(.uk-active, .uk-disabled) > a:hover::before {
        left: auto;
        right: -@tab-item-border-width;
        top: @tab-item-line-hover-left;
        bottom: @tab-item-line-hover-right;
    }

}

// Background
.hook-tab-left-item() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-bottom-width: @tab-item-border-width;
    padding-bottom: @tab-item-padding-vertical;
    border-right-width: 0;
    padding-right: ~'calc(@{tab-item-padding-horizontal} + @{tab-item-border-width})';
}

.hook-tab-right() when not (@tab-border-width = 0) {

    &::before {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        border-left: @tab-border-width solid @tab-border;
        border-bottom: none;
    }

}

// `0` needed for to reset `border-width` if `border-image` is used in Safari and Edge
.hook-tab-right-item() when (@tab-item-mode = border) and not (@tab-item-border-width = 0),
                            (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    border-left: @tab-item-border-width solid transparent;
    border-bottom: 0 none;
}

// Line
.hook-tab-right() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {

    > :not(.uk-active, .uk-disabled) > a::before {
        left: -@tab-item-border-width;
        top: @tab-item-line-left;
        bottom: @tab-item-line-right;
        border-bottom: 0;
        border-right: @tab-item-border-width solid @tab-item-hover-border;
        transition-property: top, bottom;
    }

    > :not(.uk-active, .uk-disabled) > a:hover::before {
        left: -@tab-item-border-width;
        right: auto;
        top: @tab-item-line-hover-left;
        bottom: @tab-item-line-hover-right;
    }

}

// Background
.hook-tab-right-item() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-bottom-width: @tab-item-border-width;
    padding-bottom: @tab-item-padding-vertical;
    border-left-width: 0;
    padding-left: ~'calc(@{tab-item-padding-horizontal} + @{tab-item-border-width})';
}


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

.hook-tab-misc() {}

// Image
.hook-tab-misc() when not (@tab-item-border-width = 0) and not (@internal-tab-vertical-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~'') {

    .uk-tab-left > .uk-active > a,
    .uk-tab-right > .uk-active > a {
        .svg-fill(@internal-tab-vertical-item-active-border-image, "#000", @tab-item-active-border, border-image-source);
        border-image-slice: @internal-tab-item-active-border-image-slice;
    }

}


// Inverse
// ========================================================================

@inverse-tab-border:                        @inverse-global-border;

@inverse-tab-item-border:                   @inverse-global-border;
@inverse-tab-item-hover-border:             currentColor;
@inverse-tab-item-active-border:            @inverse-global-primary-background;

.hook-inverse-tab() when not (@tab-border-width = 0) {

    &::before { border-color: @inverse-tab-border; }

}

.hook-inverse-tab-item-hover() when not (@tab-item-border-width = 0) and (@tab-item-mode = border) {
    border-color: @inverse-tab-item-hover-border;
}
.hook-inverse-tab-item-active() when not (@tab-item-border-width = 0) {
    border-color: @inverse-tab-item-active-border;
}

.hook-inverse-tab-item() when (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-hover-border-gradient = ~''),
                              (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-gradient = ~''),
                              (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-gradient = ~'') {
    border-image: none;
}

.hook-inverse-tab-item-active() when not (@tab-item-mode = border) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~''),
                                         (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~'') {
    .svg-fill(@internal-tab-item-active-border-image, "#000", @inverse-tab-item-active-border, border-image-source);
}

.hook-inverse-tab-item-disabled() {}

.hook-inverse-tab() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@tab-item-hover-border = @inverse-tab-item-hover-border) {
    > :not(.uk-active, .uk-disabled) > a::before {
        border-color: @inverse-tab-item-hover-border;
    }
}
.hook-inverse-tab() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) and not (@internal-tab-item-hover-border-gradient = ~'') {
    > :not(.uk-active, .uk-disabled) > a::before {
        border-image: none;
    }
}

.hook-inverse-tab-item() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-color: @inverse-tab-item-border;
}
.hook-inverse-tab-item-hover() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-color: @inverse-tab-item-hover-border;
}
.hook-inverse-tab-item-active() when (@tab-item-mode = background) and not (@tab-item-border-width = 0) {
    border-color: @inverse-tab-item-active-border;
}

.hook-inverse-tab-left() when not (@tab-border-width = 0) {
    &::before {
        border-left-color: @inverse-tab-border;
    }
}

.hook-inverse-tab-left() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    > :not(.uk-active, .uk-disabled) > a::before {
        border-right-color: @inverse-tab-item-hover-border;
    }
}

.hook-inverse-tab-right() when not (@tab-border-width = 0) {
    &::before {
        border-left-color: @inverse-tab-border;
    }
}

.hook-inverse-tab-right() when (@tab-item-mode = line) and not (@tab-item-border-width = 0) {
    > :not(.uk-active, .uk-disabled) > a::before {
        border-right-color: @inverse-item-hover-border;
    }
}

.hook-inverse() when not (@tab-item-border-width = 0) and not (@internal-tab-vertical-item-active-border-image = ~'') and (@internal-tab-item-active-border-gradient = ~'') {

    .uk-tab-left > .uk-active > a,
    .uk-tab-right > .uk-active > a {
        .svg-fill(@internal-tab-vertical-item-active-border-image, "#000", @inverse-tab-item-active-border, border-image-source);
    }

}
