@layer components {
  .save-bar {
    --save-bar-width: calc(var(--space) * 40);
    --save-bar-content-start: var(--workspace-content-start, var(--app-shell-content-start, 0rem));

    position: fixed;
    inset-inline-start: calc((100vw + var(--save-bar-content-start)) / 2);
    inset-inline-end: auto;
    inset-block-end: var(--space-and-half);
    z-index: var(--z-popup);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-and-half);
    inline-size: min(var(--save-bar-width), calc(100vw - var(--save-bar-content-start) - var(--space-triple)));
    padding: var(--space-three-quarters);
    border: var(--border);
    border-radius: var(--radius-large);
    background: var(--color-canvas-translucent);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(var(--space-half));
    translate: -50% 0;
  }

  /* A fixed element is positioned against the viewport, so each containing
     layout exposes where its usable content begins. The component adapts that
     value to --save-bar-content-start above; without a shell, as in the
     component gallery, its fallback centers over the whole viewport. */

  .save-bar__status {
    display: grid;
    min-inline-size: 0;
  }

  .save-bar__status strong {
    font-size: var(--text-normal);
  }

  .save-bar__status span {
    overflow: hidden;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .save-bar__actions {
    display: flex;
    gap: var(--space-half);
    flex-shrink: 0;
  }

  @media (width < 40rem) {
    .save-bar {
      inset-inline: var(--space);
      inset-block-end: var(--space);
      inline-size: auto;
      align-items: stretch;
      flex-direction: column;
      gap: var(--space-half);
      translate: none;
    }

    .save-bar__actions .btn {
      flex: 1;
    }
  }
}