$color1: #f4f4f4;
$color2: #3197ee;

.radio {
  margin-top: 0;
  margin-right: 5px;
  padding: 0;

  &.radio-inline {
    display: inline-block;
  }

  label {
    padding: 0;
    padding-top: 2px;
  }

  input[type="radio"] {
    position: absolute;
    opacity: 0;

    + .radio-label::before {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-top: -2px;
      margin-right: 5px;
      text-align: center;
      vertical-align: top;
      background: $input-bg;
      border: 1px solid $input-border;
      border-radius: 100%;
      cursor: pointer;
      transition: all 250ms ease;
      content: "";
    }

    &:checked + .radio-label::before {
      background-color: $primary;
      box-shadow: inset 0 0 0 4px $input-bg;
    }

    &:focus + .radio-label::before {
      border-color: $primary;
      outline: none;
    }

    &:disabled,
    &:disabled + .radio-label,
    &:disabled + .radio-label::before {
      cursor: not-allowed;
    }

    &:disabled + .radio-label::before {
      opacity: 0.9;
    }

    &:disabled:checked + .radio-label::before {
      background: lighten($input-bg, 10%);
    }
  }
}
