@layer main {
	@layer pagination {
        .pagination{
            margin-top: calc(var(--spacer) * 2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: calc(var(--spacer) * .25);

            ul{
                display: flex;
                gap: calc(var(--spacer) * .25);
                align-items: center;
                padding: 0;
                list-style: none;
                font-size: 1.25em;

                .first,
                .prev,
                .next,
                .last{
                    font-family: var(--font-family-icon);
                }

                .active{
                    position: relative;

                    &:after{
                        content: '';
                        position: absolute;
                        height: 4px;
                        width: var(--spacer);
                        margin: auto;
                        inset: auto 0 0;
                        background-color: rgb(var(--color-blue));
                    }
                }

                span{
                    aspect-ratio: 1 / 1;
                    width: 48px;
                    font-weight: 400;
                    line-height: 1;
                    text-align: center;
                    justify-content: center;
                    color: rgb(var(--color-charcoal));
                    text-decoration: underline;
                    display: inline-flex;
                    display: inline-flex;
                    align-items: center;
                }

                a{
                    aspect-ratio: 1 / 1;
                    width: 48px;
                    font-weight: 400;
                    line-height: 1;
                    text-align: center;
                    justify-content: center;
                    text-decoration: none;
                    color: rgb(var(--color-charcoal));
                    display: inline-flex;
                    align-items: center;
                    cursor: pointer;
                    -webkit-touch-callout: none;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}