// 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(.25) * 100%) 25%,
			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 50%,
			mix(transparent, #000, easing.ease-in-quad(.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(.25) * 100%) 25%,
			mix(transparent, #000, easing.ease-out-cubic(.5)  * 100%) 50%,
			mix(transparent, #000, easing.ease-out-cubic(.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(.25) * 100%) 4em,
			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 6em,
			mix(transparent, #000, easing.ease-in-quad(.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(.25) * 100%) calc(20% + (20% + 10em - 20%) * .25),
			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) calc(20% + (20% + 10em - 20%) * .5),
			mix(transparent, #000, easing.ease-in-quad(.75) * 100%) calc(20% + (20% + 10em - 20%) * .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(.25) * 100%) 7em + 3em * .25,
			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .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(.25) * 100%) 2em + 5em * .25,
			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 5em * .5,
			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 5em * .75,
			#f00 7em,
			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .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(.25) * 100%) 2em + 4em * .25,
			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 4em * .5,
			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 4em * .75,
			#f00 6em,
			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 6em + 4em * .25,
			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 6em + 4em * .5,
			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 6em + 4em * .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(.25) * 100%) 50% * .25,
			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 50% * .5,
			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 50% * .75,
			#f00 50%,
			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 50% + 50% * .25,
			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 50% + 50% * .5,
			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 50% + 50% * .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(.25) * 100%) 10em * .25,
			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 10em * .5,
			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 10em * .75,
			#f00 10em,
			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 10em + 10em * .25,
			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 10em + 10em * .5,
			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 10em + 10em * .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 .47 0 .745 .715,
			transparent);

		$expected10: linear-gradient(to right,
			#000 0,
			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .25) * 100%) 25%,
			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .5)  * 100%) 50%,
			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .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, .25 * 100%) 0,
			mix(transparent, #000, .25 * 100%) 25%,
			mix(transparent, #000, .5  * 100%) 25%,
			mix(transparent, #000, .5  * 100%) 50%,
			mix(transparent, #000, .75 * 100%) 50%,
			mix(transparent, #000, .75 * 100%) 75%,
			transparent 75%,
			transparent 100%);

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