.jfRadio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  &--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%;
      transition: .15s all;
      &: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;
    }
  }
  &--label {
    font-size: 14px;
    color: var(--jfv-navy-700);
  }
}