/*
 * Codify: Shape Werkz — button styles (front end, editor frame and the Designer preview)
 *
 * The block wrapper (.wp-block-button) carries the values, worked out by the server (and the same
 * code in the editor):
 *   --csw-o[-h|-f|-p|-a]   clip-path outline per state (hover/pressed: hover shapes and slice positions; a: Active shape)
 *   --csw-lt/-lr/-lb/-ll   layout border widths (normal border + room for text, slices and icons)
 *   --csw-ll0/-lr0         the same without the icon room (icons sit right after it)
 *   --csw-{n|h|f|p|a}f1/f2/fa  fill paint per state (normal, hover, focus, pressed, Active): two color
 *                          stops + angle, so colors AND gradients fade smoothly; ...fi = an image that can't fade
 *   --csw-{n|h|f|p|a}b1/b2/ba  border paint per state, the same way (...bi = per-side colors, or an image)
 *   --csw-{n|h|f|p|a}t1/t2/ta  text paint (gradient text)
 *   --csw-{n|h|a}sf / sb   slice fill / border paint (slices with their own colors)
 *   slices (.csw-pc, their own elements on the wrapper, like the lab): --x/--xh position, --w width,
 *                          --o/--oh/--oa outline (normal, hover, Active), --op opacity; the engine adds --cw-ring[-h|-a]
 *   --csw-sh[-h|-f|-p]     shadow as drop-shadow() filters (box-shadow gets cut off by clip-path)
 *   --csw-gl[-h|-p|-a]     glow per state; --csw-fglow the keyboard focus glow (--csw-fc its default color)
 *   --csw-icl / --csw-icr / --csw-isz  icons (masks) and their size
 *   --csw-press            pressed nudge
 *   --csw-a-bg/-gr/-tx/-bc Active colors (current page / always)
 * and the engine script adds what needs the real size:
 *   --cw-ring[-h|-f|-p]    the border ring polygon per state
 *   --cw-clip[-h|-f|-p]    a corrected outline when a corner radius is bigger than the button allows
 *   --cw-pl / --cw-pr      the link's real padding (to place icons)
 *
 * Layers: the link's background = follow-the-mouse spot + fill (with gradient text: the text gradient
 * alone, clipped to the letters, and the fill moves to the wrapper's ::before); the link's ::before = icons;
 * ::after = border ring. Slices and accents are their own elements on the wrapper.
 *
 * States follow core's order: a state that doesn't set something keeps what the states below it show
 * (pressed > focus > hover > normal). For outlines, rings and shadows that's one variable per level
 * (…1 normal … 4 pressed), each set only while its state is on; for paints, a state's rule only applies
 * when the button has that state's paint (classes csw-fh / -ff / -fp, csw-bh / -bf / -bp, csw-th / -tf / -tp).
 *
 * body.csw-sim-hover / body.csw-sim-active are set by the Designer's live preview (it can't take the mouse).
 */

