oncord-combobox{--c-background:#ffffff;--c-selected:#169fda;--c-disabled:#f0f0f0;--c-border:#bbbbbb;--c-scrollbar:#dedede;--c-scrollbar-active:#979797;display:inline-flex;width:fit-content;min-width:4em;& #wrapper{display:inline-grid;width:100%;height:fit-content;vertical-align:top;align-items:center;position:relative}& #search{grid-area:1/1;width:100%;min-width:100%}& #dropdown{display:flex;flex-direction:column;position:absolute;box-sizing:border-box;user-select:none;width:max-content;min-width:100%;left:0;top:4px;z-index:2;background:#fff;border-radius:4px;filter:drop-shadow(1px 1px 1px #bbb);border-left:1px solid #0002;border-top:1px solid #0002;overflow:hidden;overflow-y:auto;max-height:100%;height:fit-content;pointer-events:none;opacity:0;scrollbar-width:thin;scrollbar-color:var(--c-scrollbar) transparent;scroll-behavior:smooth;&::-webkit-scrollbar{width:5px;height:5px}&::-webkit-scrollbar-track{background:none}&::-webkit-scrollbar-thumb{background-color:var(--c-scrollbar);&:hover,&:active{background-color:var(--c-scrollbar-active)}}}& #attach-options[show="true"] #dropdown{pointer-events:auto;opacity:1}& input#search{padding-right:1em;min-height:37px;box-sizing:border-box;&::placeholder{opacity:0.65}}& #selected-display{grid-area:1/1;align-self:center;justify-self:stretch;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;z-index:1;&[hidden]{display:none}& a{text-decoration:none;color:inherit}}& #wrapper.hasRichSelection #search{color:transparent}& #chevron{grid-area:1/1;width:0.7em;justify-self:end;margin-right:0.3em;margin-top:var(--search-extra-top,0px);margin-bottom:var(--search-extra-bottom,0px);pointer-events:none}&[hidechevron="true"] #chevron{display:none}& #clear{grid-area:1/1;justify-self:end;align-self:center;margin-right:0.15em;margin-top:var(--search-extra-top,0px);margin-bottom:var(--search-extra-bottom,0px);width:1.1em;height:1.1em;padding:0;border:none;background:none;cursor:pointer;color:#999;transition:color 0.15s;z-index:1;&:hover{color:#333}&[hidden]{display:none}& svg{width:100%;height:100%}}& #clear:not([hidden])~#chevron{visibility:hidden}& #dropdown-top-actions{display:none}& #mobile-search-input{display:none}& #attach-options[attach-mobile] #dropdown{position:relative;left:auto;top:auto;width:100%;min-width:0;max-height:100%;background:rgba(255,255,255,0.92);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 8px 32px rgba(60,60,80,0.15);overflow-y:auto;transition:opacity 0.18s;-webkit-overflow-scrolling:touch;padding-top:0!important;box-sizing:border-box;padding-left:0;padding-right:0}& #attach-options[attach-mobile] #dropdown-top-actions{display:flex;justify-content:space-between;align-items:center;padding:0.5rem;border-bottom:1px solid #ececec;background:rgba(255,255,255);position:sticky;top:0;pointer-events:auto;z-index:9999;& button{background:none;border:none;padding:0.5rem 0.75rem;cursor:pointer;color:#555;transition:color 0.2s;&:hover{color:#000}& svg{width:20px;height:20px}}}& #attach-options[attach-mobile] #mobile-search-input{&.visible{display:block}width:100%;margin:0;padding:1rem;border:none;border-bottom:1px solid #ececec;font-size:1.15rem;box-sizing:border-box;outline:none;border-radius:0;background:rgba(255,255,255,1);box-shadow:none}& oncord-combobox-divider{height:0.75em;& #wrapper{width:calc(100% - 20px);height:1px;background-color:#ccc;margin:5px 10px}}&[data-multiple="true"]{width:100%;&>#wrapper{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:4px;box-sizing:border-box;min-height:37px;padding:3px 1.2em 3px 4px;background:var(--c-background);border:1px solid #ccc;border-radius:1px;cursor:text}& #search{grid-area:auto;flex:1 1 6em;width:auto;min-width:6em;min-height:0;padding:2px;border:none;outline:none;background:none;box-shadow:none}& #chevron,& #clear{grid-area:auto;position:absolute;right:0.3em;top:50%;transform:translateY(-50%);margin-top:0;margin-bottom:0}}& #tags{display:contents;&[hidden]{display:none}}& .comboTag{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 5px;background:#f3fafd;border:1px solid #d6e9f2;border-radius:3px;line-height:1.5;cursor:default}& .comboTagDraggable{cursor:grab}& .comboTagPrimary{background:#e4f5fc;border-color:var(--c-selected)}& .comboTagLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;& a{pointer-events:none;text-decoration:none;color:inherit}}& .comboTagRemove{flex:none;position:relative;width:13px;height:13px;padding:0;border:none;background:none;color:#777;cursor:pointer;&::before,&::after{content:"";position:absolute;top:6px;left:1px;width:11px;height:1px;background:currentColor}&::before{transform:rotate(45deg)}&::after{transform:rotate(-45deg)}&:hover{color:#c00000}}& .comboTagDragging{position:relative;z-index:3;pointer-events:none;cursor:grabbing;box-shadow:0 2px 8px rgba(0,0,0,0.25);opacity:0.9;transition:none}& #create-error{padding:6px 8px;background:#fee2e2;color:#b91c1c;font-size:0.9em;&[hidden]{display:none}}& oncord-combobox-option{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:0;background:none;cursor:pointer;transition:background 0.2s;pointer-events:auto;& #wrapper{--background-color:#fff;--color:#505050;--hint-color:#aaa;--matched-background-color:#428bca;--matched-color:#fff;display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;padding:.2em .5em;background-color:var(--background-color);color:var(--color);width:100%;max-width:100%;box-sizing:border-box;border-radius:0}& #label{flex-grow:1;position:relative;min-height:1.2em}& #label:empty::before{content:'\00a0';visibility:hidden}& #indent,& #opener,& #check{flex:none;align-self:center}& #indent[hidden],& #opener[hidden],& #check[hidden]{display:none}& #opener{position:relative;width:12px;height:12px;margin-right:2px;cursor:pointer;&::before{content:"";position:absolute;top:2px;left:3px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor;opacity:0.55}&.open::before{top:4px;left:1px;border-top:5px solid currentColor;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:none}&.leaf{cursor:inherit;&::before{content:none}}}& #label a{pointer-events:none;text-decoration:none;color:inherit}& #check{position:relative;width:13px;height:13px;margin-right:6px;background:#fff;border:1px solid var(--c-border);border-radius:2px;box-sizing:border-box}& #wrapper.selected #check{background:var(--c-selected);border-color:var(--c-selected);&::before{content:"";position:absolute;top:0px;left:3px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}}& .comboCreateOption{font-style:italic}& #hint{color:var(--hint-color);font-size:.85em;font-weight:100;padding-left:1em}& #hint:empty{padding-left:0}& .matched{background-color:var(--matched-background-color);border-left:1px solid var(--matched-background-color);color:var(--matched-color);border-radius:3px;margin-left:-1px}& #wrapper.highlighted{--background-color:#428bca;--color:#fff;--hint-color:#fff;--matched-background-color:transparent}}& #attach-options[attach-mobile] oncord-combobox-option #wrapper{padding:1.15rem 1.2rem!important;border-radius:8px!important}& #attach-options[attach-mobile] oncord-combobox-option #label{font-size:1.25rem!important}}