$pagination-color: v("text-strong") !default
$pagination-border-color: v("border") !default
$pagination-margin: -0.25rem !default
$pagination-min-width: v("control-height") !default

$pagination-item-font-size: 1em !default
$pagination-item-margin: 0.25rem !default
$pagination-item-padding-left: 0.5em !default
$pagination-item-padding-right: 0.5em !default

$pagination-hover-color: v("link-hover") !default
$pagination-hover-border-color: v("link-hover-border") !default

$pagination-focus-color: v("link-focus") !default
$pagination-focus-border-color: v("link-focus-border") !default

$pagination-active-color: v("link-active") !default
$pagination-active-border-color: v("link-active-border") !default

$pagination-disabled-color: v("text-light") !default
$pagination-disabled-background-color: v("border") !default
$pagination-disabled-border-color: v("border") !default

$pagination-current-color: v("link-invert") !default
$pagination-current-background-color: v("link") !default
$pagination-current-border-color: v("link") !default

$pagination-ellipsis-color: v("grey-light") !default

$pagination-shadow-inset: inset 0 1px 2px vAlphaChange("scheme-invert", 0.2)


+register(pagination-margin,$pagination-margin, true)
+register(pagination-item-font-size,$pagination-item-font-size, true)
+register(pagination-item-margin,$pagination-item-margin, true)
+register(pagination-item-padding-left,$pagination-item-padding-left, true)
+register(pagination-item-padding-right,$pagination-item-padding-right, true)
+register(pagination-border-color,$pagination-border-color, true)
+register(pagination-color,$pagination-color, true)
+register(pagination-min-width,$pagination-min-width, true)
+register(pagination-hover-border-color,$pagination-hover-border-color, true)
+register(pagination-hover-color,$pagination-hover-color, true)
+register(pagination-focus-border-color,$pagination-focus-border-color, true)
+register(pagination-shadow-inset,$pagination-shadow-inset, true)
+register(pagination-disabled-background-color,$pagination-disabled-background-color, true)
+register(pagination-disabled-border-color,$pagination-disabled-border-color, true)
+register(pagination-disabled-color,$pagination-disabled-color, true)
+register(pagination-current-background-color,$pagination-current-background-color, true)
+register(pagination-current-border-color,$pagination-current-border-color, true)
+register(pagination-current-color,$pagination-current-color, true)
+register(pagination-ellipsis-color,$pagination-ellipsis-color, true)

.pagination
  @extend %block
  font-size: v("size-normal")
  margin: v("pagination-margin")
  // Sizes
  &.is-small
    font-size: v("size-small")
  &.is-medium
    font-size: v("size-medium")
  &.is-large
    font-size: v("size-large")
  &.is-rounded
    .pagination-previous,
    .pagination-next
      padding-left: 1em
      padding-right: 1em
      border-radius: v("radius-rounded")
    .pagination-link
      border-radius: v("radius-rounded")

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

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
  @extend %control
  @extend %unselectable
  font-size: v("pagination-item-font-size")
  justify-content: center
  margin: v("pagination-item-margin")
  padding-left: v("pagination-item-padding-left")
  padding-right: v("pagination-item-padding-right")
  text-align: center

.pagination-previous,
.pagination-next,
.pagination-link
  border-color: v("pagination-border-color")
  color: v("pagination-color")
  min-width: v("pagination-min-width")
  &:hover
    border-color: v("pagination-hover-border-color")
    color: v("pagination-hover-color")
  &:focus
    border-color: v("pagination-focus-border-color")
  &:active
    box-shadow: v("pagination-shadow-inset")
  &[disabled]
    background-color: v("pagination-disabled-background-color")
    border-color: v("pagination-disabled-border-color")
    box-shadow: none
    color: v("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: v("pagination-current-background-color")
    border-color: v("pagination-current-border-color")
    color: v("pagination-current-color")

.pagination-ellipsis
  color: v("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