/**
 * Button Styles — 10 preset at-rest looks. Each targets .is-style-{slug}
 * .wp-block-button__link, tokens only. Hover lives in block-hover/style.css
 * (except Dashed's gated dashed→solid). Loaded in both editor and front end.
 */

/* 01 — Solid · default hover fx-lift-soft */
.wp-block-button.is-style-solid > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 500;
	letter-spacing: -0.005em;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 1px 2px rgba(0, 0, 0, 0.18),
		0 8px 24px -10px rgba(0, 0, 0, 0.35);
}

/* 02 — Ghost · default hover fx-fill */
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 500;
	font-size: 0.85em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* 03 — Pill · default hover fx-lift-glow */
.wp-block-button.is-style-pill > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 600;
	letter-spacing: -0.005em;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

/* 04 — Brutal · default hover fx-press · uses theme.json `crisp` shadow */
.wp-block-button.is-style-brutal > .wp-block-button__link {
	position: relative;
	top: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	box-shadow: var(--wp--preset--shadow--crisp);
}

/* 05 — Slanted · default hover fx-bg-b
   Text skews with the button (no child span to un-skew); -8deg for readability. */
.wp-block-button.is-style-slanted > .wp-block-button__link {
	position: relative;
	display: inline-block;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 700;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transform: skewX(-8deg);
	overflow: hidden;
	box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--accent);
}

/* 06 — 3D Press · default hover fx-press */
.wp-block-button.is-style-3d-press > .wp-block-button__link {
	position: relative;
	top: 0;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: 9px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 600;
	letter-spacing: -0.005em;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		0 4px 0 0 color-mix(in srgb, var(--wp--preset--color--secondary) 60%, var(--wp--preset--color--ink)),
		0 6px 14px -4px color-mix(in srgb, var(--wp--preset--color--secondary) 50%, transparent);
}

/* 07 — Soft · default hover fx-shadow-grow (drop-shadow, to preserve the layered box-shadow) */
.wp-block-button.is-style-soft > .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 500;
	letter-spacing: -0.005em;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.04),
		0 1px 1px rgba(0, 0, 0, 0.04),
		0 4px 12px -2px rgba(0, 0, 0, 0.08),
		0 0 0 1px var(--wp--preset--color--hairline);
}

/* 08 — Dashed · default hover fx-fill
   Gated dashed→solid hover stays here (Dashed identity); :not([class*="has-hover-"]) gate. */
.wp-block-button.is-style-dashed > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1.5px dashed var(--wp--preset--color--ink);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 500;
}

.wp-block-button.is-style-dashed > .wp-block-button__link::before {
	content: "$ ";
	color: var(--wp--preset--color--text-muted);
	margin-right: 2px;
}

/* Gated visual-identity hover: dashes solidify when no preset / no override. */
.wp-block-button.is-style-dashed:not([class*="has-hover-"]) > .wp-block-button__link:hover {
	border-style: solid;
}

/* 09 — Asymmetric · default hover fx-radius-flip (corners swap, bg → accent) */
.wp-block-button.is-style-asymmetric > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border-radius: 22px 4px 22px 4px;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 500;
	font-size: 0.9em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 10 — Editorial · default hover fx-shift-r */
.wp-block-button.is-style-editorial > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
	border-radius: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 400;
	font-size: 1.25em;
	letter-spacing: -0.01em;
}