/*
 * Catalogue sorting.
 *
 * The reference: a small pill select at 131x36 with a quiet "Sort by:" beside it. Ours sits on the
 * same row as the search field on a wide screen and drops under it on a phone.
 */

.akem-sort {
	display: flex;
	align-items: center;
	gap: var(--akem-space-2);
	flex-wrap: nowrap;
	margin-block-end: var(--akem-space-4);
}

.akem-sort__label {
	font-size: var(--akem-size-micro);
	font-weight: var(--akem-weight-label);
	color: var(--akem-grey);
	/* Two short words that must never break: on a phone the row is tight and "Sort by:" was
	   wrapping under itself. */
	white-space: nowrap;
}

/* A field, at the size the reference gives this one, and rounded like a pill rather than a box -
   everything else about it comes from controls.css. */
.akem-sort__select {
	--akem-control-h: 36px;
	font-size: var(--akem-size-micro);
	font-weight: var(--akem-weight-label);
	border-radius: var(--akem-radius-pill);
	cursor: pointer;
}

/* Visible only while the script is not running; it hides this and submits on change. */
.akem-sort__submit {
	--akem-control-h: 36px;
	padding-inline: var(--akem-space-3);
	font-size: var(--akem-size-micro);
}