@mixin button-reset {
    padding: 0;
    min-height: auto;
    border: 0;
    background-color: transparent;
    box-shadow: none;

    &:hover, &:focus {
        background-color: transparent;
        box-shadow: none;
    }
}

@mixin button-primary {
    @include button-bgcolor($primary-color, $primary-color-hover, $primary-color-active);
    @include button-color($primary-color-btn-text);
    @include button-box-shadow(none, $button_box-shadow);
    @include button-border;
    @include focus-outline($primary-color);
}
@mixin button-primary-active {
    @include button-bgcolor-active($primary-color-active);
}
@mixin link-primary {
    @include link-colors($link-text-color);
}

@mixin button-secondary {
    @include button-bgcolor($secondary-color, $secondary-color-hover, $secondary-color-active);
    @include button-color($secondary-color-btn-text);
    @include button-box-shadow(none, $button_box-shadow);
    @include button-border;
    @include focus-outline($secondary-color);
}
@mixin button-secondary-active {
    @include button-bgcolor-active($secondary-color-active);
}
@mixin link-secondary {
    @include link-colors($secondary-color, $secondary-color-hover);
}

@mixin button-white {
    @include button-bgcolor($white, $white, mix($black, $white, $active-darken));
    @include button-color($deep-gray);
    @include button-box-shadow(none, $button_box-shadow);
    @include button-border;
    @include focus-outline;
}
@mixin button-white-active {
    @include button-bgcolor-active(mix($black, $white, $active-darken));
}
@mixin link-white {
    @include link-colors($white);
    @include focus-outline;
}

@mixin button-emphasis {
    @include button-bgcolor($emphasis-color, $emphasis-color-hover, $emphasis-color-active);
    @include button-color($emphasis-color-btn-text);
    @include button-box-shadow(none, $button_box-shadow);
    @include button-border;
    @include focus-outline($emphasis-color);
}
@mixin button-emphasis-active {
    @include button-bgcolor-active($emphasis-color-active);
}
@mixin link-emphasis {
    @include link-colors($emphasis-color, $emphasis-color-hover);
}

@mixin button-emphasisAlt {
    @include button-bgcolor($alt-emphasis-color, $alt-emphasis-color-hover, $alt-emphasis-color-active);
    @include button-color($alt-emphasis-color-btn-text);
    @include button-box-shadow(none, $button_box-shadow);
    @include button-border;
    @include focus-outline($alt-emphasis-color);
}
@mixin button-emphasisAlt-active {
    @include button-bgcolor-active($alt-emphasis-color-active);
}
@mixin link-emphasisAlt {
    @include link-colors($alt-emphasis-color, $alt-emphasis-color-hover);
}

@mixin button-emphasis-outline {
  @include button-bgcolor($white);
    @include button-border($emphasis-color);
    @include button-color($emphasis-color);
    @include button-box-shadow(none, $button_box-shadow);
    @include focus-outline($emphasis-color);
}

@mixin button-card {
    @include button-bgcolor($white, $faint-gray);
    @include button-color($deep-gray);
    @include button-box-shadow($button_card-box-shadow);
    @include focus-outline;
}

@mixin button-selected {
    @include focus-outline;

    &:focus,
    &:hover {
        box-shadow: none;
    }
}

@mixin button-disabled {
    pointer-events: none;
    cursor: default;
    &:focus {
        outline: none;
    }
}

@mixin button-small {
    font-size: $bodyFontSize6;
}

@mixin button-large {
    font-size: $bodyFontSize3;
}

@mixin button-link($color, $color-hover: $color, $icon-color: $color, $icon-color-hover: $color) {
    @include button-reset;
    @include focus-outline($color);
    color: $color;
    text-decoration: none;
    
    svg {
        fill: $icon-color;
    }

    &:hover,
    &:focus {
        color: $color-hover;

        svg {
            fill: $icon-color-hover;
        }
    }
}

