/* The theme picker, injected into Settings > Preferences by ui.js.
 * Deliberately its own file: styles.css and themes.css are both generated, and
 * a hand-written rule in either would be gone on the next `make`.
 */
/* ⚠ The gaps are 30px because each chip carries a NAME under it (see
   `.quantum-swatch-name` below), and the name is wider than the chip. This was
   two rules 55 lines apart -- `gap: 8px` here, both longhands there -- so the
   top of the file described a spacing the picker has never had. */
.quantum-picker {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 30px;
	padding: 12px 0 28px;
}

.quantum-swatch {
	position: relative;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	cursor: pointer;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 10px;
	/* The swatch shows the theme it selects, so its colours are set inline from
	   the theme's own tokens rather than described again here. */
	background: var(--quantum-swatch, #ccc);
}

.quantum-swatch:hover {
	transform: scale(1.08);
}

.quantum-swatch.active {
	/* Two rings rather than a thick border: the border is part of the swatch's
	   own colour reading, and thickening it changes the colour the user is
	   judging. */
	/* ⚠ `--panel`, not a made-up name. This read `var(--quantum-picker-bg,
	   #fff)`, and nothing anywhere defines that property -- not tokens.css,
	   not themes.css, not the build -- so the inner ring was the literal #fff
	   in all twelve themes: a white halo around the active chip on the three
	   dark ones. `--panel` is the surface this control actually sits on. */
	box-shadow: 0 0 0 2px var(--panel, #fff), 0 0 0 4px currentColor;
}

/* Named, not just coloured. Twelve unlabelled chips are a guessing game, and
   a tooltip is not discoverable -- the first thing asked about this control
   was where it was. */
.quantum-swatch .quantum-swatch-name {
	position: absolute;
	/* Wider than the chip: "Enzian Nacht" does not fit in 44px, and a name
	   truncated to "Enzian …" is the one thing a name has to avoid. */
	left: -14px;
	right: -14px;
	top: 48px;
	font-size: 11px;
	/* 400, not 500: this is the resting label and 500 is now a real Medium
	   face (quantum.css §0). Asking for 500 here would make every name as
	   heavy as the selected one and leave the active state with nothing to
	   say. It rendered as 400 before the face existed anyway. */
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	color: var(--muted, #666);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quantum-swatch.active .quantum-swatch-name {
	color: var(--text, #222);
	font-weight: 500;
}

fieldset.quantum-theme {
	border: 0;
	padding: 0;
	margin: 0 0 1rem 0;
}