@scope (.topbar) {
  :scope {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
  }

  .topbar__left {
    display: flex;
    align-items: center;
  }

  .topbar__center {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-inline-start: auto;
  }

  @media (width < 48rem) {
    :scope {
      padding: var(--space-xs) var(--space-md);
      gap: var(--space-sm);
    }
  }
}