/*
 * 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-underline: none;
	--sv-button-hover-bg: initial;
	--sv-button-hover-text: initial;
	--sv-button-hover-line: initial;
	--sv-button-hover-filter: none;
	/* Medium (ADR 0111): 48px tall, 16px words, 22px each side, an 18px icon 8px from the words. */
	--sv-button-height: 3rem;
	--sv-button-font: 1rem;
	--sv-button-inline: 1.375rem;
	--sv-button-icon: 1.125rem;
	--sv-button-gap: 0.5rem;
}

/* Sizes (before the looks: a text link keeps no side padding): Small 40px, Large 56px — the same shape. */
.sv-button--size-sm {
	--sv-button-height: 2.5rem;
	--sv-button-font: 0.875rem;
	--sv-button-inline: 1.125rem;
	--sv-button-icon: 1rem;
	--sv-button-gap: 0.375rem;
}

.sv-button--size-lg {
	--sv-button-height: 3.5rem;
	--sv-button-font: 1.125rem;
	--sv-button-inline: 1.75rem;
	--sv-button-icon: 1.25rem;
	--sv-button-gap: 0.625rem;
}

/*
 * 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-button-fill, var(--sv-color-primary))));
	--sv-button-text: var(--sv-button-main-text, var(--sv-button-gradient-text, var(--sv-color-on-primary)));
	/* Where the accent doesn't stand out on the area, its edge (ADR 0108; none on light buttons). */
	--sv-button-line: var(--sv-button-edge, transparent);
	--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).
 * Pointed at, an outline fills with the area's main button look: the accent on the page, light where main buttons
 * are light (dark and colored cards, columns and sections, the recommended Pricing plan) — never the area's own color,
 * which would hide it. The fill covers the edge (border-box), so the edge needs no color of its own.
 */
.sv-button--variant-outline {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
	--sv-button-line: currentColor;
	--sv-button-hover-bg: var(--sv-button-main-bg, var(--sv-color-primary));
	--sv-button-hover-text: var(--sv-button-main-text, var(--sv-color-on-primary));
	--sv-button-hover-line: transparent;
}

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

/*
 * Ghost (ADR 0111): the words in the accent (the Link color, made to read), no fill and no edge — a soft tint of the
 * accent when pointed at. The same size and shape as the others, so it lines up beside them.
 */
.sv-button--variant-ghost {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
	--sv-button-hover-bg: color-mix(in srgb, var(--sv-accent, var(--sv-color-primary)) 12%, transparent);
}

/* A size of one's own (ADR 0082): the words' size, the rest in proportion to it. */
.sv-button--size-custom {
	--sv-button-height: calc(var(--sv-custom-size) * 3);
	--sv-button-font: var(--sv-custom-size);
	--sv-button-inline: calc(var(--sv-custom-size) * 1.375);
	--sv-button-icon: calc(var(--sv-custom-size) * 1.125);
	--sv-button-gap: calc(var(--sv-custom-size) * 0.5);
}

/*
 * 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).
 */
/* Accent color: the site's main button look (the accent, or its gradient) even where the area makes main buttons light. */
.sv-button--color-accent {
	--sv-button-main-bg: var(--sv-button-gradient, var(--sv-button-fill, var(--sv-color-primary)));
	--sv-button-main-text: var(--sv-button-gradient-text, var(--sv-color-on-primary));
	--sv-accent: initial;
}

.sv-button--color-dark {
	--sv-button-main-bg: var(--sv-color-inverse);
	--sv-button-main-text: var(--sv-color-on-inverse);
	--sv-button-edge: initial;
	--sv-accent: var(--sv-color-text);
}

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

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

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

.sv-button--variant-ghost .sv-button__control--custom {
	--sv-button-hover-bg: color-mix(in srgb, var(--sv-button-custom) 12%, transparent);
}

