@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;
}
@mixin button-primary-active {
    @include button-bgcolor-active($primary-color-active);
}
@mixin link-primary {
    @include link-colors($primary-color, $primary-color-hover);
}

@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;
}
@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;
}
@mixin button-white-active {
    @include button-bgcolor-active(mix($black, $white, $active-darken));
}
@mixin link-white {
    @include link-colors($white);
}

@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;
}
@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;
}
@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);
}

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

@mixin button-selected {
    &:focus,
    &:hover {
        box-shadow: none;
    }
}

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

@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;
    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, &:focus {
        box-shadow: $box-shadow-hover;
    }
}

@mixin button-themes {
    &--primary#{&}--link {
        @include link-primary;
    }
    &--primary#{&}--button {
        @include button-primary;
    }
    &--secondary#{&}--link {
        @include link-secondary;
    }
    &--secondary#{&}--button {
        @include button-secondary;
    }
    &--emphasis#{&}--link {
        @include link-emphasis;
    }
    &--emphasis#{&}--button {
        @include button-emphasis;
    }
    &--emphasis-outline#{&}--button {
        @include button-emphasis-outline;
    }
    &--emphasisAlt#{&}--link {
        @include link-emphasisAlt;
    }
    &--emphasisAlt#{&}--button {
        @include button-emphasisAlt;
    }
    &--white#{&}--link {
        @include link-white;
    }
    &--white#{&}--button {
        @include button-white;
    }
    &--card#{&}--button {
        @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 {
		padding: $button_padding;
    }
    &--button#{&}--size-small {
        @include border-radius($button_border-radius--small);
        padding: $button_padding--small;
    }
    &--button#{&}--size-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-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) {
    color: $color;
    text-decoration: none;
    
    svg {
        fill: $icon-color;
    }

    &:hover, &:focus {
        color: $color-hover;
        text-decoration: underline;

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