/*
 * A look sets its colors as variables on the button's wrapper (.sv-button), so a second
 * button inside it, with a wrapper of its own, keeps its own look (ADR 0026). Styles that
 * adapt a look elsewhere (a call to action, dark cards) change these variables or the
 * control's properties.
 */
.sv-button {
	--sv-button-bg: transparent;
	--sv-button-text: currentColor;
	--sv-button-line: transparent;
	--sv-button-inline: 1.4em;
	--sv-button-underline: none;
	--sv-button-hover-bg: initial;
	--sv-button-hover-text: initial;
	--sv-button-hover-line: initial;
	--sv-button-hover-filter: none;
}

/* Sizes (before the looks: a text link keeps no side padding). */
.sv-button--size-sm .sv-button__control {
	font-size: 0.875rem;
}

.sv-button--size-lg {
	--sv-button-inline: 1.8em;
}

.sv-button--size-lg .sv-button__control {
	font-size: 1.125rem;
	padding-block: 0.9em;
}

/*
 * On a dark or colored background the nearest one makes it light (--sv-button-main-*, utilities.css).
 * Buttons and links take the site's Accent color (ADR 0046; Buttons & links, ADR 0039, is retired) — or, chosen in
 * Colors & fonts, one of the site's gradients with its words (--sv-button-gradient, ADR 0105); a light button on a
 * dark or colored area stays light. (--sv-button-bg may be a gradient: the control paints it with `background`.)
 */
.sv-button--variant-primary {
	--sv-button-bg: var(--sv-button-main-bg, var(--sv-button-gradient, var(--sv-color-primary)));
	--sv-button-text: var(--sv-button-main-text, var(--sv-button-gradient-text, var(--sv-color-on-primary)));
	--sv-button-hover-filter: brightness(0.92);
}

.sv-button--variant-secondary {
	--sv-button-bg: var(--sv-color-secondary);
	--sv-button-text: var(--sv-color-on-secondary);
	--sv-button-hover-filter: brightness(0.92);
}

/* Outline and text links show words in the accent: the Link color, worked out to read on the page (ADR 0072, 0102). */
.sv-button--variant-outline {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
	--sv-button-line: currentColor;
	--sv-button-hover-bg: var(--sv-color-primary);
	--sv-button-hover-text: var(--sv-color-on-primary);
	--sv-button-hover-line: var(--sv-color-primary);
}

.sv-button--variant-text {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
	--sv-button-inline: 0;
	--sv-button-underline: underline;
}

/* A size of one's own (ADR 0082). */
.sv-button--size-custom .sv-button__control {
	font-size: var(--sv-custom-size);
}

/*
 * Color (ADR 0082): Dark or White instead of the Accent color — a main button's fill with the text that
 * reads on it, an outline's or a text link's color; Custom: one's own (the look it stands in for gives
 * the text, ADR 0070).
 */
.sv-button--color-dark {
	--sv-button-main-bg: var(--sv-color-inverse);
	--sv-button-main-text: var(--sv-color-on-inverse);
	--sv-accent: var(--sv-color-text);
}

.sv-button--color-light {
	--sv-button-main-bg: #fff;
	--sv-button-main-text: #10131c;
	--sv-accent: #fff;
}

.sv-button--variant-primary .sv-button__control--custom {
	--sv-button-bg: var(--sv-button-custom);
}

.sv-button:is(.sv-button--variant-outline, .sv-button--variant-text) .sv-button__control--custom {
	--sv-button-text: var(--sv-button-custom);
}

/*
 * A gradient turns half way round when pointed at (ADR 0105): its colors change places, smoothly. It is drawn from its
 * colors and angle (--sv-button-gradient-stops/-angle, the site's main buttons; --sv-custom-gradient-*, a button's own)
 * so the angle can move; one from the middle has no angle and keeps its look. A light button on a dark or colored area
 * (--sv-button-main-bg) stays as it is.
 */