/*
 * 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-button-fill, 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-ghost, .sv-button--variant-text) .sv-button__control--custom[style*="--sv-custom-gradient"] {
	--sv-button-text: var(--sv-accent, var(--sv-color-link));
}

/*
 * The control (ADR 0111): a row centered both ways — words and icons as one group, the gap between them — at least
 * the size's height (its 2px edge inside it), with equal room on both sides. The words have a steady line height, so
 * no font's own spacing moves them; a label too long for one line wraps and the button grows evenly, never by accident.
 */
.sv-button__control {
	display: inline-flex;
	gap: var(--sv-button-gap, 0.5rem);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: var(--sv-button-height, 3rem);
	max-inline-size: 100%;
	padding-block: 0.4em;
	padding-inline: var(--sv-button-inline, 1.375rem);
	border: 2px solid var(--sv-button-line, transparent);
	/* The site's button shape (ADR 0111): one corner for all, or four of its own in the page's direction. */
	border-start-start-radius: var(--sv-radius-button-start-start, var(--sv-radius-button));
	border-start-end-radius: var(--sv-radius-button-start-end, var(--sv-radius-button));
	border-end-end-radius: var(--sv-radius-button-end-end, var(--sv-radius-button));
	border-end-start-radius: var(--sv-radius-button-end-start, 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-family: var(--sv-font-label, var(--sv-font-body));
	font-size: var(--sv-button-font, 1rem);
	font-weight: 600;
	font-synthesis-weight: var(--sv-font-label-synthesis, auto);
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	vertical-align: middle;
	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: var(--sv-font-label, var(--sv-font-body));
	font-size: var(--sv-button-font, 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 text link pointed at: its line gets thicker (ADR 0111). */
.sv-button--variant-text .sv-button__control:hover {
	text-decoration-thickness: 2px;
}

/* Pressed (ADR 0111): the button moves down 1px while held — only one that does something (a link or a real button). */
:is(a, button).sv-button__control:active {
	translate: 0 1px;
}

/*
 * Disabled (ADR 0111): faded and not clickable, with no hover or press. A form sending its message (aria-busy) keeps its
 * own look: the turning ring.
 */
.sv-button__control:is([disabled], [aria-disabled="true"]):not([aria-busy="true"]) {
	cursor: not-allowed;
	filter: none;
	opacity: 0.45;
	translate: 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;
}

/* 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");
}

/* Icons are flex items of the control: their size per button size, the gap between them and the words, never shrunk. */
.sv-button__control--arrow::after {
	display: block;
	flex: none;
	inline-size: calc(var(--sv-button-icon, 1.125rem) - 0.125rem);
	block-size: calc(var(--sv-button-icon, 1.125rem) - 0.125rem);
	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: block;
	flex: none;
	inline-size: var(--sv-button-icon, 1.125rem);
	block-size: var(--sv-button-icon, 1.125rem);
	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-end::before {
	content: none;
}

/* 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: block;
	flex: none;
	box-sizing: border-box;
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-block-start-color: currentcolor;
	border-radius: 50%;
	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;
	}
}

/* Width per device (ADR 0120): Fill spreads the button (and a second one beside it); Fit gives it back its own width. */
@media (max-width: 1024px) {
	.sv-button.sv-t-w-fill .sv-button__control { inline-size: 100%; }
	.sv-button.sv-t-w-fill .sv-button__group { display: flex; }
	.sv-button.sv-t-w-fill .sv-button__group > * { flex: 1 1 12rem; }
	.sv-button.sv-t-w-fit .sv-button__control { inline-size: auto; }
	.sv-button.sv-t-w-fit .sv-button__group { display: inline-flex; }
	.sv-button.sv-t-w-fit .sv-button__group > * { flex: 0 1 auto; }
}

@media (max-width: 767px) {
	.sv-button.sv-m-w-fill .sv-button__control { inline-size: 100%; }
	.sv-button.sv-m-w-fill .sv-button__group { display: flex; }
	.sv-button.sv-m-w-fill .sv-button__group > * { flex: 1 1 12rem; }
	.sv-button.sv-m-w-fit .sv-button__control { inline-size: auto; }
	.sv-button.sv-m-w-fit .sv-button__group { display: inline-flex; }
	.sv-button.sv-m-w-fit .sv-button__group > * { flex: 0 1 auto; }
}