@layer components {
  .file-group-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .file-group-title__row {
    --icon-size: var(--button-icon-size);

    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-faint);
  }

  form.file-group-title .file-group-title__row {
    align-items: start;
  }

  form.file-group-title .file-group-title__row > .icon {
    flex: none;
    margin-block-start: calc((var(--tap-min) - var(--icon-size)) / 2);
  }

  .file-group-title__name {
    display: flex;
    align-items: center;
    min-inline-size: var(--space-0);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-2);
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
  }

  .file-group-title__save {
    display: none;
    flex: none;
    padding-inline: var(--space-6);
  }

  .file-group-title:is(:focus-within, :has(.field--invalid)) .file-group-title__save {
    display: inline-flex;
  }

  .file-group-title:is(:focus-within, :has(.field--invalid)) .icon--pencil-square {
    display: none;
  }

  .file-group-title__count {
    padding-inline-start: calc(var(--button-icon-size) + var(--space-3) + var(--space-2));
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }
}