@layer components {
  .pagy.series-nav {
    a {
      padding: var(--block-space-half) var(--block-space);
      background-color: var(--color-surface);
      border: 1px solid var(--color-text-softest);
      text-decoration: none;
      color: var(--color-text);

      &[aria-current='page'] {
        background-color: var(--color-surface-variant);
      }

      &:last-of-type:not(:last-of-type) {
        border-inline-start: none;
      }

      &:not(:last-of-type) {
        border-inline-end: none;
      }

      &[aria-disabled='true']:not([aria-current='page']) {
        color: var(--color-text-softest);
      }
    }
  }
}