.#{$ns}Pagination { display: inline-block; padding-left: 0; margin-bottom: px2rem(-10px); border-radius: px2rem(4px); > li { display: inline; > a, > span { user-select: none; position: relative; float: left; text-decoration: none; min-width: $Pagination-minWidth; height: $Pagination-height; border: 0; line-height: $Pagination-height; padding: $Pagination-padding; text-align: center; color: #666666; border-radius: 0; margin-left: 0; font-size: $Pagination-fontSize; } > a:hover, > span:hover, > a:focus, > span:focus { background-color: transparent; color: $primary; } } > li.disabled { > span, > a { cursor: not-allowed; } > a, > span, > a:hover, > span:hover, > a:focus, > span:focus { color: #cccccc; } } > li.active { > a, > span, > a:hover, > span:hover, > a:focus, > span:focus { background-color: $primary; color: $white; } } &-prev, &-next { font-family: $Pagination-arrowVendor; } &-prev { > span { cursor: pointer; &::before { content: $Pagination-prevArrowContent; } } } &-ellipsis { > a > span { position: relative; top: px2rem(-4px); } } &-next { > span { cursor: pointer; &::before { content: $Pagination-nextArrowContent; } } } &-inputGroup { display: inline-flex; flex-wrap: nowrap; .#{$ns}Pagination-input { width: px2rem(50px); height: $Pagination-height; border: $borderWidth solid $borderColor; border-top-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; padding: px2rem(5px) px2rem(10px); &:focus { outline: none; border: $borderWidth solid $primary; } } .#{$ns}Button { height: $Pagination-height; margin-left: px2rem(-1px); border-radius: 0 $borderRadius $borderRadius 0; padding: 0 px2rem(10px); } } }