@use '../../../components/atoms/button' as *;
@use '../../../base/functions' as *;

$action-base: with-opacity(var(--action), 10);
$action-base-dark: with-opacity(var(--action), 10);
$action-secondary-base: with-opacity(var(--action-secondary), 10);
$action-secondary-base-dark: with-opacity(var(--action-secondary), 10);
$fail-base: with-opacity(var(--fail), 10);
$fail-base-dark: with-opacity(var(--fail), 10);
$fail-hover: var(--fail);
$fail-hover-dark: var(--fail);
$neutral: var(--neutral-3);
$neutral-hover: var(--neutral-6);
$primary-conic-dark-values:
	with-opacity(var(--action), 100), with-opacity(var(--action), 70),
	with-opacity(var(--action-secondary), 70),
	with-opacity(var(--action-secondary), 100);
$secondary-conic-dark-values:
	with-opacity(var(--action), 100), with-opacity(var(--action), 30),
	with-opacity(var(--action-secondary), 30),
	with-opacity(var(--action-secondary), 100);

@property --glimmer-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --glimmer-duration {
	syntax: '<time>';
	inherits: false;
	initial-value: 6s;
}

.button {
	font-family: 'Geist Mono', monospace;
	isolation: isolate;
	border: none;
	border-radius: var(--radius-medium);

	&.primary {
		&::before {
			background: linear-gradient(
				90deg,
				var(--action),
				var(--action-secondary)
			);
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			z-index: -1;
		}

		&::after {
			background: conic-gradient(
				from var(--glimmer-angle),
				$primary-conic-dark-values
			);
			content: '';
			display: block;
			position: absolute;
			inset: -1px;
			animation: glimmer var(--glimmer-duration) linear infinite;
			border-radius: inherit;
			z-index: -2;
		}

		&:hover,
		&:focus {
			&::before {
				background: linear-gradient(
					90deg,
					var(--action-secondary),
					var(--action)
				);
			}

			&::after {
				--glimmer-duration: 2s;
			}
		}
	}

	&.secondary {
		border: none;
		isolation: isolate;
		color: var(--action-secondary-contrast);

		&::before {
			background-color: var(--neutral-1);
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			backdrop-filter: blur(4px);
			z-index: -1;
		}

		// This is the rotating conic-gradient glimmer effect
		&::after {
			background: conic-gradient(
				from var(--glimmer-angle),
				$secondary-conic-dark-values
			);
			content: '';
			display: block;
			position: absolute;
			inset: -1px;
			animation: glimmer var(--glimmer-duration) linear infinite;
			border-radius: inherit;
			z-index: -2;
		}

		&:hover,
		&:focus {
			color: var(--action-secondary-contrast);

			&::before {
				background-color: var(--neutral-3);
				transition: background-color var(--transition-fast);
			}

			&::after {
				--glimmer-duration: 2s;
			}
		}
	}

	&.tertiary,
	&.glyph,
	&.arrow,
	&.external {
		font-weight: 500;
		transition: all var(--transition-fast);
		background-image: linear-gradient(
			140deg,
			var(--action-secondary),
			var(--action)
		);
		background-clip: text;
		-webkit-text-fill-color: transparent;

		&::after {
			background-image: linear-gradient(
				140deg,
				var(--action),
				var(--action-secondary)
			);
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		&:hover,
		&:focus {
			-webkit-text-fill-color: initial;
			color: var(--ui-text);

			&::after {
				-webkit-text-fill-color: initial;
			}
		}
	}

	&.tertiary,
	&.glyph,
	&.arrow {
		&::after {
			content: '\e905'; // icon-arrow-right
		}
	}

	&.external {
		&::after {
			content: '\e906'; // icon-arrow-top-right
		}
	}
}

.copy-to-clipboard {
	&-body {
		border: 1px solid;
		border-color: var(--action);
	}

	.tooltip-wrapper {
		border-color: var(--action);

		&:hover {
			.general-icon {
				color: var(--ui-fill);
			}
		}

		.general-icon {
			color: var(--ui-fill);
		}
	}
}

.clipboard-trigger {
	background-color: var(--action);
	border-color: var(--action);

	&:hover {
		background-color: var(--action);
	}
}