.topbar-section {
  --bg-color-topbar: var(--black-200);

  background-color: var(--bg-color-topbar);
}

.topbar-items {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.75rem;
  scroll-behavior: auto;

  &.smooth {
    scroll-behavior: smooth;
  }
}

.topbar-item {
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  &:before {
    display: block;
    mask-image: var(--icon);
  }
}