/*
 * Tom Select, skinned to match .lp-control.
 *
 * Tom Select replaces the <select> with its own markup, so the control's
 * chrome has to move onto .ts-wrapper. The state selectors differ from the
 * plain control for the same reason: there is no :placeholder-shown to read,
 * so emptiness comes from Tom Select's own .has-items class, and focus from
 * .focus rather than :focus-within.
 *
 * Load after tom-select's base stylesheet.
 */

.lp-select {
	--lp-edge: var(--lp-edge-empty);
	--lp-edge-size: var(--lp-edge-width);

	/* Reserves the chevron's corner; the vendor sets padding-right !important. */
	--ts-pr-min: 28px;

	font-family: var(--lp-font);
}

/* Tom Select's own resets that fight the design. */
.lp-select.ts-wrapper.single .ts-control,
.lp-select .ts-control {
	min-height: var(--lp-control-height);
	padding: var(--lp-control-pad-y) var(--lp-control-pad-x);
	/* The trailing chevron stays inside this select, while help remains a
	   sibling in the shared .lp-control. */
	padding-right: calc(var(--lp-control-pad-x) * 2 + var(--lp-icon-sm));
	border: 0;
	border-radius: 0;
	background: var(--lp-surface-empty);
	box-shadow: inset 0 0 0 var(--lp-edge-size) var(--lp-edge);
	font-size: var(--lp-text-md);
	line-height: var(--lp-text-md-line);
	color: var(--lp-ink);
}

/* The vendor puts a border back on while the menu is open; outweigh it. */
.lp-select.plugin-dropdown_input.focus.dropdown-active .ts-control {
	border: 0;
}

.lp-select.has-items .ts-control {
	--lp-edge: var(--lp-edge-filled);
	background: var(--lp-surface);
}

.lp-select.focus .ts-control {
	--lp-edge: var(--lp-accent);
	--lp-edge-size: var(--lp-edge-width-focus);
	background: var(--lp-surface);
}

/* Preview-only forced focus follows the same 2px Figma edge as live focus. */
.forced .lp-select .ts-control {
	--lp-edge: var(--lp-accent);
	--lp-edge-size: var(--lp-edge-width-focus);
	background: var(--lp-surface);
}

.lp-field--error .lp-select .ts-control {
	--lp-edge: var(--lp-danger-subtle);
	background: var(--lp-surface);
}

.lp-field--error .lp-select.focus .ts-control {
	--lp-edge: var(--lp-danger);
	--lp-edge-size: var(--lp-edge-width-focus);
}

.lp-select.disabled .ts-control {
	--lp-edge: var(--lp-edge-disabled);
	background: var(--lp-surface);
	opacity: var(--lp-disabled-opacity);
}

.lp-select .ts-control input::placeholder {
	color: var(--lp-ink-placeholder);
	opacity: 1;
}

/* Tom Select inserts a search input even in a single-select control. It is
   functionally useful, but must be visually chrome-free inside this design. */
.lp-select .ts-control > input,
.lp-select .ts-control > input:focus {
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	font: inherit !important;
	line-height: inherit !important;
}

/* The chevron, drawn where the native control has its own trailing block. */
.lp-select .ts-control::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--lp-control-pad-x) - 8px);
	width: 9.75px;
	height: 5.75px;
	margin: 0;
	border: 0;
	transform: translateY(-50%);
	background: url("icons/chevron-down.svg") no-repeat center / contain;
}

.lp-select.dropdown-active .ts-control::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Chosen values, as the design's Badge — md, brand, with the close X. */
.lp-select:not(.single) .ts-control > .item {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-xxs);
	margin: 0;
	padding: var(--lp-space-xxs) var(--lp-space-xs) var(--lp-space-xxs) var(--lp-space-md);
	/* remove_button zeroes this with !important. */
	padding-right: var(--lp-space-xs) !important;
	border: var(--lp-edge-width) solid var(--lp-badge-edge);
	border-radius: var(--lp-radius-pill);
	background: var(--lp-surface-option-chosen);
	font-size: var(--lp-text-sm);
	line-height: var(--lp-text-sm-line);
	max-width: 100%;
	font-weight: var(--lp-weight-medium);
	letter-spacing: 0.14px;
	color: var(--lp-accent);
}

