@if mgwt.css pretty {
  @external mgwt-CheckBox, mgwt-CheckBox-middle, mgwt-CheckBox-middle-content;
  @external mgwt-CheckBox-on, mgwt-CheckBox-off, mgwt-CheckBox-important;
  @external mgwt-CheckBox-notchecked, mgwt-CheckBox-checked;
}

@def DRAG_DEADZONE 8;
@def CONTAINER_MIN_ON -41;
@def CONTAINER_MAX_ON 0;
@def CONTAINER_OFFSET_ON 0;
@def CONTAINER_MIN_OFF 0;
@def CONTAINER_MAX_OFF 41;
@def CONTAINER_OFFSET_OFF -41;


.mgwt-CheckBox {
  width: 81px;
  height: 27px;
  overflow: hidden;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px #a2a2a2;
}

.mgwt-CheckBox-middle {
  position: absolute;
  left: 40px;
  height: 25px;
  z-index: 1;
}

@if user.agent safari {
  .mgwt-CheckBox-middle {
    -webkit-transition: all 0.1s ease-in-out;
  }
}

@if user.agent gecko1_8 {
  .mgwt-CheckBox-middle {
    -moz-transition: all 0.1s ease-in-out;
    -moz-border-radius: 6px;
  }
}

.mgwt-CheckBox-middle-content {
  display: block;
  position: absolute;
  height: 25px;
  width: 38px;
  background-color: #e5e9e8;
  border-radius: 5px;
}

@if user.agent safari {
  .mgwt-CheckBox-middle-content {
    -webkit-box-sizing: border-box;
  }
}

@if user.agent gecko1_8 {
  .mgwt-CheckBox-middle-content {
    -moz-box-sizing: border-box;
  }
}

.mgwt-CheckBox-on {
  position: absolute;
  height: 25px;
  color: #ffffff;
  width: 54px;
  background-color: #288edf;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

@if user.agent safari {
  .mgwt-CheckBox-on {
    -webkit-transition: all 0.1s ease-in-out;
  }
}

@if user.agent gecko1_8 {
  .mgwt-CheckBox-on {
    -moz-transition: all 0.1s ease-in-out;
  }
}

.mgwt-CheckBox-off {
  position: absolute;
  color: #666666;
  width: 54px;
  left: 74px;
  height: 25px;
  background-color: #d2d6d6;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

@if user.agent safari {
  .mgwt-CheckBox-off {
    -webkit-transition: all 0.1s ease-in-out;
  }
}

@if user.agent gecko1_8 {
  .mgwt-CheckBox-off {
    -moz-transition: all 0.1s ease-in-out;
  }
}

@if user.agent safari {
  .mgwt-CheckBox-important .mgwt-CheckBox-on {
    background-color: #fe9c12;
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-middle {
    -webkit-transform: translate3d(-41px,0,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-middle {
    -webkit-transform: translate3d(0px,0,0);
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-off {
    -webkit-transform: translate3d(-41px,0,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-off {
    -webkit-transform: translate3d(10px,0,0);
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-on {
    -webkit-transform: translate3d(-81px,0,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-on {
    -webkit-transform: translate3d(0px,0,0);
  }
}

@if user.agent gecko1_8 {
  .mgwt-CheckBox-important .mgwt-CheckBox-on {
    border: solid 1px #d87101;
    background-color: #fe9c12;
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-middle {
    -moz-transform: translate(-54px,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-middle {
    -moz-transform: translate(0px,0);
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-off {
    -moz-transform: translate(-54px,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-off {
    -moz-transform: translate(0px,0);
  }
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-on {
    -moz-transform: translate(-62px,0);
  }
  .mgwt-CheckBox-checked .mgwt-CheckBox-on {
    -moz-transform: translate(0px,0);
  }
}

/*TODO add browser....*/
@if user.agent ie8 ie9 ie10 {
  .mgwt-CheckBox-important .mgwt-CheckBox-on {}
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-middle {}
  .mgwt-CheckBox-checked .mgwt-CheckBox-middle {}
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-off {}
  .mgwt-CheckBox-checked .mgwt-CheckBox-off {}
  .mgwt-CheckBox-notchecked .mgwt-CheckBox-on {}
  .mgwt-CheckBox-checked .mgwt-CheckBox-on {}
}
