/******************
 # PAGE NAVIGATION
 ******************/

.page-navigation {
  list-style: none;
  padding-inline: 0;

  &:has(.next-page:only-child) {
    justify-content: flex-end;
  }

  li {
    display: block;
    padding-inline: 0;
  }

  .next-page {
    text-align: right;
  }

  .previous-page::before,
  .next-page::after {
    color: var(--text-color-secondary);
    font-family: var(--font-family-monospace);
  }

  .previous-page::before {
    content: "<-";
    padding-inline-end: var(--space-s);
  }

  .next-page::after {
    content: "->";
    padding-inline-start: var(--space-s);
  }
}