/* SHARED across kapps — edit anywhere; on push it propagates to the others. Watch list: _kshared/manifest.json */
button,
.button {
	display: flex;
	gap: 10px;
	font: var(--font-body-large-bold);
	font-weight: 600;
	justify-content: center;
	align-items: center;
	padding: 15px 20px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s;
	white-space: nowrap;

	&.small {
		font: var(--font-body-small-semibold);
		padding: var(--spacing-xs) var(--spacing-sm);
		border-radius: var(--radius-small);
	}

	&.primary {
		background-color: var(--color-primary);
		color: white;

		&:hover {
			background-color: var(--color-primary-600);
		}

		&:active {
			background-color: var(--color-primary-800);
		}
	}

	&.secondary {
		background-color: var(--color-primary-100);
		color: var(--color-primary);

		&:hover {
			background-color: var(--color-primary-200);
		}
	}

	&.filled {
		border-radius: var(--btn-filled-border-radius);
	}

	&.rounded {
		border-radius: var(--btn-rounded-border-radius);
	}

	&.outlined {
		border: 1px solid var(--color-primary);
		background-color: transparent;
		color: var(--color-primary);

		&:hover {
			background-color: var(--color-primary-100);
		}
	}

	&.ghost {
		background-color: transparent;
		color: var(--color-primary);

		&:hover {
			background-color: var(--color-primary-100);
		}
	}

	&.danger {
		background-color: transparent;
		color: var(--color-error);
		border: 1px solid var(--color-error);

		&:hover {
			background-color: color-mix(in oklch, var(--color-error) 8%, white);
		}
	}

	&:disabled {
		background-color: var(--color-disabled-bg);
		color: var(--color-disabled-text);
		cursor: not-allowed;
	}

	span {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
}

/* ─── Buttons (native replacement for wa-button) ──────────────────────────────
   Renders on <button> and <a>. Modern-token look matching .play-btn/.ghost-btn.
   variant:    .btn--brand | .btn--neutral | .btn--danger
   appearance: filled (default) | .btn--outline | .btn--text
   extras:     .btn--sm, .btn--loading (spinner), plus native :disabled. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: var(--font-body-medium-bold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
	user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn .ms { font-size: 20px; }

/* filled (default appearance) */
.btn--brand   { background: var(--accent-grad); color: #fff; }
.btn--neutral { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--neutral:hover { background: var(--surface-3); }

/* outline */
.btn--outline { background: transparent; }
.btn--outline.btn--brand   { color: var(--accent-2); border-color: var(--accent); }
.btn--outline.btn--danger  { color: var(--danger); border-color: var(--danger); }
.btn--outline.btn--brand:hover  { background: color-mix(in oklch, var(--accent) 12%, transparent); }
.btn--outline.btn--danger:hover { background: color-mix(in oklch, var(--danger) 10%, transparent); }

/* text (no fill/border) */
.btn--text { background: transparent; border-color: transparent; padding-inline: 14px; }
.btn--text.btn--brand   { color: var(--accent-2); }
.btn--text.btn--neutral { color: var(--text-dim); }
.btn--text.btn--danger  { color: var(--danger); }
.btn--text:hover { background: color-mix(in oklch, currentColor 12%, transparent); }

/* small */
.btn--sm { padding: 7px 14px; font: var(--font-body-small-semibold); }
.btn--sm.btn--text { padding-inline: 10px; }

/* loading — current loading buttons are all brand (white text), so a white spinner fits */
.btn--loading { color: transparent !important; pointer-events: none; position: relative; }
.btn--loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }