switch scss

Switch.scss

.switch {
  --track-size: calc(var(--thumb-size) * 2);
  --track-padding: .2rem;

  --track-inactive: hsl(80 0% 80%);
  --track-active: hsl(80 60% 45%);

  --track-color-inactive: var(--track-inactive);
  --track-color-active: var(--track-active);

  @media (prefers-color-scheme: dark) {
    --track-inactive: hsl(80 0% 35%);
    --track-active: hsl(80 60% 60%);
  }

  --thumb-size: 2rem;
  --thumb: hsl(0 0% 100%);
  --thumb-highlight: hsl(0 0% 0% / 25%);

  --thumb-color: var(--thumb);
  --thumb-color-highlight: var(--thumb-highlight);

  @media (prefers-color-scheme: dark) {
    --thumb: hsl(0 0% 5%);
    --thumb-highlight: hsl(0 0% 100% / 25%);
  }

  display: flex;
  align-items: center;
  gap: 2ch;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.input {
  appearance: none;
  border: none;
  outline-offset: .5rem;
  box-sizing: content-box;
  inline-size: var(--track-size);
  block-size: var(--thumb-size);
  padding: var(--track-padding);
  border-radius: var(--track-size);
  background: var(--track-color-inactive);
  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid: [track] 1fr / [track] 1fr;
  --thumb-position: 0%;
  --thumb-transition-duration: .3s;

  &:checked {
    --thumb-position: calc(var(--track-size) - 100%);
  }

  @media (hover: hover) {
    &:not(:disabled):hover {
      &:before {
        --highlight-size: .5rem;
      }
    }
  }

  &:disabled {
    cursor: not-allowed;
    --thumb-color: transparent;

    &:before {
      cursor: not-allowed;

      @media (prefers-color-scheme: dark) {
        box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
      }
    }
  }

  &:before {
    content: "";
    grid-area: track;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    background: var(--thumb-color);
    border-radius: 50%;
    box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
    transform: translateX(var(--thumb-position));

    @media (prefers-reduced-motion: no-preference) {
      transition:
        transform var(--thumb-transition-duration) ease,
        box-shadow .25s ease;
    }
  }
}