/*
Ability Esports — Button / CTA component.
Visual treatment is intentionally minimal and functional — not the final
brand design. Every value is a token; see /docs/DATA-CONTRACTS.md for the
Button data contract this markup implements.
*/

.ae-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ae-button-gap-icon);
	height: var(--ae-button-height-md);
	padding-inline: var(--ae-button-padding-x);
	border-radius: var(--ae-button-radius);
	font-family: var(--ae-font-body);
	font-size: var(--ae-button-font);
	font-weight: var(--ae-button-weight);
	text-decoration: none;
	border: none;
	transition: background-color var(--ae-duration-fast) var(--ae-ease-standard),
		color var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-button--primary {
	background: var(--ae-color-brand-primary);
	color: var(--ae-color-text-inverse);
}

.ae-button--primary:hover {
	background: var(--ae-color-brand-primary-bright);
}

.ae-button--primary:active {
	background: var(--ae-color-brand-primary-dark);
}

.ae-button--secondary {
	background: transparent;
	color: var(--ae-color-text-primary);
	border: var(--ae-border-strong);
}

.ae-button--secondary:hover {
	background: var(--ae-color-interactive-hover);
}

.ae-button--outline {
	background: transparent;
	color: var(--ae-color-text-primary);
	border: var(--ae-border-default);
}

.ae-button--outline:hover {
	background: var(--ae-color-interactive-hover);
}

.ae-button--text {
	height: auto;
	padding-inline: 0;
	background: none;
	color: var(--ae-color-brand-primary-bright);
}

.ae-button--text:hover {
	text-decoration: underline;
}

.ae-button--disabled,
.ae-button[disabled] {
	background: var(--ae-color-surface-2);
	color: var(--ae-color-text-muted);
	border-color: var(--ae-color-border-subtle);
	cursor: not-allowed;
}

/*
Stage 6 — Component Engine: remaining Button states/variants from the
locked Button System (/docs/UI-PATTERN-LIBRARY.md §5, /docs/DESIGN-TOKENS.md
§5.1) — Loading state and the Live/Watch variant. Registration and
Destructive variants are deliberately deferred: both require a real
consumer (an event registration flow, a real destructive action) that
doesn't exist in the site yet — see the Stage 6 report.
*/

.ae-button--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.ae-button--loading::after {
	content: "";
	position: absolute;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: var(--ae-radius-pill);
	border: var(--ae-border-width-thick) solid rgba(255, 255, 255, 0.4);
	border-top-color: currentColor;
	color: var(--ae-color-text-inverse);
	animation: ae-spin var(--ae-duration-shimmer) var(--ae-ease-linear) infinite;
}

.ae-button--secondary.ae-button--loading::after,
.ae-button--outline.ae-button--loading::after,
.ae-button--text.ae-button--loading::after {
	color: var(--ae-color-text-primary);
	border-color: var(--ae-color-border-default);
	border-top-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.ae-button--loading::after {
		animation: none;
	}
}

.ae-button--live {
	background: var(--ae-color-brand-primary);
	color: var(--ae-color-text-inverse);
}

.ae-button--live:hover {
	background: var(--ae-color-brand-primary-bright);
}

.ae-button--live:active {
	background: var(--ae-color-brand-primary-dark);
}

.ae-button--live .ae-live-dot {
	margin-right: var(--ae-button-gap-icon);
}

/*
Icon Button — an icon-only control. The 44×44px box is the real hit area
even where the visible icon inside is smaller, per the 44px touch-target
minimum (/docs/DESIGN-TOKENS.md §12) — this is a hit-area rule, not a
visual sizing rule, so the icon itself is not artificially inflated to fill it.
*/
.ae-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ae-radius-sm);
	background: transparent;
	color: var(--ae-color-text-primary);
	border: none;
	text-decoration: none;
	transition: background-color var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-icon-button svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ae-icon-button--ghost:hover {
	background: var(--ae-color-interactive-hover);
}

.ae-icon-button--secondary {
	border: var(--ae-border-strong);
}

.ae-icon-button--secondary:hover {
	background: var(--ae-color-interactive-hover);
}

.ae-icon-button--disabled,
.ae-icon-button[disabled] {
	color: var(--ae-color-text-muted);
	cursor: not-allowed;
}

.ae-icon-button--disabled:hover,
.ae-icon-button[disabled]:hover {
	background: transparent;
}