@mixin button-box-shadow ($box-shadow: $button_box-shadow, $box-shadow-hover: $box-shadow) {
    box-shadow: $box-shadow;

    &:hover {
        box-shadow: $box-shadow-hover;
    }
}

@mixin button-themes {
    &--link {
        @include link-base;

        &:hover,
        &:focus {
            text-decoration: none;
        }
    }
    &--link-primary {
        @include link-primary;
    }
    &--button-primary {
        @include button-primary;
    }
    &--link-secondary {
        @include link-secondary;
    }
    &--button-secondary {
        @include button-secondary;
    }
    &--link-emphasis {
        @include link-emphasis;
    }
    &--button-emphasis {
        @include button-emphasis;
    }
    &--button-emphasis-outline {
        @include button-emphasis-outline;
    }
    &--link-emphasisAlt {
        @include link-emphasisAlt;
    }
    &--button-emphasisAlt {
        @include button-emphasisAlt;
    }
    &--link-white {
        @include link-white;
    }
    &--button-white {
        @include button-white;
    }
    &--button-card {
        @include button-card;
    }
}

@mixin button-sizes {
    &--size-small {
        @include button-small;
    }

    &--size-large {
        @include button-large;
    }
}

@mixin button-states {
    &[disabled] {
        @include button-disabled;
    }
    &--selected {
        @include button-selected;
    }
    // We don't want fade effect on the 'emphasis-outline' button
    &:not(&--emphasis-outline) {
        &[disabled] {
            opacity: 0.5;
        }
    }
}

@mixin button-types {
    &--button {
        min-height: $button_height;
    padding: $button_padding;
    }
    &--button#{&}--size-small {
        @include border-radius($button_border-radius--small);
        min-height: $button_height--small;
        padding: $button_padding--small;
    }
    &--button#{&}--size-large {
        min-height: $button_height--large;
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
@mixin button-bgcolor-active($bg, $bg-hover: $bg) {
    background-color: $bg;

    &:focus, &:hover {
        background-color: $bg-hover;
    }
}

@mixin button-bgcolor($bg, $bg-hover: $bg, $bg-active: $bg) {
    background-color: $bg;

    &:active {
        background-color: $bg-active;
  }

  &:focus,
    &:hover {
        background-color: $bg-hover;
    }
}

@mixin button-color($color, $icon-color: $color) {
    color: $color;
    fill: $icon-color;
}

@mixin button-border($border-color: darker($percent), $border-color-hover: $border-color) {
  border: 1px solid $border-color;

    &:focus, &:hover {
        border-color: $border-color-hover;
    }
}

@mixin link-base {
    @include focus-outline;
    text-decoration: none;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
    
}

@mixin link-themes {
    &--primary {
        @include link-primary;
    }
    &--secondary {
        @include link-secondary;
    }
    &--emphasis {
        @include link-emphasis;
    }
    &--emphasisAlt {
        @include link-emphasisAlt;
    }
    &--white {
        @include link-white;
    }
}

@mixin link-colors($color, $color-hover: $color, $icon-color: $color, $icon-color-hover: $color-hover) {
    @include link-base;
    color: $color;

    svg {
        fill: $icon-color;
    }

    &:hover, &:focus {
        color: $color-hover;

        svg {
            fill: $icon-color-hover;
        }
    }

    &:focus-visible {
        @include focus-outline($color);
    }
}

@mixin back-link($namespace) {
    position: relative;
    transition: all 0.3s;
    max-height: 30px;

    #{$namespace}_preview--is-condensed & {
        max-height:0;
        opacity:0;
    }

    &Link {
        @include button-link($dark-gray, $deepest-gray, $primary-color, $primary-color);
        position: relative;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
    }
    &Icon {
        width: 7px;
        margin-right: 16px;
    }

    @include media-xl-up {
        padding-left: 12px;
    }

    @include media-lg-down {
        margin-top: 15px;
        margin-bottom: 15px;

        &:before {
            content: "";
            @include background-white;
            @include full-window-width;
        }
    }
}
