.x-switch {
  appearance: none;
  vertical-align: text-bottom;
  box-sizing: border-box;
  --switch-width: calc(var(--switch-height) * 1.75);
  --switch-thumb-inset: 1px;
  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-border-radius);
  cursor: var(--cursor-switch);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  transition: background-color .14s ease-in-out, box-shadow .14s ease-in-out;
  display: inline-block;
  position: relative;
}

.x-switch:where([data-disabled], :disabled) {
  cursor: var(--cursor-disabled);
}

.x-switch:after {
  content: "";
  top: var(--switch-thumb-inset);
  left: var(--switch-thumb-inset);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
  background-color: #fff;
  transition: transform .14s cubic-bezier(.45, .05, .55, .95), box-shadow .14s ease-in-out;
  position: absolute;
}

.x-switch:where(:checked):after {
  transform: translateX(var(--switch-thumb-translate-x));
}

.x-switch:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}

.x-switch:where([data-size="1"]) {
  --switch-height: var(--space-4);
  --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
}

.x-switch:where([data-size="2"]) {
  --switch-height: calc(var(--space-5) * 5 / 6);
  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
}

.x-switch:where([data-size="3"]) {
  --switch-height: var(--space-5);
  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
}

.x-switch:where(:not([data-size])) {
  --switch-height: calc(var(--space-5) * 5 / 6);
  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
}

.x-switch:where(:not([data-variant="soft"])) {
  background-color: var(--neutral-a3);
  box-shadow: inset 0 0 0 1px var(--neutral-a5);
}

.x-switch:where(:not([data-variant="soft"])):where(:checked) {
  background-color: var(--accent-9);
  box-shadow: inset 0 0 0 1px var(--accent-a4);
}

.x-switch:where(:not([data-variant="soft"])):where([data-high-contrast]:checked) {
  background-color: var(--accent-12);
}

.x-switch:where(:not([data-variant="soft"])):after {
  box-shadow: 0 0 1px 1px var(--black-a2),
      0 1px 1px var(--black-a1),
      0 2px 4px -1px var(--black-a1);
}

.x-switch:where(:not([data-variant="soft"])):where(:checked):after {
  box-shadow: 0 1px 3px var(--black-a2),
      0 2px 4px -1px var(--black-a1),
      0 0 0 1px var(--accent-a4),
      -1px 0 1px var(--black-a2);
}

.x-switch:where(:not([data-variant="soft"])):where([data-disabled], :disabled) {
  background-color: var(--neutral-a3);
  box-shadow: inset 0 0 0 1px var(--neutral-a3);
  opacity: .7;
}

.x-switch:where(:not([data-variant="soft"])):where([data-disabled], :disabled):after {
  background-color: var(--neutral-2);
  box-shadow: 0 0 0 1px var(--neutral-a2),
      0 1px 3px var(--black-a1);
}

.x-switch:where([data-variant="soft"]) {
  background-color: var(--neutral-a3);
}

.x-switch:where([data-variant="soft"]):where(:checked) {
  background-color: var(--accent-a5);
}

.x-switch:where([data-variant="soft"]):after {
  filter: saturate(.45);
  box-shadow: 0 0 0 1px var(--black-a1),
      0 1px 3px var(--black-a1);
}

.x-switch:where([data-variant="soft"]):where(:checked):after {
  box-shadow: 0 0 0 1px var(--black-a1),
      0 1px 3px var(--accent-a3),
      0 2px 4px -1px var(--accent-a3);
}

.x-switch:where([data-variant="soft"]):where([data-disabled], :disabled) {
  opacity: .7;
}