.root {
  --switch-height: 20px;
  --switch-width: calc(var(--switch-height) * 1.75);
  position: relative;
  width: var(--switch-width);
  height: var(--switch-height);
  cursor: pointer;
  border-radius: var(--radius-round);
  padding: 0;
  transition: colors 200ms var(--ease);
  box-shadow: 0 0 0 1px var(--color-neutral-6);
}

.root:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-neutral-7);
}

.root[data-state="checked"] {
  background: var(--color-accent-9);
  &:hover {
    background: var(--color-accent-10);
  }
}

.root[data-state="unchecked"] {
  background: var(--color-accent-3);
  &:hover {
    background: var(--color-accent-4);
  }
}

.root:disabled {
  cursor: not-allowed;
  background-color: var(--color-neutral-2);
  &:hover {
    background-color: var(--color-neutral-2);
  }
}

.root:disabled[data-state="checked"] {
  background-color: var(--color-accent-3);
}

.thumb {
  --switch-thumb-inset: 2px;
  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
  position: absolute;
  left: var(--switch-thumb-inset);
  top: var(--switch-thumb-inset);
  height: var(--switch-thumb-size);
  width: var(--switch-thumb-size);
  border-radius: var(--radius-round);
  background: var(--color-neutral-1);
  box-shadow: var(--shadow-3);
  transition: transform 0.14s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.thumb[data-state="checked"] {
  transform: translateX(var(--switch-thumb-translate-x));
}