$pagination-prefix: #{$prefix}-pagination;
@mixin ne-pagination {
  .#{$pagination-prefix} {
    @include clearfix;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      margin-top: 2px;
      margin-bottom: 2px;
      & + li {
        margin-left: 10px;
      }
    }
    &-input {
      width: 80px;
      margin: 0 10px;
    }
    &-select,
    &-jump,
    &-total,
    &-number {
      margin-left: 10px;
    }

    &.#{$pagination-prefix}-compact {
      li:not(.#{$pagination-prefix}-number) {
        margin-left: 0;
        .#{$prefix}-button {
          border-left-width: 0;
          border-radius: 0;

          &.#{$pagination-prefix}-button-active,
          &:hover:not([disabled]),
          &:focus:not([disabled]),
          &:active:not([disabled]) {
            z-index: 1;
            box-shadow: -$global-border-width 0 0 0 $primary-color;
          }
        }
        &.#{$pagination-prefix}-previous {
          .#{$prefix}-button {
            border-left-width: 1px;
            border-radius: $global-radius 0 0 $global-radius;
          }
        }
        &.#{$pagination-prefix}-next {
          .#{$prefix}-button {
            border-radius: 0 $global-radius $global-radius 0;
          }
        }
      }
    }

    @each $name, $value in $sizes-map {
      &-#{$name} {
        font-size: map-get($font-sizes-map, $name);
      }
    }
  }
}