.Switch {
  --b-switch-width: auto;
  --b-switch-height: auto;
  --b-switch-thumb-size: initial;

  position: relative;

  overflow: hidden;

  width: var(--b-switch-width);
  height: var(--b-switch-height);

  background-color: var(--color-fill-neutral-heavy);
  border-radius: var(--radius-12);

  transition:
    background-color var(--motion-transition-fast),
    opacity var(--motion-transition-fast);

  &:where(.size-s) {
    --b-switch-width: 30px;
    --b-switch-height: 20px;
    --b-switch-thumb-size: 14px;
  }

  &:where(.size-m) {
    --b-switch-width: 36px;
    --b-switch-height: 24px;
    --b-switch-thumb-size: 18px;
  }

  &:where(&[data-state='checked']) {
    background-color: var(--color-fill-accent-green-heavier);

    &:hover {
      background-color: var(--color-fill-accent-green-heavier-hovered);
    }
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--state-input-active);
  }
}

.SwitchThumb {
  --b-switch-thumb-padding: 3px;

  position: absolute;
  top: var(--b-switch-thumb-padding);
  left: var(--b-switch-thumb-padding);

  overflow: hidden;

  width: var(--b-switch-thumb-size);
  height: var(--b-switch-thumb-size);

  background-color: var(--color-text-absolute-white);
  border-radius: var(--radius-12);
  box-shadow: var(--elevation-2);

  transition: transform var(--motion-transition-fast);

  &:where(&[data-state='checked']) {
    transform: translateX(
      calc(
        var(--b-switch-width) - var(--b-switch-thumb-size) -
          (var(--b-switch-thumb-padding) * 2)
      )
    );
  }
}