/*
 * A title edited in place: the field reads as the heading until focused,
 * then shows itself as a field with its Save button (autosave_controller.js).
 */
@layer components {
  .title-form {
    display: flex;
    align-items: start;
    gap: var(--space-3);

    & .field_with_errors {
      display: contents;
    }
  }

  .title-form__input {
    flex: 1;
    max-inline-size: none;
    min-block-size: auto;
    padding: var(--space-1) var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
    border: 1px solid transparent;
    background: transparent;
    font: var(--text-title);
    color: var(--color-ink);
    resize: none;
    field-sizing: content;
    cursor: text;

    &:hover {
      border-color: var(--color-line);
    }

    &:focus {
      border-color: var(--color-text);
      background: var(--color-paper);
      outline: 0;
    }
  }

  /* Save appears once there is something to save. */
  .title-form :where(input[type="submit"]) {
    visibility: hidden;
  }

  .title-form:focus-within :where(input[type="submit"]),
  .title-form:has([aria-invalid="true"]) :where(input[type="submit"]) {
    visibility: visible;
  }
}