:root {
  /*--primary-color: var(--primary-color); */
  /* --primary-text-color: var(--primary-text-color); */
}



$diameter: 50px;

.toggle-switch {
  position: relative;
  width: $diameter * 2;
}

label {
  position: absolute;
  width: 100%;
  height: $diameter;
  background-color: var(--primary-text-color);
  border-radius: $diameter / 2;
  cursor: pointer;
}

input {
  position: absolute;
  display: none;
}

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: $diameter / 2;
  transition: 0.3s;
}

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

.slider::before {
  content: "";
  position: absolute;
  top: $diameter * 0.13;
  left: $diameter * 0.16;
  width: $diameter * 0.75;
  height: $diameter * 0.75;
  border-radius: 50%;
  box-shadow: inset $diameter * .28 $diameter * -.04 0px 0px var(--primary-color);
  background-color: var(--primary-text-color);
  transition: 0.3s;
}

input:checked~.slider::before {
  transform: translateX($diameter * 0.95);
  background-color: var(--primary-text-color);
  box-shadow: none;
}