/* Meridian · Tabs
   Markup:  .dm-tabs[data-dm-tabs] > .dm-tabs__list[role="tablist"] (> .dm-tabs__tab[role="tab"]…)
            + .dm-tabs__panel[role="tabpanel"]…
   Variant: .dm-tabs--pills (sliding filled pill instead of the underline)
   The .dm-tabs__indicator is injected and positioned (translateX + width) by tabs.js. */

.dm-tabs__list {
  position: relative;
  display: flex;
  gap: var(--dm-space-xs);
  border-bottom: 1px solid var(--dm-color-outline-variant);
}

.dm-tabs__tab {
  position: relative;
  z-index: 1; /* keeps labels above the pill indicator */
  display: inline-flex;
  align-items: center;
  height: var(--dm-control-height);
  padding: 0 var(--dm-space-md);
  font: var(--dm-type-label-md);
  letter-spacing: var(--dm-tracking-label);
  color: var(--dm-color-on-surface-variant);
  background: none;
  border: none;
  border-radius: var(--dm-rounded-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-tabs__tab:hover {
  color: var(--dm-color-on-surface);
}

.dm-tabs__tab[aria-selected="true"] {
  color: var(--dm-color-primary);
}

.dm-tabs__indicator {
  position: absolute;
  left: 0;
  bottom: -1px; /* sits on top of the tablist border */
  width: 0;
  height: 2px;
  background: var(--dm-color-primary);
  border-radius: var(--dm-rounded-full);
  pointer-events: none;
  transition: transform var(--dm-duration-base) var(--dm-ease-emphasized),
    width var(--dm-duration-base) var(--dm-ease-emphasized);
}

/* ---- Panels ----------------------------------------------------------------- */

.dm-tabs__panel {
  padding-top: var(--dm-space-lg);
  font: var(--dm-type-body-md);
  animation: dm-tabs-panel-in var(--dm-duration-base) var(--dm-ease-emphasized);
}

.dm-tabs__panel > * + * {
  margin-top: var(--dm-space-md); /* base.css zeroes margins; restore prose rhythm */
}

@keyframes dm-tabs-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- Pills variant ------------------------------------------------------------ */

.dm-tabs--pills .dm-tabs__list {
  display: inline-flex;
  max-width: 100%;
  padding: var(--dm-space-xs);
  background: var(--dm-color-surface-variant);
  border-bottom: none;
  border-radius: var(--dm-rounded-full);
}

.dm-tabs--pills .dm-tabs__tab {
  height: 36px;
  border-radius: var(--dm-rounded-full);
}

.dm-tabs--pills .dm-tabs__tab[aria-selected="true"] {
  color: var(--dm-color-on-primary);
  transition-duration: var(--dm-duration-base); /* label recolors in step with the pill */
}

.dm-tabs--pills .dm-tabs__indicator {
  top: var(--dm-space-xs);
  bottom: var(--dm-space-xs);
  height: auto;
  background: var(--dm-color-primary);
  border-radius: var(--dm-rounded-full);
}