/* ============================================================
   Button styles — registered in includes/blocks.php

   Five looks for the core Button block, picked from the Styles
   panel in the block sidebar: Primary, Secondary, Arrow link,
   Quiet and Text link. The same shapes as .sq-cta / .sq-btn /
   .sq-textlink in _squibble.scss.

   Quiet and Arrow link take a colour from the block's Background
   colour picker (Styles > Color): it becomes the arrow circle and the
   hover pill rather than filling the button. See "Circle colour"
   at the end of this file.

   Loads in the editor as well as on the site, and the editor
   doesn't have the theme's variables, so every value carries its
   hex as a fallback. Ink follows --sq-ink, which the theme sets to
   plum on light bands and off-white on dark ones.
   ============================================================ */

/* ---- Shared ------------------------------------------------- */

.wp-block-button[class*="is-style-sq-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	border: 0;
	font-family: var(--sq-font-body, "DM Sans", Helvetica, Arial, sans-serif);
	font-size: var(--sq-fs-body, 16px);
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease, padding 180ms ease;
}

/* The arrow circle, on every style but Text link. */
.wp-block-button.is-style-sq-primary .wp-block-button__link::before,
.wp-block-button.is-style-sq-secondary .wp-block-button__link::before,
.wp-block-button.is-style-sq-arrow .wp-block-button__link::before,
.wp-block-button.is-style-sq-quiet .wp-block-button__link::before {
	content: "\2192";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	font-size: 17px;
	transition: transform 200ms ease, background 180ms ease, color 180ms ease;
}

.wp-block-button[class*="is-style-sq-"] .wp-block-button__link:active {
	transform: scale(0.97);
}

/* ---- Primary: purple pill, white circle ---------------------- */

