/* ==========================================================================
   Basic Sub-Navigation
   Reusable horizontal scrollable navigation bar
   ========================================================================== */

.basic-subnav {
  display: flex;
  height: 100%;
  background-color: var(--np-color-surface);
}

.basic-subnav__items {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

.basic-subnav__item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-4);
  white-space: nowrap;
  border: none;
  border-inline-end: var(--border-normal) var(--np-color-inverse-surface);
  background: transparent;
  color: var(--np-color-on-surface);
  text-decoration: none;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-line-height);
  letter-spacing: var(--type-body-md-tracking);
  cursor: pointer;
}

/* Remove border from the last item */
.basic-subnav__item:last-child {
  border-inline-end: none;
}

/* Hover state */
.basic-subnav__item:hover {
  background-color: var(--np-color-surface-container-high);
}

/* Active/selected state - matches desktop nav .nav-item.active */
.basic-subnav__item--active {
  background-color: var(--np-color-tertiary);
  color: var(--np-color-inverse-on-surface);
}

.basic-subnav__item--active:hover {
  background-color: var(--np-color-tertiary);
}