.form-radio, .form-radio-inline {
  padding-left: $input-4d-options-to-text-whitespace;
  position: relative;

  >  input[type="radio"].form-radio-input {
    -webkit-appearance:none;/* Hides the default checkbox style */
    height: $input-4d-options-dimension;
    width: $input-4d-options-dimension;
    border-radius: $input-4d-options-border-radius;
    border: $input-4d-options-border-width solid $input-4d-radio-default-border-color;
    background-color: $white;
    outline: none;
    margin: 0;
    left: 0;
    position: absolute;
    cursor: pointer;

    &:before {
      position: absolute;
      $top: $input-4d-radio-tick-dimension / 2;
      top: calc(50% - 0.2186rem);
      left: calc(50% - 0.2186rem);
      width: $input-4d-radio-tick-dimension;
      height: $input-4d-radio-tick-dimension;
      border-radius: 50%;
      background-color: $input-4d-radio-default-border-color;
    }

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

    &:disabled {
      cursor: not-allowed;
    }

    &:hover {
      border-color: $input-4d-radio-hover-border-color;
      &:before {
        background-color: $input-4d-radio-hover-text-color;
      }
    }

    &:active {
      background-color: $input-4d-radio-active-bg-color;
      border-color: $input-4d-radio-active-border-color;
      &:before {
        background-color: $input-4d-radio-active-text-color;
      }
    }

    &:not(.form-check-inline) {
      top: $input-4d-options-top;
    }
  }
}

.form-check-inline {
  input[type="radio"].form-check-input {
    margin-right: 0;
  }
}