@toggle-width: 85px;

@toggle-border-color: #ddd;




@toggleFlat-cursor-margin:4px;













@toggle-icon-on-color: #fff;
@toggle-icon-off-color:#eee;

@toggle-on-color: #8ce196;
@toggle-off-border-color:#ddd;
@toggle-effect-duration: 0.3s;


.Toggle-wrapper{
  input[type="checkbox"]{
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;

    & + label {
      display: block;
      position: relative;
      cursor: pointer;
      outline: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }







  /* flatToggle */

  .flatToggle{
    & + label {
      margin-top: 2px;
      width: @toggle-width;
      height: @toggle-width / 2;
      background-color: @toggle-off-border-color;
      .toggleBorderRadis(@toggle-width / 2);
      -webkit-transition: background @toggle-effect-duration;
      -moz-transition: background @toggle-effect-duration;
      -o-transition: background @toggle-effect-duration;
      transition: background @toggle-effect-duration;
    }
    & + label:before,
    & + label:after {
      display: block;
      position: absolute;
      content: "";
    }
    & + label:before {
      top: 2px;
      left: 2px;
      bottom: 2px;
      right: 2px;
      background-color: #fff;
      .toggleBorderRadis(@toggle-width / 2);
      -webkit-transition: background @toggle-effect-duration;
      -moz-transition: background @toggle-effect-duration;
      -o-transition: background @toggle-effect-duration;
      transition: background @toggle-effect-duration;
    }
    & + label:after {
      font-family: 'themify';
      content: "\e64c";
      color: @toggle-off-border-color;
      top: @toggleFlat-cursor-margin;
      left: @toggleFlat-cursor-margin;
      bottom: @toggleFlat-cursor-margin;
      width: ( @toggle-width / 2 ) - ( @toggleFlat-cursor-margin * 2 );
      background-color: #dddddd;
      text-align: center;
      line-height: (@toggle-width / 2) -  8;

      .toggleBorderRadis(( @toggle-width / 2 ) - ( @toggleFlat-cursor-margin / 2 ));

      -webkit-transition: margin @toggle-effect-duration, background @toggle-effect-duration;
      -moz-transition: margin @toggle-effect-duration, background @toggle-effect-duration;
      -o-transition: margin @toggle-effect-duration, background @toggle-effect-duration;
      transition: margin @toggle-effect-duration, background @toggle-effect-duration;
    }
    &:checked + label {
      background-color: @toggle-on-color;
    }
    &:checked + label:after {

      margin-left: @toggle-width / 2;
      background-color: @toggle-on-color;
      color: @toggle-icon-on-color;
      text-align: center;
      line-height: (@toggle-width / 2) -  8;
    }


  }






  .flipToggle{
    & + label {
      padding: 2px;
      width: @toggle-width;
      height: @toggle-width / 2;
    }
    & + label:before,
    & + label:after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: #fff;
      font-size: @font-size-medium;
      text-align: center;
      line-height: (@toggle-width / 2) + 2.5;
    }

    & + label:before {
      background-color: @toggle-icon-off-color;
      content: attr(data-off);
      -webkit-transition: -webkit-transform @toggle-effect-duration;
      -moz-transition: -moz-transform @toggle-effect-duration;
      -o-transition: -o-transform @toggle-effect-duration;
      transition: transform @toggle-effect-duration;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    & + label:after {
      background-color: @toggle-on-color;
      content: attr(data-on);
      -webkit-transition: -webkit-transform @toggle-effect-duration;
      -moz-transition: -moz-transform @toggle-effect-duration;
      -o-transition: -o-transform @toggle-effect-duration;
      transition: transform @toggle-effect-duration;
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      transform: rotateX(180deg);

      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    &:checked + label:before {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
    &:checked + label:after {
      -webkit-transform: rotateX(0);
      -moz-transform: rotateX(0);
      -ms-transform: rotateX(0);
      -o-transform: rotateX(0);
      transform: rotateX(0);
    }

  }


  .Toggle-on-icon{
    .Icon{
      position: absolute;
      z-index: 2;
      font-weight: bold;
      left: 56px;
      top: 16px;
      color: #fff;
      font-size: 16px;
    }
  }

  &:hover .Toggle-on-icon{
    display: none;
  }








}




.toggleBorderRadis (@r) {
  -webkit-border-radius:@r;
  -moz-border-radius:@r;
  -ms-border-radius:@r;
  -o-border-radius:@r;
  border-radius:@r;
}