.pager
  margin-bottom: rem(10px)
  border-top: 2px solid $pager-border-color
  text-align: center
  font-size: rem($font-size-small)

  &:empty
    display: none

  li
    margin: 0
    display: inline-block
    margin-top: -2px

.pager__item
  display: inline-block
  padding: rem(10px)
  text-decoration: none
  border: 0
  border-top: 2px solid $pager-border-color
  transition: border-top .2s linear, color .2s linear
  color: #a7a7a7

  &.link
    &, .typo &
      color: #a7a7a7

    &:hover
      border-color: $primary-color
      text-decoration: none
      &, .typo &
        color: #666

  &.current
    color: $secondary-color
    border-color: $secondary-color

+mobile()
  .pager__item
    &.ellipsis,
    &.first,
    &.previous,
    &.next,
    &.last
      display: none