.wp-block-button.is-style-sq-primary .wp-block-button__link {
	gap: 14px;
	padding: 6px 24px 6px 6px;
	border-radius: 999px;
	background: var(--sq-purple, #5945A1);
	color: var(--sq-offwhite, #FFFAF4);
}

.wp-block-button.is-style-sq-primary .wp-block-button__link::before {
	background: var(--sq-offwhite, #FFFAF4);
	color: var(--sq-purple, #5945A1);
}

.wp-block-button.is-style-sq-primary .wp-block-button__link:hover,
.wp-block-button.is-style-sq-primary .wp-block-button__link:focus-visible {
	background: var(--sq-pink, #FFA0E3);
	color: var(--sq-plum, #462139);
	transform: translateY(-2px);
}

.wp-block-button.is-style-sq-primary .wp-block-button__link:hover::before,
.wp-block-button.is-style-sq-primary .wp-block-button__link:focus-visible::before {
	background: var(--sq-plum, #462139);
	color: var(--sq-offwhite, #FFFAF4);
}

/* ---- Secondary: pink pill, plum circle ----------------------- */

.wp-block-button.is-style-sq-secondary .wp-block-button__link {
	gap: 14px;
	padding: 6px 24px 6px 6px;
	border-radius: 999px;
	background: var(--sq-pink, #FFA0E3);
	color: var(--sq-plum, #462139);
}

.wp-block-button.is-style-sq-secondary .wp-block-button__link::before {
	background: var(--sq-plum, #462139);
	color: var(--sq-offwhite, #FFFAF4);
}

.wp-block-button.is-style-sq-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-sq-secondary .wp-block-button__link:focus-visible {
	background: var(--sq-offwhite, #FFFAF4);
	color: var(--sq-plum, #462139);
	transform: translateY(-2px);
}

/* ---- Arrow link: pink circle and a label, no pill ------------- */

.wp-block-button.is-style-sq-arrow .wp-block-button__link {
	gap: 12px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sq-ink, #462139);
}

.wp-block-button.is-style-sq-arrow .wp-block-button__link::before {
	background: var(--sq-pick, var(--sq-pink, #FFA0E3));
	color: var(--sq-pick-ink, var(--sq-plum, #462139));
}

/* The circle nudges; the label stays put. */
.wp-block-button.is-style-sq-arrow .wp-block-button__link:hover::before,
.wp-block-button.is-style-sq-arrow .wp-block-button__link:focus-visible::before {
	transform: translateX(4px);
}

/* ---- Quiet: small purple circle, pill only on hover ----------- */

.wp-block-button.is-style-sq-quiet .wp-block-button__link {
	/* Nudged left so the circle lines up with text above it. A negative
	   margin here would shrink the button and wrap the label. */
	position: relative;
	left: -4px;
	gap: 11px;
	padding: 4px 16px 4px 4px;
	border-radius: 999px;
	background: transparent;
	color: var(--sq-ink, #462139);
}

.wp-block-button.is-style-sq-quiet .wp-block-button__link::before {
	width: 36px;
	height: 36px;
	background: var(--sq-pick, var(--sq-purple, #5945A1));
	color: var(--sq-pick-ink, var(--sq-offwhite, #FFFAF4));
}

/* !important to hold over the transparent fill below when a colour is
   picked, which itself has to beat core's !important preset class. */
.wp-block-button.is-style-sq-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-sq-quiet .wp-block-button__link:focus-visible {
	padding-right: 24px;
	background: var(--sq-pick, var(--sq-purple, #5945A1)) !important;
	color: var(--sq-pick-ink, var(--sq-offwhite, #FFFAF4));
}

/* ---- Text link: bold label, line arrow after ------------------ */

.wp-block-button.is-style-sq-textlink .wp-block-button__link {
	gap: 8px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sq-purple, #5945A1);
	font-size: var(--sq-fs-small, 14.5px);
	line-height: 1.3;
}

.wp-block-button.is-style-sq-textlink .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.05em;
	line-height: 1;
	transition: transform 180ms ease;
}

.wp-block-button.is-style-sq-textlink .wp-block-button__link:hover,
.wp-block-button.is-style-sq-textlink .wp-block-button__link:focus-visible {
	color: var(--sq-orange, #FF9466);
}

.wp-block-button.is-style-sq-textlink .wp-block-button__link:hover::after,
.wp-block-button.is-style-sq-textlink .wp-block-button__link:focus-visible::after {
	transform: translateX(3px);
}

/* Purple doesn't read on plum, so dark bands take pink - but a white
   card sitting on a dark band goes back to purple. */
.sq-dark .wp-block-button.is-style-sq-textlink .wp-block-button__link,
.sq-card--dark .wp-block-button.is-style-sq-textlink .wp-block-button__link {
	color: var(--sq-pink, #FFA0E3);
}

.sq-dark .wp-block-button.is-style-sq-textlink .wp-block-button__link:hover,
.sq-card--dark .wp-block-button.is-style-sq-textlink .wp-block-button__link:hover {
	color: var(--sq-offwhite, #FFFAF4);
}

.sq-dark .sq-card:not(.sq-card--dark) .wp-block-button.is-style-sq-textlink .wp-block-button__link {
	color: var(--sq-purple, #5945A1);
}

.sq-dark .sq-card:not(.sq-card--dark) .wp-block-button.is-style-sq-textlink .wp-block-button__link:hover {
	color: var(--sq-orange, #FF9466);
}

/* ---- Circle colour: Quiet and Arrow link --------------------- */
/* Picking a Background colour on the Button block adds core's
   has-{colour}-background-color class to the link, with an !important
   fill. On these two styles the colour goes to the circle (and Quiet's
   hover pill) instead, so the fill is cleared and the colour handed on
   as --sq-pick, with an arrow colour that reads on it. Purple is the
   Quiet default and pink the Arrow default, so neither needs picking. */

.wp-block-button.is-style-sq-quiet .wp-block-button__link.has-background,
.wp-block-button.is-style-sq-arrow .wp-block-button__link.has-background {
	background-color: transparent !important;
}

.wp-block-button[class*="is-style-sq-"] .has-purple-background-color    { --sq-pick: #5945A1; --sq-pick-ink: #FFFAF4; }
.wp-block-button[class*="is-style-sq-"] .has-plum-background-color      { --sq-pick: #462139; --sq-pick-ink: #FFFAF4; }
.wp-block-button[class*="is-style-sq-"] .has-plum-deep-background-color { --sq-pick: #3A1A2F; --sq-pick-ink: #FFFAF4; }
.wp-block-button[class*="is-style-sq-"] .has-pink-background-color      { --sq-pick: #FFA0E3; --sq-pick-ink: #462139; }
.wp-block-button[class*="is-style-sq-"] .has-orange-background-color    { --sq-pick: #FF9466; --sq-pick-ink: #462139; }
.wp-block-button[class*="is-style-sq-"] .has-blue-background-color      { --sq-pick: #A0E8FF; --sq-pick-ink: #462139; }
.wp-block-button[class*="is-style-sq-"] .has-yellow-background-color    { --sq-pick: #F9DB88; --sq-pick-ink: #462139; }
.wp-block-button[class*="is-style-sq-"] .has-offwhite-background-color  { --sq-pick: #FFFAF4; --sq-pick-ink: #462139; }
.wp-block-button[class*="is-style-sq-"] .has-white-background-color     { --sq-pick: #FFFFFF; --sq-pick-ink: #462139; }