@layer components {

/**
 * @file
 * Visual styles for tabs (local-task tabs on node pages, etc.).
 *
 * Underline-style tab bar: a thin baseline runs under all tabs, and the
 * active tab "owns" a thicker brand-colored segment of it. The link's
 * negative bottom margin lets its 2px border overlap the row's 1px rail.
 */

  div.tabs {
    margin: 1em 0;
    border-bottom: 1px solid var(--surface-2);
  }
  ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }
  .tabs > li {
    margin: 0;
  }
  .tabs a {
    display: block;
    padding: var(--size-2) var(--size-3);
    color: var(--text-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
      background-color 0.15s var(--ease-out-2),
      border-color 0.15s var(--ease-out-2),
      color 0.15s var(--ease-out-2);
  }
  .tabs a:hover,
  .tabs a:focus {
    color: var(--text-1);
    background-color: var(--surface-2);
  }
  .tabs a.is-active {
    color: var(--upei-red);
    border-bottom-color: var(--upei-red);
  }

}