/* assets/styles/front/34-saints-pagination.css */

.saint-pagination-section {
    display: grid;

    width: min(
        100%,
        108rem
    );
    margin: 0 auto;
    padding:
        0
        1.125rem
        5.5rem;

    place-items: center;
    gap: 0.85rem;
}

.saint-pagination__summary {
    margin: 0;

    color: var(--codex-muted);

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.saint-pagination {
    width: 100%;
}

.saint-pagination__list {
    display: flex;

    margin: 0;
    padding: 0;

    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;

    list-style: none;
}

.saint-pagination__link,
.saint-pagination__disabled,
.saint-pagination__current {
    display: grid;

    min-width: 2.75rem;
    min-height: 2.75rem;

    padding: 0.5rem;

    border:
        1px solid
        rgb(167 157 191 / 24%);

    place-items: center;

    clip-path: polygon(
        0.35rem 0,
        100% 0,
        100% calc(100% - 0.35rem),
        calc(100% - 0.35rem) 100%,
        0 100%,
        0 0.35rem
    );

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.saint-pagination__link {
    background:
        rgb(23 16 47 / 92%);

    color: var(--codex-paper);
    text-decoration: none;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.saint-pagination__link:hover {
    border-color: var(--saints-accent);

    background:
        rgb(66 245 230 / 10%);

    color: var(--saints-accent);

    transform:
        translateY(-0.12rem);
}

.saint-pagination__link:focus-visible {
    border-color: var(--saints-accent);

    outline:
        2px solid
        var(--saints-accent);

    outline-offset: 0.2rem;
}

.saint-pagination__current {
    border-color: var(--saints-accent);

    background: var(--saints-accent);

    box-shadow:
        0
        0
        1.4rem
        rgb(66 245 230 / 18%);

    color: var(--codex-ink);

    cursor: default;
}

.saint-pagination__disabled {
    border-color:
        rgb(167 157 191 / 12%);

    background:
        rgb(23 16 47 / 48%);

    color: var(--codex-muted);

    cursor: not-allowed;
    opacity: 0.4;
}

.saint-pagination__link--edge,
.saint-pagination__disabled--edge {
    min-width: 3rem;

    color:
        var(--saints-secondary-accent);
}

.saint-pagination__disabled--edge {
    color: var(--codex-muted);
}

/* Tablet */

@media (min-width: 48rem) {
    .saint-pagination-section {
        padding:
            0
            4vw
            6.5rem;
    }

    .saint-pagination__list {
        gap: 0.6rem;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .saint-pagination__link {
        transition: none;
    }

    .saint-pagination__link:hover {
        transform: none;
    }
}