/* @docs */
$pagination-disabled-opacity: $base-disabled-opacity !default;
$pagination-ellipsis-color: $grey-light !default;
$pagination-link-border-color: $grey-lighter !default;
$pagination-link-border-radius: $base-border-radius !default;
$pagination-link-border: 1px solid transparent !default;
$pagination-link-color: #363636 !default;
$pagination-link-current-background-color: $primary !default;
$pagination-link-current-border-color: $primary !default; // !!!
$pagination-link-current-color: #fff !default;
$pagination-link-height: 2.25em !default;
$pagination-link-hover-border-color: $grey-light !default;
$pagination-link-line-height: $base-line-height !default;
$pagination-link-margin: .25rem !default;
$pagination-link-min-width: 2.25em !default;
$pagination-link-padding: .5em .5em !default;
$pagination-margin: -.25rem !default;
$pagination-rounded-border-radius: $base-rounded-border-radius !default;
/* @docs */

.o-pag {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    justify-content: space-between;
    @include avariable('font-size', 'base-font-size', $base-font-size);
    @include avariable('margin', 'pagination-margin', $pagination-margin);
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('pagination-font-size-' + #{$name}), $value);
        }
    }
    &__link {
        -moz-appearance: none;
        -webkit-appearance: none;
        align-items: center;
        box-shadow: none;
        display: inline-flex;
        position: relative;
        vertical-align: top;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        @include unselectable;
        @include avariable('line-height', 'pagination-link-line-height', $pagination-link-line-height);
        @include avariable('border', 'pagination-link-border', $pagination-link-border);
        @include avariable('border-radius', 'pagination-link-border-radius', $pagination-link-border-radius);
        @include avariable('border-color', 'pagination-link-border-color', $pagination-link-border-color);
        @include avariable('color', 'pagination-link-color', $pagination-link-color);
        @include avariable('min-width', 'pagination-link-min-width', $pagination-link-min-width);
        @include avariable('height', 'pagination-link-height', $pagination-link-height);
        @include avariable('padding', 'pagination-link-padding', $pagination-link-padding);
        @include avariable('margin', 'pagination-link-margin', $pagination-link-margin);
        &:hover {
            text-decoration: none;
            @include avariable('border-color', 'pagination-link-hover-border-color', $pagination-link-hover-border-color);
        }
        &--rounded {
            @include avariable('border-radius', 'pagination-rounded-border-radius', $pagination-rounded-border-radius);
        }
        &--disabled {
            pointer-events: none;
            @include avariable('opacity', 'pagination-disabled-opacity', $pagination-disabled-opacity);
        }
        &--current {
            pointer-events: none;
            @include avariable('background-color', 'pagination-link-current-background-color', $pagination-link-current-background-color);
            @include avariable('border-color', 'pagination-link-current-border-color', $pagination-link-current-border-color);
            @include avariable('color', 'pagination-link-current-color', $pagination-link-current-color);
        }
    }
    &__ellipsis {
        justify-content: center;
        text-align: center;
        pointer-events: none;
        @include avariable('margin', 'pagination-link-margin', $pagination-link-margin);
        @include avariable('color', 'pagination-ellipsis-color', $pagination-ellipsis-color);
    }

    &--simple {
        justify-content: normal;
    }
    &--centered {
        justify-content: center;
        .o-pag__previous {
            order: 1;
        }
        .o-pag__next {
            order: 3;
        }
        .o-pag__list {
            justify-content: center;
            order: 2;
        }
    }
    &--right {
        justify-content: flex-end;
        .o-pag__previous {
            order: 1;
        }
        .o-pag__next {
            order: 2;
        }
        .o-pag__list {
            justify-content: flex-end;
            order: 2;
        }
    }
    &__next {
        order: 3;
    }
    &__previous {
        order: 2;
    }
    &__list {
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
        list-style: none;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        order: 1;
    }
    &--mobile {
        justify-content: flex-start;
        flex-wrap: wrap;
        .o-pag__link {
            flex-grow: 1;
            flex-shrink: 1;
        }
        .o-pag__previous {
            flex-grow: 1;
            flex-shrink: 1;
            order: 0;
        }
        .o-pag__next {
            flex-grow: 1;
            flex-shrink: 1;
            order: 0
        }
        .o-pag__ellipsis {
            flex-grow: 1;
            flex-shrink: 1;
        }
        .o-pag__list {
            order: 0;
        }
    }
}