.tabs-viewport {
  position: relative;
  width: 100%;
  height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  scrollbar-width: none;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

.tabs-viewport::-webkit-scrollbar { display: none; }

.tabs-track {
  display: flex;
  gap: 24px;
  width: max-content;
  min-width: 100%;
  height: 44px;
  padding: 0 16px;
}

.tab-button {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
  color: rgb(0 0 0 / 48%);
  font: 600 15px/19.5px -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tab-button[data-tab="overview"] { width: 68px; }
.tab-button[data-tab="menu"] { width: 44px; }
.tab-button[data-tab="highlight"] { width: 66px; }
.tab-button[data-tab="deals"] { width: 89px; }
.tab-button[data-tab="people"] { width: 121px; }
.tab-button[data-tab="recommendations"] { width: 132px; }
.tab-button.is-active { color: #000; }

.tab-button.is-active::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 50%;
  width: 21px;
  height: 5.5px;
  background: url("./assets/poi-tab-indicator.png") center / 21px 5.5px no-repeat;
  transform: translateX(-50%);
}

.tab-button:focus-visible {
  outline: 2px solid #fe2c55;
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .tabs-viewport { cursor: grab; }
  .tabs-viewport.is-dragging,
  .tabs-viewport.is-dragging .tab-button { cursor: grabbing; }
}