Radio Buttons

radios.scss

$fake-radio-size: $baseline-grid-height * 3;

$radio-dot-size: $baseline-grid-height * 2;
$radio-distance-from-left: ($fake-radio-size - $radio-dot-size)/2;
$radio-distance-from-top: ($fake-radio-size - $radio-dot-size)/2;

@mixin radio {
  line-height: $baseline-grid-height * 4;
  margin-bottom: $baseline-grid-height;

  > label {
    position: relative;
    line-height: $fake-checkbox-size;
    padding-left: $fake-checkbox-size + ($baseline-grid-height * 2);

    span {
      display: inline-block;
      position: absolute;
      width: $fake-radio-size;
      height: $fake-radio-size;
      left: 0;
      top: -2px;
      border: 1px solid $brand-light-gray;
      border-radius: $fake-radio-size/2;
    }
  }
  
  input[type="radio"] {
    display: none;
  }

  input[type="radio"]:checked + span:before {
    position: absolute;
    display: inline-block;
    content: " ";
    z-index: 1;
    left: $radio-distance-from-left;
    top: $radio-distance-from-top;
    width: $radio-dot-size;
    height: $radio-dot-size;
    background: $brand-blue;
    border-radius: $radio-dot-size/2;
  }
}