@import 'links';

// Variables
$sd-button-height-large: 48px;
$sd-button-height-medium: 36px;
$sd-button-height-small: 24px;
$sd-button-min-width-large: 120px;
$sd-button-min-width-small: 72px;
$sd-button-transition-duration: 0.2s;
$sd-button-transition-timing-function: ease;
$icon-size-large: 24px;
$icon-size-medium: 16px;

// Colors:
// These are the currently available button colors with corresponding hover color.
// green and gray buttons now deprecated
$button-colors-source: (
    blue: (
        default: $accessible-blue,
        hover: $blue-accessible-contrast,
    ),
    green: (
        default: $accessible-green,
        hover: $green-accessible-contrast,
    ),
    pink: (
        default: $pink,
        hover: $pink-accessible-contrast,
    ),
    red: (
        default: $booster-red,
        hover: $booster-red-accessible-contrast,
    ),
    gray: (
        default: $gray2,
        hover: $gray-accessible-contrast,
    ),
    white: (
        default: $white,
        hover: $white,
    ),
    disabled: (
        default: $gray2,
        hover: $gray2,
    ),
    gradient: (
        default: $pink,
        hover: $pink-accessible-contrast,
    ),
);
$sd-button-colors: $button-colors-source;

@mixin small-button {
    padding: 0 12px;
    height: $sd-button-height-small;
    min-width: $sd-button-min-width-small;
    font-size: $sd-x-small-text;
}

@mixin medium-button {
    height: $sd-button-height-medium;
    padding: 0 18px;
    min-width: $sd-button-min-width-small;
    font-size: $sd-x-small-text;
}

@mixin large-button {
    height: $sd-button-height-large;
    padding: 0 24px;
    min-width: $sd-button-min-width-large;
    font-size: $sd-base-text;
}

/* Performant approach to "animating" box-shadow on outlined buttons */
@mixin box-shadow-hover($base-color, $hover-color, $size: default) {
    $border-size: 2px;
    $hover-border-size: 3px;
    @if $size == small {
        $border-size: 1px;
        $hover-border-size: 2px;
    }
    box-shadow: inset 0 0 0 $border-size $base-color;

    // Pre-render the hover with a wider shadow
    &::after {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: inset 0 0 0 $hover-border-size $hover-color;
        opacity: 0;
        transition: opacity $sd-button-transition-duration $sd-button-transition-timing-function;
        border-radius: $sd-button-border-radius;
        content: '' !important;
    }

    // Transition to show the pre-rendered effect on hover/focus
    &:hover::after,
    &:focus::after,
    &:active::after {
        opacity: 1;
    }
}

@mixin sd-button-source($color-name: blue, $size: large, $type: solid) {
    $sd-button-base-color: map-get(map-get($sd-button-colors, $color-name), default);
    $sd-button-hover-color: map-get(map-get($sd-button-colors, $color-name), hover);

    position: relative;
    display: inline-flex;
    border: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    appearance: none;
    border-radius: $sd-button-border-radius;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: $sd-font-weight-bold;
    line-height: normal;
    text-decoration: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    transition-duration: $sd-button-transition-duration;
    transition-timing-function: $sd-button-transition-timing-function;
    transition-property: background-color, color, box-shadow;

    // Button size
    @if $size == small {
        @include small-button;
    } @else if $size == medium {
        @include medium-button;
    } @else {
        @include large-button;
    }

    // Button type
    @if $type == outlined {
        // outlined
        background-color: transparent;
        color: $sd-button-base-color;
        @include box-shadow-hover($sd-button-base-color, $sd-button-hover-color);
        &:hover,
        &:active,
        &:focus {
            color: $sd-button-hover-color;
            background-color: transparent;
            text-decoration: none;
        }
        @if $color-name == gray {
            @include box-shadow-hover($gray7, $gray8);
            color: $gray7;
            &:hover,
            &:active,
            &:focus {
                color: $gray8;
            }
        }
        @if $size == small {
            @include box-shadow-hover($sd-button-base-color, $sd-button-hover-color, small);
        }
    } @else {
        // solid
        background-color: $sd-button-base-color;
        color: $white;
        &:hover,
        &:active,
        &:focus {
            background-color: $sd-button-hover-color;
            color: $white;
            text-decoration: none;
        }
        @if $color-name == gray {
            color: $gray8;
            &:hover,
            &:active,
            &:focus {
                color: $white;
            }
        } @else if $color-name == white {
            color: $accessible-blue;
            &:hover,
            &:active,
            &:focus {
                color: $blue-accessible-contrast;
            }
        } @else if $color-name == disabled {
            color: $gray6;
            cursor: not-allowed;
            &:hover,
            &:active,
            &:focus {
                color: $gray6;
            }
        } @else if $color-name == gradient {
            color: $white;
            @include sd-gradient-subs-accessible;
            &:hover,
            &:active,
            &:focus {
                background-image: none;
            }
        }
    }
    &:disabled {
        background-color: $gray2;
        box-shadow: unset;
        color: $gray6;
        cursor: not-allowed;
    }

    // Modifier classes
    &.mod-button-wide {
        width: 100%;
    }
    &.mod-button-small {
        @include small-button;
    }
    &.mod-button-medium {
        @include medium-button;
    }
    &.mod-button-wide-mobile {
        @include sd-viewport($sd-mobile) {
            display: flex;
            width: 100%;
        }
    }
}

