/**
 * Component: button
 *
 * Solid ink primary, sharp corners, sentence case. Confident weight without
 * shouting. Buttons are for purchase actions - everything else is a link.
 */

.tcs-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-space-xs);

	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	padding: 0.75rem var(--tcs-space-md);
	min-height: 44px; /* WCAG 2.2 target size */

	border: 1px solid transparent;
	border-radius: var(--tcs-radius);
	cursor: pointer;

	background: var(--tcs-accent);
	color: var(--tcs-ink-inverse);

	transition:
		background-color var(--tcs-duration) var(--tcs-ease),
		border-color var(--tcs-duration) var(--tcs-ease),
		color var(--tcs-duration) var(--tcs-ease);
}

.tcs-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--tcs-accent-hover);
	color: var(--tcs-ink-inverse);
}

/* ---------------------------------------------------------------------- */
/* Variants                                                                */
/* ---------------------------------------------------------------------- */

.tcs-button--primary {
	background: var(--tcs-accent);
	color: var(--tcs-ink-inverse);
}

.tcs-button--secondary {
	background: transparent;
	color: var(--tcs-ink);
	border-color: var(--tcs-rule-strong);
}

.tcs-button--secondary:hover {
	background: var(--tcs-paper-sunk);
	color: var(--tcs-ink);
	border-color: var(--tcs-ink-faint);
}

/*
 * Quiet. Used on sold-out cards, where the action is "keep looking" rather
 * than "buy". It must not compete with a purchasable card beside it.
 */
.tcs-button--quiet {
	background: transparent;
	color: var(--tcs-ink-muted);
	border-color: var(--tcs-rule);
	font-weight: var(--tcs-weight-medium);
}

.tcs-button--quiet:hover {
	background: var(--tcs-paper-sunk);
	color: var(--tcs-ink);
	border-color: var(--tcs-rule-strong);
}

.tcs-button--block,
.woocommerce a.button.tcs-button--block,
.woocommerce button.button.tcs-button--block {
	display: flex;
	width: 100%;
}

.tcs-button--small {
	font-size: var(--tcs-text-2xs);
	padding: 0.5rem var(--tcs-space-sm);
	min-height: 36px;
}

.tcs-button--large {
	font-size: var(--tcs-text-base);
	padding: 1rem var(--tcs-space-lg);
	min-height: 52px;
}

/* ---------------------------------------------------------------------- */
/* States                                                                  */
/* ---------------------------------------------------------------------- */

.tcs-button:disabled,
.tcs-button[aria-disabled="true"],
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--tcs-paper-sunk);
	color: var(--tcs-ink-faint);
	border-color: var(--tcs-rule);
	cursor: not-allowed;
	opacity: 1; /* Woo sets 0.5, which fails contrast. */
}

/* WooCommerce's "added to cart" tick. */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-block-start: var(--tcs-space-2xs);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-medium);
}

/* Loading state on AJAX add-to-cart. */
.woocommerce a.button.loading {
	opacity: 0.8;
	pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Forced colours                                                          */
/* ---------------------------------------------------------------------- */

@media (forced-colors: active) {
	.tcs-button {
		border: 1px solid ButtonText;
	}
}