// // Radio - JS // —————————————-

.form-radio-js {

width: 22px;
height: 22px;
font-size: 24px;
padding: 0;
border: 0;
background-color: $radio-bgr-color;
border-radius: 50%;
font-family: 'TeleIconUi';
line-height: 1px;
position: relative;
@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($radio-bgr-color, 21%, true);
}

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

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

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

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

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

  &:before {
    content: '';
  }
}

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

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

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

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

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

}

// <= IE8

.lte-ie8 {

.form-radio-js {
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAYCAYAAAAxkDmIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNzdDRDJBNDk3RTFFMzExODA1Q0VBNjZFMjk1MzI2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODZGRDVCRkUxQTcxMUUzQTBCRkM0RUQzNUQwMDFCRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODZGRDVCRUUxQTcxMUUzQTBCRkM0RUQzNUQwMDFCRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JE+ciQAAAjVJREFUeNrsms1Kw0AUhadpl4KrglAQFMTiSvAFiiAIgsWFm3bpA9gnUHyALnyAbty6EApSQfANBFeiCHZVEEILBbcFz+ANxKGTv87tgNwDpw2h+ZJyksmdn9J4PFYJqsEn8BFchXdp/wscwvfwHTyad/BkMlEpWogfhiErfzqdsvIbjQYrX6tkCXgNvoLP4HLKRczgHnwJf2UM2Ak/IWAn/ISAnfATAnbCtwV8CN/CKyqfvuFT+CElYGd8S8DO+JaAnfEtATvjawXGj87hQQG4omMGxLBJ+EvmxwM+hrtqcXWJZUr4HvhB7GV+k6G9z6IysWpGsSB8D/wo4At4VbnTKjGV8P3ydZG1ju9PR3ePWd1tUqHFxqdCi41PhRYbnwotNn4FHy0GeNRUtGLbwvfA1wEfKD7tM1288DPydcDbjCfYUbwSfgq/QkNgXKoy/wHhp/ADJfrX0gGHjPxQ+H75uol+NzrdLvVKRYTwPfH1E/zIeAc9Cd8vXw90bGDjg6mjvUUDHWx8Guhg49NABxufBjrY+PoJHqrf+UTX6iHcIScf4bLyES4rH+Gy8jU7mg/W74A3VWyaap703GQdAUcrDVj4CJiVj4BZ+QiYlQ+Pom6SPlHb4d3TVn+XkQjfEz/eD+7DHQfwDrFMCd8D3xzouIab9IgXaRaaxLBJ+EvmB5Y7qU4v6VnGaq1Hx/Qz/F74S+SXci6b3aP9z4pn2WwufoFls7n4BZbN5uIXWDabi6/1I8AAeDZjVOQRAs0AAAAASUVORK5CYII=');

  &.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-radio-js {

background-position: -96px 0;

}