/* Pagy's series_nav: a <nav> of links, the current page and gaps as plain <a>s. */
@layer components {
  .series-nav {
    display: flex;
    flex-wrap: wrap;

    & a {
      padding: var(--space-1) var(--space-3);
      border: var(--border);
      margin-inline-start: calc(-1 * var(--border-width));

      &:first-child {
        margin-inline-start: 0;
        border-start-start-radius: var(--radius);
        border-end-start-radius: var(--radius);
      }

      &:last-child {
        border-start-end-radius: var(--radius);
        border-end-end-radius: var(--radius);
      }

      &:hover:not([aria-disabled]) {
        background-color: var(--color-surface-strong);
      }
    }

    & a[aria-disabled] {
      color: var(--color-text-muted);
      background-color: var(--color-surface-subtle);
    }

    & a[aria-current] {
      color: var(--color-on-primary);
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }
  }
}