/* ── Paint stops: registered so they animate (fades between colors and gradients) ── */
@property --csw-f1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-f2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-fa { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --csw-g1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-g2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-ga { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --csw-t1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-t2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-ta { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --csw-k1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-k2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --csw-ka { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --csw-fo { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --csw-mx { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --csw-my { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }

/* ── Shaped link: outline, border room, no core radius/shadow/outline (they'd be cut off) ── */
.wp-block-button.csw-shaped > .wp-block-button__link {
	--csw-c1: var(--cw-clip, var(--csw-o));
	clip-path: var(--csw-c4, var(--csw-c3, var(--csw-c2, var(--csw-c1))));
}
/* Layout values must not change between states (or the button changes width on hover).
   Core's per-state CSS (wp-states-…) can set border/radius/shadow on :hover etc., so these rules
   repeat the classes to win in every state. */
.wp-block-button.csw-shaped.csw-shaped > .wp-block-button__link.wp-block-button__link,
.wp-block-button.csw-shaped.csw-shaped > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.csw-shaped.csw-shaped > .wp-block-button__link.wp-block-button__link:focus,
.wp-block-button.csw-shaped.csw-shaped > .wp-block-button__link.wp-block-button__link:focus-visible,
.wp-block-button.csw-shaped.csw-shaped > .wp-block-button__link.wp-block-button__link:active {
	border-style: solid !important;
	border-color: transparent !important;
	border-width: var(--csw-lt, 0px) var(--csw-lr, 0px) var(--csw-lb, 0px) var(--csw-ll, 0px) !important;
	border-radius: 0 !important;
	background-origin: border-box !important;
	box-shadow: none !important;
	outline: none !important;
}
.wp-block-button.csw-shaped > .wp-block-button__link {
	position: relative;
	isolation: isolate;
	--csw-Ltx: none;
	--csw-Lfl: none;
}
.wp-block-button.csw-shaped > .wp-block-button__link:hover,
.wp-block-button.csw-shaped.csw-sl:hover > .wp-block-button__link,
body.csw-sim-hover .wp-block-button.csw-shaped > .wp-block-button__link {
	--csw-c2: var(--cw-clip-h, var(--csw-o-h, var(--csw-c1)));
}
.wp-block-button.csw-shaped > .wp-block-button__link:focus-visible {
	--csw-c3: var(--cw-clip-f, var(--csw-o-f, var(--csw-c2, var(--csw-c1))));
}
.wp-block-button.csw-shaped > .wp-block-button__link:active,
body.csw-sim-active .wp-block-button.csw-shaped > .wp-block-button__link {
	--csw-c4: var(--cw-clip-p, var(--csw-o-p, var(--csw-c3, var(--csw-c2, var(--csw-c1)))));
}

/* Active with its own shape (Pro): the Active outline and ring hold, also on hover */
.wp-block-button.csw-shaped.csw-sa.csw-active > .wp-block-button__link:not(:active):not(:focus-visible) {
	--csw-c1: var(--cw-clip-a, var(--csw-o-a, var(--cw-clip, var(--csw-o))));
	--csw-c2: var(--csw-c1);
}
.wp-block-button.csw-ring.csw-sa.csw-active > .wp-block-button__link:not(:active):not(:focus-visible) {
	--csw-r1: var(--cw-ring-a, var(--cw-ring, inset(50%)));
	--csw-r2: var(--csw-r1);
	--csw-m1: var(--cw-mask-a, var(--cw-mask, none));
	--csw-m2: var(--csw-m1);
}

/* ── Fill: the link's own background, painted from two stops + an angle, under the other layers ── */
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link.wp-block-button__link,
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link.wp-block-button__link:focus,
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link.wp-block-button__link:focus-visible,
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link.wp-block-button__link:active {
	background-color: transparent !important;
	background-image: var(--csw-Lfl), var(--csw-fi, linear-gradient(var(--csw-fa), var(--csw-f1), var(--csw-f2))) !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	background-size: auto !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
/* Gradient text (Pro): the link's background is the text gradient alone, clipped to the letters (one
   layer: the way the lab does it, and the way every browser supports); the fill moves to the wrapper */
.wp-block-button.csw-shaped.csw-tg.csw-tg > .wp-block-button__link.wp-block-button__link,
.wp-block-button.csw-shaped.csw-tg.csw-tg > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.csw-shaped.csw-tg.csw-tg > .wp-block-button__link.wp-block-button__link:focus,
.wp-block-button.csw-shaped.csw-tg.csw-tg > .wp-block-button__link.wp-block-button__link:focus-visible,
.wp-block-button.csw-shaped.csw-tg.csw-tg > .wp-block-button__link.wp-block-button__link:active {
	background-color: transparent !important;
	background-image: var(--csw-Ltx) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	background-size: auto !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.wp-block-button.csw-tg.csw-fill::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	--csw-v1: var(--cw-clip, var(--csw-o));
	clip-path: var(--csw-v4, var(--csw-v3, var(--csw-v2, var(--csw-v1))));
	--csw-f1: var(--csw-nf1, transparent);
	--csw-f2: var(--csw-nf2, transparent);
	--csw-fa: var(--csw-nfa, 180deg);
	--csw-fi: var(--csw-nfi);
	--csw-Lfl: none;
	background-image: var(--csw-Lfl), var(--csw-fi, linear-gradient(var(--csw-fa), var(--csw-f1), var(--csw-f2)));
	background-repeat: no-repeat;
}
.wp-block-button.csw-tg.csw-fill:hover::before,
body.csw-sim-hover .wp-block-button.csw-tg.csw-fill::before { --csw-v2: var(--cw-clip-h, var(--csw-o-h, var(--csw-v1))); }
.wp-block-button.csw-tg.csw-fill:has(> .wp-block-button__link:focus-visible)::before { --csw-v3: var(--cw-clip-f, var(--csw-o-f, var(--csw-v2, var(--csw-v1)))); }
.wp-block-button.csw-tg.csw-fill:active::before,
body.csw-sim-active .wp-block-button.csw-tg.csw-fill::before { --csw-v4: var(--cw-clip-p, var(--csw-o-p, var(--csw-v3, var(--csw-v2, var(--csw-v1))))); }
.wp-block-button.csw-tg.csw-fill.csw-fh:hover::before,
body.csw-sim-hover .wp-block-button.csw-tg.csw-fill.csw-fh::before {
	--csw-f1: var(--csw-hf1, var(--csw-nf1, transparent)); --csw-f2: var(--csw-hf2, var(--csw-nf2, transparent)); --csw-fa: var(--csw-hfa, var(--csw-nfa, 180deg)); --csw-fi: var(--csw-hfi);
}
.wp-block-button.csw-tg.csw-fill.csw-ff:has(> .wp-block-button__link:focus-visible)::before {
	--csw-f1: var(--csw-ff1, var(--csw-nf1, transparent)); --csw-f2: var(--csw-ff2, var(--csw-nf2, transparent)); --csw-fa: var(--csw-ffa, var(--csw-nfa, 180deg)); --csw-fi: var(--csw-ffi);
}
.wp-block-button.csw-tg.csw-fill.csw-fp:active::before,
body.csw-sim-active .wp-block-button.csw-tg.csw-fill.csw-fp::before {
	--csw-f1: var(--csw-pf1, var(--csw-nf1, transparent)); --csw-f2: var(--csw-pf2, var(--csw-nf2, transparent)); --csw-fa: var(--csw-pfa, var(--csw-nfa, 180deg)); --csw-fi: var(--csw-pfi);
}
.wp-block-button.csw-tg.csw-fill.csw-active:is(.csw-a-bg, .csw-a-gr):not(:active):not(:has(> .wp-block-button__link:focus-visible))::before {
	--csw-f1: var(--csw-af1, var(--csw-nf1, transparent)); --csw-f2: var(--csw-af2, var(--csw-nf2, transparent)); --csw-fa: var(--csw-afa, var(--csw-nfa, 180deg)); --csw-fi: var(--csw-afi);
}
.wp-block-button.csw-tg.csw-fill.csw-sa.csw-active:not(:active):not(:has(> .wp-block-button__link:focus-visible))::before {
	--csw-v1: var(--cw-clip-a, var(--csw-o-a, var(--cw-clip, var(--csw-o)))); --csw-v2: var(--csw-v1);
}
.wp-block-button.csw-tg.csw-fill.csw-fl-fill::before { --csw-mx: var(--cw-mx, 50%); --csw-my: var(--cw-my, 50%);
	--csw-Lfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-f1) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-f2) calc(var(--csw-fo) * 100%), transparent)); }
.wp-block-button.csw-tg.csw-fill.csw-fl-fill.csw-fl-rev::before {
	--csw-Lfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-f2) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-f1) calc(var(--csw-fo) * 100%), transparent)); }
