@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}@keyframes x-dropdown-menu-in{0%{opacity:0;transform:scale(.96)translateY(-.25em)}to{opacity:1;transform:scale(1)translateY(0)}}.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-menu>:is(.x-tooltip:has(>.x-dropdown-action),.x-dropdown-action){top:calc(var(--pad) * -.75);z-index:2;margin:calc(var(--pad) * -.75) calc(var(--pad) * -.75) calc(var(--pad) * .4);display:grid;position:sticky}.x-dropdown-menu .x-dropdown-action{justify-content:flex-start;align-items:center;gap:calc(var(--pad) * .55);width:100%;padding:calc(var(--pad) * .7) calc(var(--pad) * .95);border:none;border-bottom:1px solid var(--line-soft);background:linear-gradient(var(--dropdown-surface), var(--dropdown-surface)), var(--surface-control-solid);color:color-mix(in oklch, var(--fg), transparent 25%);font:inherit;text-align:left;white-space:nowrap;cursor:pointer;transition:color var(--motion-fast) ease, background var(--motion-fast) ease;flex-direction:row;display:flex;transform:none}.x-dropdown-menu.x-dropdown-menu .x-dropdown-action>span:not(.x-dropdown-leading){white-space:nowrap;text-overflow:ellipsis;flex:auto;width:auto;min-width:0;height:auto;overflow:hidden}.x-dropdown-menu.x-dropdown-menu .x-dropdown-action>.x-dropdown-leading{width:auto}.x-dropdown-menu .x-dropdown-action:is(:hover,:focus-visible){color:var(--fg);background:linear-gradient(color-mix(in oklch, var(--dropdown-surface), var(--fg) 4%), color-mix(in oklch, var(--dropdown-surface), var(--fg) 4%)), var(--surface-control-solid);outline:none;transform:none}.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:500;display:flex}.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 .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-head small{width:auto;color:color-mix(in oklch, var(--fg), transparent 62%);font-variant-numeric:tabular-nums;letter-spacing:normal;flex:none;font-size:.9em;font-weight:500}.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-menu button>span:where(:not(.x-dropdown-cost)),.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}.x-dropdown-menu small{color:color-mix(in oklch, var(--fg), transparent 48%);font-size:.82em;line-height:1.25}.x-dropdown-option{grid-template-columns:1fr auto;align-items:stretch;display:grid}.x-dropdown-option>button:first-child{align-items:flex-start;min-width:0}.x-dropdown-option>button:first-child:has(>.x-dropdown-cost){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main cost""detail cost";align-content:center;place-items:center start;display:grid}.x-dropdown-main{grid-area:main}.x-dropdown-option>button:first-child>small{grid-area:detail}.x-dropdown-cost{grid-area:cost;align-self:center}.x-dropdown-menu .x-dropdown-help{border-radius:var(--round);min-width:2em;min-height:2em;color:color-mix(in oklch, var(--fg), transparent 55%);opacity:0;cursor:help;transition:opacity var(--motion-fast) ease, color var(--motion-fast) ease;justify-content:center;align-self:center;align-items:center;display:inline-flex}.x-dropdown-option:is(:hover,:focus-within) .x-dropdown-help{opacity:1}@media (hover:none){.x-dropdown-menu .x-dropdown-help{opacity:1}}.x-dropdown-help svg{width:1.05em;height:1.05em}.x-dropdown-help:is(:hover,:focus-visible){color:var(--fg);outline:none}.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-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:500;line-height:1.1}.x-dropdown-cost{padding-left:calc(var(--pad) * 1.3);color:color-mix(in oklch, var(--fg), transparent 40%);font-variant-numeric:tabular-nums;white-space:nowrap;grid-template-columns:1fr 3.5ch;align-items:baseline;gap:.3em;font-size:.78em;font-weight:500;line-height:1.1;display:grid}.x-dropdown-cost>span{justify-self:end}.x-dropdown-cost>small{color:inherit;font-size:inherit}.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}}