.jfRadio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 16px;
  width: 100%;
  @media screen and (max-width: 480px) {
    gap: 12px;
  }
  &--checkmark {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    // wp style override
    input[type=radio]{
      box-shadow: none;
      &:checked::before {
        display: none;
      }
      &:focus {
        box-shadow: none;
      }
    }
    input[type=radio] {
      appearance: none;
      border: 2px solid var(--jfv-navy-100);
      border-radius: 50%;
      display: inline-flex;
      flex-shrink: 0;
      outline: 2px solid transparent;
      outline-offset: 0;
      margin: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      &:disabled {
        cursor: not-allowed;
        background-color: var(--jfv-white);
        border-color: var(--jfv-navy-50);
      }
      &:focus {
        border-color: var(--jfv-blue-500);
        outline-color: var(--jfv-blue-200);
      }
      &:not(:disabled):hover {
        border-color: var(--jfv-blue-500);
      }
      &:checked {
        background-color: var(--jfv-blue-500);
        border-color: var(--jfv-blue-500);
        &:hover {
          background-color: var(--jfv-blue-600);
          border-color: var(--jfv-blue-600);
        }
      }
    }
    &-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: var(--jfv-white);
      top: 4px;
      left: 4px;
      bottom: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
    }
  }
  &--avatar-image {
    background-color: var(--jfv-navy-100);
    width: 38px;
    height: 38px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
  }
  &--text-wrapper {
    width: 100%;
  }
  &--label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--jfv-navy-700);
  }
  &--description {
    font-size: 14px;
    line-height: 20px;
    color: var(--jfv-navy-300);
  }

  @media screen and (max-width: 1024px) {
    &--label {
      font-size: 14px;
      line-height: 20px;
    }
    &--description {
      font-size: 12px;
      line-height: 16px;
    }
  }
}