.form-check-input[type="radio"] {
  --radio-width: #{unit(4.5)};
  --radio-bg: white;
  --radio-radius: 50%;
  --radio-border-color: var(--secondary-color);
  --radio-hover-border-color: var(--secondary-color-darker);
  --radio-checked-bg: var(--primary-color);
  --radio-disabled-bg: var(--secondary-color-lighter);
  --radio-disabled-checked-bg: var(--secondary-color-darker);

  @include square(var(--radio-width));
  position: relative;
  background: var(--radio-checked-bg);
  border: none;
  border-radius: var(--radio-radius);
  transition: 0.3s;
  appearance: none;
  margin: 0;
  cursor: pointer;

  & #{$sibling-selector} .form-check-label {
    margin-left: unit(2.5);
    cursor: pointer;
    transition: 0.3s;
  }

  &::before,
  &::after {
    @include cover;
    content: "";
    background: var(--radio-bg);
    border-radius: inherit;
  }

  &::before {
    transform: scale(0);
  }

  &::after {
    box-shadow: inset 0 0 0 1px var(--radio-border-color);
    transition: 0.2s;
  }

  &:hover {
    --radio-border-color: var(--radio-hover-border-color);
  }

  &:checked {
    &::before {
      animation: scale-in-smaller 0.1s 0.2s linear forwards;
    }

    &::after {
      transform: scale(0);
    }
  }

  &:disabled {
    --radio-bg: var(--radio-disabled-bg);
    --radio-checked-bg: var(--radio-disabled-checked-bg);

    cursor: not-allowed;

    & #{$sibling-selector} .form-check-label {
      cursor: not-allowed;
    }
  }
}