.wp-block-button.csw-tg.csw-fill.csw-fl-in::before { --csw-fo: 1; }
.wp-block-button.csw-shaped.csw-fill > .wp-block-button__link {
	--csw-f1: var(--csw-nf1, transparent);
	--csw-f2: var(--csw-nf2, transparent);
	--csw-fa: var(--csw-nfa, 180deg);
	--csw-fi: var(--csw-nfi);
}
.wp-block-button.csw-shaped.csw-fh > .wp-block-button__link:hover,
.wp-block-button.csw-shaped.csw-fh.csw-sl:hover > .wp-block-button__link,
body.csw-sim-hover .wp-block-button.csw-shaped.csw-fh > .wp-block-button__link {
	--csw-f1: var(--csw-hf1, var(--csw-nf1, transparent));
	--csw-f2: var(--csw-hf2, var(--csw-nf2, transparent));
	--csw-fa: var(--csw-hfa, var(--csw-nfa, 180deg));
	--csw-fi: var(--csw-hfi);
}
.wp-block-button.csw-shaped.csw-ff > .wp-block-button__link:focus-visible {
	--csw-f1: var(--csw-ff1, var(--csw-nf1, transparent));
	--csw-f2: var(--csw-ff2, var(--csw-nf2, transparent));
	--csw-fa: var(--csw-ffa, var(--csw-nfa, 180deg));
	--csw-fi: var(--csw-ffi);
}
.wp-block-button.csw-shaped.csw-fp > .wp-block-button__link:active,
body.csw-sim-active .wp-block-button.csw-shaped.csw-fp > .wp-block-button__link {
	--csw-f1: var(--csw-pf1, var(--csw-nf1, transparent));
	--csw-f2: var(--csw-pf2, var(--csw-nf2, transparent));
	--csw-fa: var(--csw-pfa, var(--csw-nfa, 180deg));
	--csw-fi: var(--csw-pfi);
}

/* ── Gradient text (Pro): a gradient clipped to the letters; icons take its first color ── */
.wp-block-button.csw-tg > .wp-block-button__link {
	--csw-Ltx: linear-gradient(var(--csw-ta), var(--csw-t1), var(--csw-t2));
	--csw-t1: var(--csw-nt1, currentColor);
	--csw-t2: var(--csw-nt2, currentColor);
	--csw-ta: var(--csw-nta, 180deg);
	--csw-icc: var(--csw-t1);
	-webkit-text-fill-color: transparent;
}
.wp-block-button.csw-tg.csw-th > .wp-block-button__link:hover,
.wp-block-button.csw-tg.csw-th.csw-sl:hover > .wp-block-button__link,
body.csw-sim-hover .wp-block-button.csw-tg.csw-th > .wp-block-button__link {
	--csw-t1: var(--csw-ht1, var(--csw-nt1, currentColor));
	--csw-t2: var(--csw-ht2, var(--csw-nt2, currentColor));
	--csw-ta: var(--csw-hta, var(--csw-nta, 180deg));
}
.wp-block-button.csw-tg.csw-tf > .wp-block-button__link:focus-visible {
	--csw-t1: var(--csw-ft1, var(--csw-nt1, currentColor));
	--csw-t2: var(--csw-ft2, var(--csw-nt2, currentColor));
	--csw-ta: var(--csw-fta, var(--csw-nta, 180deg));
}
.wp-block-button.csw-tg.csw-tp > .wp-block-button__link:active,
body.csw-sim-active .wp-block-button.csw-tg.csw-tp > .wp-block-button__link {
	--csw-t1: var(--csw-pt1, var(--csw-nt1, currentColor));
	--csw-t2: var(--csw-pt2, var(--csw-nt2, currentColor));
	--csw-ta: var(--csw-pta, var(--csw-nta, 180deg));
}

/* ── Slices (Pro): each slice is its own element on the wrapper, like the lab: its own outline, fill
   (::before), border ring (::after, from the engine) and opacity. Same colors as the button, or their own. ── */
