// $size: 0.875rem

.pagination,
.pagination-list
  align-items: center
  display: flex
  justify-content: center
  text-align: center

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
  +control
  +unselectable
  font-size: 0.875rem
  padding-left: 0.5em
  padding-right: 0.5em
  justify-content: center
  text-align: center

.pagination-previous,
.pagination-next,
.pagination-link
  border: 1px solid $border
  min-width: 2.5em
  &:hover
    border-color: $link
    color: $text-strong
  &:focus
    border-color: $link
  &:active
    background-color: $background
    box-shadow: inset 0 1px 2px rgba($black, 0.2)
  &[disabled],
  &.is-disabled
    background: $border
    color: $text-light
    opacity: 0.5
    pointer-events: none

.pagination-previous,
.pagination-next
  padding-left: 0.75em
  padding-right: 0.75em

.pagination-link
  &.is-current
    background-color: $link
    border-color: $link
    color: $link-invert

.pagination-ellipsis
  color: $text-light
  pointer-events: none

.pagination-list
  li
    &:not(:first-child)
      margin-left: 0.375rem

+mobile
  .pagination
    flex-wrap: wrap
  .pagination-previous,
  .pagination-next
    flex-grow: 1
    flex-shrink: 1
    width: calc(50% - 0.375rem)
  .pagination-next
    margin-left: 0.75rem
  .pagination-list
    margin-top: 0.75rem
    li
      flex-grow: 1
      flex-shrink: 1

+tablet
  .pagination-list
    flex-grow: 1
    flex-shrink: 1
    justify-content: flex-start
    order: 1
  .pagination-previous,
  .pagination-next
    margin-left: 0.75rem
  .pagination-previous
    order: 2
  .pagination-next
    order: 3
  .pagination
    justify-content: space-between
    &.is-centered
      .pagination-previous
        margin-left: 0
        order: 1
      .pagination-list
        justify-content: center
        order: 2
      .pagination-next
        order: 3
    &.is-right
      .pagination-previous
        margin-left: 0
        order: 1
      .pagination-next
        order: 2
        margin-right: 0.75rem
      .pagination-list
        justify-content: flex-end
        order: 3


// .pagination
//   align-items: center
//   display: flex
//   justify-content: center
//   text-align: center
//   a
//     display: block
//     min-width: 32px
//     padding: 3px 8px
//   span
//     color: $text-light
//     display: block
//     margin: 0 4px
//   li
//     margin: 0 2px
//   ul
//     align-items: center
//     display: flex
//     flex-grow: 1
//     flex-shrink: 0
//     justify-content: center
//   // Responsiveness
//   +mobile
//     flex-wrap: wrap
//     & > a
//       width: calc(50% - 5px)
//       &:not(:first-child)
//         margin-left: 10px
//     li
//       flex-grow: 1
//       flex-shrink: 0
//     ul
//       margin-top: 10px
//   +tablet
//     & > a
//       &:not(:first-child)
//         order: 1