pkg-components/stories/molecules/ToggleSwitch/styles.module.css

.container {
  display: flex;
  align-items: center;
}

.switch {
  display: flex;
  height: 26px;
  position: relative;
  width: 50px;
}

.label {
  align-items: center;
  color: #9e9e9e;
  display: flex;
  margin: 0.6em 0;
  margin: 1rem;
  position: relative;
  transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);

}

.switch input {
  height: 0;
  opacity: 0;
  width: 0;
}

.slider {
  background-color: var(--color-neutral-gray);
  border-radius: 50px;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider:before {
  background-color: var(--color-base-white);
  border-radius: 50%;
  bottom: 3px;
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
}

input:checked+.slider {
  background-color: var(--color-primary-red);
}

input:checked+.slider:before {
  transform: translateX(24px);
}