:root {
    --slider-width: 2em;
    --slider-size: 0.5em;
    --slider-margin: 0.3em;
    --slider-transition: calc(var(--slider-width) - var(--slider-size) - 2 * var(--slider-margin))
}

.flexbox .switch .switch {
  top: 0;
}

.switch {


  .switchbox {
    position: relative;
    display: inline-block;
    width: var(--slider-width);
    min-width: var(--slider-width);
    max-width: var(--slider-width);
    /*height: 1em;*/
    top: 0;

    input { 
      opacity: 0;
      width: 0;
      height: 0;

      /*&:focus + .slider,*/
      &:checked + .slider {
        background-color: #2196F3;
      }

      /*&:focus + .slider .digit,*/
      &:checked + .slider .digit {
        
      }
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;

      &.round {
        border-radius: var(--input-heigth);
        &:before {
          border-radius: 50%;
        }
      }

      &:before {
        position: absolute;
        content: "";
        height: var(--slider-size);
        width: var(--slider-size);
        left: var(--slider-margin);
        bottom: var(--slider-margin);
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
    }

    .digit {
      position: absolute;
      cursor: pointer;
      top: 0;
      bottom: 0;
      right: var(--slider-margin);
      width: var(--slider-size);
      text-align: center;
      align-content: center;
      color: black;
    }
  }
}






input:checked + .slider:before {
  -webkit-transform: translateX(var(--slider-transition));
  -ms-transform: translateX(var(--slider-transition));
  transform: translateX(var(--slider-transition));
}