Switch

import "./index.css";

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;
}

.switch input {
  display: none;
}

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

.switch input:checked + .slider::before {
  transform: translateY(-50%) translateX(var(--circle-translate));
  border-color: var(--neutral-05);
}

.switch input:checked + .slider:hover {
  background: var(--neutral-03);
}

.switch .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);
}

.switch .slider::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);
}

.switch .slider:hover {
  background: var(--neutral-03);
}