/**
 * @file
 * MLT Modern — Admin tabs (Drupal's "primary tabs": View / Edit / Delete / etc).
 *
 * The tabs only render for users with permission to do those things (i.e.
 * not for anonymous visitors), so they don't appear on the public front-end.
 *
 * Markup (emitted by templates/menu-local-tasks.html.twig and
 * templates/menu-local-task.html.twig):
 *
 *   <nav class="mlt-tabs" aria-label="Primary tabs">
 *     <ul class="mlt-tabs__list mlt-tabs__list--primary">
 *       <li class="mlt-tabs__item mlt-tabs__item--active">
 *         <a href="..." class="is-active" aria-current="page">View</a>
 *       </li>
 *       <li class="mlt-tabs__item">
 *         <a href="...">Edit</a>
 *       </li>
 *       ...
 *     </ul>
 *   </nav>
 */

.mlt-tabs {
  max-width: var(--mlt-container-max);
  margin: 0 auto 24px;
  padding: 0 var(--mlt-container-pad);
  border-bottom: 1px solid var(--mlt-border);
}

.mlt-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mlt-tabs__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mlt-tabs__item a {
  display: inline-block;
  padding: 10px 16px;
  color: var(--mlt-text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* sit on top of the .mlt-tabs border-bottom */
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mlt-tabs__item a:hover,
.mlt-tabs__item a:focus {
  color: var(--mlt-primary);
  background: var(--mlt-bg-soft);
  text-decoration: none;
}

.mlt-tabs__item--active a,
.mlt-tabs__item a.is-active {
  color: var(--mlt-primary);
  border-bottom-color: var(--mlt-primary);
}

/* Secondary tabs (rare but valid) sit below primary with smaller styling. */
.mlt-tabs--secondary {
  border-bottom: none;
  margin-top: -16px;
  margin-bottom: 32px;
}

.mlt-tabs--secondary .mlt-tabs__item a {
  font-size: 13px;
  padding: 6px 12px;
  border-bottom: none;
  border-radius: var(--mlt-radius-pill);
  background: var(--mlt-bg-soft);
}

.mlt-tabs--secondary .mlt-tabs__item a.is-active {
  background: var(--mlt-primary);
  color: #fff;
}