/**
 * GDC Button Component
 *
 * 4 variants: primary, secondary, ghost, danger
 * 7 states:   default, hover, active, focus, loading, complete, error
 * 3 sizes:    sm, md, lg
 *
 * All animations use GPU-safe properties (transform, opacity).
 * Tokens sourced from tokens.css (layer 1 + 2).
 *
 * @package GDC
 * @since   1.0.0
 */

/* ==========================================================
   KEYFRAMES — GPU-safe (transform + opacity only)
   ========================================================== */

@keyframes gdc-btn-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes gdc-btn-checkmark {
	0%   { opacity: 0; transform: scale(0.5); }
	50%  { opacity: 1; transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes gdc-btn-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-4px); }
	40%      { transform: translateX(4px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}

/* ==========================================================
   BASE BUTTON
   ========================================================== */

.gdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	font-weight: var(--gdc-font-semibold);
	line-height: var(--gdc-leading-normal);
	text-decoration: none;

	padding: 12px 24px;
	border: none;
	border-radius: var(--gdc-radius-button);
	cursor: pointer;

	user-select: none;
	-webkit-user-select: none;

	transition:
		transform var(--gdc-duration-standard) var(--gdc-ease-out),
		opacity var(--gdc-duration-standard) var(--gdc-ease-out),
		background-color var(--gdc-duration-standard) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-standard) var(--gdc-ease-out);

	/* GPU layer promotion for smooth animations */
	will-change: transform, opacity;
	transform: translateZ(0);

	position: relative;
	white-space: nowrap;
}

/* ==========================================================
   SIZE VARIANTS
   ========================================================== */

.gdc-btn[data-size="sm"] {
	padding: 8px 16px;
	font-size: var(--gdc-text-sm);
}

/* md is the default — no override needed */

.gdc-btn[data-size="lg"] {
	padding: 16px 32px;
	font-size: var(--gdc-text-lg);
	min-height: var(--gdc-tap-target-primary); /* 56px touch target */
}

/* ==========================================================
   VARIANT: PRIMARY
   ========================================================== */

.gdc-btn[data-variant="primary"] {
	background-color: var(--gdc-accent-cta);
	color: var(--gdc-text-primary);
	box-shadow: var(--gdc-shadow-glow-purple);
}

.gdc-btn[data-variant="primary"]:hover {
	background-color: var(--gdc-accent-hover);
	transform: scale(1.02);
	box-shadow: 0 0 30px rgba(155, 127, 212, 0.3);
}

.gdc-btn[data-variant="primary"]:active {
	background-color: var(--gdc-accent-active);
	transform: scale(0.98);
	box-shadow: var(--gdc-shadow-md);
}

/* ==========================================================
   VARIANT: SECONDARY
   ========================================================== */

.gdc-btn[data-variant="secondary"] {
	background-color: var(--gdc-bg-surface);
	color: var(--gdc-text-primary);
	border: 1px solid var(--gdc-border-medium);
}

.gdc-btn[data-variant="secondary"]:hover {
	background-color: var(--gdc-bg-abyss);
	transform: scale(1.02);
	border-color: var(--gdc-border-strong);
}

.gdc-btn[data-variant="secondary"]:active {
	transform: scale(0.98);
	box-shadow: var(--gdc-shadow-md);
}

/* ==========================================================
   VARIANT: GHOST
   ========================================================== */

.gdc-btn[data-variant="ghost"] {
	background-color: transparent;
	color: var(--gdc-text-primary);
	border: 1px solid var(--gdc-border-light);
}

.gdc-btn[data-variant="ghost"]:hover {
	background-color: var(--gdc-alpha-5);
	transform: scale(1.02);
	border-color: var(--gdc-border-medium);
}

.gdc-btn[data-variant="ghost"]:active {
	transform: scale(0.98);
	background-color: var(--gdc-alpha-10);
}

/* ==========================================================
   VARIANT: DANGER
   ========================================================== */

.gdc-btn[data-variant="danger"] {
	background-color: var(--gdc-status-error);
	color: var(--gdc-white);
}

