ava-split-button {
  --sh: calc(round(calc(40px * var(--zk, 1)), 1px) / var(--zk, 1));
  --gap: calc(var(--sh) + 4px);
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--sh);
  vertical-align: middle;
  transition: padding-right .55s var(--ease-spring);
}

ava-split-button[size="sm"] { --sh: calc(round(calc(34px * var(--zk, 1)), 1px) / var(--zk, 1)); }
ava-split-button[data-state="busy"] { padding-right: var(--gap); }

.ava-split-goo {
  position: absolute;
  inset: 0;
  filter: url(#ava-goo) drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 22%, transparent));
  pointer-events: none;
}
.ava-split-goo i {
  position: absolute;
  top: 0;
  height: var(--sh);
  border-radius: calc(var(--sh) / 2);
  background: var(--goo-fill);
}
.ava-split-goo .g-main { left: 0; right: var(--gap); transition: right .55s var(--ease-spring); }
ava-split-button:not([data-state="busy"]) .ava-split-goo .g-main { right: 0; }
.ava-split-goo .g-x {
  right: 0;
  width: var(--sh);
  translate: calc(var(--sh) * -1) 0;
  scale: .55;
  transition: translate .55s var(--ease-spring), scale .55s var(--ease-spring);
}
ava-split-button[data-state="busy"] .ava-split-goo .g-x { translate: 0 0; scale: 1; }

.ava-split-main {
  position: relative;
  height: var(--sh);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px 0 5px;
  border: 0;
  border-radius: calc(var(--sh) / 2);
  overflow: hidden;
  background: none;
  color: var(--accent-deep);
  font: 600 13.5px/1 var(--body);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale .18s var(--ease-out);
}
.ava-split-main:active:not(:disabled) { scale: .96; }
.ava-split-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ava-split-main:disabled { opacity: .45; cursor: default; }

.ava-split-ico {
  width: calc(var(--sh) - round(calc(10px * var(--zk, 1)), 1px) / var(--zk, 1));
  height: calc(var(--sh) - round(calc(10px * var(--zk, 1)), 1px) / var(--zk, 1));
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
ava-split-button[data-state="error"] .ava-split-ico { background: var(--err); }
ava-split-button[data-state="busy"] .ava-split-ico svg { animation: ava-split-spin 1.1s linear infinite; }
@keyframes ava-split-spin { to { rotate: 360deg; } }

.ava-split-label {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transition: width .45s var(--ease-spring);
}
.ava-split-label span { display: inline-block; animation: ava-split-letter .4s var(--ease-out) both; }
@keyframes ava-split-letter { from { filter: blur(5px); opacity: 0; translate: 0 3px; } }

.ava-split-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; }
.ava-split-sweep::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 80%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, #b9a4ff 30%, transparent) 55%, transparent);
  filter: blur(8px);
  mix-blend-mode: var(--sweep-blend);
  will-change: transform;
}
ava-split-button[data-state="busy"] .ava-split-sweep { opacity: 1; animation: ava-split-fade .3s both; }
@keyframes ava-split-fade { from { opacity: 0; } }
ava-split-button[data-state="busy"] .ava-split-sweep::before { animation: ava-split-sweep 2.2s cubic-bezier(.45, 0, .35, 1) infinite; }
@keyframes ava-split-sweep { from { transform: translateX(0); } to { transform: translateX(213%); } }

.ava-split-x {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--sh);
  height: var(--sh);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--warm-text);
  opacity: 0;
  scale: .4;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .2s, scale .5s var(--ease-spring);
}
ava-split-button[data-state="busy"] .ava-split-x { opacity: 1; scale: 1; pointer-events: auto; transition-delay: .12s; }
.ava-split-x:active { scale: .88 !important; }
.ava-split-x:focus-visible { outline: 2px solid var(--warm); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  ava-split-button, .ava-split-goo i, .ava-split-x, .ava-split-label { transition-duration: 1ms !important; }
  .ava-split-label span, ava-split-button[data-state="busy"] .ava-split-ico svg { animation: none; }
  ava-split-button[data-state="busy"] .ava-split-sweep::before { animation: none; transform: translateX(110%); }
}