@layer components {
  .inline-edit {
    --inline-edit-label-width: 11rem;
    --inline-edit-min-height: calc(var(--space) * 4.5);

    display: grid;
    grid-template-columns: var(--inline-edit-label-width) minmax(0, 1fr);
    align-items: start;
    gap: var(--space);
    min-block-size: var(--inline-edit-min-height);
    padding-block: var(--space);
  }

  .inline-edit + .inline-edit {
    border-block-start: var(--border-faint);
  }

  .inline-edit__heading {
    display: grid;
    gap: var(--space-eighth);
    padding-block: var(--field-padding-block);
  }

  .inline-edit__label {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }

  .inline-edit__hint {
    color: var(--color-ink-faint);
    font-size: var(--text-x-small);
  }

  .inline-edit__display {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space);
    inline-size: 100%;
    min-block-size: var(--control-size);
    padding: var(--field-padding-block) var(--field-padding-inline);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    line-height: var(--leading-loose);
    text-align: start;
    white-space: pre-line;
    cursor: text;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .inline-edit__display .icon {
    flex-shrink: 0;
    margin-block-start: var(--space-quarter);
    color: var(--color-ink-soft);
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  @media (any-hover: hover) {
    .inline-edit__display:hover {
      border-color: var(--color-border);
      background: var(--surface-quiet);
    }

    .inline-edit__display:hover .icon {
      opacity: 1;
    }
  }

  .inline-edit__display:focus-visible .icon {
    opacity: 1;
  }

  .inline-edit__editor .combobox {
    inline-size: 100%;
  }

  @media (width < 40rem) {
    .inline-edit {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-quarter);
    }

    .inline-edit__heading {
      padding-block-end: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .inline-edit__display,
    .inline-edit__display .icon {
      transition-duration: 0s;
    }
  }
}