ava-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u, 1px));
  min-width: 0;
}

@media (max-width: 640px) {
  ava-chips[scroll] {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-16 * var(--u, 1px));
    padding: 2px calc(16 * var(--u, 1px)) 6px;
    scrollbar-width: none;
  }
  ava-chips[scroll]::-webkit-scrollbar { display: none; }
}

ava-chip { display: contents; }

ava-chip > button {
  --mx: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u, 1px));
  flex: none;
  padding: calc(6 * var(--u, 1px)) calc(13 * var(--u, 1px)) calc(6 * var(--u, 1px)) calc(11 * var(--u, 1px));
  border: 0;
  border-radius: 999px;
  font: 520 calc(12.5 * var(--u, 1px)) / 1.2 var(--body);
  color: var(--ink);
  white-space: nowrap;
  background:
    radial-gradient(120% 140% at var(--mx) -20%, var(--glass-hl), transparent 60%),
    var(--glass),
    var(--glass-plate);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), 0 4px 10px -6px color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease-spring), box-shadow .18s, opacity .2s, background-color .2s;
}

ava-chip > button:active:not(:disabled) { transform: translateY(1.5px) scale(.97); box-shadow: var(--press); transition-duration: 90ms; }
ava-chip > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ava-chip > button:disabled { opacity: .4; cursor: default; }
ava-chip > button[aria-pressed="true"] { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
ava-chip > button[aria-pressed="false"] { opacity: .58; }
ava-chip[static] > button[aria-pressed="false"] { opacity: 1; }

ava-chip .ava-chip-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--chip-color, var(--accent));
  transition: background .2s, box-shadow .2s;
}
ava-chip .ava-chip-dot[hidden] { display: none; }
ava-chip > button[aria-pressed="false"] .ava-chip-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

@media (prefers-reduced-motion: reduce) {
  ava-chip > button { transition-duration: 1ms; }
}