@use '../../base/mixins/breakpoints' as break;
@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(--ui-accent);
$neutral-hover: var(--neutral-6);
$primary-conic-light-values:
	with-opacity(var(--neutral-1), 100), with-opacity(var(--neutral-1), 30),
	with-opacity(var(--neutral-1), 30), with-opacity(var(--neutral-1), 100);
$primary-conic-dark-values:
	with-opacity(var(--neutral-6), 100), with-opacity(var(--neutral-6), 30),
	with-opacity(var(--neutral-6), 30), with-opacity(var(--neutral-6), 100);
$secondary-conic-light-values:
	with-opacity(var(--action), 100), with-opacity(var(--action), 30),
	with-opacity(var(--action), 30), with-opacity(var(--action), 100);
$secondary-conic-dark-values:
	with-opacity(var(--action), 100), with-opacity(var(--action), 30),
	with-opacity(var(--action), 30), with-opacity(var(--action), 100);

.button {
	border: 0.0625rem solid transparent;
	place-content: center center;
	place-items: center center;
	border-radius: var(--radius-small);
	display: inline-flex;
	font-family: var(--txt-body-family), sans-serif;
	font-size: var(--txt-body-size);
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 0.875rem;
	padding: var(--padding-small) var(--padding-medium);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast);
	user-select: none;
	color: var(--ui-headline);

	&:hover {
		cursor: pointer;
	}

	&:focus {
		color: var(--action);
		background-color: $action-secondary-base-dark;
	}

	&-small {
		padding: var(--padding-extra-small) var(--padding-small);
		line-height: 1.5;
	}

	&.pad-none {
		padding: 0;
	}

	&.default {
		color: var(--ui-headline);

		&:hover {
			cursor: pointer;
			color: var(--action);
			background-color: $action-secondary-base-dark;
		}

		&:focus {
			color: var(--action);
			background-color: $action-secondary-base-dark;
		}
	}

	&.primary {
		position: relative;
		border: 1px;
		border-style: solid;
		color: var(--action-contrast);
		border-color: var(--action);
		background-color: var(--action);

		&:hover,
		&:focus {
			border-color: var(--ui-soft);
		}

		&:hover,
		&:focus {
			background-color: var(--ui-soft);
		}

		.general-icon {
			color: var(--action-secondary);
		}
	}

	&.secondary {
		position: relative;
		border: 1px solid with-opacity(var(--neutral-6), 30);
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast);
		color: var(--ui-stroke);

		&:hover {
			background-color: var(--ui-fill);
			color: var(--ui-text);
		}
	}

	&.destroy {
		border-color: with-opacity(var(--fail), 50);
		background-color: var(--fail-base-dark);
		color: var(--fail-hover-dark);

		&:hover,
		&:focus {
			border-color: with-opacity(var(--fail), 100);
			background-color: var(--fail-hover-dark);
			color: var(--action-contrast);
		}
	}

	&.tertiary,
	&.glyph,
	&.arrow,
	&.external {
		background: transparent;
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
		text-decoration: none;
		max-width: max-content;
		text-align: left;
		vertical-align: middle;
		line-height: 1.2;
		gap: var(--padding-extra-small);
		color: var(--action-tertiary);

		&::after {
			content: '';
			display: inline-block;
			font-family: brandui-icons;
			font-size: var(--padding-small);
			transition: transform var(--transition-fast);
			width: var(--padding-small);
			vertical-align: middle;
		}

		&:hover,
		&:focus {
			background: transparent;
			color: var(--action);

			&::after {
				transform: translateX(0.25rem);
			}
		}
	}

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

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

	&.disabled,
	&[disabled] {
		opacity: 0.3;
		pointer-events: none;
	}

	&.small {
		padding: var(--padding-extra-small) var(--padding-small);
		font-size: var(--font-size-body-small);
		line-height: var(--line-height-body-small);
	}

	&.search-trigger {
		&:hover,
		&:focus {
			color: var(--action);
			background-color: transparent;
		}
	}
}

// Used to wrap around multiple buttons
.buttons {
	max-width: max-content;
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding-medium);

	@include break.max-tablet {
		flex-direction: column;
		gap: var(--padding-small);
		justify-content: center;
		align-items: center;
	}
}

// This is the rotating conic-gradient glimmer effect
@keyframes glimmer {
	100% {
		--glimmer-angle: 360deg;
	}
}

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

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

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

		.general-icon {
			color: var(--action-secondary);
		}
	}
}

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

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