.pagination-nav {
  display: grid;
  place-content: center;
  background-color: unset;

  & ul {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  & li {
    padding: 0;
    display: grid;
    place-content: center;
    cursor: unset;
    margin: 0 1px;

    > a {
      --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-2-s) var(--neutral-color-variation-2-l) / 0.7);
      --color: var(--on-neutral-color-variation-3);
      --border-width: var(--elem-border-width);
      --border-color: var(--neutral-color-variation-1);
      --hover-background-color: var(--background-color);
      --border-radius: var(--control-border-radius);

      width: 100%;
      height: 100%;
      line-height: 1;
      padding: 0.25em;
      border: var(--border-width) solid var(--border-color);
      border-radius: 0.25em;
      transition: all 0.2s ease-in-out;

      &:not([aria-current]):hover {
        --border-color: var(--on-neutral-color-variation-3);
        //border-color: var(--border-color);
        transform: scale(1.05);
      }

      &[disabled] {
        --background-color: transparent;

        width: 0;
        border: none;
        padding: 0;
        pointer-events: none;

        > * {
          display: none;
        }
      }
    }
  }

  & li.divider {
    border: none;
    pointer-events: none;
    margin-inline: var(--half-spacing);
    span {
      --color: var(--on-neutral-color-variation-3);
      color: var(--color);
    }
  }

  & [aria-current] {
    --border-color: var(--on-neutral-color-variation-2);
    --background-color: var(--neutral-color);

    cursor: none;
    pointer-events: none;
    font-weight: 700;
    //border-color: var(--muted-text);
    //background-color: var(--color-background-alt-active);
  }
}