@property --sv-button-turn {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* Its own control only (a second button in its group has its own look); no weight, so a Custom color still wins. */
:where(.sv-button--variant-primary, .sv-button--variant-primary > .sv-button__group) > .sv-button__control {
	--sv-button-turning: linear-gradient(calc(var(--sv-button-gradient-angle) + var(--sv-button-turn)), var(--sv-button-gradient-stops));
	--sv-button-bg: var(--sv-button-main-bg, var(--sv-button-turning, var(--sv-button-gradient, var(--sv-color-primary))));
}

:where(.sv-button--variant-primary, .sv-button--variant-primary > .sv-button__group) > :is(a, button).sv-button__control:hover {
	--sv-button-turn: 180deg;
}

/* One of the site's gradients of its own (ADR 0105): a filled button's fill; an outline or text link keeps its words. */
.sv-button--variant-primary .sv-button__control--custom[style*="--sv-custom-gradient"] {
	--sv-button-turning: linear-gradient(calc(var(--sv-custom-gradient-angle) + var(--sv-button-turn)), var(--sv-custom-gradient-stops));
	--sv-button-bg: var(--sv-button-turning, var(--sv-custom-gradient));
}

.sv-button:is(.sv-button--variant-outline, .sv-button--variant-text) .sv-button__control--custom[style*="--sv-custom-gradient"] {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
}

/* inline-block (a block container) so text-box trimming below can apply. */
.sv-button__control {
	display: inline-block;
	padding-block: 0.75em;
	padding-inline: var(--sv-button-inline, 1.4em);
	border: 2px solid var(--sv-button-line, transparent);
	border-radius: var(--sv-radius-button);
	/* border-box: a gradient fills the whole button, under its border too (no strip of its far end at the edges). */
	background: var(--sv-button-bg, transparent) border-box;
	color: var(--sv-button-text, currentColor);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: var(--sv-button-underline, none);
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease, --sv-button-turn 0.5s ease;
}

/*
 * A real <button> (form buttons: Send, Subscribe, the sign-up pop-up's Close): the site's font and size,
 * like a link button — browsers give buttons a system font of their own. Weight and line height stay.
 */
button.sv-button__control {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

.sv-button__control:hover {
	border-color: var(--sv-button-hover-line, var(--sv-button-line, transparent));
	background: var(--sv-button-hover-bg, var(--sv-button-bg, transparent)) border-box;
	color: var(--sv-button-hover-text, var(--sv-button-text, currentColor));
	filter: var(--sv-button-hover-filter, none);
}

/*
 * A button without a link (ADR 0102) does nothing for visitors, so it doesn't look as if it would: no hand
 * pointer, no hover change. The editor says it needs a link.
 */
span.sv-button__control {
	cursor: default;
}

span.sv-button__control:hover {
	border-color: var(--sv-button-line, transparent);
	background: var(--sv-button-bg, transparent) border-box;
	color: var(--sv-button-text, currentColor);
	filter: none;
}

span.sv-button__control.sv-button__control--arrow:hover::after {
	translate: none;
}

.sv-button__control:focus-visible {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 3px;
}

/* In a row of a column arranged side by side, a button fits its text (ADR 0028). */
:where(.sv-button) {
	--sv-row-grow: 0;
	--sv-row-basis: auto;
	--sv-row-min: 0px;
}

/* A bit more room above a button than between paragraphs ("Space above" wins). */
:where(.sv-column > .sv-button:not(:first-child)) {
	margin-block-start: var(--sv-space-xs);
}

.sv-button.sv-w-fill .sv-button__control {
	inline-size: 100%;
}

/* A second button next to the first (ADR 0026): side by side, one under the other when there is no room. */
.sv-button__group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	max-inline-size: 100%;
	vertical-align: top;
}

.sv-button.sv-w-fill .sv-button__group {
	display: flex;
}

.sv-button.sv-w-fill .sv-button__group > * {
	flex: 1 1 12rem;
}

/* Trim the font's built-in space above capitals and below the baseline, so the
   label sits in the optical middle whatever the font. A small nudge up keeps
   lowercase labels ("contact us") centered too. Older browsers keep the
   line-height version above. */
@supports (text-box: trim-both cap alphabetic) {
	.sv-button__control {
		--sv-button-pad: 1.05em;
		padding-block: calc(var(--sv-button-pad) - 0.08em) calc(var(--sv-button-pad) + 0.08em);
		text-box: trim-both cap alphabetic;
	}

	.sv-button--size-lg .sv-button__control {
		--sv-button-pad: 1.2em;
	}
}

/* Optional arrow after the label; points in the reading direction. */
.sv-button__control--arrow {
	--sv-button-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.sv-button__control--arrow::after {
	display: inline-block;
	inline-size: 0.95em;
	block-size: 0.95em;
	margin-inline-start: 0.5em;
	vertical-align: -0.12em;
	background-color: currentColor;
	content: "";
	-webkit-mask: var(--sv-button-arrow) center / contain no-repeat;
	mask: var(--sv-button-arrow) center / contain no-repeat;
	transition: translate 0.15s ease;
}

.sv-button__control--arrow:hover::after {
	translate: 0.2em 0;
}

[dir="rtl"] .sv-button__control--arrow::after {
	scale: -1 1;
}

[dir="rtl"] .sv-button__control--arrow:hover::after {
	translate: -0.2em 0;
}

/*
 * An icon of one's own (ADR 0095): before the words, or after them — then in the arrow's place (with both,
 * the icon shows). Its drawing is --sv-glyph, from the icon's sv-glyph-<name> class on the same element.
 */
.sv-button__control--icon::before,
.sv-button__control--icon-end::after {
	display: inline-block;
	inline-size: 1.1em;
	block-size: 1.1em;
	vertical-align: -0.18em;
	background-color: currentColor;
	content: "";
	-webkit-mask: var(--sv-glyph) center / contain no-repeat;
	mask: var(--sv-glyph) center / contain no-repeat;
}

.sv-button__control--icon::before {
	margin-inline-end: 0.5em;
}

.sv-button__control--icon-end::before {
	content: none;
}

.sv-button__control--icon-end::after {
	margin-inline-start: 0.5em;
}

/* An icon isn't a direction: it doesn't turn round on right-to-left sites as the arrow does. */
[dir="rtl"] .sv-button__control--icon-end::after {
	scale: none;
}

/* Sending (a visitor's form, its script): a ring turning in the words' color, before them. */
.sv-button__spin {
	display: inline-block;
	box-sizing: border-box;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: 0.5em;
	border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-block-start-color: currentcolor;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: sv-button-spin 0.75s linear infinite;
}

.sv-button__control[aria-busy="true"] {
	cursor: progress;
}

@keyframes sv-button-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-button__control--arrow::after {
		transition: none;
	}

	.sv-button__spin {
		animation-duration: 2s;
	}

	/* The gradient's turn: at once. */
	.sv-button__control {
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
	}
}