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

  > div {
    display: inline;
    font-size: 12px;
    > a,
    > span {
      user-select: none;
      cursor: pointer;
      position: relative;
      text-decoration: none;
      min-width: 18px;
      border: 0;
      text-align: center;
      border-radius: 0;
      margin-left: 0;
      font-size: 12px;
      margin: 0 3px;
      border-radius: var(--borderRadius);
    }

    .pagination-page-switch {
      width: 40px;
      background: inherit;
      border-radius: 3px;
      border: 1px solid #dcdcdc;
      height: 20px;
      line-height: 20px;
      padding: 0 3px;
      outline: none;
    }

    // > a:hover,
    // > span:hover,
    // > a:focus,
    // > span:focus {
    //   background: transparent;
    //   color: var(--primary);
    //   border: var(--Pagination-onActive-border) !important;
    // }
  }

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

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

  > div.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;
      font-size: 10px !important;
    }
  }

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

  &-next {
    > span {
      cursor: pointer;
      font-size: 10px !important;
    }
  }

  // &-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;
}