/**
 * @file
 * Visual styles for tabs.
 */

div.tabs {
  margin: 1.5rem 0 2rem;
}

/* Primary local task tabs, rendered as a tab bar. */
ul.tabs.primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  /* Local tasks render outside <main>, so carry their own lateral gutter to
     line up with the breadcrumb and page title. */
  margin: 0 2rem 1.5rem;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--warm-gray3);
}
ul.tabs.primary > li {
  margin: 0;
}
ul.tabs.primary > li > a {
  display: block;
  padding: 0.6rem 1.15rem;
  color: var(--warm-gray1);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
ul.tabs.primary > li > a:hover,
ul.tabs.primary > li > a:focus {
  background: var(--soft-gray);
  color: #000;
}
ul.tabs.primary > li.is-active > a,
ul.tabs.primary > li > a.is-active {
  margin-bottom: -1px;
  background: var(--white);
  color: #000;
  border-color: var(--warm-gray3);
}

/* Secondary local tasks, rendered as pills. */
ul.tabs.secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 2rem 1.5rem;
  padding: 0;
  list-style: none;
}
ul.tabs.secondary > li > a {
  display: block;
  padding: 0.3rem 0.8rem;
  color: var(--warm-gray1);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 999px;
}
ul.tabs.secondary > li > a:hover,
ul.tabs.secondary > li > a:focus {
  background: var(--soft-gray);
  color: #000;
}
ul.tabs.secondary > li > a.is-active {
  background: var(--warm-gray1);
  color: var(--white);
}