/* Gradient mixins -------- */

// direction of gradient
$horizontal: to right;
$diagonal: to top right;
$horizontal-reverse: to left;
$diagonal-reverse: to bottom left;

// color stops
$subs-gradient-accessible-color-stops: $orange 0%, $pink 24%, $orchid 100%;
$subs-gradient-decorative-color-stops: $orange 0%, $pink 50%, $orchid 100%;
$golden-gradient-accessible-color-stops: $light-gold 0%, $gold 24%, $dark-gold 100%;
$golden-gradient-decorative-color-stops: $light-gold 0%, $gold 31%, $dark-gold 60%;
$jubilee-color-stops: $teal 0%, $accessible-blue 24%, $purple 100%;
$aurora-accessible-color-stops: $teal 0%, $accessible-blue 24%, $ultramarine 100%;
$moonstone-color-stops: $dark-violet 0%, $ultramarine 24%, $teal 100%;

// Gradient definitions
@mixin sd-gradient($name, $direction: $horizontal) {
    $bgcolor: null;
    $movement: null;

    // 2-color gradients
    @if $name == 'afterglow' {
        $bgcolor: $periwinkle;
        $movement: $periwinkle 0%, $ultramarine 100%;
    }
    @if $name == 'aurora' {
        $bgcolor: $teal;
        $movement: $teal 0%, $accessible-blue 100%;
    }
    @if $name == 'dandelion' {
        $bgcolor: $yellow;
        $movement: $yellow 0%, $dark-yellow 100%;
    }
    @if $name == 'dawn' {
        $bgcolor: $pink;
        $movement: $pink 0%, $scarlet 100%;
    }
    @if $name == 'daylight' {
        $bgcolor: $dark-periwinkle;
        $movement: $dark-periwinkle 0%, $periwinkle 100%;
    }
    @if $name == 'delight' {
        $bgcolor: $dark-pink;
        $movement: $dark-pink 0%, $pink 100%;
    }
    @if $name == 'dusk' {
        $bgcolor: $dark-violet;
        $movement: $dark-violet 0%, $purple 100%;
    }
    @if $name == 'midnight' {
        $bgcolor: $dark-ultramarine;
        $movement: $dark-ultramarine 0%, $ultramarine 100%;
    }
    @if $name == 'nightfall' {
        $bgcolor: $dark-periwinkle;
        $movement: $dark-periwinkle 0%, $dark-violet 100%;
    }
    @if $name == 'ocean' {
        $bgcolor: $dark-ultramarine;
        $movement: $dark-ultramarine 0%, $dark-teal 100%;
    }
    @if $name == 'rainforest' {
        $bgcolor: $dark-teal;
        $movement: $dark-teal 0%, $green 100%;
    }
    @if $name == 'river' {
        $bgcolor: $dark-teal;
        $movement: $dark-teal 0%, $dark-blue 100%;
    }
    @if $name == 'sapphire' {
        $bgcolor: $deep-blue;
        $movement: $deep-blue 0%, $accessible-blue 100%;
    }
    @if $name == 'solar' {
        $bgcolor: $booster-red;
        $movement: $booster-red 0%, $scarlet 100%;
    }
    @if $name == 'storm' {
        $bgcolor: $dark-violet;
        $movement: $dark-violet 0%, $dark-pink 100%;
    }
    @if $name == 'twilight' {
        $bgcolor: $pink;
        $movement: $pink 0%, $purple 100%;
    }

    // 3-color gradients
    @if $name == 'aurora-accessible' {
        $bgcolor: $teal;
        $movement: $aurora-accessible-color-stops;
    }
    @if $name == 'jubilee' {
        $bgcolor: $accessible-blue;
        $movement: $jubilee-color-stops;
    }
    @if $name == 'moonstone' {
        $bgcolor: $ultramarine;
        $movement: $moonstone-color-stops;
    }
    @if $name == 'golden-accessible' {
        $bgcolor: $gold;
        $movement: $golden-gradient-accessible-color-stops;
    }
    @if $name == 'golden-decorative' {
        $bgcolor: $gold;
        $movement: $golden-gradient-decorative-color-stops;
    }
    @if $name == 'subs-accessible' {
        $bgcolor: $pink;
        $movement: $subs-gradient-accessible-color-stops;
    }
    @if $name == 'subs-decorative' {
        $bgcolor: $pink;
        $movement: $subs-gradient-decorative-color-stops;
    }

    $horizontal-direction: linear-gradient($horizontal, $movement);
    $diagonal-direction: linear-gradient($diagonal, $movement);
    $other-direction: linear-gradient($direction, $movement);

    background-color: $bgcolor;
    @if $direction == true {
        background-image: $diagonal-direction;
    } @else if $direction == false {
        background-image: $horizontal-direction;
    } @else {
        background-image: $other-direction;
    }

    &.mod-diagonal {
        background-image: $diagonal-direction;
    }
}

