.c-radio {
  font-size: var(--lf-radio-font-size);
  line-height: var(--lf-radio-line-height);
  font-weight: var(--lf-radio-text-font-weight);
  color: var(--lf-radio-text-color);
  @apply flex flex-wrap relative;

  input {
    height: var(--lf-radio-size);
    width: var(--lf-radio-size);
    border: rem(1) solid var(--lf-radio-border);
    background: var(--lf-radio-background);
    box-shadow: var(--lf-radio-shadow);

    --lf-radio-border: var(--lf-radio-unchecked-border);
    --lf-radio-background: var(--lf-radio-unchecked-background);

    @apply transition-all appearance-none rounded-full p-0 my-0 ml-0 inline-block mr-2 cursor-pointer;

    // Text
    & + span{
      @apply cursor-pointer;
    }

    // Checked
    &:checked{
      --lf-radio-border: var(--lf-radio-checked-border);
      --lf-radio-background: var(--lf-radio-checked-background);
      border-width: rem(5);
    }

    // Disabled
    &:disabled {
      --lf-radio-border: var(--lf-radio-disabled-unchecked-border);
      --lf-radio-background: var(--lf-radio-disabled-unchecked-background);
      @apply cursor-not-allowed;

      &:checked {
        --lf-radio-border: var(--lf-radio-disabled-checked-border);
        --lf-radio-background: var(--lf-radio-disabled-checked-background);
      }

      & + span{
        @apply cursor-not-allowed;
      }
    }
  }

  // Checkbox sizes
  &--small {
    --lf-radio-size: var(--lf-radio-small-size);
    --lf-radio-font-size: var(--lf-radio-small-font-size);
    --lf-radio-line-height: var(--lf-radio-small-line-height);
  }

  &--medium {
    --lf-radio-size: var(--lf-radio-medium-size);
    --lf-radio-font-size: var(--lf-radio-medium-font-size);
    --lf-radio-line-height: var(--lf-radio-medium-line-height);
  }

  p{
    font-size: var(--lf-radio-description-font-size);
    line-height: var(--lf-radio-description-line-height);
    font-weight: var(--lf-radio-description-font-weight);
    color: var(--lf-radio-description-color);
    margin-top: var(--lf-radio-description-spacing);
  }
}
