/*
 * Inline edit — a value as text with a pencil, or its field with a ✓ (inline_edit_controller.js).
 * The profile's name, large; --field for a detail in a list (a report's reporter, reports/_reporter)
 */
.inline-edit__display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
}

.inline-edit__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.inline-edit__form {
  display: flex;
  gap: var(--space-2);

  .input {
    flex: 1;
    min-width: 0;
  }

  /* Rails wraps a field with an error in a div, which would take the field out of the row */
  .field_with_errors {
    display: contents;
  }
}

.inline-edit--field {
  .inline-edit__display {
    justify-content: space-between;
    min-height: var(--control-height-sm);
  }

  .inline-edit__value {
    font-size: inherit;
    font-weight: inherit;
  }

  .form-error {
    margin-top: var(--space-1);
  }
}