/*
 * mlp-tabs styles. Import after platform.css, same convention as every other library here —
 * reuses its tokens (--c-*, --s-*, --t-*). This is the tab-list *mechanism* only: the row of
 * tab buttons and the active-tab indicator. Each panel's own content is the consuming page's
 * own CSS — this file has no opinion on what's inside a `role="tabpanel"`.
 */

.mlp-tabs__list {
  display: flex;
  gap: var(--s-4);
  /* Matches .panel's own left padding exactly, so a tab list sitting directly above a .panel
     lines its labels up with that panel's own inner content (a field label, a row of table
     cells, whatever) below it, rather than starting flush with the page edge while everything
     underneath is indented. */
  padding-left: clamp(var(--s-4), 4vw, var(--s-6));
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-4);
}

.mlp-tabs__list [role='tab'] {
  padding: var(--s-3) var(--s-2);
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
}

.mlp-tabs__list [role='tab']:hover {
  color: var(--c-text);
}

.mlp-tabs__list [role='tab'][aria-selected='true'] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.mlp-tabs__list [role='tab']:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}