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

div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  padding: 0.2em 1em;
  text-decoration: none;
}
/*
 * The two tinted states come from the theme's tokens rather than the flat
 * greys this file was copied from, so that they follow the reader's colour
 * scheme. Core's own #eee/#f5f5f5 stayed light under [data-theme="dark"]
 * and left the active tab a light chip with light text on it - legible
 * only by accident, and only because the label happens to be a link.
 *
 * The pair keeps core's ordering rather than its exact values: whichever
 * mode is on, the active tab is the stronger tint and hover the weaker
 * one. In light mode that is #f3f4f6 over #f9fafb, near enough to the
 * greys replaced here; in dark it is #1d293d over #131c34, both reading
 * against a #020618 page.
 *
 * Left to inherit: the label colour. It is a link, so it already follows
 * the scheme, and both tints are chosen to sit under the same link colour
 * their mode uses everywhere else.
 */
.tabs a.is-active {
  background-color: var(--color-tertiary);
}
.tabs a:focus,
.tabs a:hover {
  background-color: var(--color-surface-secondary);
}

/*
 * The local-task row's active mark, restated for a client-side tab change.
 *
 * This theme draws a local task through `dkg_theme:nav-tab`, whose
 * `border-bottom` type carries its active and idle treatments as utility
 * classes baked into the markup when the page rendered. That is enough for
 * the dashboard, where changing tabs is a page load. It is not enough for
 * the contacts directory, where dkg_contact_map swaps the view under the tab
 * row without re-rendering the row: nothing removes the previously active
 * tab's utilities, so without these two rules the wrong tab would keep the
 * underline after a switch.
 *
 * So the treatment is expressed once more here, keyed on `aria-current` -
 * the attribute `nav-tab` sets on the active tab and the one the switcher
 * moves - and applied unconditionally, in both directions, so the rendered
 * state and the swapped state are drawn by the same declarations. Both
 * selectors outrank the utilities they override on specificity (two
 * attribute selectors against one class), which is what makes them win
 * regardless of stylesheet order.
 *
 * The values are `nav-tab`'s `border-bottom` type, the only type a local
 * task is rendered with (see templates/navigation/menu-local-task.html.twig
 * and menu-local-tasks.html.twig). They are a deliberate duplication of the
 * component's, and the only one: a change to that type's active or idle
 * colours has to be made here too. Hover is not restated - the utility's
 * `:hover` variant has equal specificity and lands later in the cascade, so
 * it still wins on the idle tab.
 */
[data-dkg-local-task][aria-current="page"] {
  border-bottom: 1px solid var(--color-brand-light-700);
  color: var(--color-fg-brand);
  font-weight: 700;
}
[data-dkg-local-task]:not([aria-current="page"]) {
  border-bottom-width: 0;
  color: var(--color-body);
  font-weight: 500;
}