.wp-block-button.csw-sl > .csw-pc {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--w);
	clip-path: var(--o);
	isolation: isolate;
	opacity: var(--op, 1);
	cursor: pointer;
}
.wp-block-button.csw-sl > .csw-pc-l { left: var(--x); }
.wp-block-button.csw-sl > .csw-pc-r { right: var(--x); }
.wp-block-button.csw-sl:is(:hover, :active) > .csw-pc,
body.csw-sim-hover .wp-block-button.csw-sl > .csw-pc { clip-path: var(--oh, var(--o)); }
.wp-block-button.csw-sl:is(:hover, :active) > .csw-pc-l,
body.csw-sim-hover .wp-block-button.csw-sl > .csw-pc-l { left: var(--xh, var(--x)); }
.wp-block-button.csw-sl:is(:hover, :active) > .csw-pc-r,
body.csw-sim-hover .wp-block-button.csw-sl > .csw-pc-r { right: var(--xh, var(--x)); }
.wp-block-button.csw-sl.csw-sa.csw-active:not(:hover) > .csw-pc { clip-path: var(--oa, var(--o)); }
.wp-block-button.csw-sl > .csw-pc::before,
.wp-block-button.csw-sl > .csw-pc::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.wp-block-button.csw-sl > .csw-pc::before {
	--csw-f1: var(--csw-nsf1, var(--csw-nf1, transparent));
	--csw-f2: var(--csw-nsf2, var(--csw-nf2, transparent));
	--csw-fa: var(--csw-nsfa, var(--csw-nfa, 180deg));
	background: var(--csw-pfi, linear-gradient(var(--csw-fa), var(--csw-f1), var(--csw-f2)));
}
.wp-block-button.csw-sl:not(.csw-slc) > .csw-pc::before { --csw-pfi: var(--csw-nfi); }
.wp-block-button.csw-sl:is(:hover, :active, :has(> .wp-block-button__link:focus-visible)) > .csw-pc::before,
body.csw-sim-hover .wp-block-button.csw-sl > .csw-pc::before {
	--csw-f1: var(--csw-hsf1, var(--csw-hf1, var(--csw-nsf1, var(--csw-nf1, transparent))));
	--csw-f2: var(--csw-hsf2, var(--csw-hf2, var(--csw-nsf2, var(--csw-nf2, transparent))));
	--csw-fa: var(--csw-hsfa, var(--csw-hfa, var(--csw-nsfa, var(--csw-nfa, 180deg))));
}
.wp-block-button.csw-sl:not(.csw-slc):is(:hover, :active, :has(> .wp-block-button__link:focus-visible)) > .csw-pc::before,
body.csw-sim-hover .wp-block-button.csw-sl:not(.csw-slc) > .csw-pc::before { --csw-pfi: var(--csw-hfi, var(--csw-nfi)); }
.wp-block-button.csw-sl.csw-active:not(:active):not(:has(> .wp-block-button__link:focus-visible)) > .csw-pc::before {
	--csw-f1: var(--csw-asf1, var(--csw-af1, var(--csw-nsf1, var(--csw-nf1, transparent))));
	--csw-f2: var(--csw-asf2, var(--csw-af2, var(--csw-nsf2, var(--csw-nf2, transparent))));
	--csw-fa: var(--csw-asfa, var(--csw-afa, var(--csw-nsfa, var(--csw-nfa, 180deg))));
}
.wp-block-button.csw-sl.csw-ring > .csw-pc::after {
	--csw-g1: var(--csw-nsb1, var(--csw-nb1, transparent));
	--csw-g2: var(--csw-nsb2, var(--csw-nb2, transparent));
	--csw-ga: var(--csw-nsba, var(--csw-nba, 180deg));
	background: var(--csw-pbi, linear-gradient(var(--csw-ga), var(--csw-g1), var(--csw-g2)));
	clip-path: var(--cw-ring, inset(50%));
}
.wp-block-button.csw-sl.csw-ring:not(.csw-slc) > .csw-pc::after { --csw-pbi: var(--csw-nbi); }
.wp-block-button.csw-sl.csw-ring:is(:hover, :active, :has(> .wp-block-button__link:focus-visible)) > .csw-pc::after,
body.csw-sim-hover .wp-block-button.csw-sl.csw-ring > .csw-pc::after {
	--csw-g1: var(--csw-hsb1, var(--csw-hb1, var(--csw-nsb1, var(--csw-nb1, transparent))));
	--csw-g2: var(--csw-hsb2, var(--csw-hb2, var(--csw-nsb2, var(--csw-nb2, transparent))));
	--csw-ga: var(--csw-hsba, var(--csw-hba, var(--csw-nsba, var(--csw-nba, 180deg))));
	clip-path: var(--cw-ring-h, var(--cw-ring, inset(50%)));
}
.wp-block-button.csw-sl.csw-ring:not(.csw-slc):is(:hover, :active, :has(> .wp-block-button__link:focus-visible)) > .csw-pc::after,
body.csw-sim-hover .wp-block-button.csw-sl.csw-ring:not(.csw-slc) > .csw-pc::after { --csw-pbi: var(--csw-hbi, var(--csw-nbi)); }
.wp-block-button.csw-sl.csw-ring.csw-active:not(:active):not(:has(> .wp-block-button__link:focus-visible)) > .csw-pc::after {
	--csw-g1: var(--csw-asb1, var(--csw-ab1, var(--csw-nsb1, var(--csw-nb1, transparent))));
	--csw-g2: var(--csw-asb2, var(--csw-ab2, var(--csw-nsb2, var(--csw-nb2, transparent))));
	--csw-ga: var(--csw-asba, var(--csw-aba, var(--csw-nsba, var(--csw-nba, 180deg))));
}
.wp-block-button.csw-sl.csw-ring.csw-sa.csw-active:not(:hover) > .csw-pc::after { clip-path: var(--cw-ring-a, var(--cw-ring, inset(50%))); }
.wp-block-button.csw-sl.csw-fade > .csw-pc {
	transition: left .25s ease, right .25s ease, clip-path .25s ease, opacity .25s ease;
}
.wp-block-button.csw-sl.csw-fade > .csw-pc::before { transition: --csw-f1 .25s ease, --csw-f2 .25s ease, --csw-fa .25s ease; }
.wp-block-button.csw-sl.csw-fade > .csw-pc::after { transition: --csw-g1 .25s ease, --csw-g2 .25s ease, --csw-ga .25s ease, clip-path .25s ease; }

/* ── Follow the mouse (Pro): a radial spot over the gradient, transparent at rest ── */
.wp-block-button.csw-fl-fill > .wp-block-button__link,
.wp-block-button.csw-fl-bd > .wp-block-button__link,
.wp-block-button.csw-fl-bd > .wp-block-button__link::after {
	--csw-mx: var(--cw-mx, 50%);
	--csw-my: var(--cw-my, 50%);
}
.wp-block-button.csw-fl-in > .wp-block-button__link,
.wp-block-button.csw-fl-in > .wp-block-button__link::after {
	--csw-fo: 1;
}
.wp-block-button.csw-fl-fill > .wp-block-button__link {
	--csw-Lfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-f1) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-f2) calc(var(--csw-fo) * 100%), transparent));
}
.wp-block-button.csw-fl-fill.csw-fl-rev > .wp-block-button__link {
	--csw-Lfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-f2) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-f1) calc(var(--csw-fo) * 100%), transparent));
}

