| $pagination-color: $grey-darker !default |
| $pagination-border-color: $grey-lighter !default |
| $pagination-margin: -0.25rem !default |
| $pagination-min-width: $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: $link-hover !default |
| $pagination-hover-border-color: $link-hover-border !default |
| |
| $pagination-focus-color: $link-focus !default |
| $pagination-focus-border-color: $link-focus-border !default |
| |
| $pagination-active-color: $link-active !default |
| $pagination-active-border-color: $link-active-border !default |
| |
| $pagination-disabled-color: $grey !default |
| $pagination-disabled-background-color: $grey-lighter !default |
| $pagination-disabled-border-color: $grey-lighter !default |
| |
| $pagination-current-color: $link-invert !default |
| $pagination-current-background-color: $link !default |
| $pagination-current-border-color: $link !default |
| |
| $pagination-ellipsis-color: $grey-light !default |
| |
| $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 |
| &.is-rounded |
| .pagination-previous, |
| .pagination-next |
| padding-left: 1em |
| padding-right: 1em |
| border-radius: $radius-rounded |
| .pagination-link |
| border-radius: $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: $pagination-item-font-size |
| justify-content: center |
| margin: $pagination-item-margin |
| padding-left: $pagination-item-padding-left |
| padding-right: $pagination-item-padding-right |
| text-align: center |
| |
| .pagination-previous, |
| .pagination-next, |
| .pagination-link |
| border-color: $pagination-border-color |
| color: $pagination-color |
| min-width: $pagination-min-width |
| &: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-color: $pagination-disabled-background-color |
| border-color: $pagination-disabled-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 |
