.pick { margin-bottom:14px; position:relative; user-select:none; }

/* button */
.pick button { outline:none !important; box-sizing:border-box; padding:0 12px; width:100%; max-width:100%; display:flex; align-items:center; column-gap:12px; text-align:left; cursor:pointer; border:1px solid var(--input-border); transition:border-color .1s, box-shadow .1s; -webkit-tap-highlight-color:transparent; }

.pick button > div { flex-grow:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pick button:after { content:''; width:20px; height:16px; background:url('/assets/plugins/pick/arrow.svg') no-repeat center; flex-shrink:0; pointer-events:none; transition:transform .06s; transform:scaleY(1); opacity:0.6; }

.pick button:active { background:#f9f9f9; transform:none; }
.pick button:hover { border-color:var(--input-border-hover); transition:none; }
.pick.focus button, .pick.s button { border-color:var(--main) !important; box-shadow:0 0 0 1px hsla(var(--main-hsl),.7); transition:border-color .1s, box-shadow .1s; }

.pick.s button:after { transform:scaleY(-1); filter:flipv; }

.pick.disabled button, .pick button[disabled], .pick button[disabled=disabled] { cursor:default; }
.pick.disabled button > svg, .pick button[disabled] > svg, .pick button[disabled=disabled] > svg { fill:#ddd !important; }

/* menu */
.pick ul { cursor:pointer; position:absolute; top:100%; left:-1px; min-width:calc(100% + 2px); height:0; max-height:306px; overflow:auto; box-sizing:border-box; z-index:999; margin-top:-1px; background:#fff; opacity:0; visibility:hidden; border-radius:4px; padding:6px 0;
-webkit-tap-highlight-color:transparent; box-shadow:0 5px 16px rgba(0,0,0,.2); }
.pick ul li { padding:3px 11px; outline:none; }

.pick.s ul { height:auto; opacity:1; visibility:visible; }
.pick.s ul li:hover, .pick.s ul li.s { background:var(--dropdown-hover); }
.pick.s ul li:active, .pick.s ul li.s:active { background:var(--dropdown-active); }