@mixin sd-button($color-name: blue, $size: large, $type: solid) {
    @include sd-button-source($color-name, $size, $type);
}

// -- Reusable classes --
$button-size: large;
.sd-button,
.sd-button-blue {
    @include sd-button();
    &.mod-button-outlined {
        @include sd-button(blue, $button-size, outlined);
    }
}

.sd-secondary-button {
    @include sd-button(blue, $button-size, outlined);
}

// -- Reusable color classes --
.sd-button-pink {
    $color: pink;
    @include sd-button($color, $button-size, solid);
    &.mod-button-outlined {
        @include sd-button($color, $button-size, outlined);
    }
}

.sd-button-green {
    $color: green;
    @include sd-button($color, $button-size, solid);
    &.mod-button-outlined {
        @include sd-button($color, $button-size, outlined);
    }
}

.sd-button-red {
    $color: red;
    @include sd-button($color, $button-size, solid);
    &.mod-button-outlined {
        @include sd-button($color, $button-size, outlined);
    }
}

.sd-button-white {
    $color: white;
    @include sd-button($color, $button-size, solid);
    &.mod-button-outlined {
        @include sd-button($color, $button-size, outlined);
    }
    // solid white button with pink text
    &.mod-button-purchase {
        @include sd-button(white, $button-size, solid);
        color: $pink;
        &:hover,
        &:active,
        &:focus {
            color: $pink-accessible-contrast;
        }
    }
    &.mod-button-gold {
        @include sd-button(white, $button-size, solid);
        color: $accessible-yellow;
        &:hover,
        &:active,
        &:focus {
            color: $gray9;
        }
    }
}

@mixin sd-button-gold-text($button-size: medium) {
    @include sd-button(white, $button-size, solid);
    color: $accessible-yellow;
    &:hover,
    &:active,
    &:focus {
        color: $gray8;
    }
}

.sd-button-gold-text {
    @include sd-button-gold-text();
}