/* Truncate rather than wrap: a two-line pill reads as a box. Full text on hover. */
.lp-pill__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tom Select writes a literal "×"; the design has a vector. */
.lp-select:not(.single) .ts-control > .item .remove {
	display: flex;
	padding: var(--lp-space-xxs);
	border: 0;
	border-radius: 3px;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}

.lp-select:not(.single) .ts-control > .item .remove::before {
	content: "";
	width: 12px;
	height: 12px;
	background: url("icons/badge-close.svg") no-repeat center / 7.5px;
}

/*
 * Summary variant: the control says how many options are chosen and the chosen
 * ones are pills in .lp-tags underneath it. Tom Select can only render its items
 * inside the control, so they are hidden and ui/select.js mirrors them out. The
 * class is added by that same code, so the items never vanish without a summary
 * standing in for them.
 */
/* :not(.single) to outweigh the in-control pill rules above, which are more
   specific than this needs to be and would otherwise keep the items visible. */
.lp-select--summary:not(.single) .ts-control > .item {
	display: none;
}

/*
 * The vendor paints every direct div child of a multi control as one of its own
 * pills — grey fill, its own margin, padding and cursor. The summary is a div in
 * exactly that position, so it has to say otherwise, and loudly enough:
 * `.ts-wrapper.multi .ts-control > div` is three classes and an element.
 */
.lp-select--summary.ts-wrapper .ts-control > .lp-summary {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	gap: var(--lp-space-md);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	background: none;
	color: inherit;
}

/*
 * dropdown_input leaves a full-width input in the control as its placeholder,
 * and the vendor only hides it once something is chosen. The summary already
 * says what it would say, and at width:100% it wraps the control onto a second
 * line — which is the whole of the control's extra height when nothing is
 * chosen. It carries tabindex="-1", so nothing is lost by taking it out.
 *
 * !important only because the vendor's own `.ts-control > input` rule is
 * `display: inline-block !important`, which nothing else can outrank.
 */
.lp-select--summary .ts-control > input.items-placeholder {
	display: none !important;
}

.lp-summary__label,
.lp-summary__placeholder {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-summary__placeholder {
	color: var(--lp-ink-placeholder);
}

/*
 * Focus on a drop-down is the design system's ring, not a heavier edge — the
 * same two shadows .lp-choice__input already uses, which is what --lp-accent-ring
 * was added for. The edge keeps its resting weight so nothing shifts when the
 * menu opens, and this outranks .lp-control:focus-within, which would otherwise
 * paint the 2px accent edge a text input gets.
 */
.lp-control:has(.lp-select.focus) {
	--lp-edge: var(--lp-edge-filled);
	--lp-edge-size: var(--lp-edge-width);

	box-shadow:
		inset 0 0 0 var(--lp-edge-size) var(--lp-edge),
		0 0 0 2px var(--lp-surface),
		0 0 0 4px var(--lp-accent-ring);
}

/* The chosen options, in a box of their own under the control. */
.lp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-space-sm);
	box-sizing: border-box;
	width: 100%;
	padding: var(--lp-textarea-pad-y) var(--lp-textarea-pad-x);
	border: var(--lp-edge-width) solid var(--lp-edge-filled);
	background: var(--lp-surface);
}

/* display:flex above is an author rule and would otherwise beat the UA's
   [hidden], leaving an empty bordered box under every unanswered field. */
.lp-tags[hidden] {
	display: none;
}

/* Badge -------------------------------------------------------------------
 *
 * One shape, two colourways: neutral for the count in the control, brand for a
 * chosen option. Each takes its own × export rather than one file recoloured —
 * the brand icon carries stroke-opacity 0.56, which a mask would apply as alpha
 * and wash the neutral one out.
 */
