@layer components {
  .toolbar {
    position: sticky;
    inset-block-start: var(--space-0);
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: var(--tap-min) minmax(var(--space-0), var(--track-fill)) var(--tap-min);
    grid-template-areas: "back title trailing";
    align-items: center;
    column-gap: var(--space-4);
    padding-block: calc(var(--safe-top) + var(--space-3)) var(--space-3);
    padding-inline: max(var(--gutter-fluid), (var(--size-fill) - var(--measure)) / 2 + var(--gutter-fluid));
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .toolbar--nested {
    position: static;
    padding-block: var(--space-0);
    border-block-end: none;
  }

  .toolbar--form {
    grid-template-columns: minmax(max-content, var(--track-fill)) minmax(var(--space-0), auto) minmax(max-content, var(--track-fill));
  }

  .toolbar__back {
    grid-area: back;
    justify-self: start;
  }

  .toolbar__title {
    grid-area: title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-heading);
    color: var(--color-ink);
    text-align: center;
  }

  .toolbar__trailing {
    grid-area: trailing;
    display: flex;
    justify-content: end;
  }
}