/* Arc dropdown-menu, vanilla twin. Tokens map onto Fanatics chrome. */
.dd-trigger,
.dd-menu {
  --control-height-sm: 36px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --duration-instant: 0.12s;
  --duration-fast: 0.16s;
  --duration-standard: 0.24s;
  --duration-spring: 0.42s;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --text-sm: 14px;
}
.dd-trigger {
  --border: transparent;
  --border-strong: transparent;
  --radius-control: 999px;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-muted: rgba(255, 255, 255, 0.14);
  --foreground: var(--on-navy, #fff);
  --text-secondary: color-mix(in oklab, var(--on-navy, #fff) 72%, transparent);
  --text-muted: color-mix(in oklab, var(--on-navy, #fff) 55%, transparent);
  --shadow-resting: none;
}
html[data-theme="light"] .dd-trigger {
  --surface: #e8e2d4;
  --surface-muted: #d5cfc0;
  --foreground: #09203f;
  --text-secondary: #4a6284;
  --text-muted: #4a6284;
}
.dd-menu {
  --border: transparent;
  --border-subtle: #eee;
  --radius-panel: 12px;
  --surface: #fff;
  --surface-muted: #f4f4f4;
  --surface-raised: rgba(255, 255, 255, 0.94);
  --foreground: #121212;
  --text-secondary: #6b6b6b;
  --text-muted: #6b6b6b;
  --shadow-floating: 0 8px 28px rgba(0, 0, 0, 0.14);
  --danger: var(--red, #e53d2e);
}

.dd-trigger {
  display: inline-flex;
  max-width: 100%;
  min-height: var(--control-height-sm);
  height: var(--control-height-sm);
  box-sizing: border-box;
  align-items: center;
  gap: var(--space-2);
  padding: 0 16px 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  font-family: var(--display, inherit);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--duration-instant) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .dd-trigger:hover {
    border-color: var(--border-strong);
    background: var(--surface-muted);
    box-shadow: var(--shadow-resting);
  }
}
.dd-trigger[data-state="open"] {
  border-color: var(--border-strong);
  background: var(--surface-muted);
  box-shadow: none;
}
.dd-trigger:active {
  border-color: var(--border-strong);
  background: color-mix(in oklab, var(--surface-muted), var(--border) 55%);
  box-shadow: none;
}
.dd-item:focus-visible { outline: none; }
.dd-trigger-icon { display: inline-flex; flex: none; color: var(--text-secondary); }
.dd-label { position: relative; display: inline-flex; min-width: 0; flex: 0 1 auto; overflow-x: clip; }
.dd-label-measure { position: absolute; top: 0; left: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.dd-label-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chevron {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard);
}
.dd-trigger[data-state="open"] .dd-chevron { transform: rotate(180deg); }

.dd-menu {
  --menu-x: 0px;
  --menu-y: -5px;
  position: fixed;
  z-index: 70;
  min-width: 12rem;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform-origin: top right;
  transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring);
}
.dd-menu[data-side="top"] { --menu-y: 5px; transform-origin: bottom right; }
.dd-menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
.dd-menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
@starting-style {
  .dd-menu[data-state="open"] { opacity: 0; transform: translate(var(--menu-x), var(--menu-y)) scale(0.97); }
  .dd-menu[data-state="open"] .dd-item { opacity: 0; transform: translate(calc(var(--menu-x) * 0.4), calc(var(--menu-y) * 0.4)); }
}
.dd-menu[data-state="closed"] {
  opacity: 0;
  transform: translate(calc(var(--menu-x) * 0.5), calc(var(--menu-y) * 0.5)) scale(0.985);
  transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard);
  animation: dd-menu-exit 130ms linear both;
  pointer-events: none;
}
.dd-highlight {
  position: absolute;
  top: 0;
  right: 5px;
  left: 5px;
  border-radius: calc(var(--radius-panel) - 6px);
  background: var(--surface-muted);
  opacity: 0;
  pointer-events: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.dd-highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
.dd-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  background: none;
  border-radius: calc(var(--radius-panel) - 6px);
  color: var(--foreground);
  font: inherit;
  font-family: var(--display, inherit);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms),
    transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms);
}
.dd-icon { display: inline-flex; width: 17px; color: var(--text-secondary); }
.dd-separator { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border-subtle); }
.dd-destructive { color: var(--danger); }
.dd-destructive .dd-icon { color: var(--danger); }
.dd-item[data-disabled] { opacity: 0.45; cursor: default; }
@keyframes dd-menu-exit { to { --menu-exit: 1; } }
@media (prefers-reduced-transparency: reduce) {
  .dd-menu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-trigger, .dd-chevron, .dd-item, .dd-highlight { transition: none; }
  .dd-menu, .dd-menu[data-state="closed"] { transform: none; transition: opacity var(--duration-instant) linear; }
}
@media (max-width: 900px) {
  .dd-trigger { min-width: 36px; padding: 0 10px; }
  .dd-trigger .dd-label { display: none; }
}
@media (max-width: 380px) {
  .dd-trigger { height: 32px; min-height: 32px; min-width: 32px; padding: 0 8px; }
}