/* Centred under the list it walks, as the design puts the button there. */
.pagination__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* The page numbers open the row and the next page closes it, across the width of the list.
   They wrap where the row runs out, which is what a long list does on a narrow screen. */
.pagination__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    /* The room the rule under the current cell reaches into, below the 32px cells. */
    padding-block-end: 0.34375rem;

    /* `display` beats the attribute, so the row has to state its own absence — the script hides
       it once the button beside it does the same job without leaving the page. */
    &[hidden] {
        display: none;
    }

    /* Controls are useless on paper; which slice of the list the printout shows is not. */
    @media print {
        display: none;
    }
}

.pagination__pages {
    display: flex;
    /* 6px, the room the design leaves between two 32px cells. */
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__link,
.pagination__gap {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: var(--sav-text-m-line);
    font-size: var(--sav-text-m-size);
    line-height: var(--sav-text-m-line);
    letter-spacing: var(--sav-text-m-tracking);
    color: var(--sav-color-textgrau);
    text-decoration: none;
}

.pagination__link:not(.pagination__link--current) {
    &:hover {
        color: var(--sav-color-dunkelblau);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* The page the reader stands on, marked by a rule under the cell and not by its tone alone.
   The rule spans the cell and ends 5.5px below it, where the design's row ends. */
.pagination__link--current {
    position: relative;
    color: var(--sav-color-dunkelblau);

    &::after {
        position: absolute;
        inset-block-end: -0.34375rem;
        inset-inline: 0;
        block-size: 0.125rem;
        background-color: currentcolor;
        content: '';
    }
}

.pagination__more {
    display: flex;
    justify-content: center;
    margin: 0;

    &[hidden] {
        display: none;
    }

    @media print {
        display: none;
    }
}