.pagy {
    --B: 0;
    --H: 0;
    --S: 100;
    --L: 100;
    --A: 1;
    --spacing: 0.125rem;
    --padding: 1rem;
    --rounding: 0.5rem;
    --border-width: 0.1rem;
    --font-size: 0.875rem;
    --font-weight: 500;
    --line-height: 1.75;
  
    --text:               hsl(209, 14%, 37%);
    --text-hover:         hsl(209, 14%, 37%);
    --text-current:       hsl(209, 14%, 37%);
    --background:         transparent;
    --background-hover:   hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
    --background-current: hsla(var(--H) var(--S) var(--L) / var(--A));
    --background-input:   hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));
  
    color: var(--text);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    display: flex;
  }
  
  .pagy > :not([hidden]) ~ :not([hidden]) {
    margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
    margin-right: calc(var(--spacing) * var(--space-reverse, 0));
  }
  
  .rtl .pagy > :not([hidden]) ~ :not([hidden]) {
    --space-reverse: 1;
  }
  
  .pagy a:not([role="separator"]) { /* all but gaps */
    display: block;
    text-decoration: none;
    background-color: var(--background);
    padding: calc(var(--padding) / 3) var(--padding);
    border-radius: var(--rounding);
    border: var(--border-width) solid transparent;
    color: inherit;
  }
  
  .pagy a[href]:hover { /* all links on hover */
    background-color: var(--background-hover);
    color: var(--text-hover);
    border: var(--border-width) solid hsl(211, 10%, 53%);
  }
  
  .pagy a:not([href]) { /* all but links */
    cursor: default;
  }
  
  .pagy a[role="link"]:not([aria-current]) { /* disabled links */
    opacity: .6;
  }
  
  .pagy a[aria-current] {  /* current page */
    background-color: var(--background-current);
    color: var(--text-current);
    border: var(--border-width) solid hsl(211, 10%, 53%);
  }
  
  .pagy label {
    white-space: nowrap;
    display: inline-block;
    border-radius: var(--rounding);
    background-color: var(--background);
    padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
  }
  
  .pagy label input {
    all: unset;
    border-radius: calc(var(--rounding) / 2) !important;
    background-color: var(--background-input);
  }