.onoff-container {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 45px;

  .onoff-slider-container {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .onoff-slider {
      height: 12px;
      width: 100%;
      background-color: gray;
      border-radius: 6px;
    }
  }

  .onoff-switch-container {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &.on {
      justify-content: flex-end;
    }

    &.off {
      justify-content: flex-start;
    }

    .onoff-switch {
      height: 20px;
      width: 20px;
      border-radius: 10px;

      &.on {
        background-color: #00b0ff;
      }

      &.off {
        background-color: darkgrey;
      }
    }
  }
}