/**
 * Button Component Styles
 *
 * A flexible button component with variants and sizes.
 * Uses CSS variables from theme for easy customization.
 */

/* Base button styles */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-family-base, inherit);
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.button:focus-visible {
	outline: 2px solid var(--color-primary, #3b82f6);
	outline-offset: 2px;
}

/* Size variants */
.button--small {
	padding: 0.5rem 1rem;
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.25;
}

.button--medium {
	padding: 0.75rem 1.5rem;
	font-size: var(--text-base, 1rem);
	line-height: 1.25;
}

.button--large {
	padding: 1rem 2rem;
	font-size: var(--text-lg, 1.125rem);
	line-height: 1.5;
}

/* Style variants */

/* Primary variant - solid gradient pill, the site's main CTA button style */
.button--primary {
	background: var(--color-primary-dark, #08526f);
	color: var(--color-white, #fff);
	border-color: transparent;
	border-radius: var(--radius-full, 9999px);
	text-shadow: 0 4px 10px rgb(0 0 0 / 0.25);
	overflow: hidden;
	position: relative;
}

.button--primary .button__text,
.button--primary .button__icon {
	position: relative;
	z-index: 1;
}

.button--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(100deg, var(--color-primary, #0f9ed5) 0%, var(--color-primary-dark, #08526f) 112.37%);
	opacity: 1;
	transition: opacity 0.2s ease;
}

.button--primary:hover,
.button--primary:focus {
	border-color: transparent;
	color: var(--color-white, #fff);
}

.button--primary:hover::before,
.button--primary:focus::before {
	opacity: 0;
}

.button--primary:active {
	background: var(--color-primary-dark, #08526f);
	border-color: transparent;
	filter: brightness(0.92);
}

/* Secondary variant - text label + circular arrow badge */
.button--secondary {
	background-color: transparent;
	color: var(--color-text-dark, #111827);
	border-color: transparent;
	padding: 0;
	gap: var(--spacing-4, 0.75rem);
}

.button--secondary:hover,
.button--secondary:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-text-dark, #111827);
}

.button--secondary:active {
	color: var(--color-text-dark, #111827);
}

.button--secondary .button__arrow {
	--arrow-pill-bg: var(--color-primary, #0f9ed5);
	--arrow-pill-color: var(--color-white, #fff);
	--arrow-pill-bg-hover: var(--color-primary-dark, #08526f);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: var(--arrow-pill-inline-size, 2.625rem);
	block-size: var(--arrow-pill-block-size, 1.9375rem);
	border-radius: var(--arrow-pill-radius, 999rem);
	background-color: var(--arrow-pill-bg);
	color: var(--arrow-pill-color);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button--secondary .button__arrow svg {
	inline-size: var(--arrow-pill-icon-size, 0.875rem);
	block-size: var(--arrow-pill-icon-size, 0.875rem);
}

.button--secondary:hover .button__arrow,
.button--secondary:focus .button__arrow {
	background-color: var(--arrow-pill-bg-hover);
	color: var(--arrow-pill-color-hover, #fff);
	transform: translateX(var(--arrow-pill-shift, 0.125rem));
}

.button--secondary:active .button__arrow {
	background-color: var(--arrow-pill-bg-hover);
}

/* Outline variant */
.button--outline {
	background-color: transparent;
	color: var(--color-primary, #3b82f6);
	border-color: currentColor;
}

.button--outline:hover,
.button--outline:focus {
	background-color: var(--color-primary, #3b82f6);
	color: var(--color-white, #fff);
	border-color: var(--color-primary, #3b82f6);
}

.button--outline:active {
	background-color: var(--color-primary-dark, #2563eb);
	border-color: var(--color-primary-dark, #2563eb);
}

/* Icon styles */
.button__icon {
	display: inline-flex;
	font-size: 1.25em;
	line-height: 1;
}

.button--has-icon.button--small .button__icon {
	font-size: 1em;
}

.button--has-icon.button--large .button__icon {
	font-size: 1.5em;
}

/* Icon positioning */
.button--icon-before .button__icon--before {
	margin-inline-end: 0.25rem;
}

.button--icon-after .button__icon--after {
	margin-inline-start: 0.25rem;
}

/* Disabled state */
.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}