.hmp-select { --hmp-select-accent:#c6a4de; position:relative; min-width:0; max-width:100%; display:inline-flex; align-items:stretch; vertical-align:middle; } .hmp-select.is-fluid { width:100%; } .hmp-select > select.hmp-select__native { position:absolute!important; width:1px!important; height:1px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; border:0!important; opacity:0!important; pointer-events:none!important; white-space:nowrap!important; } .hmp-select > button.hmp-select__trigger { width:100%!important; min-width:0!important; min-height:42px!important; height:100%; margin:0!important; padding:8px 40px 8px 12px!important; position:relative; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:hidden; border:1px solid rgba(224,207,244,.16)!important; border-radius:5px 12px 5px 12px!important; background:rgba(20,12,27,.76)!important; background-image:none!important; color:rgba(249,245,250,.88)!important; box-shadow:inset 0 1px rgba(255,255,255,.045)!important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); font:inherit!important; line-height:1.2!important; text-align:left!important; cursor:pointer; transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease!important; } .hmp-select > button.hmp-select__trigger:hover { border-color:rgba(215,180,234,.34)!important; background:rgba(43,25,54,.86)!important; color:#fff!important; transform:none!important; } .hmp-select > button.hmp-select__trigger:focus-visible, .hmp-select.is-open > button.hmp-select__trigger { outline:0!important; border-color:rgba(213,174,235,.54)!important; background:rgba(45,26,57,.9)!important; box-shadow:0 0 0 3px rgba(170,105,201,.13),inset 0 1px rgba(255,255,255,.055)!important; } .hmp-select.is-invalid > button.hmp-select__trigger { border-color:rgba(238,91,112,.58)!important; box-shadow:0 0 0 3px rgba(229,72,95,.1)!important; } .hmp-select.is-disabled > button.hmp-select__trigger { opacity:.48; cursor:not-allowed; } .hmp-select__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hmp-select__value.is-placeholder { color:rgba(228,214,236,.42); } .hmp-select__chevron { position:absolute; top:50%; right:12px; width:16px!important; height:16px!important; transform:translateY(-50%); color:rgba(221,198,233,.55); pointer-events:none; transition:transform .16s ease,color .16s ease; } .hmp-select.is-open .hmp-select__chevron { transform:translateY(-50%) rotate(180deg); color:var(--hmp-select-accent); } .hmp-select__menu { position:fixed; /* Menus are portaled to ; keep that portal above modal overlays. */ z-index:2000000; width:max-content; min-width:140px; max-width:min(430px,calc(100vw - 16px)); max-height:min(340px,calc(100svh - 24px)); padding:6px; overflow:auto; overscroll-behavior:contain; border:1px solid rgba(224,207,244,.2); border-radius:6px 16px 6px 16px; background:rgba(20,12,27,.97); background-image:none; box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.055); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); scrollbar-width:none; } .hmp-select__menu::-webkit-scrollbar { display:none; } .hmp-select__menu[hidden] { display:none; } .hmp-select__group { padding:10px 10px 5px; color:rgba(213,187,227,.48); font:650 9px/1 "Cascadia Mono",Consolas,monospace; letter-spacing:.09em; text-transform:uppercase; } .hmp-select__option { width:100%; min-width:0; min-height:38px; padding:8px 34px 8px 10px; position:relative; display:flex; align-items:center; border:1px solid transparent; border-radius:4px 10px 4px 10px; background:transparent; color:rgba(241,232,245,.7); font:inherit; font-size:12px; line-height:1.35; text-align:left; white-space:normal; cursor:pointer; } .hmp-select__option:hover, .hmp-select__option.is-active { border-color:rgba(224,207,244,.1); background:rgba(151,88,183,.14); color:#fff; } .hmp-select__option[aria-selected="true"] { border-color:rgba(207,168,228,.2); background:rgba(145,84,174,.2); color:#f2e7f8; } .hmp-select__option[aria-selected="true"]::after { content:""; position:absolute; right:12px; top:50%; width:8px; height:4px; border-left:2px solid var(--hmp-select-accent); border-bottom:2px solid var(--hmp-select-accent); transform:translateY(-65%) rotate(-45deg); } .hmp-select__option.is-placeholder { color:rgba(228,214,236,.4); } .hmp-select__option:disabled { opacity:.36; cursor:not-allowed; } .hmp-select__option:disabled:hover { border-color:transparent; background:transparent; color:rgba(241,232,245,.7); } @media(max-width:640px) { .hmp-select__menu { max-width:calc(100vw - 12px); max-height:min(310px,calc(100svh - 18px)); } .hmp-select__option { min-height:42px; font-size:13px; } }