<div style="display: flex; flex-wrap: wrap; gap: 1rem">

  <label for="switch-active" class="field -inline">
      <input type="checkbox" class="switch" role="switch" id="switch-active" checked>
      Active Switch
  </label>

  <label for="switch-inactive" class="field -inline">
      <input type="checkbox" class="switch" role="switch" id="switch-inactive">
      Inactive Switch
  </label>

  <label for="switch-disabled" class="field -inline">
      <input type="checkbox" class="switch" role="switch" id="switch-disabled" disabled>
      Disabled Switch
  </label>

  <label for="switch-disabled-active" class="field -inline">
      <input type="checkbox" class="switch" role="switch" id="switch-disabled-active" disabled checked>
      Disabled Active Switch
  </label>

</div>

.switch {
  border-radius: 2em;
  box-shadow: 0px 2px 4px 0px var(--color-gray-500) inset;
  display: inline grid;
  height: 2em;
  padding: 3px;
  transition: background-color var(--root-ease-out-fast),
    box-shadow var(--root-ease-out-fast);
  width: 4em;

  &::before {
    aspect-ratio: 1;
    background: var(--color-gray-600);
    border-radius: 2em;
    height: 100%;
    justify-self: start;
    mask: unset;
    transition: translate var(--root-ease-out-fast),
      background-color var(--root-ease-out-fast),
      box-shadow var(--root-ease-out-fast);
  }

  &.-checked,
  &:checked {
    box-shadow: 0px 2px 4px 0px var(--accent-color-700) inset;

    &::before {
      background: var(--accent-color-contrast);
      translate: 2em;
      box-shadow: 0px 2px 2px 0px var(--accent-color-700);
    }
  }

  &.-disabled,
  &:disabled {
    box-shadow: 0px 2px 4px 0px var(--color-gray-200) inset;
    &::before {
      background: var(--color-gray-200);
    }

    &.-checked,
    &:checked {
      &::before {
        box-shadow: none;
      }
    }
  }
}