.msl-vars{--msl-input-width:300px;--msl-menu-max-height:400px;--msl-font-size:14px;--msl-line-height:1.4;--msl-border-radius:8px;--msl-background:transparent;--msl-border-color:#9c9c9c;--msl-hover-border-color:#505050;--msl-placeholder-color:#929292;--msl-disabled-background:#f6f6f6;--msl-focus-color:#07f;--msl-chip-background:#eee;--msl-chip-delete-background:transparent;--msl-chip-delete-color:#0009;--msl-button-hover-background:lightgray;--msl-active-menu-background:white;--msl-active-menu-radius:var(--msl-border-radius);--msl-active-menu-shadow:0 0 1px #03071205, 0 1px 4px #0307120a, 0 3px 9px #0307120d, 0 4px 15px #03071212, 0 7px 24px #03071217;--msl-active-menu-border-color:#dfe0e3;--msl-divider-color:#03071214;--msl-option-hover-background:#e9e9e9;--msl-option-active-background:#eceef0;--msl-option-active-color:#0351ff;--msl-option-disabled-color:#0000004d;--msl-group-title-background:#fafafa;--msl-group-offset:12px;--msl-scrollbar-color:#0000001a}.msl-wrp{width:var(--msl-input-width);line-height:var(--msl-line-height);outline:none}.msl-disabled{pointer-events:none}.msl{border:1px solid var(--msl-border-color);border-radius:var(--msl-border-radius);background:var(--msl-background);cursor:text;outline:none;grid-template-columns:minmax(0,1fr) auto;display:grid;overflow:hidden;&:where(:not(.msl-active,.msl-active-up)):hover{border-color:var(--msl-hover-border-color)}}:where(.msl-disabled) .msl{background-color:var(--msl-disabled-background)}.msl-input{vertical-align:top;max-inline-size:calc(100% - 16px);color:inherit;font-family:inherit;font-size:var(--msl-font-size);line-height:inherit;text-overflow:ellipsis;field-sizing:content;background:0 0;border:0;outline:none;margin:5px;padding:3px;display:inline-block;&::placeholder{color:var(--msl-placeholder-color);opacity:1}&:before{color:var(--msl-placeholder-color);line-height:var(--msl-line-height)}&[data-placeholder]:not([data-placeholder=""]):empty:before{content:attr(data-placeholder)}}.msl-single-value{vertical-align:top;font-size:var(--msl-font-size);white-space:nowrap;text-overflow:ellipsis;line-break:strict;margin:5px;padding:3px;display:inline-block;overflow:hidden}.msl-chip{background:var(--msl-chip-background);font-size:var(--msl-font-size);white-space:break-spaces;line-break:anywhere;border-radius:5px;align-items:center;margin:5px;padding-block:3px;padding-inline:6px 3px;display:inline-flex}.msl-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.msl-actions{align-self:center;align-items:center;margin-inline-end:5px;display:inline-flex}.msl-clear-btn,.msl-arrow-btn{width:25px;height:25px;&:hover{background:var(--msl-button-hover-background)}}:where(.msl-active,.msl-active-up) .msl-arrow-btn{rotate:180deg}.msl-chip-delete{background:var(--msl-chip-delete-background);width:20px;height:20px;color:var(--msl-chip-delete-color);flex:none;margin-inline-start:3px;&:hover{background:var(--msl-button-hover-background)}}.msl-arrow-icn{width:20px;height:20px}.msl-close-icn{width:10px;height:10px}.msl-active,.msl-active-up{border-color:var(--msl-active-menu-border-color);border-radius:var(--msl-active-menu-radius);background:var(--msl-active-menu-background);box-shadow:var(--msl-active-menu-shadow)}@property --msl-menu-room{syntax:"*";inherits:false;initial-value:100vh}.msl-options,.msl-submenu{overscroll-behavior:contain;max-height:min(var(--msl-menu-max-height), var(--msl-menu-room));border:0 solid var(--msl-divider-color);cursor:default;scrollbar-width:thin;scrollbar-color:var(--msl-scrollbar-color) transparent;grid-column:1/-1;padding-block-end:1px;overflow:auto;&:where([data-custom]){flex-direction:column;display:flex}&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background:var(--msl-scrollbar-color);border-radius:20px}}@position-try --msl-over{inset:auto;position-area:span-right span-bottom}.msl-submenu{position-area:right span-bottom;width:max-content;min-width:120px;max-width:var(--msl-input-width);max-height:var(--msl-menu-max-height);border:1px solid var(--msl-active-menu-border-color);border-radius:var(--msl-active-menu-radius);background:var(--msl-active-menu-background);color:inherit;box-shadow:var(--msl-active-menu-shadow);position-try-fallbacks:flip-inline, flip-block, flip-block flip-inline, --msl-over, --msl-over flip-block;margin:-5px 0 0;padding:0 0 1px;inset:auto;&:where([data-custom]){width:var(--msl-input-width)}&:dir(rtl){position-area:none;top:anchor(top);right:anchor(left)}}.msl-search{border:0 solid var(--msl-divider-color);grid-column:1/-1}:where(.msl-active)>.msl-options,:where(.msl-active)>.msl-search{border-block-start-width:1px}:where(.msl-active-up)>.msl-options,:where(.msl-active-up)>.msl-search{border-block-end-width:1px}.msl-option,.msl-grp-title{font-size:var(--msl-font-size);line-height:var(--msl-line-height);white-space:break-spaces;line-break:anywhere;cursor:pointer;border-radius:5px;outline:none;margin:4px 6px;padding:4px 8px;&[aria-expanded]{align-items:center;gap:8px;display:flex}}.msl-expand-icn{flex:none;margin-inline-start:auto;display:flex;&:where(:dir(rtl)){rotate:180deg}}.msl-chevron-icn{stroke-width:2px;width:15px;height:15px;rotate:-90deg}:where(.msl-grp-title[aria-expanded=true]) .msl-expand-icn{rotate:90deg}:where(.msl-wrp:focus-visible) .msl,.msl-btn:focus-visible,.msl-option:focus-visible{outline:2px solid var(--msl-focus-color)}.msl-option{@media (prefers-reduced-motion:no-preference){transition:background .2s}&[aria-expanded=true]{background:var(--msl-option-hover-background)}}.msl-option-active{background:var(--msl-option-active-background);color:var(--msl-option-active-color)}.msl-option:hover,.msl-option:focus,.msl-option-focused{background:var(--msl-option-hover-background)}.msl-option-disable{color:var(--msl-option-disabled-color)}.msl-grp{padding-inline-start:var(--msl-group-offset)}.msl-grp-title{background:var(--msl-group-title-background);font-size:calc(var(--msl-font-size) - 2px);opacity:.7;cursor:default;margin-inline-start:calc(6px - var(--msl-group-offset));&[aria-expanded]{cursor:pointer}&[aria-expanded]:hover,&[data-focused]{background:var(--msl-option-hover-background)}}