.pagination-wrapper {
    justify-content: center;
    width: var(--size-full);
}

.pagination {
    gap: var(--space-1);
}

.pagination-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-2);
    height: var(--size-2);
    padding: var(--space-2);
}

.pagination-navigation span {
    width: var(--size-full);
    height: var(--size-full);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    transition: var(--time-3);
}

.pagination-navigation:hover span {
    scale: 0.9;
    opacity: 0.9;
}

[data-direction="first"] span, [data-direction="last"] span {
    background-image: url('../../assets/icons/double-nose-icon.svg');
}

[data-direction="previous"] span, [data-direction="next"] span {
    background-image: url('../../assets/icons/nose-icon.svg');
}

[data-direction="first"] span, [data-direction="previous"] span {
    transform: rotate(90deg);
}

[data-direction="last"] span, [data-direction="next"] span {
    transform: rotate(-90deg);
}

.page-item {
    width: var(--size-fit);
    height: var(--size-fit);
}

.page-item a {
    padding: var(--space-2);
    color: var(--neutral-3);
    cursor: pointer;
    transition: var(--time-3);
}

.page-item span {
    padding: var(--space-2);
    cursor: default;
    transition: var(--time-3);
}

.page-item:not([data-active="true"]) a:hover {
    color: var(--neutral-4);
}

.page-item[data-active="true"] {
    font-weight: 600;
    color: var(--neutral-5);
}

[data-is-hidden-page-item="true"] {
    display: none;
}

.page-input {
    width: fit-content;
    min-width: calc(var(--size-1) * 1.5);
    padding: calc(var(--space-1) * 0.4) calc(var(--space-2) * 0.8);
    text-align: center;
    font-size: var(--font-size-3);
    color: var(--neutral-5);
}

.page-input:focus, .page-input:focus-visible {
    border: 0;
    border-bottom: 1px solid var(--neutral-4);
    outline: 0;
}