.jfCheckbox {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  &--checkmark {
    position: relative;
    display: flex;
    align-items: center;
    // wp style override
    input[type=checkbox]{
      box-shadow: none;
      &:checked::before {
        display: none;
      }
      &:focus {
        box-shadow: none;
      }
    }
    input {
      appearance: none;
      border: 2px solid var(--jfv-navy-100);
      border-radius: 4px;
      display: inline-flex;
      flex-shrink: 0;
      outline: 2px solid transparent;
      outline-offset: 0;
      margin: 0;
      cursor: pointer;
      &: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);
        }
      }
    }
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      fill: var(--jfv-white);
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  &--label {
    font-size: 14px;
    color: var(--jfv-navy-700);
  }
  &:has(input:disabled) .jfCheckbox--label {
    color: var(--jfv-navy-100);
  }
}