/* ── Icons: masks painted in the text color, placed right after the padding ── */
.wp-block-button.csw-icon > .wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: calc(var(--csw-lt, 0px) * -1);
	right: calc(var(--csw-lr, 0px) * -1);
	bottom: calc(var(--csw-lb, 0px) * -1);
	left: calc(var(--csw-ll, 0px) * -1);
	background: var(--csw-icc, currentColor);
	-webkit-mask: var(--csw-icl, none) calc(var(--csw-ll0, 0px) + var(--cw-pl, var(--csw-pl, 0px))) 50% / var(--csw-isz, 16px) var(--csw-isz, 16px) no-repeat, var(--csw-icr, none) right calc(var(--csw-lr0, 0px) + var(--cw-pr, var(--csw-pr, 0px))) top 50% / var(--csw-isz, 16px) var(--csw-isz, 16px) no-repeat;
	mask: var(--csw-icl, none) calc(var(--csw-ll0, 0px) + var(--cw-pl, var(--csw-pl, 0px))) 50% / var(--csw-isz, 16px) var(--csw-isz, 16px) no-repeat, var(--csw-icr, none) right calc(var(--csw-lr0, 0px) + var(--cw-pr, var(--csw-pr, 0px))) top 50% / var(--csw-isz, 16px) var(--csw-isz, 16px) no-repeat;
}
/* Icon only (Pro): the text stays for screen readers but takes no room */
.wp-block-button.csw-ic-only > .wp-block-button__link {
	font-size: 0 !important;
	line-height: 0 !important;
}

/* ── Border ring: a layer behind the text, cut into a ring that follows the shape ── */
.wp-block-button.csw-ring > .wp-block-button__link {
	--csw-r1: var(--cw-ring, inset(50%));
	--csw-m1: var(--cw-mask, none);
}
.wp-block-button.csw-ring > .wp-block-button__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: calc(var(--csw-lt, 0px) * -1);
	right: calc(var(--csw-lr, 0px) * -1);
	bottom: calc(var(--csw-lb, 0px) * -1);
	left: calc(var(--csw-ll, 0px) * -1);
	--csw-g1: var(--csw-nb1, currentColor);
	--csw-g2: var(--csw-nb2, currentColor);
	--csw-ga: var(--csw-nba, 180deg);
	--csw-gi: var(--csw-nbi);
	--csw-Kfl: none;
	/* (shorthand: per-side border colors come as several layers in one value) */
	background: var(--csw-Kfl) 0 0 / auto no-repeat, var(--csw-gi, linear-gradient(var(--csw-ga), var(--csw-g1), var(--csw-g2)));
	clip-path: var(--csw-r4, var(--csw-r3, var(--csw-r2, var(--csw-r1))));
	/* dashed / dotted borders: a dash mask from the engine */
	-webkit-mask: var(--csw-m4, var(--csw-m3, var(--csw-m2, var(--csw-m1)))) 0 0 / 100% 100% no-repeat;
	mask: var(--csw-m4, var(--csw-m3, var(--csw-m2, var(--csw-m1)))) 0 0 / 100% 100% no-repeat;
}
.wp-block-button.csw-ring > .wp-block-button__link:hover,
.wp-block-button.csw-ring.csw-sl:hover > .wp-block-button__link,
body.csw-sim-hover .wp-block-button.csw-ring > .wp-block-button__link {
	--csw-r2: var(--cw-ring-h, var(--csw-r1));
	--csw-m2: var(--cw-mask-h, var(--csw-m1));
}
.wp-block-button.csw-ring > .wp-block-button__link:focus-visible {
	--csw-r3: var(--cw-ring-f, var(--csw-r2, var(--csw-r1)));
	--csw-m3: var(--cw-mask-f, var(--csw-m2, var(--csw-m1)));
}
.wp-block-button.csw-ring > .wp-block-button__link:active,
body.csw-sim-active .wp-block-button.csw-ring > .wp-block-button__link {
	--csw-r4: var(--cw-ring-p, var(--csw-r3, var(--csw-r2, var(--csw-r1))));
	--csw-m4: var(--cw-mask-p, var(--csw-m3, var(--csw-m2, var(--csw-m1))));
}
.wp-block-button.csw-ring.csw-bh > .wp-block-button__link:hover::after,
.wp-block-button.csw-ring.csw-bh.csw-sl:hover > .wp-block-button__link::after,
body.csw-sim-hover .wp-block-button.csw-ring.csw-bh > .wp-block-button__link::after {
	--csw-g1: var(--csw-hb1, var(--csw-nb1, currentColor));
	--csw-g2: var(--csw-hb2, var(--csw-nb2, currentColor));
	--csw-ga: var(--csw-hba, var(--csw-nba, 180deg));
	--csw-gi: var(--csw-hbi);
}
.wp-block-button.csw-ring.csw-bf > .wp-block-button__link:focus-visible::after {
	--csw-g1: var(--csw-fb1, var(--csw-nb1, currentColor));
	--csw-g2: var(--csw-fb2, var(--csw-nb2, currentColor));
	--csw-ga: var(--csw-fba, var(--csw-nba, 180deg));
	--csw-gi: var(--csw-fbi);
}
.wp-block-button.csw-ring.csw-bp > .wp-block-button__link:active::after,
body.csw-sim-active .wp-block-button.csw-ring.csw-bp > .wp-block-button__link::after {
	--csw-g1: var(--csw-pb1, var(--csw-nb1, currentColor));
	--csw-g2: var(--csw-pb2, var(--csw-nb2, currentColor));
	--csw-ga: var(--csw-pba, var(--csw-nba, 180deg));
	--csw-gi: var(--csw-pbi);
}
/* the follow-the-mouse spot on the border */
.wp-block-button.csw-ring.csw-fl-bd > .wp-block-button__link::after {
	--csw-Kfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-g1) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-g2) calc(var(--csw-fo) * 100%), transparent));
}
.wp-block-button.csw-ring.csw-fl-bd.csw-fl-rev > .wp-block-button__link::after {
	--csw-Kfl: radial-gradient(circle var(--csw-fsz, farthest-corner) at var(--csw-mx) var(--csw-my), color-mix(in srgb, var(--csw-g2) calc(var(--csw-fo) * 100%), transparent), color-mix(in srgb, var(--csw-g1) calc(var(--csw-fo) * 100%), transparent));
}

