//
// 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[disabled] .form-checkbox-js {
  background-position: -96px 0;
}