.gdc-btn[data-variant="danger"]:hover {
	background-color: var(--gdc-danger-hover);
	transform: scale(1.02);
	box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.gdc-btn[data-variant="danger"]:active {
	background-color: var(--gdc-danger-active);
	transform: scale(0.98);
	box-shadow: var(--gdc-shadow-md);
}

/* ==========================================================
   STATE: FOCUS (keyboard only via :focus-visible)
   ========================================================== */

.gdc-btn:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

/* ==========================================================
   STATE: DISABLED
   ========================================================== */

.gdc-btn[disabled],
.gdc-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================
   STATE: LOADING
   ========================================================== */

.gdc-btn[data-state="loading"] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide text content during loading to keep layout stable */
.gdc-btn[data-state="loading"] .gdc-btn__label {
	opacity: 0;
}

.gdc-btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: gdc-btn-spinner 0.6s linear infinite;
	position: absolute;
}

.gdc-btn[data-state="loading"] .gdc-btn__spinner {
	display: block;
}

.gdc-btn[data-size="sm"] .gdc-btn__spinner {
	width: 14px;
	height: 14px;
}

.gdc-btn[data-size="lg"] .gdc-btn__spinner {
	width: 22px;
	height: 22px;
}

/* ==========================================================
   STATE: COMPLETE
   ========================================================== */

.gdc-btn[data-state="complete"] {
	background-color: var(--gdc-status-success) !important;
	color: var(--gdc-white) !important;
	border-color: transparent !important;
}

.gdc-btn__check {
	display: none;
	position: absolute;
}

.gdc-btn[data-state="complete"] .gdc-btn__label {
	opacity: 0;
}

.gdc-btn[data-state="complete"] .gdc-btn__check {
	display: block;
	animation: gdc-btn-checkmark var(--gdc-duration-standard) var(--gdc-ease-out) forwards;
}

/* Checkmark SVG icon sizing */
.gdc-btn__check svg {
	width: 20px;
	height: 20px;
}

.gdc-btn[data-size="sm"] .gdc-btn__check svg {
	width: 16px;
	height: 16px;
}

.gdc-btn[data-size="lg"] .gdc-btn__check svg {
	width: 24px;
	height: 24px;
}

/* ==========================================================
   STATE: ERROR
   ========================================================== */

.gdc-btn[data-state="error"] {
	background-color: var(--gdc-status-error) !important;
	color: var(--gdc-white) !important;
	border-color: transparent !important;
	animation: gdc-btn-shake var(--gdc-duration-standard) var(--gdc-ease-out);
}

.gdc-btn__error-icon {
	display: none;
	position: absolute;
}

.gdc-btn[data-state="error"] .gdc-btn__label {
	opacity: 0;
}

.gdc-btn[data-state="error"] .gdc-btn__error-icon {
	display: block;
	animation: gdc-btn-checkmark var(--gdc-duration-standard) var(--gdc-ease-out) forwards;
}

.gdc-btn__error-icon svg {
	width: 20px;
	height: 20px;
}

.gdc-btn[data-size="sm"] .gdc-btn__error-icon svg {
	width: 16px;
	height: 16px;
}

.gdc-btn[data-size="lg"] .gdc-btn__error-icon svg {
	width: 24px;
	height: 24px;
}

/* ==========================================================
   INTERACTIVE STATES — suppress hover/active during state
   ========================================================== */

.gdc-btn[data-state="loading"]:hover,
.gdc-btn[data-state="loading"]:active,
.gdc-btn[data-state="complete"]:hover,
.gdc-btn[data-state="complete"]:active,
.gdc-btn[data-state="error"]:hover,
.gdc-btn[data-state="error"]:active {
	transform: none;
}

/* ==========================================================
   ACCESSIBILITY: prefers-reduced-motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.gdc-btn {
		transition: none;
	}

	.gdc-btn__spinner {
		animation: none;
	}

	.gdc-btn[data-state="error"] {
		animation: none;
	}

	.gdc-btn[data-state="complete"] .gdc-btn__check {
		animation: none;
	}

	.gdc-btn[data-state="error"] .gdc-btn__error-icon {
		animation: none;
	}
}