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



$diameter: 1em;

.toggle-dark {
  position: relative;
  width: 2em;
  display: inline-block;
  top: -0.8em;

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

    input {
      position: absolute;
      display: none;
    }

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

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

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

    .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--color);
      transition: 0.3s;
    }

  }
}