ava-seg {
  --p: calc(round(calc(4 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  --bh: calc(round(calc(32 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--p);
  border-radius: 999px;
  background: var(--well);
  box-shadow: var(--well-shadow);
  isolation: isolate;
  max-width: 100%;
}

ava-seg[full] { display: grid; width: 100%; }

ava-seg > .ava-seg-thumb {
  position: absolute;
  z-index: 0;
  top: var(--p);
  bottom: var(--p);
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--glass), var(--glass-solid);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop-sm);
  transition: translate .5s var(--ease-spring), width .5s var(--ease-spring);
  pointer-events: none;
}

ava-seg > .ava-seg-thumb.is-moving { animation: ava-seg-stretch .45s var(--ease-out); }
@keyframes ava-seg-stretch { 0% { scale: 1 1; } 35% { scale: 1.12 .88; } 100% { scale: 1 1; } }

ava-seg > button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: var(--bh);
  padding: 0 calc(20 * var(--u, 1px));
  border: 0;
  border-radius: 999px;
  background: none;
  font: 550 calc(13.5 * var(--u, 1px)) / 1.2 var(--body);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s;
}

ava-seg > button:hover { color: var(--ink); }
ava-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
ava-seg > button:disabled { opacity: .4; cursor: default; }
ava-seg > button:is([aria-selected="true"], [aria-pressed="true"]) { color: var(--accent-deep); }

ava-seg[size="sm"] { --p: calc(round(calc(3 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); --bh: calc(round(calc(25 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); }
ava-seg[size="sm"] > button { padding: 0 calc(12 * var(--u, 1px)); font-size: calc(12.5 * var(--u, 1px)); }

@media (prefers-reduced-motion: reduce) {
  ava-seg > .ava-seg-thumb { transition-duration: 1ms; animation: none; }
}