/*
 * Buttons (Phase 3A — docs/COMPONENT-LIBRARY.md). Variants: primary,
 * secondary, ghost, text, icon, loading, disabled — per docs/DESIGN-SYSTEM.md §7.
 * Transitions animate only transform/opacity/background-color, never `all`.
 */

.bholats-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	border: var(--border-width-sm) solid transparent;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	min-height: 44px; /* mobile tap-target minimum, docs/DESIGN-SYSTEM.md §7 */
	transition: transform var(--duration-fast) var(--ease-out),
		background-color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		color var(--duration-base) var(--ease-standard);
}

.bholats-btn:hover { transform: translateY(-1px); }
.bholats-btn:active { transform: translateY(0); }

/* --- Primary --- */
.bholats-btn--primary {
	background: var(--color-brand-blue);
	color: var(--color-text-on-brand);
}
.bholats-btn--primary:hover { background: var(--color-brand-bright); }
.bholats-btn--primary:active { background: var(--color-brand-deep); }

/* --- Secondary --- */
.bholats-btn--secondary {
	background: var(--color-surface);
	color: var(--color-brand-blue);
	border-color: var(--color-brand-blue);
}
.bholats-btn--secondary:hover { background: var(--color-surface-sunken); }
.bholats-btn--secondary:active { background: var(--color-surface-muted); }

/* --- Ghost --- */
.bholats-btn--ghost {
	background: transparent;
	color: var(--color-text-primary);
}
.bholats-btn--ghost:hover { background: var(--color-surface-sunken); }
.bholats-btn--ghost:active { background: var(--color-surface-muted); }

/* --- Text (no padding/border, reads as an inline action, not a boxed button) --- */
.bholats-btn--text {
	background: transparent;
	color: var(--color-brand-deep);
	padding: var(--space-1) var(--space-1);
	min-height: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bholats-btn--text:hover { color: var(--color-brand-blue); transform: none; }

/* --- Danger --- */
.bholats-btn--danger {
	background: var(--color-error);
	color: var(--color-text-on-brand);
}
.bholats-btn--danger:hover { background: color-mix(in srgb, var(--color-error) 92%, black); }
.bholats-btn--danger:active { background: color-mix(in srgb, var(--color-error) 86%, black); }

/* --- Icon button (square, icon-only — always needs an aria-label) --- */
.bholats-btn--icon {
	padding: var(--space-2);
	width: 44px;
	height: 44px;
	background: var(--color-surface);
	color: var(--color-text-primary);
	border-color: var(--color-border);
}
.bholats-btn--icon:hover { background: var(--color-surface-sunken); border-color: var(--color-border-strong); }
.bholats-btn--icon svg { width: var(--icon-md); height: var(--icon-md); }

/* --- Sizes --- */
.bholats-btn--sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--text-xs); }
.bholats-btn--lg { padding: var(--space-4) var(--space-6); min-height: 52px; font-size: var(--text-base); }

.bholats-btn--full { width: 100%; }

/* --- Disabled (also applies to [disabled] attribute automatically) ---
   .bholats-btn--disabled is also used on real, functioning <a> links (e.g.
   WooCommerce's "Read more" out-of-stock control is a genuine link, not a
   native disabled control) — those don't get WCAG's disabled-control
   exemption, so this uses --color-text-secondary (not --color-text-muted,
   which only measured 3.06:1 here) — found via axe-core, Phase 3A,
   docs/COMPONENT-LIBRARY.md §14. */
.bholats-btn:disabled,
.bholats-btn--disabled {
	background: var(--color-surface-muted);
	color: var(--color-text-secondary);
	border-color: transparent;
	cursor: not-allowed;
	transform: none !important;
}
.bholats-btn:disabled:hover,
.bholats-btn--disabled:hover { transform: none; }

/* --- Loading ---
   Content stays in the DOM (for layout stability / screen readers) but is
   visually hidden behind a centred spinner; aria-busy communicates state. */
.bholats-btn--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.bholats-btn--loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-radius: var(--radius-full);
	border: 2px solid currentColor;
	border-right-color: transparent;
	color: var(--color-text-on-brand);
	animation: bholats-spin 700ms linear infinite;
}
.bholats-btn--secondary.bholats-btn--loading::after,
.bholats-btn--ghost.bholats-btn--loading::after {
	color: var(--color-brand-blue);
}

/* @keyframes bholats-spin is defined once in base.css and shared by every
   loading/spinner component (components/feedback.css) — not redefined here. */

@media (prefers-reduced-motion: reduce) {
	.bholats-btn--loading::after { animation-duration: 1.4s; }
}