.lp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-xxs);
	max-width: 100%;
	padding: var(--lp-space-xxs) var(--lp-space-xs) var(--lp-space-xxs) var(--lp-space-md);
	border: var(--lp-edge-width) solid transparent;
	border-radius: var(--lp-radius-pill);
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-medium);
	line-height: var(--lp-text-sm-line);
	letter-spacing: 0.14px;
}

.lp-badge--count {
	flex: none;
	border-color: var(--lp-badge-edge-neutral);
	background: var(--lp-surface-option-hover);
	color: var(--lp-ink-option);
}

.lp-badge--tag {
	border-color: var(--lp-badge-edge);
	background: var(--lp-surface-option-chosen);
	color: var(--lp-accent);
}

.lp-badge__remove {
	display: flex;
	flex: none;
	padding: var(--lp-space-xxs);
	border: 0;
	border-radius: 3px;
	background: none;
	cursor: pointer;
}

.lp-badge__remove::before {
	content: "";
	width: 12px;
	height: 12px;
}

.lp-badge--count .lp-badge__remove::before {
	background: url("icons/badge-close-neutral.svg") no-repeat center / 7.5px;
}

.lp-badge--tag .lp-badge__remove::before {
	background: url("icons/badge-close.svg") no-repeat center / 7.5px;
}

/* The menu. */
.lp-select .ts-dropdown {
	margin: var(--lp-space-xs) 0 0;
	border: var(--lp-edge-width) solid var(--lp-edge-menu);
	border-radius: 0;
	background: var(--lp-surface);
	box-shadow: var(--lp-shadow-lg);
	font-size: var(--lp-text-md);
	line-height: var(--lp-text-md-line);
	color: var(--lp-ink);
}

.lp-select .ts-dropdown .option {
	padding: var(--lp-space-md) var(--lp-space-lg);
}

.lp-select .ts-dropdown .active {
	background: var(--lp-surface-option-hover);
	color: var(--lp-ink);
}

.lp-select .ts-dropdown .selected {
	color: var(--lp-ink);
}

.lp-select .ts-dropdown .no-results {
	padding: var(--lp-control-pad-y) var(--lp-control-pad-x);
	color: var(--lp-ink-placeholder);
}

/* Static wrapper, so the menu measures against .lp-control rather than the
   inner box. .ts-control stays relative, keeping the chevron. */
.lp-control:has(> .lp-select--basic) {
	position: relative;
}

.lp-control > .lp-select--basic {
	position: static;
}

.lp-control > .lp-select--basic .ts-dropdown {
	left: 0;
	right: 0;
	width: auto;
	margin-top: var(--lp-space-xs);
}

/* Eight whole rows; the vendor's 200px cut one in half. */
.lp-select .ts-dropdown-content {
	max-height: calc(8 * (var(--lp-text-sm-line) + var(--lp-space-md) * 2));
	scrollbar-width: thin;
	scrollbar-color: var(--lp-scrollbar) transparent;
}

/* WebKit ignores scrollbar-color. */
.lp-select .ts-dropdown-content::-webkit-scrollbar {
	width: 12px;
}

.lp-select .ts-dropdown-content::-webkit-scrollbar-track {
	background: transparent;
}

.lp-select .ts-dropdown-content::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 9999px;
	background: var(--lp-scrollbar) content-box;
}

/* The multi-choice menu -------------------------------------------------- */

/* dropdown_input moves the search box into the menu head, where the design has it. */
.lp-select .ts-dropdown .dropdown-input-wrap {
	padding: var(--lp-space-lg);
	border-bottom: var(--lp-edge-width) solid var(--lp-edge-menu-inner);
}

.lp-select .ts-dropdown .dropdown-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--lp-control-height);
	padding: 0 var(--lp-control-pad-x) 0 40px;
	border: var(--lp-edge-width) solid var(--lp-edge-empty);
	border-radius: 0;
	outline: 0;
	/*
	 * 16.6667px, not --lp-icon-md. The loupe sits in a 20px slot in Figma but
	 * its artwork is 15px inset plus the stroke overflow, which is what the
	 * export measures — drawing that at 20px scales the glyph up by a fifth.
	 * The offset centres the artwork in the slot the 13px padding opens.
	 */
	background-color: #fcfcfc;
	background-image: url("icons/search.svg");
	background-repeat: no-repeat;
	background-position: left 14.6667px center;
	background-size: 16.6667px;
	font: inherit;
	color: var(--lp-ink);
}

