/**
 * Select component (Style Guide 04)
 *
 * Usage:
 *   <select class="select">
 *     <option value="">Select an option</option>
 *   </select>
 */

.select {
	display: block;
	width: 100%;
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-md);
	line-height: var(--line-snug);
	color: var(--color-text);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-none);
	appearance: none;
	cursor: pointer;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

	/* Solid forest caret, matching the style guide. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23284123' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-size: 10px 6px;
}

.select:hover {
	border-color: var(--color-muted);
}

.select:focus {
	outline: none;
	border-color: var(--color-border-strong);
	box-shadow: var(--focus-ring);
}

.select:disabled {
	background-color: var(--color-surface-muted);
	color: var(--color-muted);
	cursor: not-allowed;
}

/* Placeholder option still selected. */
.select:has(option[value=""]:checked) {
	color: var(--color-muted);
}

.select option {
	color: var(--color-text);
}

.select--sm {
	min-height: var(--control-height-sm);
	padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
	font-size: var(--text-sm);
}

/* Mono variant — sizes, quantities and other coded values. */
.select--mono {
	font-family: var(--font-mono);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}