ava-button { display: contents; }

ava-button > :is(button, a) {
  --h: calc(round(calc(36 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  --mx: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u, 1px));
  flex: none;
  min-height: var(--h);
  padding: 0 calc(16 * var(--u, 1px));
  border: 0;
  border-radius: 999px;
  font: 550 calc(13.5 * var(--u, 1px)) / 1.1 var(--body);
  color: var(--ink);
  text-decoration: none;
  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), var(--glass-drop-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-long) var(--ease-spring),
    box-shadow var(--dur-short),
    color var(--dur-short),
    background-color var(--dur-short),
    opacity var(--dur-short);
}

ava-button > :is(button, a) svg { width: calc(round(calc(16 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); height: calc(round(calc(16 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); flex: none; }

ava-button > :is(button, a):hover:not(:disabled) { color: var(--accent-deep); }
ava-button > :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ava-button > :is(button, a):active:not(:disabled) {
  transform: translateY(1px) scale(.96);
  box-shadow: var(--press);
  transition-duration: 90ms;
}
ava-button > :is(button, a):disabled { opacity: .42; cursor: default; }

ava-button[size="sm"] > :is(button, a) { --h: calc(round(calc(30 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); padding: 0 calc(12 * var(--u, 1px)); font-size: calc(12.5 * var(--u, 1px)); }
ava-button[size="lg"] > :is(button, a) { --h: calc(round(calc(44 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); padding: 0 calc(20 * var(--u, 1px)); font-size: calc(14.5 * var(--u, 1px)); }

ava-button[shape="round"] > :is(button, a) { width: var(--h); height: var(--h); min-width: var(--h); min-height: var(--h); max-height: var(--h); aspect-ratio: 1; padding: 0; line-height: 0; }
ava-button[shape="round"][size="sm"] > :is(button, a) svg { width: calc(round(calc(14 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); height: calc(round(calc(14 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1)); }

ava-button[variant="primary"] > :is(button, a) {
  color: var(--accent-ink);
  background:
    radial-gradient(120% 140% at var(--mx) -30%, rgba(255, 255, 255, .32), transparent 55%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, var(--accent-deep)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
ava-button[variant="primary"] > :is(button, a):hover:not(:disabled) { color: var(--accent-ink); filter: brightness(1.04); }
ava-button[variant="primary"] > :is(button, a):active:not(:disabled) { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22); }

ava-button[variant="quiet"] > :is(button, a) { background: transparent; box-shadow: none; color: var(--muted); }
ava-button[variant="quiet"] > :is(button, a):hover:not(:disabled) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

ava-button[variant="danger"] > :is(button, a) { color: var(--err); }
ava-button[variant="danger"] > :is(button, a):hover:not(:disabled) { color: var(--err); background-color: color-mix(in srgb, var(--err) 10%, transparent); }

ava-button > :is(button, a):is([aria-pressed="true"], .is-on) {
  color: var(--accent-deep);
  background:
    radial-gradient(120% 140% at var(--mx) -20%, var(--glass-hl), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)),
    var(--glass-plate);
  box-shadow: var(--glass-rim), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--glass-drop-sm);
}
ava-button[variant="primary"] > :is(button, a)[aria-pressed="true"] {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent-deep), color-mix(in srgb, var(--accent) 60%, var(--accent-deep)));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), 0 0 0 1px color-mix(in srgb, var(--accent-deep) 50%, transparent);
}

ava-button[busy] > :is(button, a) { cursor: progress; }
ava-button[busy] > :is(button, a)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 28%, transparent) 50%, transparent 70%) 0 0 / 250% 100%;
  mix-blend-mode: var(--sweep-blend);
  animation: ava-btn-busy 1.6s linear infinite;
  pointer-events: none;
}
@keyframes ava-btn-busy { from { background-position: 125% 0; } to { background-position: -125% 0; } }

@media (prefers-reduced-motion: reduce) {
  ava-button > :is(button, a) { transition-duration: 1ms; }
  ava-button[busy] > :is(button, a)::after { animation: none; }
}