ava-switch { display: contents; }

ava-switch > button {
  --sw-h: calc(round(calc(26 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  --sw-w: calc(round(calc(44 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  --sw-pad: calc(round(calc(3 * var(--u, 1px) * var(--zk, 1)), 1px) / var(--zk, 1));
  --sw-knob: calc(var(--sw-h) - 2 * var(--sw-pad));
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background: var(--well);
  box-shadow: var(--well-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-medium) var(--ease-out), box-shadow var(--dur-short);
}

ava-switch > button::after {
  content: "";
  position: absolute;
  top: var(--sw-pad);
  left: var(--sw-pad);
  width: var(--sw-knob);
  height: var(--sw-knob);
  border-radius: 50%;
  background: var(--glass), var(--glass-solid);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop-sm);
  transition: translate .45s var(--ease-spring), scale .2s var(--ease-out);
}

ava-switch > button[aria-pressed="true"] {
  background: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
ava-switch > button[aria-pressed="true"]::after { translate: calc(var(--sw-w) - var(--sw-h)) 0; }
ava-switch > button:active:not(:disabled)::after { scale: .9; }
ava-switch > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ava-switch > button:disabled { opacity: .42; cursor: default; }

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