Switch

import "./index.scss";

export const Switch = () => (
  <label className="switch" htmlFor="switch">
    <input type="checkbox" id="switch" />
    <span className="slider" />
    <span className="label">Feature</span>
  </label>
);

.switch {
  --slider-width: 3rem;
  --slider-height: 1.5rem;
  --slider-padding: 0.125rem;
  --circle-size: calc(var(--slider-height) - var(--slider-padding) * 4);
  --circle-translate: calc(
    var(--slider-width) - var(--circle-size) - var(--slider-padding) * 4
  );

  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--neutral-10);
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  user-select: none;

  input {
    display: none;

    &:checked + .slider {
      border-color: var(--neutral-05);
      background: var(--neutral-04);

      &::before {
        transform: translateY(-50%) translateX(var(--circle-translate));
        border-color: var(--neutral-05);
      }

      &:hover {
        background: var(--neutral-03);
      }
    }
  }

  .slider {
    position: relative;
    width: var(--slider-width);
    height: var(--slider-height);
    border: 0.0625rem solid var(--neutral-04);
    border-radius: var(--rounded-lg);
    background: var(--neutral-02);
    transition:
      background-color 240ms var(--fluid),
      border-color 240ms var(--fluid);

    &::before {
      display: block;
      position: absolute;
      top: 50%;
      left: var(--slider-padding);
      width: var(--circle-size);
      height: var(--circle-size);
      transform: translateY(-50%);
      border: 0.0625rem solid var(--neutral-04);
      border-radius: 100%;
      background: var(--neutral-01);
      content: "";
      transition:
        transform 240ms var(--sharp),
        border-color 240ms var(--fluid);
    }

    &:hover {
      background: var(--neutral-03);
    }
  }
}