@property --supt-button-mask-gradient-value {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 20%;
}

.supt-button {
	display: block;
	position: relative;
	width: fit-content;

	&__wrapper {
		display: block;
		border-radius: 9999px;
		padding: 10px 8px 8px 10px;
		background: $color-grey-background;
		box-shadow:
			8px 8px 16px 0px $color-grey-1,
			-8px -8px 16px 0px $color-white;

		position: relative;
		z-index: 0;
	}

	&__link {
		@extend %reset-button;

		position: absolute;
		inset: 0;
		z-index: 1;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: $spacing-2-5 $spacing-4;

		border-radius: 9999px;

		box-shadow:
			-1px -1px 0px 0px $color-white inset,
			-2px -2px 2px 0px $color-grey-2 inset,
			-1px -1px 0px 0px $color-white,
			-2px -2px 2px 0px $color-grey-2;

		@media (min-width: $breakpoint-md) {
			padding: $spacing-3 18px;
		}
	}

	&__mask {
		--supt-button-mask-color: $color-main;

		position: absolute;
		inset: 0;
		border-radius: 9999px;
		overflow: hidden;
		top: -1.5px;
		left: -1.5px;
		z-index: 0;

		opacity: 0;
		transition: opacity $transition-fast;

		/* Safari only fix */
		@supports (hanging-punctuation: first) and (font: -apple-system-body) and
			(-webkit-appearance: none) {
			bottom: 0.5px;
		}

		/* Non-retina screens: use 1px border */
		@media (max-resolution: 1dppx) {
			top: -1px;
			left: -1px;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			background: radial-gradient(
				var(--supt-button-mask-color) var(--supt-button-mask-gradient-value, 20%),
				transparent
			);
			width: 100%;
			height: 100%;
			top: 50%;

			animation-duration: 0.75s;
			animation-timing-function: linear;
			animation-fill-mode: forwards;
		}
		&::before {
			left: 0;
			translate: -50% -50%;
			transform-origin: 100% 50%;
		}
		&::after {
			right: 0;
			translate: 50% -50%;
			transform-origin: 0% 50%;
		}

		&__inner {
			position: absolute;
			inset: 1.5px;
			background-color: $color-grey-background;
			border-radius: 9999px;
			z-index: 1;

			/* Non-retina screens: use 1px border */
			@media (max-resolution: 1dppx) {
				inset: 1px;
			}
		}
	}

	&__title,
	&__icon {
		display: block;
		color: $color-main;
		z-index: 1;
	}

	&__title {
		@extend %t-body-sm;
		font-weight: 500;

		/* position: relative;
		overflow: hidden; */

		transition: color $transition-fast;

		/* &__text,
		&__clone {
			display: block;
			transition: transform $transition-fast ease-in-out;
		}

		&__text {
			transition-timing-function: ease-out;
		}

		&__clone {
			position: absolute;
			inset: 0;
			transform: translateY(100%);
			transition-timing-function: ease-in;
		} */

		&.-clone {
			opacity: 0;
			visibility: hidden;
		}
	}

	&__icon {
		padding: 0 2px 2px 0;
		svg {
			display: block;
			width: 10px;
			height: auto;
		}
	}

	&:hover,
	&:focus-within {
		.supt-button__mask {
			opacity: 1;

			&::before,
			&::after {
				animation-name: mask-animation;
			}

			/* &::before {
				animation-name: mask-before;
			}
			&::after {
				animation-name: mask-after;
			} */
		}
		/* .supt-button__title {
			&__text {
				transform: translateY(-100%);
				transition-timing-function: ease-in;
			}
			&__clone {
				transform: translateY(0);
				transition-timing-function: ease-out;
			}
		} */
	}
	&:focus-within {
		.supt-button__mask {
			--supt-button-mask-color: $color-medium;
		}
		.supt-button__title,
		.supt-button__icon {
			color: $color-medium;
		}
	}

	/* Red variant */
	&.-dark {
		.supt-button__wrapper {
			background-color: $color-medium;
			box-shadow:
				8px 8px 16px 0px rgb(102 0 14 / 60%),
				-8px -8px 16px 0px rgb(233 53 89 / 40%);
		}
		.supt-button__inner {
			box-shadow:
				-1px -1px 0px 0px #eb2f54 inset,
				-2px -2px 2px 0px rgb(63 0 11 / 80%) inset,
				-1px -1px 0px 0px #eb2f54,
				-2px -2px 2px 0px rgb(102 0 14 / 80%);
		}

		.supt-button__mask {
			--supt-button-mask-color: $color-white;
			transition: box-shadow $transition-fast;

			&__inner {
				background-color: $color-medium;
				transition: box-shadow $transition-fast;
			}
		}

		.supt-button__title,
		.supt-button__icon {
			color: $color-white;
		}

		&:hover,
		&:focus-within {
			.supt-button__mask {
				box-shadow: 0 0 6px 2px $color-main;
				transition-delay: 0.47s;
				&__inner {
					box-shadow: inset 0 0 6px 2px $color-main;
					transition-delay: 0.47s;
				}
			}
		}
		&:focus-within {
			.supt-button__mask {
				&__inner {
					inset: 2px;
				}
			}
		}
	}

	/* Icon variant */
	&.-icon {
		.supt-button__inner {
			width: 40px;
			height: 40px;
			padding: 0;

			@media (min-width: $breakpoint-md) {
				width: 44px;
				height: 44px;
			}
		}

		&:hover,
		&:focus-within {
			.supt-button__mask {
				&::before,
				&::after {
					animation-name: mask-animation-icon;
				}
			}
		}
	}
}

@keyframes mask-animation {
	0% {
		rotate: 0deg;
		scale: 1 0;
		--supt-button-mask-gradient-value: 20%;
	}
	70% {
		scale: 1 1;
		--supt-button-mask-gradient-value: 40%;
	}
	100% {
		rotate: 250deg;
		scale: 1 7;
		--supt-button-mask-gradient-value: 100%;
	}
}

/* Animation for icon variant */
@keyframes mask-animation-icon {
	0% {
		rotate: 0deg;
		scale: 1 0;
		--supt-button-mask-gradient-value: 20%;
	}

	70% {
		scale: 1 1;
		--supt-button-mask-gradient-value: 40%;
	}

	100% {
		rotate: 270deg;
		scale: 1 2;
		--supt-button-mask-gradient-value: 100%;
	}
}