/* <ad-tabs>: before enhancement a link list and stacked sections; after,
 * a tab strip with one visible panel. */
ad-tabs {
  display: block;
}

ad-tabs [data-tab-links] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: 0;
  list-style: none;
}

ad-tabs:not([data-enhanced]) > section + section {
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--border);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  border-block-end: 2px solid var(--border);
}

.tabs__tab {
  position: relative;
  min-block-size: var(--target-comfortable);
  padding: var(--space-2xs) var(--space-s);
  margin-block-end: -2px;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 650;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.tabs__tab:hover {
  color: var(--accent-strong);
  background: var(--bg-tint);
}

.tabs__tab[aria-selected="true"] {
  color: var(--accent-strong);
  border-block-end-color: var(--accent);
}

.tabs__tab:focus-visible {
  outline-offset: -3px;
  box-shadow: none;
}

.tabs__panel {
  padding-block: var(--space-m);
}

.tabs__panel > * + * {
  margin-block-start: var(--space-xs);
}

@media (prefers-reduced-motion: no-preference) {
  .tabs__panel:not([hidden]) {
    animation: tabs-fade var(--duration-base) var(--ease-out);
  }

  @keyframes tabs-fade {
    from {
      translate: 0 0.35rem;
    }
  }
}