src/components/@shared/Pagination/index.module.css
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: var(--spacer);
margin-bottom: var(--spacer);
padding-left: 0;
font-size: var(--font-size-small);
}
.number {
font-weight: var(--font-weight-bold);
padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
margin-left: -1px;
margin-top: -1px;
display: block;
cursor: pointer;
min-width: 3rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
}
li:first-child .number,
:global(li.selected):nth-child(2) .number {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
li:last-child .number {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.number,
.number:hover,
.number:focus,
.number:active {
transform: none;
outline: 0;
}
.number:hover {
color: var(--brand-pink);
}
.current,
.prev,
.next,
.break {
composes: number;
}
.current {
cursor: default;
pointer-events: none;
}
.current,
.current:hover,
.current:focus,
.current:active {
color: var(--text-color);
}
.next {
text-align: right;
}
.prevNextDisabled {
opacity: 0;
}
.arrow {
width: 1rem;
height: 1rem;
fill: currentColor;
}
.arrow.previous {
transform: rotate(180deg);
}