.switch {
  margin: 0px 10px;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;

  &__input { 
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .switch__slider {
      background-color: #00c08b;
    }

    &:focus + .switch__slider {
      box-shadow: 0 0 1px #00c08b;
    }

    &:checked + .switch__slider:before {
      .vendor(transform, translateX(26px));
    }
  }

  &__slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;

    &:before {
      color: @brand-color-blue;
      font: normal normal normal 14px/1 Font Awesome\ 5 Free;
      position: absolute;
      content: "\f017";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      font-size: 26px;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 50%;
    }
  }
}
/*
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
*/