@layer surfaces {
  :root {
    --topbar-action-target: 36px;
    --topbar-floating-chrome-plate-block-size: calc(var(--topbar-action-target) + (2 * var(--floating-chrome-plate-padding)));
    --topbar-h: calc(var(--topbar-floating-chrome-plate-block-size) + (var(--space-related) * 2) + var(--app-safe-top));
  }

  #topbar,
  .topbar {
    align-items: center;
    background: transparent;
    block-size: var(--topbar-h);
    border-block-end: 0;
    display: flex;
    flex: 0 0 0;
    gap: 0;
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: center;
    min-inline-size: 0;
    padding-block: max(var(--space-related), var(--app-safe-top)) var(--space-related);
    padding-inline: max(var(--space-cluster), var(--app-safe-left)) max(var(--space-cluster), var(--app-safe-right));
    pointer-events: none;
    position: fixed;
    z-index: var(--z-topbar);
  }

  .topbar-action-rail {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    flex: 1 1 auto;
    inline-size: 100%;
    justify-content: center;
    max-inline-size: 100%;
    min-block-size: var(--topbar-floating-chrome-plate-block-size);
    min-inline-size: 0;
    overflow: visible;
    padding: 0;
    pointer-events: none;
    scrollbar-width: none;
  }

  .topbar-action-rail::-webkit-scrollbar,
  .topbar-sidebar-group::-webkit-scrollbar { display: none; }

  .topbar-sidebar-host { display: none; }

  .topbar-sidebar-group {
    align-items: center;
    background: transparent;
    block-size: var(--topbar-floating-chrome-plate-block-size);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    direction: ltr;
    display: flex;
    flex: 0 0 auto;
    gap: var(--floating-chrome-control-gap);
    justify-content: flex-end;
    max-inline-size: 100%;
    min-block-size: var(--topbar-floating-chrome-plate-block-size);
    overflow: visible;
    padding: var(--floating-chrome-plate-padding);
    pointer-events: auto;
  }

  @media (pointer: coarse) {
    :root { --topbar-action-target: var(--touch-target); }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    #topbar,
    .topbar {
      justify-content: center;
      padding-inline: max(var(--space-related), var(--app-safe-left)) max(var(--space-related), var(--app-safe-right));
    }

    .topbar-action-rail {
      flex: 0 1 auto;
      inline-size: auto;
      margin-inline: auto;
      max-inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-related)));
    }

    .topbar-sidebar-host {
      align-items: center;
      display: flex;
      flex: 0 1 auto;
      max-inline-size: 100%;
      min-inline-size: 0;
      overflow: hidden;
      pointer-events: auto;
    }

    .topbar-sidebar-group {
      background: var(--floating-chrome-plate-bg);
      border: 1px solid var(--floating-chrome-plate-border);
      border-radius: var(--floating-chrome-plate-radius);
      -webkit-backdrop-filter: var(--surface-filter-floating);
      backdrop-filter: var(--surface-filter-floating);
      flex: 0 1 auto;
      max-inline-size: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      pointer-events: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .topbar-sidebar-group .topbar-icon-button {
      flex: 0 0 var(--topbar-action-target);
      scroll-snap-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar-icon-button,
    .toolbar-button { transition-duration: var(--motion-duration-reduced); }
  }

  @media (forced-colors: active) {
    .topbar-sidebar-group {
      background: Canvas;
      border-color: ButtonText;
      color: CanvasText;
      forced-color-adjust: auto;
    }

    .topbar-sidebar-group .topbar-icon-button {
      background: ButtonFace;
      border-color: transparent;
      box-shadow: none;
      color: ButtonText;
      forced-color-adjust: auto;
    }

    .topbar-sidebar-group .topbar-icon-button:hover,
    .topbar-sidebar-group .topbar-icon-button[aria-expanded="true"] {
      background: Highlight;
      border-color: Highlight;
      color: HighlightText;
    }

    .topbar-sidebar-group .topbar-icon-button:focus-visible {
      border-color: Highlight;
      box-shadow: none;
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }
}