/**
 * Global button system.
 */

.button {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	color: var(--color-navy-950);
	background-color: transparent;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

.button:hover {
	text-decoration: none;
}

.button:active {
	transform: translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.button--primary {
	color: var(--color-navy-950);
	background-color: var(--color-accent);
}

.button--primary:hover {
	color: var(--color-white);
	background-color: var(--color-accent-strong);
}

.button--secondary {
	color: var(--color-white);
	background-color: var(--color-navy-950);
}

.button--secondary:hover {
	background-color: var(--color-navy-700);
}

.button--outline {
	color: var(--color-navy-950);
	border-color: currentColor;
	background-color: transparent;
}

.button--outline:hover {
	color: var(--color-white);
	border-color: var(--color-navy-950);
	background-color: var(--color-navy-950);
}

.button--light {
	color: var(--color-navy-950);
	background-color: var(--color-white);
}

.button--light:hover {
	background-color: var(--color-gray-200);
}

.button--text {
	min-height: auto;
	padding: 0;
	color: var(--color-navy-800);
	background-color: transparent;
}

.button--text:hover {
	color: var(--color-accent-strong);
}

.button__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.button__icon svg {
	width: 1em;
	height: 1em;
}