/**
 * Atom: Button
 *
 * Eine Quelle für ALLE Buttons der Seite – auch WooCommerce-Buttons, deren
 * Markup wir nicht kontrollieren, laufen über dieselben Tokens.
 *
 *   .btn                Basis + primär (gefüllt, Coral)
 *   .btn--secondary     Kontur
 *   .btn--block         volle Breite
 *   .btn--icon          quadratischer Icon-Button (Slider-Pfeile)
 *
 * Zustände: :hover, :focus-visible, :active, :disabled/[aria-disabled],
 * .is-loading. Farben kommen ausschließlich aus --theme-btn-*.
 *
 * WooCommerce-Selektoren stehen komplett in :where() (Spezifität 0):
 * dann entscheidet allein die Reihenfolge – sekundär steht nach primär.
 */
.btn,
:where(.woocommerce, .woocommerce-page) :where(
	a.button,
	button.button,
	input.button,
	#respond input#submit,
	.wc-forward,
	.checkout-button,
	#place_order,
	.single_add_to_cart_button
) {
	--btn-bg: var(--theme-btn-primary-bg);
	--btn-text: var(--theme-btn-primary-text);
	--btn-border: var(--theme-btn-primary-border);
	--btn-bg-hover: var(--theme-btn-primary-bg-hover);
	--btn-text-hover: var(--theme-btn-primary-text-hover);
	--btn-border-hover: var(--theme-btn-primary-border-hover);

	align-items: center;
	appearance: none;
	background: var(--btn-bg);
	border: var(--theme-btn-border-width) solid var(--btn-border);
	border-radius: var(--theme-btn-radius);
	color: var(--btn-text);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-family-body);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-medium);
	gap: var(--space-2);
	justify-content: center;
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-ui);
	min-block-size: var(--theme-btn-min-height);
	padding: var(--theme-btn-padding-block) var(--theme-btn-padding-inline);
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-instant) var(--ease-standard);
	-webkit-user-select: none;
	user-select: none;
}

.btn--secondary,
:where(.woocommerce, .woocommerce-page) :where(
	.woocommerce-MyAccount-content a.button:not(.woocommerce-button--next),
	.woocommerce-orders-table a.button,
	button[name="apply_coupon"],
	button[name="update_cart"],
	.wc-backward
) {
	--btn-bg: var(--theme-btn-secondary-bg);
	--btn-text: var(--theme-btn-secondary-text);
	--btn-border: var(--theme-btn-secondary-border);
	--btn-bg-hover: var(--theme-btn-secondary-bg-hover);
	--btn-text-hover: var(--theme-btn-secondary-text-hover);
	--btn-border-hover: var(--theme-btn-secondary-border-hover);
}

@media (hover: hover) {
	.btn:hover,
	:where(.woocommerce, .woocommerce-page) :where(a.button, button.button, input.button, .wc-forward, .checkout-button, #place_order, .single_add_to_cart_button):hover {
		background: var(--btn-bg-hover);
		border-color: var(--btn-border-hover);
		color: var(--btn-text-hover);
	}
}

.btn:active,
:where(.woocommerce, .woocommerce-page) :where(a.button, button.button, input.button, #place_order, .single_add_to_cart_button):active {
	transform: scale(0.98);
}

.btn:focus-visible,
:where(.woocommerce, .woocommerce-page) :where(a.button, button.button, input.button, #place_order, .single_add_to_cart_button):focus-visible {
	background: var(--btn-bg-hover);
	border-color: var(--btn-border-hover);
	border-radius: var(--theme-btn-radius);
	color: var(--btn-text-hover);
}

/* Deaktiviert – Woo nutzt .disabled und .wc-variation-selection-needed.
   Keine Transparenz: WooCommerces „deaktivierter“ Button bleibt klickbar
   (zeigt dann einen Hinweis), muss also lesbar bleiben (≥ 4,5:1). */
.btn:disabled,
.btn[aria-disabled="true"],
:where(.woocommerce, .woocommerce-page) :where(.button, #place_order, .single_add_to_cart_button):is(:disabled, .disabled, [aria-disabled="true"]) {
	--btn-bg: var(--theme-bg-muted);
	--btn-border: var(--theme-border);
	--btn-text: var(--theme-text-muted);
	--btn-bg-hover: var(--theme-bg-muted);
	--btn-border-hover: var(--theme-border-strong);
	--btn-text-hover: var(--theme-text);

	cursor: not-allowed;
	transform: none;
}

/* Ladezustand (Woo setzt .loading beim Hinzufügen per AJAX) */
.btn.is-loading,
:where(.woocommerce, .woocommerce-page) :where(.button, #place_order, .single_add_to_cart_button).loading {
	color: transparent;
	pointer-events: none;
}

.btn.is-loading::after,
:where(.woocommerce, .woocommerce-page) :where(.button, #place_order, .single_add_to_cart_button).loading::after {
	animation: btn-spin 700ms linear infinite;
	block-size: 1.125rem;
	border: var(--border-width-medium) solid var(--btn-text);
	border-inline-end-color: transparent;
	border-radius: 50%;
	content: "";
	inline-size: 1.125rem;
	inset: 0;
	margin: auto;
	position: absolute;
}

/* Woo hängt nach dem Hinzufügen ein Häkchen an */
:where(.woocommerce, .woocommerce-page) .button.added::after {
	content: none;
}

.btn--block {
	inline-size: 100%;
}

.btn--icon {
	block-size: var(--size-tap);
	inline-size: var(--size-tap);
	min-block-size: var(--size-tap);
	padding: 0;
}

.btn--icon svg {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

/* Button-Gruppe */
.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

@keyframes btn-spin {
	to {
		rotate: 360deg;
	}
}