@mixin sd-text-gradient($name, $direction: $horizontal) {
    $bgcolor: null;
    $movement: null;

    // 2-color gradients
    @if $name == 'afterglow' {
        $bgcolor: $periwinkle;
        $movement: $periwinkle 0%, $ultramarine 100%;
    }
    @if $name == 'aurora' {
        $bgcolor: $teal;
        $movement: $teal 0%, $accessible-blue 100%;
    }
    @if $name == 'dandelion' {
        $bgcolor: $yellow;
        $movement: $yellow 0%, $dark-yellow 100%;
    }
    @if $name == 'dawn' {
        $bgcolor: $pink;
        $movement: $pink 0%, $scarlet 100%;
    }
    @if $name == 'daylight' {
        $bgcolor: $dark-periwinkle;
        $movement: $dark-periwinkle 0%, $periwinkle 100%;
    }
    @if $name == 'delight' {
        $bgcolor: $dark-pink;
        $movement: $dark-pink 0%, $pink 100%;
    }
    @if $name == 'dusk' {
        $bgcolor: $dark-violet;
        $movement: $dark-violet 0%, $purple 100%;
    }
    @if $name == 'midnight' {
        $bgcolor: $dark-ultramarine;
        $movement: $dark-ultramarine 0%, $ultramarine 100%;
    }
    @if $name == 'nightfall' {
        $bgcolor: $dark-periwinkle;
        $movement: $dark-periwinkle 0%, $dark-violet 100%;
    }
    @if $name == 'ocean' {
        $bgcolor: $dark-ultramarine;
        $movement: $dark-ultramarine 0%, $dark-teal 100%;
    }
    @if $name == 'rainforest' {
        $bgcolor: $dark-teal;
        $movement: $dark-teal 0%, $green 100%;
    }
    @if $name == 'river' {
        $bgcolor: $dark-teal;
        $movement: $dark-teal 0%, $dark-blue 100%;
    }
    @if $name == 'sapphire' {
        $bgcolor: $deep-blue;
        $movement: $deep-blue 0%, $accessible-blue 100%;
    }
    @if $name == 'solar' {
        $bgcolor: $booster-red;
        $movement: $booster-red 0%, $scarlet 100%;
    }
    @if $name == 'storm' {
        $bgcolor: $dark-violet;
        $movement: $dark-violet 0%, $dark-pink 100%;
    }
    @if $name == 'twilight' {
        $bgcolor: $pink;
        $movement: $pink 0%, $purple 100%;
    }

    // 3-color gradients
    @if $name == 'aurora-accessible' {
        $bgcolor: $teal;
        $movement: $aurora-accessible-color-stops;
    }
    @if $name == 'jubilee' {
        $bgcolor: $accessible-blue;
        $movement: $jubilee-color-stops;
    }
    @if $name == 'moonstone' {
        $bgcolor: $ultramarine;
        $movement: $moonstone-color-stops;
    }
    @if $name == 'golden-accessible' {
        $bgcolor: $gold;
        $movement: $golden-gradient-accessible-color-stops;
    }
    @if $name == 'golden-decorative' {
        $bgcolor: $gold;
        $movement: $golden-gradient-decorative-color-stops;
    }
    @if $name == 'subs-accessible' {
        $bgcolor: $pink;
        $movement: $subs-gradient-accessible-color-stops;
    }
    @if $name == 'subs-decorative' {
        $bgcolor: $pink;
        $movement: $subs-gradient-decorative-color-stops;
    }

    $horizontal-direction: linear-gradient($horizontal, $movement);
    $diagonal-direction: linear-gradient($diagonal, $movement);
    $other-direction: linear-gradient($direction, $movement);

    z-index: 0;
    position: relative; /* Required for positioning the pseudo-element */
    background: white; /* Keep the div's background white */
    text-align: center; /* Optional, to center the text */
    color: transparent; /* Make the text itself transparent */

    &::before {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center; /* Center the text */
        content: attr(data-text); /* Dynamically use the text via the data-text attribute */
        @if $direction == true {
            background-image: $diagonal-direction;
        } @else if $direction == false {
            background-image: $horizontal-direction;
        } @else {
            background-image: $other-direction;
        }

        &.mod-diagonal {
            background-image: $diagonal-direction;
        }
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

// 23andMe+ Subscription Mixins
@mixin sd-gradient-subs-accessible {
    // accessible version is always diagonal
    @include sd-gradient('subs-accessible', $diagonal);
}
@mixin sd-gradient-subs-decorative {
    @include sd-gradient('subs-decorative');
}
@mixin sd-gradient-decorative-angled {
    @include sd-gradient('subs-decorative', $diagonal);
}
@mixin sd-gradient-golden-accessible {
    @include sd-gradient('golden-accessible', $diagonal);
}
@mixin sd-gradient-golden-decorative {
    @include sd-gradient('golden-decorative', 68deg);
}
@mixin sd-gradient-jubilee {
    @include sd-gradient('jubilee', $diagonal);
}
@mixin sd-gradient-moonstone {
    @include sd-gradient('moonstone', $diagonal);
}
@mixin sd-gradient-aurora-accessible {
    @include sd-gradient('aurora-accessible', $diagonal);
}
@mixin sd-text-gradient-subs-accessible {
    // accessible version is always diagonal
    @include sd-text-gradient('subs-accessible', $diagonal);
}
@mixin sd-text-gradient-golden-accessible {
    // accessible version is always diagonal
    @include sd-text-gradient('golden-accessible', $diagonal);
}