/* ── Stacking: normal < hover < Active / focus / pressed, so a glow or shadow isn't covered by a neighbor ── */
.wp-block-button:is(.csw-shaped, .csw-glow, .csw-acc) { position: relative; z-index: 1; }
.wp-block-button:is(.csw-shaped, .csw-glow, .csw-acc):hover { z-index: 2; }
.wp-block-button:is(.csw-shaped, .csw-glow, .csw-acc).csw-active,
.wp-block-button:is(.csw-shaped, .csw-glow, .csw-acc):has(> .wp-block-button__link:focus-visible),
.wp-block-button:is(.csw-shaped, .csw-glow, .csw-acc):active { z-index: 3; }

/* ── Pressed nudge (off by default; any Shape Werkz button) ── */
.wp-block-button.csw-press > .wp-block-button__link {
	transition: transform .1s ease;
}
.wp-block-button.csw-press > .wp-block-button__link:active,
body.csw-sim-active .wp-block-button.csw-press > .wp-block-button__link {
	transform: translateY(var(--csw-press, 1px));
}

/* ── Shadow (follows the shape), glow (Pro) and keyboard focus glow, on the wrapper ── */
.wp-block-button:is(.csw-shaped, .csw-glow) {
	--csw-s1: var(--csw-sh, drop-shadow(0 0 0 transparent));
	--csw-q1: var(--csw-gl, drop-shadow(0 0 0 transparent));
	filter: var(--csw-s4, var(--csw-s3, var(--csw-s2, var(--csw-s1)))) var(--csw-q4, var(--csw-q3, var(--csw-q2, var(--csw-q1))));
}
.wp-block-button:is(.csw-shaped, .csw-glow):hover,
body.csw-sim-hover .wp-block-button:is(.csw-shaped, .csw-glow) {
	--csw-s2: var(--csw-sh-h, var(--csw-s1));
	--csw-q2: var(--csw-gl-h, var(--csw-q1));
}
.wp-block-button.csw-shaped:has(> .wp-block-button__link:focus-visible) {
	--csw-s3: var(--csw-sh-f, var(--csw-s2, var(--csw-s1))) var(--csw-fglow, drop-shadow(0 0 1px var(--csw-fc, currentColor)) drop-shadow(0 0 5px var(--csw-fc, currentColor)));
}
.wp-block-button.csw-glow:not(.csw-shaped):has(> .wp-block-button__link:focus-visible) {
	--csw-q3: var(--csw-fglow, var(--csw-q2, var(--csw-q1)));
}
.wp-block-button:is(.csw-shaped, .csw-glow):active,
body.csw-sim-active .wp-block-button:is(.csw-shaped, .csw-glow) {
	--csw-s4: var(--csw-sh-p, var(--csw-s3, var(--csw-s2, var(--csw-s1))));
	--csw-q4: var(--csw-gl-p, var(--csw-q3, var(--csw-q2, var(--csw-q1))));
}
.wp-block-button.csw-glow.csw-active,
.wp-block-button.csw-glow.csw-active:hover {
	--csw-q1: var(--csw-gl-a, var(--csw-gl, drop-shadow(0 0 0 transparent)));
	--csw-q2: var(--csw-gl-a, var(--csw-gl-h, var(--csw-q1)));
}
/* Browsers without :has() still get a focus glow (it also shows on mouse clicks there) */
@supports not selector(:has(*)) {
	.wp-block-button.csw-shaped:focus-within {
		z-index: 3;
		--csw-s3: var(--csw-sh-f, var(--csw-s2, var(--csw-s1))) var(--csw-fglow, drop-shadow(0 0 1px var(--csw-fc, currentColor)) drop-shadow(0 0 5px var(--csw-fc, currentColor)));
	}
}

