@layer components {
    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        justify-content: center;
    }

    .pagination a,
    .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        padding-inline: var(--space-2);
        border-radius: var(--radius-m);
        text-decoration: none;
        font-family: var(--font-data);
    }

    .pagination a:hover {
        background: var(--sky-tint);
    }

    .pagination .current {
        background: var(--sky);
        color: var(--paper);
    }
}