.radio {
  height: $form-field-height;
  position: relative;
  display: inline-block;
  margin-right: $spacing-medium;

  .radio-label {
    padding-left: calc(#{$spacing-small} * 3);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
  }

  input[type='radio'] {
    position: absolute;
    opacity: 0;
    & + label {
      position: absolute;
      display: inline-block;
      display: block;
      min-height: calc(#{$spacing-small} * 2);
      padding-left: calc(#{$spacing-small} * 3);
      cursor: pointer;
        &:before {
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 70%;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          content: '';
          height: $form-field-height;
          width: $form-field-height;
          border: 1px solid $gray-light;
          border-radius: 50%;
          cursor: pointer;
        }
    }
    &:checked {
        & + label:after {
          position: absolute;
          left: 8px;
          top: 8px;
          height: $form-field-height - 16;
          width: $form-field-height - 16;
          content: '';
          background-color: $gray-medium;
          border-radius: 50%;
        }
    }

    &:focus {
        & + label:before {
          border-color: $color-info !important;
        }
    }
  }
  input[type='radio'][disabled], input[type='radio'][readonly]  {
      & + label {
        opacity: 0.6;
          &:before {
            background-color: $gray-very-light;
          }
      }
  }
}