.c-radio {
  display: flex;
  align-items: center;
  position: relative;
  padding: 3px 0 3px 32px;
  cursor: pointer;
  user-select: none;
  font: {
    family: $ff-base;
    size: $fs-small;
    weight: $fw-regular;
  }

  &--disabled {
    cursor: default;
  }

  &__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  &__checkmark {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid map-get($grey, 20);
  }

  &__checkmark-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:hover &__input ~ &__checkmark-container &__checkmark {
    border-color: map-get($orange, 1);
  }

  &__input:disabled ~ &__checkmark-container &__checkmark {
    border-color: map-get($grey, 20);
    cursor: default;
  }

  &:hover &__input:disabled ~ &__checkmark-container &__checkmark {
    border-color: map-get($grey, 20);
    cursor: default;
  }

  &:hover &__input:checked ~ &__checkmark-container &__checkmark {
    background-color: map-get($orange, 1);
  }

  &__input:checked:disabled ~ &__checkmark-container &__checkmark {
    background-color: map-get($grey, 20);
  }

  &__input:checked ~ &__checkmark-container &__checkmark {
    background-color: map-get($orange, 2);
    border-color: map-get($orange, 2);
  }

  &__input:checked:disabled ~ &__checkmark-container &__checkmark {
    background-color: map-get($grey, 10) !important;
    border-color: map-get($grey, 20) !important;
  }

  &__checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  &__input:checked ~ &__checkmark-container &__checkmark:after {
    display: block;
  }

  &__checkmark:after {
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    background-color: $white;
    border-radius: 50%;
  }
}
