//
// Component: Button
//
// ========================================================================


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

@button-text-color:                             @global-emphasis-color;
@button-text-hover-color:                       @global-emphasis-color;

//
// New
//

@button-text-mode:                              line; // none, line, arrow, em-dash
@button-text-border-width:                      @global-border-width;

@internal-image-button-text-arrow:               "../../../../uikit-themes/master/images/button-text-arrow.svg";


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

.hook-button() {
    -webkit-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    -webkit-transition-property: color, background-color, border-color, box-shadow;
    transition-property: color, background-color, border-color, box-shadow;
}

.hook-button-hover() {}

.hook-button-focus() {}

.hook-button-active() {}


// Style modifiers
// ========================================================================

.hook-button-default() {}

.hook-button-default-hover() {}

.hook-button-default-active() {}

//
// Primary
//

.hook-button-primary() {}

.hook-button-primary-hover() {}

.hook-button-primary-active() {}

//
// Secondary
//

.hook-button-secondary() {}

.hook-button-secondary-hover() {}

.hook-button-secondary-active() {}

//
// Danger
//

.hook-button-danger() {}

.hook-button-danger-hover() {}

.hook-button-danger-active() {}


// Disabled
// ========================================================================

.hook-button-disabled() {}


// Size modifiers
// ========================================================================

.hook-button-small() {}

.hook-button-large() {}


// Text modifier
// ========================================================================

//
// Line effect
//

.hook-button-text() when (@button-text-mode = line) {

    position: relative;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 100%;
        border-bottom: @button-text-border-width solid currentColor;
        -webkit-transition: right 0.3s ease-out;
        transition: right 0.3s ease-out;
    }

}

.hook-button-text-hover() when (@button-text-mode = line) {

    &::before { right: 0; }

}

.hook-button-text-disabled() when (@button-text-mode = line) {

    &::before { display: none; }

}

//
// Icon
//

@internal-button-text-arrow-padding: 5px;
@internal-button-text-arrow-width: 22px;
@internal-button-text-arrow-width-animation: 5px;

.hook-button-text() when (@button-text-mode = arrow) {

    position: relative;
    padding-right: (@internal-button-text-arrow-width + @internal-button-text-arrow-padding);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: @internal-button-text-arrow-width;
        .svg-fill(@internal-image-button-text-arrow, "#000", @button-text-color);
        background-repeat: no-repeat;
        background-position: ~'calc(100% - @{internal-button-text-arrow-width-animation}) 50%';
        -webkit-transition: background-position 0.2s ease-out;
        transition: background-position 0.2s ease-out;
    }

}

.hook-button-text-hover() when (@button-text-mode = arrow) {

    &::before {
        .svg-fill(@internal-image-button-text-arrow, "#000", @button-text-hover-color);
        background-position: 100% 50%;
    }

}

//
// Em dash
//

@internal-button-text-em-dash-padding: 8px;
@internal-button-text-em-dash-size: 20px;

.hook-button-text() when (@button-text-mode = em-dash) {

    position: relative;
    padding-left: (@internal-button-text-em-dash-size + @internal-button-text-em-dash-padding);

    &::before {
        content: "";
        position: absolute;
        top: ~'calc(50% - 1px)';
        left: 0;
        width: @internal-button-text-em-dash-size;
        border-bottom: @button-text-border-width solid currentColor;
    }

}


// Link modifier
// ========================================================================

.hook-button-link() {}


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

.hook-button-misc() {}


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

.hook-inverse-button-default() {}
.hook-inverse-button-default-hover() {}
.hook-inverse-button-default-active() {}

.hook-inverse-button-primary() {}
.hook-inverse-button-primary-hover() {}
.hook-inverse-button-primary-active() {}

.hook-inverse-button-secondary() {}
.hook-inverse-button-secondary-hover() {}
.hook-inverse-button-secondary-active() {}

.hook-inverse-button-text() when (@button-text-mode = arrow) {
    &::before { .svg-fill(@internal-image-button-text-arrow, "#000", @inverse-button-text-color); }
}
.hook-inverse-button-text-hover() when (@button-text-mode = arrow) {
    &::before { .svg-fill(@internal-image-button-text-arrow, "#000", @inverse-button-text-hover-color); }
}

.hook-inverse-button-text-disabled() {}
