@layer components{.x-dropdown{--dropdown-surface:var(--surface-control);width:fit-content;max-width:100%;display:inline-flex;position:relative}.x-dropdown>button{justify-content:space-between;align-items:center;gap:calc(var(--pad) * .5);max-width:100%;min-height:2.5em;padding:0 calc(var(--pad) * .9) 0 calc(var(--pad) * 1.35);border:1px solid var(--lines-strong);border-radius:calc(var(--round) * 1.5);color:var(--fg);background:var(--dropdown-surface);font:inherit;cursor:pointer;transition:background var(--anim), border-color var(--anim), color var(--anim), transform var(--motion-fast) var(--ease-sticky);font-size:.84em;font-weight:500;display:inline-flex}.x-dropdown-chevron{width:1em;height:1em;transition:transform var(--anim)}body>.x-dropdown-menu{z-index:900}.x-dropdown-label{align-items:center;gap:calc(var(--pad) * .5);min-width:0;display:inline-flex}.x-dropdown-leading{flex:none;align-items:center;display:inline-flex}.x-dropdown-leading svg{width:1em;height:1em}.x-dropdown-brand{object-fit:contain;flex:none;width:1.15em;height:1.15em}.x-dropdown-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.x-dropdown>button:is(:hover,:focus-visible),.x-dropdown>button[aria-expanded=true]{color:var(--fg);border-color:color-mix(in oklch, var(--fg), transparent 62%);background:var(--dropdown-surface);outline:none}.x-dropdown>button:is(:hover,:focus-visible){transform:translateY(var(--motion-hover-y))}.x-dropdown>button:active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-dropdown>button[aria-expanded=true] .x-dropdown-chevron{transform:rotate(180deg)}.x-dropdown-menu{--dropdown-surface:var(--surface-control-solid);z-index:3;left:0;top:calc(100% + calc(var(--pad) * .5));width:max-content;min-width:100%;max-width:min(24em, calc(100vw - calc(var(--pad) * 4)));max-height:min(24em, calc(100vh - calc(var(--pad) * 8)));padding:calc(var(--pad) * .75);border:1px solid var(--line-soft);border-radius:var(--menu-radius);background:var(--dropdown-surface);box-shadow:var(--shadow-float);transform-origin:0 0;animation:x-dropdown-menu-in var(--motion-fast) var(--ease-sticky) both;font-size:.86em;display:grid;position:absolute;overflow:auto}.x-dropdown-search-shell{top:calc(var(--pad) * -.75);z-index:2;margin:calc(var(--pad) * -.75) calc(var(--pad) * -.75) 0;padding:calc(var(--pad) * .55) calc(var(--pad) * .75);background:linear-gradient(var(--dropdown-surface), var(--dropdown-surface)), var(--surface-control-solid);position:sticky}.x-dropdown-search-shell:after{content:"";opacity:0;background:linear-gradient(to bottom, color-mix(in oklch, var(--surface-control-solid), transparent 25%), transparent);pointer-events:none;height:1.4em;transition:opacity var(--motion-fast) ease;position:absolute;top:100%;left:0;right:0}.x-dropdown-menu[data-overflow-top] .x-dropdown-search-shell:after{opacity:1}.x-dropdown-search{border-color:var(--lines-strong);width:100%}.x-dropdown-option{grid-template-columns:1fr auto;align-items:stretch;display:grid}.x-dropdown-group{display:grid}.x-dropdown-group+.x-dropdown-group{margin-top:calc(var(--pad) * .2)}.x-dropdown-menu .x-dropdown-group-head{align-items:center;gap:calc(var(--pad) * .5);min-height:2.2em;padding:0 calc(var(--pad) * .9) 0 calc(var(--pad) * 1.15);border-radius:var(--round);color:color-mix(in oklch, var(--fg), transparent 48%);font:inherit;letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color var(--motion-fast) ease, background var(--motion-fast) ease;background:0 0;border:0;flex-flow:row;font-size:.78em;font-weight:800;display:flex}.x-dropdown-menu .x-dropdown-group-head>span:not(.x-dropdown-group-icon){text-overflow:ellipsis;white-space:nowrap;width:auto;min-width:0;overflow:hidden}.x-dropdown-menu .x-dropdown-group-icon{flex:none;justify-content:center;align-items:center;width:1.5em;height:1.5em;display:inline-flex}.x-dropdown-menu img.x-dropdown-group-icon{object-fit:contain}.x-dropdown-menu .x-dropdown-group-monogram{box-sizing:border-box;color:#fff;background:linear-gradient(135deg, var(--modality-video,#6cff8d), var(--modality-image,#8627ff));box-shadow:0 2px 6px color-mix(in oklch, var(--modality-image,#8627ff), transparent 62%);letter-spacing:normal;text-transform:uppercase;text-shadow:0 1px 2px oklch(0% none none/.45);border-radius:999px;padding-top:.09em;font-weight:700;line-height:1}.x-dropdown-menu .x-dropdown-group-head small{background:color-mix(in oklch, var(--fg), transparent 92%);width:auto;color:color-mix(in oklch, var(--fg), transparent 45%);letter-spacing:normal;border-radius:999px;flex:none;padding:.1em .55em;font-size:.85em;font-weight:700}.x-dropdown-group-head svg{width:.95em;height:.95em;transition:transform var(--motion-fast) var(--ease-sticky);margin-left:auto}.x-dropdown-group-head[aria-expanded=true] svg{transform:rotate(180deg)}.x-dropdown-group-head:is(:hover,:focus-visible){color:var(--fg);background:color-mix(in oklch, var(--fg), transparent 94%);outline:none}.x-dropdown-group[data-open] .x-dropdown-option{margin-left:calc(var(--pad) * .4)}.x-dropdown-menu button{justify-content:center;align-items:center;gap:calc(var(--pad) * .2);min-width:100%;min-height:2.55em;padding:0 calc(var(--pad) * 1.35);border-radius:var(--round);color:color-mix(in oklch, var(--fg), transparent 34%);font:inherit;text-align:left;cursor:pointer;transition:background var(--anim), color var(--anim), transform var(--motion-fast) var(--ease-sticky);background:0 0;border:0;flex-direction:column;font-size:.95em;font-weight:500;display:flex}.x-dropdown-option>button:first-child{align-items:flex-start;min-width:0}.x-dropdown-menu .x-dropdown-favorite{min-width:2.8em;color:color-mix(in oklch, var(--special), var(--fg) 35%);padding:0}.x-dropdown-favorite svg{width:1.05em;height:1.05em;transition:transform var(--motion-fast) var(--ease-sticky)}.x-dropdown-favorite:is(:hover,:focus-visible) svg{transform:scale(1.12)rotate(-8deg)}.x-dropdown-menu button>span,.x-dropdown-menu button>small{white-space:nowrap;width:100%}.x-dropdown-menu button:is(:hover,:focus-visible){color:var(--fg);background:var(--ella-hover-surface);outline:none;transform:translate(1px)}.x-dropdown-menu small{color:color-mix(in oklch, var(--fg), transparent 48%);font-size:.82em;line-height:1.25}@keyframes x-dropdown-menu-in{0%{opacity:0;transform:scale(.96)translateY(-.25em)}to{opacity:1;transform:scale(1)translateY(0)}}.x-dropdown-main{align-items:center;gap:calc(var(--pad) * .55);width:100%;min-width:0;display:flex}.x-dropdown-main>span:first-child,.x-dropdown-main>.x-dropdown-leading+span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.x-dropdown-tag{border:1px solid var(--line-soft);background:color-mix(in oklch, var(--surface-control-solid), var(--fg) 4%);color:color-mix(in oklch, var(--fg), transparent 26%);border-radius:999px;flex:none;padding:.18em .55em;font-size:.74em;font-weight:700;line-height:1.1}.x-dropdown-empty{padding:calc(var(--pad) * 1.05) calc(var(--pad) * 1.35);color:color-mix(in oklch, var(--fg), transparent 46%);margin:0;font-size:.9em}.x-dropdown-search-shell{margin:calc(var(--pad) * -.75) calc(var(--pad) * -.75) calc(var(--pad) * .35);border-bottom:1px solid var(--line-soft)}.x-dropdown-menu button>svg{flex:none;width:1em;height:1em}.x-dropdown-menu button[data-danger]{color:var(--danger)}.x-dropdown-menu button[data-danger]:is(:hover,:focus-visible){color:color-mix(in oklch, var(--danger), var(--fg) 25%);background:color-mix(in oklch, var(--danger), transparent 88%)}.x-dropdown-menu hr{width:100%;height:1px;margin:calc(var(--pad) * .35) 0;background:var(--line-soft);border:0}}