/* ==========================================================================
   ABM components - Tabs
   ========================================================================== */

.abm-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--abm-border-subtle);
  border-radius: var(--abm-radius-pill);
  background: var(--abm-color-bg-soft);
}

.abm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.5rem 0.82rem;
  border: 1px solid transparent;
  border-radius: var(--abm-radius-pill);
  background: transparent;
  color: var(--abm-color-muted-strong);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.abm-tab:hover {
  color: var(--abm-color-navy);
  background: var(--abm-color-surface);
}

.abm-tab.is-active,
.abm-tab.active,
.abm-tab[aria-selected="true"] {
  border-color: var(--abm-border-default);
  background: var(--abm-color-surface);
  color: var(--abm-color-navy);
  box-shadow: var(--abm-shadow-xs);
}

@media (max-width: 560px) {
  .abm-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .abm-tab {
    flex: 0 0 auto;
  }
}