.patine-select{position:relative}.patine-select__native{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.patine-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-creme);background:var(--color-surface);border:.5px solid var(--color-bordure);border-radius:.5rem;padding:.75rem 1rem;cursor:pointer;transition:border-color .2s ease;outline:none;text-align:left}.patine-select__trigger:focus-visible{border-color:var(--color-cuivre)}.patine-select[data-open=true] .patine-select__trigger{border-color:var(--color-cuivre)}.patine-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patine-select__value--placeholder{color:var(--color-texte-mute)}.patine-select__arrow{width:.75rem;height:.75rem;flex-shrink:0;margin-left:var(--space-sm);fill:none;stroke:var(--color-texte-mute);stroke-width:2;transition:transform .2s ease}.patine-select[data-open=true] .patine-select__arrow{transform:rotate(180deg)}.patine-select__dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:10;background:var(--color-surface);border:.5px solid var(--color-bordure);border-radius:.5rem;box-shadow:0 .5rem 1.5rem #0000004d;max-height:20rem;overflow-y:auto;list-style:none;margin:0;padding:.25rem 0;opacity:0;transform:translateY(-.5rem);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.patine-select[data-open=true] .patine-select__dropdown{opacity:1;transform:translateY(0);pointer-events:auto;transition:opacity .2s ease-out,transform .2s ease-out}.patine-select__dropdown::-webkit-scrollbar{width:4px}.patine-select__dropdown::-webkit-scrollbar-track{background:transparent}.patine-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-bordure);border-radius:2px}.patine-select__option{padding:.625rem 1rem;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-creme);cursor:pointer;transition:background .15s ease}.patine-select__option:hover,.patine-select__option--focused{background:#b873401a}.patine-select__option--selected{color:var(--color-cuivre-poli)}
/*# sourceMappingURL=/cdn/shop/t/36/assets/component-patine-select.css.map */