/**
 * Primitive — Select
 *
 * Expected HTML:
 *   <span class="ec-select-wrapper">
 *     <select class="ec-select" data-material="water">...</select>
 *   </span>
 *
 * The wrapper exists because a native <select> is a replaced element —
 * pseudo-elements (used here for the chevron) don't reliably render
 * inside or after it directly.
 */

.ec-select-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.ec-select-wrapper::after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--ec-space-4);
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ec-color-text-secondary);
	border-bottom: 1px solid var(--ec-color-text-secondary);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.ec-select {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: var(--ec-space-3) var(--ec-space-8) var(--ec-space-3) var(--ec-space-4);
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-sm);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-base);
	appearance: none;
	cursor: pointer;
	transition: border-color var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-select:focus-visible {
	outline: 2px solid var(--ec-material-color);
	outline-offset: 2px;
	border-color: var(--ec-material-color);
}

.ec-select[disabled] {
	background-color: var(--ec-color-surface-elevated);
	color: var(--ec-color-text-secondary);
	cursor: not-allowed;
	opacity: 0.7;
}

.ec-select--error {
	border-color: var(--ec-color-danger);
}