/* assets/css/forms.css — Gravity Forms in theme blocks: type, buttons,
   multi-step bars and the fields assets/js/forms.js enhances. Registered as
   the `plinth-forms` style (inc/forms.php) and listed in the block.json of
   every block that renders a form inside a .plinth-form holder (Split · Form,
   Pricing Form), so it loads with them, in the editor too. Unlayered, like
   block CSS, so it out-ranks Gravity Forms' own sheets. Colours, input size
   and radius are passed to Gravity Forms' Orbital theme by
   plinth_gravity_form(); the card around the form is the block's. */
.plinth-form {
	& .gform-theme {
		--gf-font-family-base: var(--wp--preset--font-family--body);
		--gf-font-family-primary: var(--wp--preset--font-family--body);
		--gf-font-family-secondary: var(--wp--preset--font-family--body);
		--gf-font-family-tertiary: var(--wp--preset--font-family--body);
		--gf-ctrl-btn-radius: var(--wp--custom--radius--pill);
		/* Body size, like the site's other inputs: iOS zooms the page into any
		   field whose text is under 16px. */
		--gf-ctrl-font-size: var(--wp--preset--font-size--md);
		--gf-ctrl-label-font-weight-primary: 500;
		--gf-ctrl-shadow: none;
		--gf-form-gap-y: var(--wp--preset--spacing--md);
	}

	/* The phone field's country picker is a Gravity Forms tertiary button, so
	   it picks up the pill button radius and a grey fill: give it the input's
	   corners and fill so the picker and number read as one control. Set as
	   variables — Gravity Forms' own button selectors out-rank plain rules. */
	& .gform-theme .gfield--type-phone {
		--gf-ctrl-btn-radius: var(--gf-ctrl-radius);
		--gf-ctrl-btn-bg-color-tertiary: var(--gf-ctrl-bg-color);
		--gf-ctrl-btn-bg-color-hover-tertiary: var(--gf-ctrl-bg-color);
		--gf-ctrl-btn-bg-color-focus-tertiary: var(--gf-ctrl-bg-color);
		--gf-ctrl-btn-border-color-tertiary: var(--gf-ctrl-border-color);
		--gf-ctrl-btn-border-color-hover-tertiary: var(--gf-ctrl-border-color);
	}

	/* File upload (e.g. a CV): the field's fill with a dashed edge, so it
	   reads as a drop area; the browser's "choose file" button becomes a
	   small Deep Forest pill, Forest on hover. */
	& .gform-theme .gfield--type-fileupload input[type="file"] {
		box-sizing: border-box;
		inline-size: 100%;
		block-size: auto;
		padding: var(--wp--preset--spacing--sm);
		border: 2px dashed color-mix(in srgb, var(--wp--preset--color--secondary) 25%, var(--gf-ctrl-bg-color));
		border-radius: var(--gf-ctrl-radius);
		background: var(--gf-ctrl-bg-color);
		color: var(--gf-ctrl-color);
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.4;
		cursor: pointer;

		&::file-selector-button {
			margin-inline-end: var(--wp--preset--spacing--sm);
			padding: 0.55em 1.2em;
			line-height: 1.2;
			vertical-align: middle;
			border: 0;
			border-radius: var(--wp--custom--radius--pill);
			background: var(--wp--preset--color--secondary);
			color: var(--wp--preset--color--base);
			font: inherit;
			font-weight: 500;
			cursor: pointer;
			transition: background-color var(--wp--custom--transition--fast);
		}

		&:hover {
			border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 50%, var(--gf-ctrl-bg-color));

			&::file-selector-button {
				background: var(--wp--preset--color--primary);
			}
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}
	}

	& .gform-theme .gfield--type-fileupload :is(.gform_fileupload_rules, .gfield_description) {
		font-size: var(--wp--preset--font-size--sm);
	}

	/* Required: a red * (inc/forms.php), in Gravity Forms' own error red. */
	& .gfield_required_asterisk {
		color: var(--gf-color-danger);
		font-size: 1em;
	}

	/* The submit button is a site button (wp-element-button, added in
	   inc/forms.php), so its look comes from theme.json + base.css. */
	& .gform_footer {
		margin-block-start: var(--wp--preset--spacing--md);
		padding: 0;
	}

	/* A full-width submit button; on a multi-step form, Back then a
	   full-width Next or submit. */
	& .gform-theme .gform_footer .wp-element-button {
		inline-size: 100%;
		justify-content: center;
	}

	& .gform-theme .gform_page_footer {
		display: flex;
		gap: var(--wp--preset--spacing--xs);
		margin-block-start: var(--wp--preset--spacing--md);
		padding: 0;

		& .wp-element-button {
			margin: 0;
		}

		& .wp-element-button:not(.gform_previous_button) {
			flex: 1;
			justify-content: center;
		}
	}

	/* Back: an outline, so the step's forward button leads. */
	& .gform-theme .gform_previous_button.wp-element-button {
		box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
		background: transparent;
		color: var(--wp--preset--color--secondary);
	}

	@media (hover: hover) {
		& .gform-theme .gform_previous_button.wp-element-button:hover {
			box-shadow: inset 0 0 0 2px currentColor;
		}
	}

	/* Multi-step progress: a bar per step over its name, green up to and
	   including the current step. The numbers are dropped; the bars order
	   the steps. */
	& .gform-theme .gf_page_steps {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--wp--preset--spacing--xs);
		margin: 0 0 var(--wp--preset--spacing--md);
		padding: 0;
		border: 0;
	}

	/* Each bar is a track (::before) with a fill over it (::after), so the
	   fill can grow or drain when the step changes (view.js). */
	& .gform-theme .gf_step {
		--bar-fill: var(--wp--preset--color--primary);
		position: relative;
		display: block;
		margin: 0;
		padding-block-start: calc(4px + var(--wp--preset--spacing--xs));
		border: 0;
		opacity: 1;
		color: color-mix(in srgb, currentColor 60%, transparent);
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.3;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0 0 auto;
			block-size: 4px;
			border-radius: 2px;
		}

		&::before {
			background: color-mix(in srgb, currentColor 15%, transparent);
		}

		&::after {
			background: var(--bar-fill);
			transform-origin: left;
			scale: 0 1;
		}

		&:is(.gf_step_active, .gf_step_completed) {
			color: inherit;

			&::after {
				scale: 1 1;
			}
		}

		&.gf_step_active {
			font-weight: 600;
		}

		& .gf_step_number {
			display: none;
		}

		& .gf_step_label {
			display: block;
			padding: 0;
			color: inherit;
			font: inherit;
			letter-spacing: normal;
			text-transform: none;
		}
	}

	/* Narrow cards: only the current step is named (running on under the
	   bars to its right); the others keep their names for screen readers. */
	@container (inline-size < 22rem) {
		& .gform-theme .gf_step {
			white-space: nowrap;

			&:not(.gf_step_active) .gf_step_label {
				position: absolute;
				inline-size: 1px;
				block-size: 1px;
				overflow: hidden;
				clip-path: inset(50%);
			}
		}
	}

	/* Between a Next / Back click and the new step (view.js): the step
	   dims and can't be clicked again. While the card's height eases, its
	   content is clipped to it. */
	&.is-changing-step .gform_page {
		opacity: 0.45;
		pointer-events: none;
		transition: opacity var(--wp--custom--transition--fast);
	}

	&.is-resizing {
		overflow: clip;
	}

	/* Show / hide animation (forms.js): a leaving field's copy is laid over
	   its old place in the list, and the list clips while its height eases. */
	& .gform_fields {
		position: relative;

		&.is-resizing {
			overflow: clip;
		}
	}

	/* A <button>, not a link: drop the browser's button border and keep
	   base.css's (layered, so out-ranked) pointer. */
	& .gform-theme .wp-element-button {
		border-style: none;
		cursor: pointer;
	}

	/* Dark cards: required markers and validation text stay readable. */

	/* ---- Enhanced fields (view.js, inc/forms.php) ------------------------ */

	/* Section breaks: a heading over a hairline, with the gap above. */
	& .gform-theme .gsection {
		padding-block-end: var(--wp--preset--spacing--xs);
		border-block-end: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	}

	/* Not above the first one; the hidden honeypot field doesn't count. */
	& .gform-theme .gsection:not(:nth-child(1 of .gfield:not(.gform_validation_container))) {
		margin-block-start: var(--wp--preset--spacing--sm);
	}

	& .gsection_title {
		color: inherit;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 400;
	}

	/* The native controls behind a slider or picker stay in the form, out of
	   sight (Gravity Forms gives selects a display of their own). */
	& .gform-theme :is(.plinth-range, .plinth-platforms) select[hidden] {
		display: none;
	}

	/* plinth-options: tick boxes or radio buttons as a 2 × 2 grid of rounded
	   boxes, each with its choice's icon (assets/icons/choice-{choice}.svg,
	   inc/forms.php). Tick boxes keep the tick box in the corner; radio
	   buttons (pick one) drop theirs, and the border alone marks the
	   choice, with the icon centred over the label. */
	& .gform-theme .plinth-options :is(.gfield_checkbox, .gfield_radio) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xs);
	}

	/* The tick box needs a border of its own: Gravity Forms' input border
	   (and its hover shade) is the box's fill, so it would vanish on hover. */
	& .gform-theme .plinth-options .gchoice {
		--gf-ctrl-border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 30%, transparent);
		--gf-ctrl-border-color-hover: color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent);
		position: relative;
		display: block;
		padding: var(--wp--preset--spacing--sm);
		border: 2px solid var(--gf-ctrl-bg-color);
		border-radius: var(--wp--custom--radius--md);
		background: var(--gf-ctrl-bg-color);
		color: var(--gf-ctrl-color);
		transition: border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast);

		&:has(:checked) {
			border-color: var(--wp--preset--color--primary);
			background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, var(--gf-ctrl-bg-color));
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}

		& .gfield-choice-input {
			position: absolute;
			inset-block-start: var(--wp--preset--spacing--sm);
			inset-inline-end: var(--wp--preset--spacing--sm);
		}

		/* The whole box is the label's hit area. */
		& label {
			display: grid;
			gap: var(--wp--preset--spacing--xs);
			margin: 0;
			color: inherit;
			font-weight: 500;
			cursor: pointer;

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
			}
		}
	}

	& .gform-theme .plinth-options .gfield_radio {
		& .gchoice {
			text-align: center;
		}

		& label {
			justify-items: center;
		}

		& .gfield-choice-input {
			opacity: 0;
		}
	}

	/* plinth-pills: tick boxes or radio buttons as a row of rounded pills,
	   each with its country's round flag (inc/forms.php); the border marks
	   the choice. The input stays in the pill, unseen, for keyboards and
	   screen readers. */
	& .gform-theme .plinth-pills :is(.gfield_checkbox, .gfield_radio) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xxs);
	}

	& .gform-theme .plinth-pills .gchoice {
		position: relative;
		display: flex;
		align-items: center;
		padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
		border: 2px solid color-mix(in srgb, var(--wp--preset--color--secondary) 12%, var(--gf-ctrl-bg-color));
		border-radius: var(--wp--custom--radius--md);
		background: var(--gf-ctrl-bg-color);
		color: var(--gf-ctrl-color);
		transition: border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast);

		&:has(:checked) {
			border-color: var(--wp--preset--color--primary);
			background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--gf-ctrl-bg-color));
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}

		& .gfield-choice-input {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
		}

		/* The whole pill is the label's hit area. */
		& label {
			display: flex;
			align-items: center;
			gap: var(--wp--preset--spacing--xs);
			margin: 0;
			color: inherit;
			font-weight: 500;
			cursor: pointer;

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
			}
		}
	}

	@media (hover: hover) {
		& .gform-theme .plinth-pills .gchoice:hover:not(:has(:checked)) {
			border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 30%, var(--gf-ctrl-bg-color));
		}
	}

	& .plinth-pill__flag {
		flex: none;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: 50%;
		object-fit: cover;
	}

	& .plinth-pill__flag--other {
		color: var(--wp--preset--color--secondary);
	}

	/* plinth-ticks: radio buttons side by side, drawn as tick boxes (a
	   yes / no reads as ticking one), like Gravity Forms' own tick boxes: a
	   White box with a thin border and a Forest tick when on. */
	& .gform-theme .plinth-ticks .gfield_radio {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	}

	& .gform-theme .plinth-ticks .gfield-choice-input {
		border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 30%, transparent);
		border-radius: var(--gf-ctrl-checkbox-check-radius);

		&::before {
			inline-size: 0.875rem;
			block-size: 0.875rem;
			border-radius: 0;
			background: var(--wp--preset--color--primary);
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
		}
	}

	& .gform-theme .plinth-ticks .gform-field-label--type-inline {
		font-weight: 500;
	}

	/* plinth-note: an HTML field as a small print line, e.g. the privacy
	   note above the submit button. */
	& .gform-theme .plinth-note {
		color: color-mix(in srgb, currentColor 72%, transparent);
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.5;

		& a {
			color: inherit;
			text-decoration: underline;
		}
	}

	/* plinth-unit-kg: "kg" at the end of a number field (or of a stepper's
	   middle box). The label still says the unit for screen readers. */
	& .gform-theme .plinth-unit-kg :is(.ginput_container_number:not(:has(.plinth-counter)), .plinth-counter__box) {
		position: relative;

		&::after {
			content: "kg";
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: var(--gf-ctrl-padding-x);
			translate: 0 -50%;
			color: color-mix(in srgb, var(--gf-ctrl-color) 60%, transparent);
			pointer-events: none;
		}

		& input {
			padding-inline-end: calc(var(--gf-ctrl-padding-x) + 2em);
		}
	}

	/* No up/down arrows on unit or stepper fields (no use for decimals like
	   1.5). Gravity Forms draws its own arrows icon; set as variables, since
	   its selectors out-rank plain rules. */
	& .gform-theme :is(.plinth-unit-kg, .plinth-stepper) .ginput_container_number {
		--gf-icon-ctrl-number: none;
		--gf-ctrl-number-spin-btn-appearance: none;
		--gf-ctrl-number-spin-btn-opacity: 0;

		& input {
			appearance: textfield;
		}
	}

	/* plinth-stepper: − [ value ] +. The input is the real control; until
	   it's focused its text is hidden under __value, which rolls (view.js). */
	& .plinth-counter {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: stretch;
		gap: var(--wp--preset--spacing--xs);
	}

	/* No colour fade on the input: its text and __value swap instantly, or
	   both would show for a moment. */
	& .gform-theme .plinth-counter__box input {
		text-align: center;
		transition: none;
	}

	& .plinth-counter__box {
		position: relative;
	}

	/* Centred in the box, like the input's own text, kg or not. */
	& .gform-theme .plinth-unit-kg .plinth-counter__box input {
		padding-inline-start: calc(var(--gf-ctrl-padding-x) + 2em);
	}

	& .plinth-counter__value {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gf-ctrl-color);
		font-family: var(--gf-ctrl-font-family, inherit);
		font-size: var(--gf-ctrl-font-size);
		font-variant-numeric: tabular-nums;
		pointer-events: none;
	}

	& .plinth-counter.has-value:not(.is-editing) .plinth-counter__box input {
		color: transparent;
	}

	& .plinth-counter:is(.is-editing, :not(.has-value)) .plinth-counter__value {
		visibility: hidden;
	}

	& .plinth-counter__button {
		position: relative;
		aspect-ratio: 1;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base);
		cursor: pointer;
		touch-action: manipulation;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);

		/* The − bar, and the + upright on the up button. */
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 50% auto auto 50%;
			inline-size: 0.875rem;
			block-size: 2px;
			border-radius: 1px;
			background: currentColor;
			translate: -50% -50%;
		}

		&.plinth-counter__button--down::after {
			display: none;
		}

		&.plinth-counter__button--up::after {
			rotate: 90deg;
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}

		&:active:not([aria-disabled="true"]) {
			background: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--base);
		}

		/* At the field's limit: a faded Deep Forest. */
		&[aria-disabled="true"] {
			background: color-mix(in srgb, var(--wp--preset--color--secondary) 25%, var(--gf-ctrl-bg-color));
			cursor: default;
		}
	}

	@media (hover: hover) {
		& .plinth-counter__button:hover:not([aria-disabled="true"]) {
			background: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--base);
		}
	}

	/* plinth-no-hint: no "Please enter a number from …" line under a number
	   field with a range. The range is still checked, and a number outside
	   it gets the same text as its error. */
	& .gform-theme .plinth-no-hint .gfield_description.instruction {
		display: none;
	}

	/* Hovering anywhere on the box darkens its tick box, as if hovering it. */
	@media (hover: hover) {
		& .gform-theme .plinth-options .gchoice:hover {
			--gf-ctrl-border-color: var(--gf-ctrl-border-color-hover);
		}
	}

	& .plinth-option__icon {
		inline-size: 2rem;
		block-size: 2rem;
		color: var(--wp--preset--color--primary);
	}

	/* plinth-range: the value over a slider, its ends below. The track is a
	   thick pill (the input itself) with the handle inside it. The green
	   fill runs to the handle's centre (--ratio, 0–1, set by view.js), and a
	   ring of fill round the handle gives it a rounded end. */
	& .plinth-slider {
		--track: var(--gf-ctrl-bg-color);
		--track-size: 2.25rem;
		--inset: 0.25rem;
		--thumb-size: calc(var(--track-size) - 2 * var(--inset));
		--thumb: var(--wp--preset--color--base);
		--fill: var(--wp--preset--color--primary);
		display: grid;
		gap: var(--wp--preset--spacing--xxs);

		&:not(.is-set) {
			--thumb: color-mix(in srgb, var(--wp--preset--color--secondary) 30%, var(--track));
			--fill: var(--track);
		}
	}

	& .plinth-slider__value {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1.2;
		font-variant-numeric: tabular-nums;
	}

	& .plinth-slider__input {
		appearance: none;
		box-sizing: border-box;
		inline-size: 100%;
		block-size: var(--track-size);
		margin: 0;
		padding: 0 var(--inset);
		border-radius: var(--wp--custom--radius--pill);
		background: linear-gradient(
			to right,
			var(--fill) calc(var(--inset) + var(--thumb-size) / 2 + (100% - 2 * var(--inset) - var(--thumb-size)) * var(--ratio, 0)),
			var(--track) 0
		);
		cursor: pointer;

		&::-webkit-slider-runnable-track {
			block-size: 100%;
			background: transparent;
		}

		&::-moz-range-track {
			block-size: 100%;
			background: transparent;
		}

		&::-webkit-slider-thumb {
			appearance: none;
			inline-size: var(--thumb-size);
			block-size: var(--thumb-size);
			margin-block-start: calc((var(--track-size) - var(--thumb-size)) / 2);
			border: 0;
			border-radius: 50%;
			background: var(--thumb);
			box-shadow: 0 0 0 var(--inset) var(--fill);
		}

		&::-moz-range-thumb {
			inline-size: var(--thumb-size);
			block-size: var(--thumb-size);
			border: 0;
			border-radius: 50%;
			background: var(--thumb);
			box-shadow: 0 0 0 var(--inset) var(--fill);
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}
	}

	& .plinth-slider__scale {
		display: flex;
		justify-content: space-between;
		color: color-mix(in srgb, currentColor 72%, transparent);
		font-size: var(--wp--preset--font-size--sm);
	}

	/* plinth-platforms: search box, a floating grouped list, chips below. */
	& .plinth-picker__box {
		position: relative;
	}

	& .plinth-picker__list {
		position: absolute;
		z-index: 10;
		inset-inline: 0;
		inset-block-start: calc(100% + var(--wp--preset--spacing--xxs));
		max-block-size: min(20rem, 60vh);
		padding: var(--wp--preset--spacing--xxs);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--base);
		box-shadow: var(--wp--custom--shadow--lg);
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--md);

		&[hidden],
		& [hidden] {
			display: none;
		}
	}

	& .plinth-picker__heading {
		position: sticky;
		inset-block-start: calc(-1 * var(--wp--preset--spacing--xxs));
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xxs);
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
	}

	& .plinth-picker__option {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--xs);
		border-radius: var(--wp--custom--radius--sm);
		cursor: pointer;

		/* A tick box, filled when chosen. */
		&::before {
			content: "";
			flex: none;
			inline-size: 1.125rem;
			block-size: 1.125rem;
			border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
			border-radius: 4px;
		}

		&[aria-selected="true"]::before {
			border-color: var(--wp--preset--color--primary);
			background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
		}

		&.is-active {
			background: var(--wp--preset--color--tint);
		}
	}

	@media (hover: hover) {
		& .plinth-picker__option:hover {
			background: var(--wp--preset--color--tint);
		}
	}

	& .plinth-picker__empty {
		margin: 0;
		padding: var(--wp--preset--spacing--xs);
		color: color-mix(in srgb, currentColor 72%, transparent);
		font-size: var(--wp--preset--font-size--sm);
	}

	& .plinth-picker__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xxs);
		margin: var(--wp--preset--spacing--xs) 0 0;
		padding: 0;
		list-style: none;

		&:empty {
			display: none;
		}
	}

	& .plinth-picker__chip {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--xxs);
		padding: 0.3em 0.6em 0.3em 0.85em;
		border: 0;
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base);
		font: inherit;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.3;
		cursor: pointer;
		transition: background-color var(--wp--custom--transition--fast);

		/* A drawn ×, so it centres on the text whatever the font's glyph. */
		&::after {
			content: "";
			flex: none;
			inline-size: 0.625em;
			block-size: 0.625em;
			background: currentColor;
			opacity: 0.7;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}
	}

	@media (hover: hover) {
		& .plinth-picker__chip:hover {
			background: var(--wp--preset--color--primary);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		& :is(.plinth-options .gchoice, .plinth-pills .gchoice, .plinth-picker__chip, .plinth-counter__button),
		&.is-changing-step .gform_page {
			transition: none;
		}
	}
}