@import '../palette';
.radio {
  div {
    input[type="radio"] {
      float: left;
      opacity: 0;
      &:checked + label:before {
        background-color: $brand-color;
      }
      &:disabled + label, &:disabled + label:after {
        opacity: .6;
        cursor: default;
      }
    }
    label {
      display: block;
      position: relative;
      cursor: pointer;
      outline: none;
      padding-left: em-calc(26px);
      &:before,
      &:after {
        position: absolute;
        content: "";
        border-radius: 50%;
        display: inline-block;
      }
      &:before {
        left: 2px;
        top: 6px;
        width: 12px;
        height: 12px;
      }
      &:after {
        @include border(lighten($light-blue-color,8));
        top: 3px;
        left: -1px;
        width: 18px;
        height: 18px;
      }
    }
  }
}