@layer components{.form-field--select{flex-direction:column;gap:4px;display:flex;&.form-field--select--fullwidth{width:100%}& .form-field--select-input{--select-field-arrow-size:20px;--select-field-arrow-gap:var(--s-spacing-3);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--s-radius-field,4px);border:1px solid var(--s-color-border-default);background-color:var(--s-color-surface-default);background-repeat:no-repeat;background-image:var(--theme-icon--arrowDown,url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));background-size:var(--select-field-arrow-size);background-position:right var(--select-field-arrow-gap) center;height:40px;min-height:40px;color:var(--s-color-text-default);text-overflow:ellipsis;white-space:nowrap;-webkit-padding-start:var(--s-spacing-3);padding-inline-start:var(--s-spacing-3);-webkit-padding-end:calc(var(--select-field-arrow-gap) + var(--select-field-arrow-size) + var(--s-spacing-2));padding-inline-end:calc(var(--select-field-arrow-gap) + var(--select-field-arrow-size) + var(--s-spacing-2));font-size:1rem;line-height:40px;transition:border-color .2s;overflow:hidden;&:has(option[value=""]:checked):not([aria-invalid=true]):not(.invalid):not(:disabled){color:var(--s-color-text-inactive)}&.invalid:has(option[value=""]:checked),&[aria-invalid=true]:has(option[value=""]:checked){color:color-mix(in srgb,var(--s-color-text-error) 50%,transparent)}&:hover:not(:focus):not(.is-focus):not([disabled]):not([aria-invalid=true]):not(.invalid){border-color:var(--s-color-border-hover)}&.is-focus,&:focus{border-color:var(--s-color-border-focus);outline:none}&.is-active:not([disabled]):not([aria-invalid=true]):not(.invalid),&:active:not([disabled]):not([aria-invalid=true]):not(.invalid){border-color:var(--s-color-border-active)}&.invalid,&[aria-invalid=true]{background-color:var(--s-color-surface-error-light);color:var(--s-color-text-error);background-image:var(--theme-icon--arrowDown-error,url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="%23e53935" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));border-color:var(--s-color-border-error)!important}& option{background-color:var(--s-color-surface-default);color:var(--s-color-text-default);align-items:center;min-height:1.6em;display:flex;&:hover{background-color:var(--s-color-surface-primary);color:var(--s-color-text-on-brand)}}}&.form-field--select--invalid .form-field--select-input{background-color:var(--s-color-surface-error-light);color:var(--s-color-text-error);background-image:var(--theme-icon--arrowDown-error,url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="%23e53935" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));border-color:var(--s-color-border-error)!important;&:has(option[value=""]:checked){color:color-mix(in srgb,var(--s-color-text-error) 50%,transparent)}}&.form-field--select--disabled .form-field--select-input{background-color:var(--s-color-surface-inactive);border-color:var(--s-color-border-inactive);color:var(--s-color-text-inactive);background-image:var(--theme-icon--arrowDown-disabled,url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="%23969AA8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));pointer-events:none;cursor:not-allowed}}}