.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-inline-md);
  padding: var(--space-inset-sm) var(--space-inset-md);
}

.topbar__toggle { display: var(--topbar-toggle, none); }

.topbar__menus {
  display: var(--topbar-menus, flex);
  flex-wrap: var(--topbar-menus-wrap, wrap);
  align-items: flex-start;
  gap: var(--space-inline-md);
  overflow-x: var(--topbar-menus-scroll, visible);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline-end: var(--measure-topbar-fade);
}
.topbar__menus::-webkit-scrollbar { display: none; }

.topbar__menus::after {
  content: '';
  display: var(--topbar-menus-fade, none);
  position: sticky;
  inset-inline-end: 0;
  align-self: stretch;
  flex: none;
  width: var(--measure-topbar-fade);
  background: linear-gradient(to right, transparent, var(--surface-page));
  pointer-events: none;
}

.topbar__menus--open {
  display: flex;
  position: var(--topbar-drawer-position, static);
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: var(--topbar-drawer-axis, row);
  padding: var(--topbar-drawer-inset, 0);
  background: var(--topbar-drawer-surface, transparent);
  border-bottom: var(--topbar-drawer-line, 0) solid var(--border-default);
}

.topbar__menu {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: var(--border-width) solid transparent;
  padding-bottom: var(--space-inset-sm);
}
.topbar__menu--on { color: var(--text-default); border-bottom-color: var(--border-strong); }

.topbar__bell { margin-left: auto; }