.pagination {
    @extend %normalize_block;
    @extend %normalize_text;
    @extend %normalize_size;
    
    display: flex;
    align-items: center;
    width: max-content;

    border-radius: $badge-border-radius;
    box-shadow: var(--pagination-shadow);

    > * { list-style: none; line-height: var(--pagination-item-size); }

    .page-prev { @include space(var(--pagination-navigation-margin), $direction: "right") }
    .page-next { @include space(var(--pagination-navigation-margin), $direction: "left")  }

    .page-item {
        @include size(var(--pagination-item-size));
        @include space(var(--pagination-item-margin), $direction: "horizontal");
        text-align: center;
        border-radius: inherit;

        &.active a {
            background: var(--var-bg-color);
            color: var(--var-text-color);
        }
        &:not(.active):hover a { 
            background-color: var(--pagination-item-background-hover);
            // color: var(--var-bg-color) !important;
        }
    }

    a {
        display: block;
        text-decoration: none;
        color: var(--var-bg-color);
        font-weight: var(--pagination-link-font-weight);
        border-radius: inherit;
    }

    &.size-sm .page-item {--pagination-item-size: #{rem($pagination-item-size-rem - 10)};}
    &.size-lg .page-item {--pagination-item-size: #{rem($pagination-item-size-rem + 10)};}
    &.size-xl .page-item {--pagination-item-size: #{rem($pagination-item-size-rem + 20)};}
}