:root{--sh-ease-out-3:cubic-bezier(0,0,.3,1);--sh-ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--sh-ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);}.customSelect{&,&::picker(select){appearance:base-select;color:var(--font-primary)}padding:0;min-width:100%;&::picker(select){transition:opacity .2s ease,transform .2s var(--sh-ease-out-3),display .2s allow-discrete,overlay .2s allow-discrete}&::picker(select)::-webkit-scrollbar{width:8px}&::picker(select)::-webkit-scrollbar-thumb{border-radius:13px;background-color:var(--scrollbar)}&::picker-icon{display:none}&:not(:open)::picker(select){opacity:0;transform:scale(.95)}&:open::picker(select){opacity:1;transform:scale(1)}selectedcontent>*{transition:transform 1s var(--sh-ease-spring-4),display 1s allow-discrete,opacity 1s;@starting-style{opacity:0;transform:translateY(10px)}opacity:1}>button{width:100%;display:inline-flex;padding-block:.75ch;padding-inline:1.75ch;&:focus-visible{outline-offset:-3px}&:has(selectedcontent){align-items:start;min-inline-size:20ch;flex-direction:column}>div{inline-size:100%;display:flex;justify-content:space-between;gap:1rem}& svg{inline-size:2ch;transition:transform .3s var(--sh-ease-elastic-out-2);display:block;block-size:auto;max-inline-size:100%}}&:open>button svg{transform:rotate(.5turn)}&::picker(select){background:var(--primary-background);border-radius:15px;padding:0;margin-block:5px;@media (forced-colors:none){border:none}}>div{min-inline-size:calc(anchor-size(self-inline) + 20px);&.scrollable{max-block-size:20lh;scrollbar-width:thin}& hr{margin-block:.5rem}& label{display:block;position:sticky;top:0;z-index:1;padding-block:.25rem;padding-inline:1rem}& option{display:flex;align-items:center;gap:1rem;padding-block:.5rem;padding-inline:1rem;cursor:pointer;outline-offset:-1px;border-bottom:1px solid var(--border);&::checkmark{font-weight:800}&:focus-visible{outline-offset:-1px}&:is(:focus,:hover){background:var(--sh-green-hover);color:inherit}&:is(:checked){background:var(--sh-green);font-weight:800}}& option:last-of-type{border-bottom:none}}}.custom-option{display:flex;gap:1rem;align-items:center;justify-content:space-between;&:has(.description){display:grid;justify-items:start;gap:.5rem;padding-block:.5rem;text-shadow:none}option:is(:checked) & .description{font-weight:normal}selectedcontent & .description{display:none}}