$pagination-color ?= $grey-darker
$pagination-background ?= $white
$pagination-border-color ?= $grey-lighter
$pagination-margin ?= -0.25rem

$pagination-hover-color ?= $link-hover
$pagination-hover-border-color ?= $link-hover-border

$pagination-focus-color ?= $link-focus
$pagination-focus-border-color ?= $link-focus-border

$pagination-active-color ?= $link-active
$pagination-active-border-color ?= $link-active-border

$pagination-disabled-color ?= $grey
$pagination-disabled-background-color ?= $grey-lighter
$pagination-disabled-border-color ?= $grey-lighter

$pagination-current-color ?= $link-invert
$pagination-current-background-color ?= $link
$pagination-current-border-color ?= $link

$pagination-ellipsis-color ?= $grey-light

$pagination-shadow-inset ?= inset 0 1px 2px rgba(black, 0.2)

.pagination
  font-size $size-normal
  margin $pagination-margin
  // Sizes
  &.is-small
    font-size $size-small
  &.is-medium
    font-size $size-medium
  &.is-large
    font-size $size-large

.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 1em
  padding-left 0.5em
  padding-right 0.5em
  justify-content center
  margin 0.25rem
  text-align center

.pagination-previous,
.pagination-next,
.pagination-link
  background $pagination-background
  border-color $pagination-border-color
  min-width 2.25em
  &:hover
    border-color $pagination-hover-border-color
    color $pagination-hover-color
  &:focus
    border-color $pagination-focus-border-color
  &:active
    box-shadow $pagination-shadow-inset
  &[disabled]
    background $pagination-disabled-background-color
    border-color $pagination-border-color
    box-shadow none
    color $pagination-disabled-color
    opacity 0.5

.pagination-previous,
.pagination-next
  padding-left 0.75em
  padding-right 0.75em
  white-space nowrap

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

.pagination-ellipsis
  color $pagination-ellipsis-color
  pointer-events none

.pagination-list
  flex-wrap wrap

+mobile()
  .pagination
    flex-wrap wrap
  .pagination-previous,
  .pagination-next
    flex-grow 1
    flex-shrink 1
  .pagination-list
    li
      flex-grow 1
      flex-shrink 1

+tablet()
  .pagination-list
    flex-grow 1
    flex-shrink 1
    justify-content flex-start
    order 1
  .pagination-previous
    order 2
  .pagination-next
    order 3
  .pagination
    justify-content space-between
    &.is-centered
      .pagination-previous
        order 1
      .pagination-list
        justify-content center
        order 2
      .pagination-next
        order 3
    &.is-right
      .pagination-previous
        order 1
      .pagination-next
        order 2
      .pagination-list
        justify-content flex-end
        order 3