.lp-select .ts-dropdown .dropdown-input::placeholder {
	color: var(--lp-ink-placeholder);
	opacity: 1;
}

/* Rows state themselves in ink as well as ground. The row is not a flex
   container: the search highlight splits the label into a span plus a text
   node, and each would become its own flex item with a gap between them.
   A hanging indent does the aligning instead: the padding clears the checkbox
   and the negative indent pulls the first line back over it, so a label that
   wraps keeps its later lines beside the box rather than under it. */
.lp-select.multi .ts-dropdown .option {
	padding: var(--lp-space-md) var(--lp-space-lg) var(--lp-space-md)
		calc(var(--lp-space-lg) + var(--lp-box-sm) + var(--lp-space-md));
	text-indent: calc(-1 * (var(--lp-box-sm) + var(--lp-space-md)));
	font-size: var(--lp-text-sm);
	line-height: var(--lp-text-sm-line);
	font-weight: var(--lp-weight-medium);
	letter-spacing: 0.14px;
	color: var(--lp-ink-option-idle);
}

.lp-select.multi .ts-dropdown .option.selected {
	background: var(--lp-surface-option-chosen);
	color: var(--lp-ink-option-chosen);
}

/* Hover is the weaker of the two, so it must not repaint a chosen row. */
.lp-select.multi .ts-dropdown .option.active:not(.selected) {
	background: var(--lp-surface-option-hover);
}

/* As .lp-choice__input in forms.css: the tick is a background, not a pseudo. */
.lp-select .ts-dropdown .tomselect-checkbox {
	appearance: none;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: var(--lp-box-sm);
	height: var(--lp-box-sm);
	margin: 0 var(--lp-space-md) 0 0;
	border: var(--lp-edge-width) solid var(--lp-edge-disabled);
	background: var(--lp-surface);
	cursor: pointer;
}

.lp-select .ts-dropdown .tomselect-checkbox:checked {
	border: 0;
	background: var(--lp-accent) url("icons/check.svg") no-repeat center / 9.6667px 7.1667px;
}

/* A standard select shares a flex row with a trailing help button. */
.lp-control > .lp-select--basic {
	flex: 1 1 auto;
	min-width: 0;
}

/* .multi is here to outweigh the vendor's `.ts-wrapper.multi .ts-control`. */
.lp-select--basic.ts-wrapper.single .ts-control,
.lp-select--basic.ts-wrapper.multi .ts-control,
.lp-select--basic .ts-control {
	width: 100%;
	min-height: 0;
	padding: 0 28px 0 0;
	background: transparent;
	box-shadow: none;
}

/*
 * The single variant has to be stretched over the whole box to be clickable.
 *
 * It has no control input — controlInput is null, so Tom Select never puts one
 * in the DOM — and it holds no item until something has been chosen. With the
 * vendor's padding and min-height taken off just above, .ts-control therefore
 * has nothing in it at all and collapses to zero height. The box still looks
 * right because .lp-control is what draws it, but .lp-control carries no
 * handler of its own: Tom Select binds click to .ts-control. So an unanswered
 * drop-down could only be opened through its <label>, which Tom Select wires to
 * focus() separately, and which is why the answered ones were fine.
 */
.lp-control > .lp-select--basic:not(.multi) {
	align-self: stretch;
}

.lp-select--basic:not(.multi) .ts-control {
	align-items: center;
	height: 100%;
}

/* The single variant's value is bare text, not a pill. */
.lp-select--basic:not(.multi) .ts-control > .item,
.lp-select--country .ts-control > .item {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	line-height: inherit;
	color: inherit;
}

/*
 * The empty option's label is the field's placeholder, and has to read as one.
 * allowEmptyOption keeps it a real option, so Tom Select renders it as an
 * ordinary item, which would otherwise take the answered ink above.
 */