@mixin sd-button-subs-gradient {
    $color: gradient;
    @include sd-button($color, $button-size, solid);
    &.mod-button-outlined {
        border: 2px solid transparent;
        background-image: linear-gradient(to right, $white, $white),
            linear-gradient(to top right, $subs-gradient-accessible-color-stops);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        &:hover,
        &:active,
        &:focus {
            color: $pink-accessible-contrast;
            border-color: $pink-accessible-contrast;
            box-shadow: inset 0 0 0 1px $pink-accessible-contrast;
            span {
                color: $pink-accessible-contrast;
                background-image: none;
                -webkit-text-fill-color: unset;
            }
        }
        span {
            @include sd-gradient-subs-accessible;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

.sd-button-subs-gradient {
    @include sd-button-subs-gradient;
}

.sd-button-small-no {
    @include sd-button(pink, small, outlined);
}

.sd-button-small-yes {
    @include sd-button(blue, small, outlined);
}

// strip button styles
@mixin sd-non-button {
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: normal;
    border-radius: 0;
    background-color: transparent;
    text-align: left;
    vertical-align: baseline;
    white-space: normal;
    &:hover,
    &:focus {
        background-color: transparent;
        color: inherit;
    }
}

// for button with button styles removed
.sd-unbutton {
    @include sd-non-button;
    color: inherit;
    cursor: pointer;
    &:hover,
    &:active,
    &:focus {
        color: inherit;
    }
}

// for button with anchor/link style
.sd-button-anchor {
    @include sd-non-button;
    @include base-link-style;
    &:disabled {
        color: $gray6;
        cursor: not-allowed;
    }
}

@mixin sd-icon-button-source($color-name: blue, $size: medium, $type: outlined, $icon-position: left) {
    $sd-button-base-color: map-get(map-get($sd-button-colors, $color-name), default);
    $sd-button-hover-color: map-get(map-get($sd-button-colors, $color-name), hover);
    @include sd-button($color-name, $size, $type);

    svg {
        flex-shrink: 0;
        transition: fill $sd-button-transition-duration $sd-button-transition-timing-function;

        @if $type == outlined {
            // outlined svg
            fill: $sd-button-base-color;
            @if $color-name == gray {
                fill: $gray7;
            }
            @if $color-name == white {
                fill: $white;
            }
        } @else if $type == solid {
            // solid svg
            fill: $white;
            @if $color-name == gray {
                fill: $gray8;
            }
            @if $color-name == white {
                fill: $accessible-blue;
            }
        }

        @if $color-name == disabled {
            fill: $gray6;
        }

        @if $size == medium {
            // medium
            height: $icon-size-medium;
            width: $icon-size-medium;
        } @else if $size == large {
            // large
            height: $icon-size-large;
            width: $icon-size-large;
        }
    }

    &:hover svg {
        @if $color-name == gray {
            fill: $white;
        }
        @if $type == solid {
            @if $color-name == white {
                fill: $blue-accessible-contrast;
            }
        }
        // outlined hover
        @if $type == outlined {
            fill: $sd-button-hover-color;
            @if $color-name == white {
                fill: $white;
            }
            @if $color-name == gray {
                fill: $gray8;
            }
        }
    }

    // Icon position: left, right
    @if $icon-position == left {
        // left
        @if $size == large {
            svg {
                margin-right: 8px;
                margin-left: 0;
            }
        } @else if $size == medium {
            svg {
                margin-right: 6px;
                margin-left: 0;
            }
        }
    } @else if $icon-position == right {
        // right
        flex-direction: row-reverse;
        @if $size == large {
            svg {
                margin-left: 8px;
                margin-right: 0;
            }
        } @else if $size == medium {
            svg {
                margin-left: 6px;
                margin-right: 0;
            }
        }
    }

    &:disabled svg {
        fill: $gray6;
    }

    // Modifier classes
    &.mod-button-compact {
        min-width: 0;
        span {
            // visually hidden so that screen readers read the button text
            @include visually-hidden;
        }
        svg {
            margin: 0;
        }
        @if $size == medium {
            // medium
            padding: 0 10px;
        } @else if $size == large {
            // large
            padding: 0 12px;
        }
    }

    &.mod-button-compact-mobile {
        @include sd-viewport($sd-mobile) {
            min-width: 0;
            span {
                // visually hidden so that screen readers read the button text
                @include visually-hidden;
            }
            svg {
                margin: 0;
            }
            @if $size == medium {
                // medium
                padding: 0 10px;
            } @else if $size == large {
                // large
                padding: 0 12px;
            }
        }
    }
}

@mixin sd-icon-button($color-name: blue, $size: medium, $type: outlined, $icon-position: left) {
    @include sd-icon-button-source($color-name, $size, $type, $icon-position);
}

// Reusable icon classes
.sd-icon-button {
    @include sd-icon-button(blue, large, solid, left);
    &.mod-button-outlined {
        @include sd-icon-button(blue, large, outlined, left);
    }
}