/* OE Filter Tabs (oe/filter-tabs). Matches the old WP Grid Builder tab row:
   grey text, navy + 4px sky-blue underline when active. Scrolls sideways
   on narrow screens instead of wrapping. */

.oe-block-filter-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.oe-block-filter-tabs::-webkit-scrollbar {
  display: none;
}

.oe-block-filter-tabs .oe-block-filter-tabs__list {
  display: flex;
  gap: var(--oe-spacing-base);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.oe-block-filter-tabs .oe-block-filter-tabs__list li {
  margin: 0;
}

.oe-block-filter-tabs__tab {
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  border: 0;
  border-bottom: var(--oe-border-width-medium) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--oe-color-cool-grey);
  font: inherit;
  font-size: var(--oe-font-size-base);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.oe-block-filter-tabs__tab:hover,
.oe-block-filter-tabs__tab:focus {
  background: transparent;
  color: var(--oe-color-heritage-blue);
}

.oe-block-filter-tabs__tab[aria-pressed="true"] {
  border-bottom-color: var(--oe-color-primary);
  color: var(--oe-color-heritage-blue);
}

.oe-block-filter-tabs__tab:focus-visible {
  outline: 2px solid var(--oe-color-primary);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-filter-tabs__tab {
    transition: none;
  }
}