.lp-select--basic:not(.multi) .ts-control > .item[data-value=""] {
	color: var(--lp-ink-placeholder);
}

/*
 * The placeholder is not one of the answers, so it is kept out of the open
 * menu. It stays in the <select>, which is where it is load-bearing: required
 * can only fail on a select whose value is "", and the conditional logic reads
 * an unanswered parent off the same emptiness.
 */
.lp-select--basic .ts-dropdown .option[data-value=""] {
	display: none;
}

.lp-select--basic .ts-control::after {
	right: calc(var(--lp-control-pad-x) - 8px);
}

/* The × back to the empty option, drawn inside the control and left of the
   chevron — the 28px the control reserves for the chevron is what keeps the
   two apart. auto margin because the item beside it does not fill the row. */
.lp-select__clear {
	display: flex;
	flex: none;
	margin-left: auto;
	padding: var(--lp-space-xxs);
	border: 0;
	background: none;
	cursor: pointer;
}

.lp-select__clear::before {
	content: "";
	width: 12px;
	height: 12px;
	background: url("icons/badge-close-neutral.svg") no-repeat center / 9px;
}

.lp-select__clear[hidden] {
	display: none;
}

/* Pills wrap, so contents stop being centred on a single line. */
.lp-control:has(.lp-select--basic.multi) {
	align-items: flex-start;
}

/* The summary variant is the exception: its chosen options live in a box under
   the control, so what is in the control is one line however much is chosen.
   Both classes are named because :has() carries its argument's specificity, and
   one class alone would lose to the .multi rule above. */
.lp-control:has(.lp-select--basic.lp-select--summary) {
	align-items: center;
}

.lp-select--basic.multi.ts-wrapper .ts-control {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-space-xs);
}

/* Half a pill (20px line + 2px padding + 1px border), so it sits on the first row. */
.lp-select--basic.multi .ts-control::after {
	top: 13px;
}

.lp-select--basic.multi.dropdown-active .ts-control::after {
	transform: translateY(-50%) rotate(180deg);
}

/* The outer .lp-control owns the one shared Figma edge, including help. */
.lp-control:has(.lp-select--basic:not(.has-items)) {
	--lp-edge: var(--lp-edge-empty);
	background: var(--lp-surface-empty);
}

.lp-control:has(.lp-select--basic.focus) {
	--lp-edge: var(--lp-accent);
	--lp-edge-size: var(--lp-edge-width-focus);
	background: var(--lp-surface);

	/* The ring above is set as a box-shadow, which this rule's custom
	   properties cannot override — so without restating the shadow the basic
	   skin drew both, a 2px accent edge inside a 4px ring. */
	box-shadow: inset 0 0 0 var(--lp-edge-size) var(--lp-edge);
}

.lp-field--error .lp-control:has(.lp-select--basic) {
	--lp-edge: var(--lp-danger-subtle);
	background: var(--lp-surface);
}

.lp-field--error .lp-control:has(.lp-select--basic.focus) {
	--lp-edge: var(--lp-danger);
	--lp-edge-size: var(--lp-edge-width-focus);
}

/* The country picker lives in the leading add-on. Tom Select owns the single
   chevron; no native arrow or duplicate image remains. */
.lp-control__addon > .lp-select--country {
	align-self: center;
	/* Keep the phone prefix fixed while its floating option list opens. */
	box-sizing: border-box;
	flex: 0 0 46px;
	width: 46px;
	min-width: 46px;
	max-width: 46px;
}

.lp-select--country.ts-wrapper.single .ts-control,
.lp-select--country .ts-control {
	min-height: 0;
	padding: 0 16px 0 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
}

.lp-select--country .ts-control::after {
	right: 0;
}

.lp-select--country .ts-dropdown {
	width: 80px;
	min-width: 80px;
}

/* The control carries a tabindex, so the browser rings it inside the field's own
   edge. .lp-control:focus-within already shows focus, so drop the UA ring. */
.lp-select .ts-control:focus,
.lp-select .ts-control:focus-visible {
	outline: none;
}