/* ── Active (ours: current page or "always"). Hover keeps the Active look; focus and pressed still show. ── */
.wp-block-button.csw-active.csw-a-bg:not(.csw-fill) > .wp-block-button__link:not(:active):not(:focus-visible) {
	background-color: var(--csw-a-bg) !important;
	background-image: none !important;
}
.wp-block-button.csw-active.csw-a-gr:not(.csw-fill) > .wp-block-button__link:not(:active):not(:focus-visible) {
	background-image: var(--csw-a-gr) !important;
}
.wp-block-button.csw-active.csw-fill:is(.csw-a-bg, .csw-a-gr) > .wp-block-button__link:not(:active):not(:focus-visible) {
	--csw-f1: var(--csw-af1, var(--csw-nf1, transparent));
	--csw-f2: var(--csw-af2, var(--csw-nf2, transparent));
	--csw-fa: var(--csw-afa, var(--csw-nfa, 180deg));
	--csw-fi: var(--csw-afi);
}
.wp-block-button.csw-active.csw-a-tx > .wp-block-button__link:not(:active):not(:focus-visible) {
	color: var(--csw-a-tx) !important;
}
.wp-block-button.csw-active.csw-a-tg > .wp-block-button__link:not(:active):not(:focus-visible) {
	--csw-t1: var(--csw-at1, var(--csw-nt1, currentColor));
	--csw-t2: var(--csw-at2, var(--csw-nt2, currentColor));
	--csw-ta: var(--csw-ata, var(--csw-nta, 180deg));
}
.wp-block-button.csw-active.csw-a-bc:not(.csw-shaped) > .wp-block-button__link:not(:active):not(:focus-visible) {
	border-color: var(--csw-a-bc) !important;
}
.wp-block-button.csw-active.csw-a-bc.csw-ring > .wp-block-button__link:not(:active):not(:focus-visible)::after {
	--csw-g1: var(--csw-ab1, var(--csw-nb1, currentColor));
	--csw-g2: var(--csw-ab2, var(--csw-nb2, currentColor));
	--csw-ga: var(--csw-aba, var(--csw-nba, 180deg));
	--csw-gi: var(--csw-abi);
}

/* ── Second line (the "Second line" text format) ── */
.wp-block-button__link .csw-line2 {
	display: block;
	font-size: var(--csw-sub-fs, .74em);
	font-weight: var(--csw-sub-fw, 500);
	letter-spacing: .03em;
	line-height: 1.25;
	text-transform: var(--csw-sub-tt, none);
	opacity: var(--csw-sub-op, .78);
	margin-top: var(--csw-sub-gap, 3px);
}

/* With gradient text, a faded line drops out of the letter clip, so the second line stays solid */
.wp-block-button.csw-tg > .wp-block-button__link .csw-line2 {
	opacity: 1;
}

/* ── Images in the text (core's Inline image; Pro) ── */
.wp-block-button.csw-img > .wp-block-button__link img {
	height: var(--csw-imsz, 28px) !important;
	width: auto !important;
	aspect-ratio: var(--csw-imar, auto);
	object-fit: cover;
	border-radius: var(--csw-imr, 0);
	vertical-align: middle;
	margin: -4px var(--csw-imgap, 8px);
}

