// stylelint-disable selector-no-qualifying-type

//
// Base styles
//
.btn {
    display: inline-block;
    font-weight: $btn-font-weight;
    color: $body-color;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-color: transparent;
    border: $btn-border-width solid transparent;
    margin-right: 10px;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);
    // transition: transform .4s cubic-bezier(.165, .84, .44, 1), opacity .4s cubic-bezier(.165, .84, .44, 1);
    line-break: normal;
    @include hover {
        color: $body-color;
        text-decoration: none;
    }
    
    i {
        position: relative;
        vertical-align: middle !important;
        font-weight: normal !important;
    }

    &:focus,
    &.focus {
        outline: 0;
        box-shadow: $btn-focus-box-shadow;
    }

    &.no-padding {
        padding: 0;
    }

    &.btn-custom-bg:hover, &.btn-custom-bg:focus, &.btn-custom-bg:active {
        opacity: 0.9;
        background-color: initial;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        opacity: $btn-disabled-opacity;
        @include box-shadow(none);
    }

    // Opinionated: add "hand" cursor to non-disabled .btn elements
    &:not(:disabled):not(.disabled) {
        cursor: pointer;
    }

    &.btn-flat {
        position: relative;
        overflow: hidden;
        &:before {
            content: " ";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: inline-block;
            height: 2px;
            background: rgba(0,0,0,0.2);
        }
    }

}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}


//
// Alternate buttons
//
%base-btn-style {
    color: var(--pix-btn-color);
    @include box-shadow($btn-box-shadow);
    text-shadow:0px;
    // &:hover {

    // }
}

@each $color, $value in $theme-colors {
    .btn-#{$color} {
        @extend %base-btn-style;
        @include button-variant($value, $value, darken($value, 4%));
    }
}
.btn-primary-light {
    @extend %base-btn-style;
    @include button-variant(lighten($primary, 20%), lighten($primary, 20%));
}
.btn-secondary-light {
    @extend %base-btn-style;
    @include button-variant(lighten($secondary, 20%), lighten($secondary, 20%));
}



/*
* Outline Buttons
*/
@each $color, $value in $theme-colors {
    .btn-outline-#{$color} {
        @include button-outline-variant($value);
    }
}
.btn-outline-primary-light {
    @include button-outline-variant(lighten($primary, 20%));
}
.btn-outline-secondary-light {
    @include button-outline-variant(lighten($secondary, 20%));
}

