@layer heroicc.core {
    heroicc-pagination {
        display: grid;
        gap: 1em;
        container-type: inline-size;

        .pagination {
            display: grid;

            p,
            strong {
                text-align: center;
            }

            p {
                text-align: left;
                color: var(--text-color-soften);

                strong {
                    color: oklch(from var(--theme-color) calc((1 - l) * 2) c h);
                }
            }

            &:nth-child(2) nav {
                margin-block-start: 1em;
            }

            .errors {
                padding-block: 1em;
                border: 0.25em solid oklch(0.7 0.18 25);
                border-radius: 1em;
                color: oklch(from currentColor l c h / 0.75);
            }

            nav {
                display: grid;
                width: fit-content;
                margin-inline: auto;
                gap: 0.5em;
                grid-template-columns: auto 1fr 1fr auto;

                a {
                    text-align: center;

                    &[href] {
                        text-decoration: none;
                    }

                    &:not([href]) {
                        cursor: not-allowed;
                        color: var(--text-color-soften);

                        @media (prefers-color-scheme: light) {
                            color: oklch(1 0 0);
                        }
                    }
                }
                a:nth-of-type(2)::before {
                    content: "\02039";
                    margin-inline-end: 0.5ch;
                }
                a:nth-of-type(3)::after {
                    content: "\0203A";
                    margin-inline-start: 0.5ch;
                }
                a:first-of-type,
                a:last-of-type {
                    font-size: var(--font-step-1);
                    align-self: center;
                    padding: 0.3em 0.5em;
                    height: fit-content;
                    line-height: 1em;
                }
                a:nth-of-type(2)::before,
                a:nth-of-type(3)::after {
                    font-size: var(--font-step-1);
                    padding-block-end: 0.125em;
                }
            }
        }
    }
}