/**
 * Font Combobox (#181)
 *
 * Styles for the custom ARIA select-only font picker that replaces the native
 * <select> in the skin v2 inspector. Each option previews in its own designer
 * font (font-family is set inline per option / on the trigger value).
 *
 * The trigger's base control look (box, border, colors) and the .lje-field
 * label styling come from the shared rules in lje-skin-v2.css (a declared
 * dependency of this stylesheet); only combobox-specific additions live here.
 *
 * Tokens come from the letterjacket theme; every var() carries a hex/value
 * fallback so the module survives with the theme inactive.
 */

.lje-fontcb {
	position: relative;
	width: 100%;
}

/* Trigger: shares the .lje-inspector control look (see lje-skin-v2.css);
   adds the flex row that seats the value + chevron. */
.lje-fontcb__trigger {
	display: flex;
	align-items: center;
	gap: var(--lj-space-2, 0.5rem);
	text-align: left;
	cursor: pointer;
}

.lje-fontcb__value {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lje-fontcb__chevron {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--lj-color-text-muted, #6b6b66);
	border-bottom: 2px solid var(--lj-color-text-muted, #6b6b66);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--lj-duration-1, 120ms) var(--lj-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.lje-fontcb__trigger[aria-expanded="true"] .lje-fontcb__chevron {
	transform: rotate(-135deg) translate(-1px, -1px);
}

/* Floating popup: absolute so it clears the inspector grid-stack, and above
   surrounding chrome. */
.lje-fontcb__popup {
	position: absolute;
	top: calc(100% + var(--lj-space-1, 0.25rem));
	left: 0;
	right: 0;
	z-index: var(--lj-z-overlay, 900);
	max-height: 320px;
	overflow-y: auto;
	padding: var(--lj-space-1, 0.25rem);
	background: var(--lj-color-bg, #fff);
	border: 1px solid var(--lj-color-border, #e2e2e2);
	border-radius: var(--lj-radius-md, 8px);
	box-shadow: var(--lj-shadow-md, 0 4px 12px rgba(50, 50, 44, 0.1));
}

.lje-fontcb__option {
	padding: var(--lj-space-2, 0.5rem);
	border-radius: var(--lj-radius-sm, 4px);
	font-size: var(--lj-text-sm, 0.875rem);
	color: var(--lj-color-text, #32322c);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* Roving highlight (keyboard) + pointer hover share the same tint. */
.lje-fontcb__option.is-active {
	background: color-mix(in srgb, var(--lj-color-primary, #00a5b2) 12%, var(--lj-color-bg, #fff));
}

.lje-fontcb__option[aria-selected="true"] {
	font-weight: var(--lj-font-weight-medium, 500);
	background: color-mix(in srgb, var(--lj-color-primary, #00a5b2) 20%, var(--lj-color-bg, #fff));
}

/* "More fonts" expander sits under the listbox as a footer control. */
.lje-fontcb__more-btn {
	width: 100%;
	margin-top: var(--lj-space-1, 0.25rem);
	padding: var(--lj-space-2, 0.5rem);
	border: 0;
	border-top: 1px solid var(--lj-color-border, #e2e2e2);
	border-radius: 0;
	background: transparent;
	color: var(--lj-color-primary, #00a5b2);
	font-size: var(--lj-text-sm, 0.875rem);
	font-weight: var(--lj-font-weight-medium, 500);
	text-align: left;
	cursor: pointer;
}

/* Belt-and-braces: the collapsed group / hidden popup must not render. */
.lje-fontcb__popup[hidden],
.lje-fontcb__group[hidden] {
	display: none;
}

/* Repo focus-ring convention (shop-filters). */
.lje-fontcb__trigger:focus-visible,
.lje-fontcb__more-btn:focus-visible {
	outline: 2px solid var(--lj-color-primary, #00a5b2);
	outline-offset: 2px;
}