/**
 * @file
 * Visual styles for the pager.
 *
 * Markup hooks from templates/navigation/pager.html.twig:
 *   .pager                 — outer <nav>
 *   .pager__items          — <ul>
 *   .pager__item           — each <li>
 *   .pager__item--first    — "First" link
 *   .pager__item--previous — "Previous" link
 *   .pager__item--next     — "Next" link
 *   .pager__item--last     — "Last" link
 *   .pager__item--ellipsis — gap between non-adjacent page ranges
 *   .is-active             — added to the current page <li>
 */
@layer components {

  .pager {
    margin-block: var(--size-4);
  }
  .pager__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-1);
  }
  .pager__item a {
    display: inline-block;
    min-width: 2.5em;
    padding: var(--size-1) var(--size-2);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
  }
  .pager__item a:hover,
  .pager__item a:focus {
    background-color: var(--surface-2);
    border-color: var(--text-2);
  }
  .pager__item.is-active a {
    background-color: var(--upei-red);
    border-color: var(--upei-red);
    color: white;
    font-weight: bold;
  }
  .pager__item--ellipsis {
    align-self: center;
    padding: var(--size-1) var(--size-2);
    color: var(--text-2);
  }

}