[class^='btn-outline-'], [class*=' btn-outline-'] { 
    color: var(--pix-btn-outline-color, $primary);
    // border-color: var(--pix-btn-outline-color, $primary);
    border: 2px solid var(--pix-btn-outline-color, $primary);
    padding: calc(#{$btn-padding-y} - #{$btn-outline-border-width}) $btn-padding-x;
    &:hover {
        background-color: var(--pix-btn-outline-color, $primary);
        border-color: var(--pix-btn-outline-color, $primary) !important;
    }
    &:focus,
    &.focus {
        box-shadow: 0 0 0 .2rem var(--pix-btn-outline-color-opacity, rgba($primary, .5));
    }
    &.disabled,
    &:disabled {
        color: var(--pix-btn-outline-color, $primary);
        background-color: transparent;
    }
    &.btn-xl {
        // @include button-size(calc(#{$btn-padding-y-xl} - #{$btn-outline-border-width}), $btn-padding-x-xl, $btn-font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
        padding: calc(#{$btn-padding-y-xl} - #{$btn-outline-border-width}) $btn-padding-x-xl !important;
    }

    &.btn-lg {
        // @include button-size(calc(#{$btn-padding-y-lg} - #{$btn-outline-border-width}), $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
        padding: calc(#{$btn-padding-y-lg} - #{$btn-outline-border-width}) $btn-padding-x-lg !important;
    }

    &.btn-md {
        // @include button-size(calc(#{$btn-padding-y-md} - #{$btn-outline-border-width}), $btn-padding-x-md, $btn-font-size-md, $btn-line-height-md, $btn-border-radius-md);
        padding: calc(#{$btn-padding-y-md} - #{$btn-outline-border-width}) $btn-padding-x-md !important;
    }

    &.btn-sm {
        // @include button-size(calc(#{$btn-padding-y-sm} - #{$btn-outline-border-width}), $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
        padding: calc(#{$btn-padding-y-sm} - #{$btn-outline-border-width}) $btn-padding-x-sm !important;
    }
}

/*
* Line Buttons
*/
@each $color, $value in $theme-colors {
    .btn-line-#{$color} {
        @include button-line-variant($value);
    }
}
.btn-line-primary-light {
    @include button-line-variant(lighten($primary, 20%));
}
.btn-line-secondary-light {
    @include button-line-variant(lighten($secondary, 20%));
}
[class^='btn-line-'], [class*=' btn-line-'] { 
    color: var(--pix-btn-line-color, $primary);
    border-color: var(--pix-btn-line-color, $primary);
    position: relative;
    &:before {
        content: " ";
        box-shadow: 0 0 0 2px var(--pix-btn-line-color-opacity, rgba($primary, .5)) inset;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    @include hover {
        color: var(--pix-btn-line-color, $primary);
        background-color: transparent;
        opacity: 0.75;
    }
    &:focus,
    &:active {
        color: var(--pix-btn-line-color, $primary);
        border-color: var(--pix-btn-line-color, $primary);
        box-shadow: 0 0 0 2px var(--pix-btn-line-color-opacity, rgba($primary, .5)) inset !important;
        background-color: transparent;
        opacity: 0.75;
    }
    &.disabled,
    &:disabled {
        color: var(--pix-btn-line-color, $primary);
        background-color: transparent;
    }
}
/*
* Underline Buttons
*/
@each $color, $value in $theme-colors {
    .btn-underline-#{$color} {
        @include button-underline-variant($value);
    }
}
.btn-underline-primary-light {
    @include button-underline-variant(lighten($primary, 20%));
}
.btn-underline-secondary-light {
    @include button-underline-variant(lighten($secondary, 20%));
}

[class^='btn-underline-'], [class*=' btn-underline-'] { 
    opacity: 1;
    position: relative;
    z-index: 2;
    display: inline-block;
    span {
        position: relative;
    }
    span:before {
        content: " ";
        background: var(--pix-btn-underline-color, $primary);
        position: absolute;
        top: 120%;
        border-radius: 3px;
        left: 0%;
        width: 100%;
        height: 3px;
        transform: scaleX(0);
        transition: transform 0.2s;
        transform-origin: right center;
        z-index: -1;
        box-sizing: border-box;
        display:block;
    }
    @include hover {
        color: var(--pix-btn-underline-color, $primary);
        background-color: transparent;
        opacity: 0.75;
        opacity: 1;
        span:before {
            transform: scaleX(1);
            transform-origin: left center;
        }
    }
    &:focus,
    &:active {
        background: transparent;
        color: var(--pix-btn-underline-color-opacity, rgba($primary, .75));
        span:before {
            background: var(--pix-btn-underline-color-opacity, rgba($primary, .75));
        }
    }
    &.disabled,
    &:disabled {
        color: var(--pix-btn-underline-color, $primary);
        background-color: transparent;
    }
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        box-shadow: none;
        span:before {
            transform: scaleX(1);
            background: var(--pix-btn-underline-color-opacity, rgba($primary, .75));
        }
    }
}

/*
* Blink Buttons
*/
@each $color, $value in $theme-colors {
    .btn-blink-#{$color} {
        @include button-blink-variant($value);
    }
}
.btn-blink-primary-light {
    @include button-blink-variant(lighten($primary, 20%));
}
.btn-blink-secondary-light {
    @include button-blink-variant(lighten($secondary, 20%));
}
[class^='btn-blink-'], [class*=' btn-blink-'] { 
    color: var(--pix-btn-blink-color, $primary);
    opacity: 1;
    position: relative;
    z-index: 2;
    display: inline-block;
    overflow: hidden;
    &:before {
        content: " ";
        background: var(--pix-btn-blink-color, $primary);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transition: transform 0.2s;
        transform-origin: right center;
        z-index: -1;
    }
    @include hover {
        color: var(--pix-btn-blink-color-hover, #fff);
        background-color: transparent;
        opacity: 1;
        &:before {
            transform: scaleX(1);
            transform-origin: left center;
        }
    }
    &:focus,
    &:active {
        opacity: 0.75;
    }
    &.disabled,
    &:disabled {
        color: var(--pix-btn-blink-color, $primary);
        background-color: transparent;
    }
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: var(--pix-btn-blink-color-hover, #fff);
        background-color: transparent;
        opacity: 0.75;
        &:before {
            transform: scaleX(1);
            transform-origin: left center;
        }
    }
}

//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
    font-weight: $font-weight-normal;
    color: $link-color;

    @include hover {
        color: $link-hover-color;
        -webkit-text-decoration: $link-hover-decoration;
                text-decoration: $link-hover-decoration;
    }

    &:focus,
    &.focus {
        -webkit-text-decoration: $link-hover-decoration;
                text-decoration: $link-hover-decoration;
        box-shadow: none;
    }

    &:disabled,
    &.disabled {
        color: $btn-link-disabled-color;
        pointer-events: none;
    }

    // No need for an active state here
}


//
// Button Sizes
//

.btn-xl {
    @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $btn-font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
}

.btn-lg {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

.btn-md {
    @include button-size($btn-padding-y-md, $btn-padding-x-md, $btn-font-size-md, $btn-line-height-md, $btn-border-radius-md);
}

.btn-sm {
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}




//
// Block button
//

.btn-block {
    display: block;
    width: 100%;

    // Vertically space out multiple block buttons
    + .btn-block {
        margin-top: $btn-block-spacing-y;
    }
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
    &.btn-block {
        width: 100%;
    }
}
