/**
 * Theme Zero button component.
 *
 * Styles are intentionally scoped to the .t0-button class so native controls,
 * WordPress blocks and plugin interfaces remain unaffected.
 */

.t0-button {
	--t0-button-background: transparent;
	--t0-button-border-color: transparent;
	--t0-button-color: currentcolor;
	--t0-button-hover-background: var(--t0-button-background);
	--t0-button-hover-border-color: var(--t0-button-border-color);
	--t0-button-hover-color: var(--t0-button-color);

	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	padding: 0.6875rem 1.25rem;
	border: 0.0625rem solid var(--t0-button-border-color);
	border-radius: var(--wp--custom--radius--small, 0.5rem);
	background: var(--t0-button-background);
	color: var(--t0-button-color);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--wp--custom--transition--fast, 160ms ease),
		border-color var(--wp--custom--transition--fast, 160ms ease),
		color var(--wp--custom--transition--fast, 160ms ease),
		transform var(--wp--custom--transition--fast, 160ms ease);
}

.t0-button:hover {
	border-color: var(--t0-button-hover-border-color);
	background: var(--t0-button-hover-background);
	color: var(--t0-button-hover-color);
	text-decoration: none;
}

.t0-button:active:not(:disabled, [aria-disabled="true"]) {
	transform: translateY(0.0625rem);
}

.t0-button:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--primary, #2459b3);
	outline-offset: 0.1875rem;
}

.t0-button:disabled,
.t0-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.t0-button--primary {
	--t0-button-background: var(--wp--preset--color--primary, #2459b3);
	--t0-button-border-color: var(--wp--preset--color--primary, #2459b3);
	--t0-button-color: var(--wp--preset--color--surface, #ffffff);
	--t0-button-hover-background: var(--wp--preset--color--primary-dark, #173f82);
	--t0-button-hover-border-color: var(--wp--preset--color--primary-dark, #173f82);
	--t0-button-hover-color: var(--wp--preset--color--surface, #ffffff);
}

.t0-button--secondary {
	--t0-button-background: var(--wp--preset--color--surface, #ffffff);
	--t0-button-border-color: var(--wp--preset--color--border, #d9e1ea);
	--t0-button-color: var(--wp--preset--color--text, #14243b);
	--t0-button-hover-background: var(--wp--preset--color--background, #f4f6f8);
	--t0-button-hover-border-color: var(--wp--preset--color--primary, #2459b3);
	--t0-button-hover-color: var(--wp--preset--color--primary-dark, #173f82);
}

.t0-button--small {
	min-height: 2.5rem;
	padding: 0.5625rem 1rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.t0-button--large {
	min-height: 3.25rem;
	padding: 0.875rem 1.5rem;
	font-size: var(--wp--preset--font-size--large, 1.125rem);
}

@media (forced-colors: active) {
	.t0-button {
		border-color: ButtonText;
	}

	.t0-button:focus-visible {
		outline-color: Highlight;
	}
}