.#{$ns}Pagination {
  display: inline-block;
  padding: 0;
  margin: 0 0 px2rem(-10px);
  border-radius: px2rem(4px);

  > li {
    display: inline;

    > a,
    > span {
      user-select: none;
      cursor: pointer;
      position: relative;
      float: left;
      text-decoration: none;
      min-width: var(--Pagination-minWidth);
      height: var(--Pagination-height);
      border: 0;
      line-height: var(--Pagination-height);
      padding: var(--Pagination-padding);
      text-align: center;
      color: #666666;
      border-radius: 0;
      margin-left: 0;
      font-size: var(--Pagination-fontSize);
    }

    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      background: transparent;
      color: var(--primary);
    }
  }

  > li.is-disabled {
    > span,
    > a {
      cursor: not-allowed;
    }

    > a,
    > span,
    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      color: #cccccc;
    }
  }

  > li.is-active {
    > a,
    > span,
    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      background: var(--Pagination-onActive-backgroundColor);
      color: var(--Pagination-onActive-color);
      border: var(--Pagination-onActive-border);
      border-radius: var(--borderRadius);
    }
  }

  &-prev {
    > span {
      cursor: pointer;
    }
  }

  &-ellipsis {
    > a > span {
      position: relative;
      top: px2rem(-4px);
    }
  }

  &-next {
    > span {
      cursor: pointer;
    }
  }

  &-inputGroup {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;

    input {
      width: px2rem(50px);
      height: var(--Pagination-height);
      border: var(--borderWidth) solid var(--borderColor);
      border-radius: var(--borderRadius);
      padding: var(--gap-xs) px2rem(10px);
      margin: 0 px2rem(10px);
      text-align: center;

      &:focus,
      &:hover {
        outline: none;
        border: var(--borderWidth) solid var(--primary);
      }
    }
  }
}

.#{$ns}PaginationWrapper-pager {
  &:first-child {
    margin-bottom: var(--gap-sm);
  }

  text-align: right;
}