.pagination { font-size: 1rem; align-items: center; display: flex; text-align: center; justify-content: space-between; margin: 0.75rem 0; .pagination-list { align-items: center; display: flex; text-align: center; flex-wrap: wrap; flex-grow: 1; flex-shrink: 1; justify-content: flex-end; @include respond-to("small") { justify-content: center; } .pagination-link { align-items: center; border: 1px solid transparent; border-radius: .375em; box-shadow: none; display: inline-flex; font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; padding: calc(.5em - 1px) calc(.75em - 1px); position: relative; vertical-align: top; text-decoration: none; user-select: none; text-align: center; font-size: 1em; justify-content: center; margin: .25rem; border-color: var(--pagination-border-color); color: var(--pagination-text-color); min-width: 2.5em; white-space: nowrap; @include transition() {} &:hover { border-color: var(--pagination-border-hover-color); color: var(--pagination-text-hover-color); } &.is-disabled { background-color: var(--default-hl-color); border-color: var(--default-hl-color); box-shadow: none; color: var(--disabled-color); opacity: .5; } &.is-current { background-color: var(--primary-bg-color); border-color: var(--primary-bg-color); color: var(--primary-font-color); } } } }