@layer arche.base;@layer arche.components{.arche-select{width:100%;min-width:0;color:var(--arche-color-text-muted);display:block;position:relative}.arche-select__control{box-sizing:border-box;width:100%;height:2.25rem;padding:0 var(--arche-spacing-6) 0 0;font-family:var(--arche-font-family-sans);font-size:var(--arche-font-size-sm);letter-spacing:inherit;color:var(--arche-color-text-strong);text-overflow:ellipsis;cursor:pointer;border:0;border-bottom:1px solid var(--arche-color-border-control);appearance:none;transition:border-color var(--arche-duration-fast) var(--arche-easing-standard), box-shadow var(--arche-duration-fast) var(--arche-easing-standard);background:0 0;border-radius:0;margin:0;line-height:normal;display:block}.arche-select[data-size=sm]>.arche-select__control{height:1.75rem;font-size:var(--arche-font-size-xs)}.arche-select[data-size=lg]>.arche-select__control{height:2.75rem;padding-right:calc(var(--arche-spacing-5) + var(--arche-spacing-2))}.arche-select__control option,.arche-select__control optgroup{color:var(--arche-color-text);background-color:var(--arche-color-surface-overlay)}.arche-select__control:has(>:where(option[value=""]:checked:disabled)){color:var(--arche-color-text-subtle)}.arche-select__chevron{pointer-events:none;position:absolute;top:50%;right:0;translate:0 -50%}.arche-select__control:hover{border-bottom-color:var(--arche-color-border-control-hover)}.arche-select__control[aria-invalid=true]{border-bottom-color:var(--arche-color-danger)}.arche-select__control:focus{border-bottom-color:var(--arche-color-focus);box-shadow:var(--arche-glow-focus-field);outline:none}.arche-select:has(>.arche-select__control:focus){color:var(--arche-color-text)}.arche-select__control[aria-invalid=true]:focus{border-bottom-color:var(--arche-color-focus);box-shadow:var(--arche-glow-danger-field)}.arche-select__control:disabled{color:var(--arche-color-text-disabled);cursor:not-allowed;border-bottom-style:dashed;border-bottom-color:var(--arche-color-border-strong)}.arche-select:has(>.arche-select__control:disabled){color:var(--arche-color-text-disabled)}@media (forced-colors:active){.arche-select__control:focus{border-bottom-width:2px}}}