// // Checkbox - JS // —————————————-

.form-checkbox-js {

width: 22px;
height: 22px;
font-size: 24px;
padding: 0;
border: 0;
background-color: $checkbox-bgr-color;
border-radius: (12px / 3);
font-family: 'TeleIconUi';
line-height: 1px;
position: relative;
-webkit-font-smoothing: antialiased; // reduce font weight
-moz-osx-font-smoothing: grayscale; // reduce font weight
@include user-select(none);
@include transition(all $transition-time-out $transition-function);

&.focus,
&:focus {
  outline: 0;
}

&.focus { // since we simulate the focus behavior, we need a real class
  background-color: hsv-darken($checkbox-bgr-color, 21%, true);
}

&.hover,
&:hover {
  background-color: hsv-darken($checkbox-bgr-color, 7%, true);
  @include transition($transition-time-in, '-duration');
}

&.active,
&:active {
  background-color: hsv-darken($checkbox-bgr-color, 15%, true);
}

// outline
> .border {
  color: $checkbox-border-color;
  position: absolute;
  top: 9px;
  left: -1px;

  &:before {
    content: 'A';
  }
}

> .check {
  font-size: 24px;
  position: absolute;
  top: 9px;
  left: -1px;
  color: $checkbox-check-color;

  &:before {
    content: '';
  }
}

&.checked > .check:before {
  content: 'B';
}

fieldset[disabled] &,
&[disabled],
&.disabled {
  cursor: not-allowed;
  background-color: $checkbox-disabled-bgr-color;

  > .border:before {
    color: $checkbox-disabled-border-color;
  }

  > .check:before {
    color: $checkbox-disabled-check-color;
  }
}

.form-checkbox-set & {
  vertical-align: middle;
  float: left;
  margin-left: -36px;
  margin-right: 12px;
}

}

// <= IE8

.lte-ie8 {

.form-checkbox-js {
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAYCAYAAAAxkDmIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNzdDRDJBNDk3RTFFMzExODA1Q0VBNjZFMjk1MzI2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDA0Mjc4MUUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDA0Mjc4MEUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HYcNygAAAP5JREFUeNrsmjFqwzAAReWQsRDImgNk8wlaqiUn6pqxa27SGxQ6lR7BNzAEhAWCroF8geZ2SD6C8B58Izw8Yx7ePCzLEsROO2nP7XwLs/atveWc53bP4k8pWf2lFKs/xmj11/OgwHsdfrRtuC9Ze1Hki9OvyFa/Ilv9imz1r3V5N8hDc1b3BX8/fw18CD4O7QXwd/LXwBvjA56CF/z/+FcBHhoCExgIDAQGAgOBgcBAYAIDgYHAQGAgMBAY/g5cjP5f/H39NfCX8QGf+Pv66x8dR+01eH76OrYz/k7++gVP2qh9aOc7iM/NNeacJ6c/pWT1l1Ks/hij1V/dVwEGAJDahM+tVIFSAAAAAElFTkSuQmCC');

  &.focus,
  &:focus {
    background-position: -72px 0;
  }

  &.hover,
  &:hover {
    background-position: -24px 0;
  }

  &.active,
  &:active {
    background-position: -47px 1px; // -48px 0 -3d click fx ie
  }

  &[disabled],
  &.disabled {
    background-position: -96px 0;
  }
}

}

.lte-ie8 fieldset .form-checkbox-js {

background-position: -96px 0;

}