/* ── Accents (Pro): side and corner accents around the button (same CSS as the lab) ── */
/* The wrapper hugs the link exactly when things are drawn on it (accents, slices, gradient-text fill) */
.wp-block-button:is(.csw-acc, .csw-sl, .csw-tg) {
	display: flex;
}
.wp-block-button:is(.csw-acc, .csw-sl, .csw-tg):not(.has-custom-width) {
	width: fit-content;
}
.wp-block-button.csw-acc > :is(.csw-ac, .csw-ak) {
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	border: 0 solid var(--csw-acc);
	--L: var(--len);
	--P: var(--pos);
	transform: translate(var(--tx, 0px), var(--ty, 0px)) skewX(var(--skx, 0deg)) skewY(var(--sky, 0deg));
	transform-origin: var(--org, center);
}
.wp-block-button.csw-acc.csw-fade > :is(.csw-ac, .csw-ak) {
	transition: width .25s ease, height .25s ease, top .25s ease, left .25s ease, opacity .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wp-block-button.csw-acc > .csw-ac { background-color: var(--csw-acc); }
.wp-block-button.csw-acc > .csw-ac.v { width: var(--box); height: var(--L); top: var(--P); }
.wp-block-button.csw-acc > .csw-ac.h { height: var(--box); width: var(--L); left: var(--P); }
.wp-block-button.csw-acc > .csw-ac-L { left: calc(-1 * (var(--off) + var(--box))); }
.wp-block-button.csw-acc > .csw-ac-R { right: calc(-1 * (var(--off) + var(--box))); }
.wp-block-button.csw-acc > .csw-ac-T { top: calc(-1 * (var(--off) + var(--box))); }
.wp-block-button.csw-acc > .csw-ac-B { bottom: calc(-1 * (var(--off) + var(--box))); }
.wp-block-button.csw-acc > .csw-ac.bk { background-color: transparent !important; border-width: var(--th); }
.wp-block-button.csw-acc > .csw-ac-L.bk { border-right-width: 0; border-radius: var(--rad) 0 0 var(--rad); }
.wp-block-button.csw-acc > .csw-ac-R.bk { border-left-width: 0; border-radius: 0 var(--rad) var(--rad) 0; }
.wp-block-button.csw-acc > .csw-ac-T.bk { border-bottom-width: 0; border-radius: var(--rad) var(--rad) 0 0; }
.wp-block-button.csw-acc > .csw-ac-B.bk { border-top-width: 0; border-radius: 0 0 var(--rad) var(--rad); }
.wp-block-button.csw-acc > .csw-ak { width: var(--L); height: var(--L); background-color: transparent !important; }
.wp-block-button.csw-acc > .csw-ak-TL { top: calc(-1 * var(--off)); left: calc(-1 * var(--off)); border-top-width: var(--th); border-left-width: var(--th); border-top-left-radius: var(--rad); }
.wp-block-button.csw-acc > .csw-ak-TR { top: calc(-1 * var(--off)); right: calc(-1 * var(--off)); border-top-width: var(--th); border-right-width: var(--th); border-top-right-radius: var(--rad); }
.wp-block-button.csw-acc > .csw-ak-BR { bottom: calc(-1 * var(--off)); right: calc(-1 * var(--off)); border-bottom-width: var(--th); border-right-width: var(--th); border-bottom-right-radius: var(--rad); }
.wp-block-button.csw-acc > .csw-ak-BL { bottom: calc(-1 * var(--off)); left: calc(-1 * var(--off)); border-bottom-width: var(--th); border-left-width: var(--th); border-bottom-left-radius: var(--rad); }
.wp-block-button.csw-acc.csw-acc-glow > .csw-ac:not(.bk) { box-shadow: 0 0 8px var(--csw-ach); }
.wp-block-button.csw-acc.csw-acc-glow > :is(.csw-ac.bk, .csw-ak) { filter: drop-shadow(0 0 4px var(--csw-ach)); }
.wp-block-button.csw-acc:hover > :is(.csw-ac, .csw-ak),
body.csw-sim-hover .wp-block-button.csw-acc > :is(.csw-ac, .csw-ak) {
	--L: var(--lenh); --P: var(--posh); background-color: var(--csw-ach); border-color: var(--csw-ach);
}
/* show when: hidden states */
.wp-block-button:is(.csw-acc-show-hover, .csw-acc-show-hoveract) > :is(.csw-ac, .csw-ak) { opacity: 0; }
.wp-block-button:is(.csw-acc-show-hover, .csw-acc-show-hoveract).csw-acc-anim-grow > :is(.csw-ac, .csw-ak) { --L: 0px; --P: var(--pos0); }
.wp-block-button:is(.csw-acc-show-hover, .csw-acc-show-hoveract).csw-acc-anim-slide > :is(.csw-ac, .csw-ak) { --tx: var(--slx); --ty: var(--sly); }
.wp-block-button.csw-acc-show-hoveract.csw-active:not(:hover) > :is(.csw-ac, .csw-ak) { opacity: 1; --L: var(--len); --P: var(--pos); --tx: 0px; --ty: 0px; }
.wp-block-button:is(.csw-acc-show-hover, .csw-acc-show-hoveract):hover > :is(.csw-ac, .csw-ak),
body.csw-sim-hover .wp-block-button:is(.csw-acc-show-hover, .csw-acc-show-hoveract) > :is(.csw-ac, .csw-ak) { opacity: 1; --L: var(--lenh); --P: var(--posh); --tx: 0px; --ty: 0px; }
.wp-block-button.csw-acc-show-active:not(.csw-active) > :is(.csw-ac, .csw-ak) { opacity: 0; }
.wp-block-button.csw-acc-show-active.csw-acc-anim-grow:not(.csw-active) > :is(.csw-ac, .csw-ak) { --L: 0px; --P: var(--pos0); }
.wp-block-button.csw-acc-show-active.csw-acc-anim-slide:not(.csw-active) > :is(.csw-ac, .csw-ak) { --tx: var(--slx); --ty: var(--sly); }

/* ── Interlock for a Buttons group (Pro): each button tucks into the one before it ── */
.wp-block-buttons.csw-lock:not(.is-vertical) > .wp-block-button {
	margin-inline-start: calc(-1 * var(--csw-tuck, 0px) * (1 - var(--cw-stacked, 0)));
}
.wp-block-buttons.csw-lock > .wp-block-button:first-child,
.wp-block-buttons.csw-lock > .wp-block-button.csw-row-first {
	margin-inline-start: 0;
}

/* ── Fade between states ── */
.wp-block-button.csw-fade > .wp-block-button__link {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, clip-path .25s ease, transform .1s ease;
}
/* Unshaped buttons with a gradient in any state: everything else still fades, the background switches
   instantly (shaped buttons fade gradients too, on their own paint) */
.wp-block-button.csw-fade.csw-fade-grad:not(.csw-shaped) > .wp-block-button__link {
	transition-property: color, border-color, box-shadow, clip-path, transform;
}
.wp-block-button.csw-shaped > .wp-block-button__link {
	transition: transform .1s ease, --csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
.wp-block-button.csw-shaped.csw-fade > .wp-block-button__link {
	transition: color .25s ease, clip-path .25s ease, transform .1s ease, -webkit-mask-position .25s ease, mask-position .25s ease,
		--csw-f1 .25s ease, --csw-f2 .25s ease, --csw-fa .25s ease, --csw-t1 .25s ease, --csw-t2 .25s ease, --csw-ta .25s ease,
		--csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
.wp-block-button.csw-ring > .wp-block-button__link::after {
	transition: --csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
.wp-block-button.csw-ring.csw-fade > .wp-block-button__link::after {
	transition: --csw-g1 .25s ease, --csw-g2 .25s ease, --csw-ga .25s ease, clip-path .25s ease,
		--csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
.wp-block-button.csw-fade:is(.csw-shaped, .csw-glow) {
	transition: filter .25s ease;
}
.wp-block-button.csw-tg.csw-fill::before {
	transition: --csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
.wp-block-button.csw-tg.csw-fill.csw-fade::before {
	transition: clip-path .25s ease, --csw-f1 .25s ease, --csw-f2 .25s ease, --csw-fa .25s ease, --csw-fo .3s ease, --csw-mx var(--cw-fdur, 90ms) linear, --csw-my var(--cw-fdur, 90ms) linear;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.csw-fade,
	.wp-block-button.csw-fade > .wp-block-button__link,
	.wp-block-button.csw-fade > .wp-block-button__link::after,
	.wp-block-button.csw-shaped > .wp-block-button__link,
	.wp-block-button.csw-press > .wp-block-button__link,
	.wp-block-button.csw-acc > :is(.csw-ac, .csw-ak),
	.wp-block-button.csw-sl > .csw-pc,
	.wp-block-button.csw-sl > .csw-pc::before,
	.wp-block-button.csw-sl > .csw-pc::after,
	.wp-block-button.csw-tg::before {
		transition: none;
	}
}