.paginator {
    display: flex;
    border-top: 1px solid #ccc;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
    align-items: center;
    color: var(--clr-body-text2);
}

.pagination-text {
    margin: 0 0.5rem;
}

nav {
    display: flex;
    margin-left: auto;
    gap: 0.5rem;
    align-items: center;
}

    nav button {
        border: 0;
        background: none center center / 1rem no-repeat;
        width: 2rem;
        height: 2rem;
    }

    nav button[disabled] {
        opacity: 0.4;
    }

    nav button:not([disabled]):hover {
        background-color: #eee;
    }

    nav button:not([disabled]):active {
        background-color: #aaa;
    }

.go-first, .go-last {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
}

.go-previous, .go-next {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z" /></g></svg>');
}

.go-next, .go-last {
    transform: scaleX(-1);
}