/* ==========================================================================
   Button
   Converted from design-reference/showroom-floor.css §5.
   ========================================================================== */

.tfs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--step--12);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--step--28);
	min-height: var(--wp--custom--control--tap-target-minimum);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-btn:hover {
	background-color: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow. */
.tfs-btn:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
}

.tfs-btn--secondary:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.tfs-btn--tertiary {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
}

.tfs-btn--tertiary:hover {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.tfs-btn--small {
	padding: var(--wp--custom--step--12) var(--wp--custom--step--20);
	min-height: 0;
}

.tfs-btn--block {
	width: 100%;
}