// sass-lint:disable no-color-literals zero-unit

@use 'true' as *;
@use '../src/easing';
@use '../src/gradients';

@include describe('gradients') {
    @include it('easing-gradient') {
        $gradient1: gradients.easing-gradient(
            linear,
            to right,
            #000,
            ease-in-quad,
            transparent
        );

        $expected1: linear-gradient(
            to right,
            #000 0,
            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%,
            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 50%,
            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%,
            transparent 100%
        );

        @include assert-equal($gradient1, $expected1, 'Simple linear gradient');

        // ---------------------------------------------------------------------------

        $gradient2: gradients.easing-gradient(
            radial,
            1em 2em at 50% 60%,
            #000,
            ease-out-cubic,
            transparent
        );

        $expected2: radial-gradient(
            1em 2em at 50% 60%,
            #000 0,
            mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%,
            mix(transparent, #000, easing.ease-out-cubic(0.5)  * 100%) 50%,
            mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%,
            transparent 100%
        );

        @include assert-equal($gradient2, $expected2, 'Simple radial gradient');

        // ---------------------------------------------------------------------------

        $gradient3: gradients.easing-gradient(
            linear,
            to right,
            #000        2em,
            ease-in-quad,
            transparent 10em
        );

        $expected3: linear-gradient(
            to right,
            #000 2em,
            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em,
            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 6em,
            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em,
            transparent 10em
        );

        @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');

        // ---------------------------------------------------------------------------

        $gradient4: gradients.easing-gradient(
            linear,
            to right,
            #000 20%,
            ease-in-quad,
            transparent calc(20% + 10em)
        );

        $expected4: linear-gradient(
            to right,
            #000 20%,
            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),
            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) calc(20% + (20% + 10em - 20%) * 0.5),
            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
            transparent calc(20% + 10em)
        );

        @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');

        // ---------------------------------------------------------------------------

        $gradient5: gradients.easing-gradient(
            linear,
            to right,
            #000        2em,
            #f00        7em,
            ease-in-quad,
            transparent 10em
        );

        $expected5: linear-gradient(
            to right,
            #000 2em,
            #f00 7em,
            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
            transparent 10em
        );

        @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');

        // ---------------------------------------------------------------------------

        $gradient6: gradients.easing-gradient(
            linear,
            to right,
            #000        2em,
            ease-in-quad,
            #f00        7em,
            ease-in-quad,
            transparent 10em
        );

        $expected6: linear-gradient(
            to right,
            #000 2em,
            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,
            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 5em * 0.5,
            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
            #f00 7em,
            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
            transparent 10em
        );

        @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');

        // ---------------------------------------------------------------------------

        $gradient7: gradients.easing-gradient(
            linear,
            to right,
            #000        2em,
            ease-in-quad,
            #f00,
            ease-in-quad,
            transparent 10em
        );

        $expected7: linear-gradient(
            to right,
            #000 2em,
            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,
            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 4em * 0.5,
            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
            #f00 6em,
            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,
            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 6em + 4em * 0.5,
            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
            transparent 10em
        );

        @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');

        // ---------------------------------------------------------------------------

        $gradient8: gradients.easing-gradient(
            linear,
            to right,
            #000,
            ease-in-quad,
            #f00,
            ease-in-quad,
            transparent
        );

        $expected8: linear-gradient(
            to right,
            #000 0,
            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25,
            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 50% * 0.5,
            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75,
            #f00 50%,
            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,
            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 50% + 50% * 0.5,
            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
            transparent 100%
        );

        @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');

        // ---------------------------------------------------------------------------

        $gradient9: gradients.easing-gradient(
            linear,
            to right,
            #000,
            ease-in-quad,
            #f00,
            ease-in-quad,
            transparent 20em
        );

        $expected9: linear-gradient(
            to right,
            #000 0,
            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25,
            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 10em * 0.5,
            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75,
            #f00 10em,
            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,
            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 10em + 10em * 0.5,
            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
            transparent 20em
        );

        @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');

        // ---------------------------------------------------------------------------

        $gradient10: gradients.easing-gradient(
            linear,
            to right,
            #000,
            cubic-bezier 0.47 0 0.745 0.715,
            transparent
        );

        $expected10: linear-gradient(
            to right,
            #000 0,
            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,
            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.5)  * 100%) 50%,
            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
            transparent 100%
        );

        @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');

        // ---------------------------------------------------------------------------

        $gradient11: gradients.easing-gradient(
            linear,
            to right,
            #000,
            steps 4 jump-start,
            transparent
        );

        $expected11: linear-gradient(
            to right,
            #000 0,
            mix(transparent, #000, 0.25 * 100%) 0,
            mix(transparent, #000, 0.25 * 100%) 25%,
            mix(transparent, #000, 0.5  * 100%) 25%,
            mix(transparent, #000, 0.5  * 100%) 50%,
            mix(transparent, #000, 0.75 * 100%) 50%,
            mix(transparent, #000, 0.75 * 100%) 75%,
            transparent 75%,
            transparent 100%
        );

        @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
    }
}