/**
 * Estilos globales de paginación (pager) de Drupal.
 *
 * Extraídos de components/03-organisms/section_search_activities_events
 * para que se apliquen a CUALQUIER vista con pager en el sitio, no solo a
 * esa sección. Se carga vía la librería global-styling (usfq_theme.libraries.yml)
 * para que esté disponible en todas las páginas.
 */

.pager__item.is-active {
  box-shadow: 0px 0px 0px 4px #00000080 inset;
}

:where(html[data-theme="dark"]) .pager__item.is-active {
  box-shadow: 0px 0px 0px 4px var(--primary) inset;
}

nav.pager,
.pager {
  width: 100%;
}

.pager__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;

  .pager__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1.5rem;
    border-right: solid 1px;

    a {
      text-decoration: none;
      text-transform: uppercase;
      font-family: var(--headings-font-family);
      font-weight: 500;
      font-size: 12px;
    }

    &:last-child {
      border-right: none;
    }

    /* Tablet: 6 números */
    @media (max-width: 1024px) {
      &.pager__item--hide-md {
        display: none;
      }

      &.pager__item--first,
      &.pager__item--previous,
      &.pager__item--next,
      &.pager__item--last {
        min-width: 44px;

        a > span[aria-hidden="true"] {
          display: none;
        }

        a::before {
          font-size: 16px;
          line-height: 1;
        }
      }

      &.pager__item--first a::before    { content: '\00AB'; } /* « */
      &.pager__item--previous a::before { content: '\2039'; } /* ‹ */
      &.pager__item--next a::before     { content: '\203A'; } /* › */
      &.pager__item--last a::before     { content: '\00BB'; } /* » */
    }

    /* Mobile: 3 números */
    @media (max-width: 600px) {
      &.pager__item--hide-sm {
        display: none;
      }

      /* "last" oculto: el borde derecho pasaría a "next" */
      &.pager__item--next {
        border-right: none;
      }
    }

    @media (max-width: 1024px) {
      padding: 0 1rem;
    }

    @media (max-width: 600px) {
      padding: 0 1rem;
    }
  }
}