.pagination {
  display: inline-block;
  text-align: center;
  padding-left: 0;
  margin-top: $spacer-y;
  margin-bottom: $spacer-y;
  user-select: none;
  cursor: pointer;
}
.size-changer-width {
  width: rem(98px);
}
.page-item {
  display: inline-block; // Remove list-style and block-level defaults
  vertical-align: middle;
  &:not(:last-child) {
    margin-right: $pagination-item-spacer-x;
  }

  &.active .page-link {
    color: $pagination-bg;
    border-color: $pagination-active-border;
    background-color: $pagination-active-color;
  }

  &.disabled {
    cursor: not-allowed;

    .page-link {
      color: $pagination-disabled-color;
      border-color: $pagination-disabled-border-color;
      pointer-events: none;
      background-color: $pagination-disabled-bg-color;
    }
    i {
      color: $pagination-disabled-color;
    }
  }
  &.active-disabled-md {
    .page-link {
      color: $brand-pure;
      border-color: $pagination-disabled-color;
      background-color: $pagination-disabled-color;
    }
  }
  .dada-ico-ellipsis-h {
    color: $pagination-ellipsis-color;
  }
}

.page-link {
  position: relative;
  display: inline-block;
  min-width: $pagination-link-min-size;
  min-height: $pagination-link-min-size;
  line-height: $pagination-link-line-height;
  padding: $pagination-padding-y $pagination-padding-x;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: $pagination-color;
  background-color: $pagination-bg;
  border: $pagination-border-width solid $pagination-border-color;
  transition: $pagination-transition;
  border-radius: $pagination-border-radius;

  i {
    transform: scale($pagination-ico-scale);
  }

  &:hover {
    border-color: $pagination-hover-color;
    color: $pagination-hover-color;
    text-decoration: none;
  }
}
.pagination-pageSize {
  display: inline-block;
  vertical-align: middle;
  margin-left: rem(16px);
}
.pagination-jumper {
  display: inline-block;
  & > span {
    padding-left: $pagination-jumper-spacing;
    padding-right: $pagination-jumper-spacing;
  }
  &.disabled {
    cursor: not-allowed;
    & > div {
      color: $pagination-disabled-color;
      border-color: $pagination-disabled-border-color;
      pointer-events: none;
      background-color: $pagination-disabled-bg-color;
    }
    i {
      color: $pagination-disabled-color;
    }
  }
}
  .pagination-jumper-input-sm {
    display: inline-block !important;
    width: $pagination-jumper-input-width-sm !important;
    & > input {
      text-align: center;
      width: 100% !important;
    }
  }
  .pagination-jumper-input-md {
    display: inline-block !important;
    width: $pagination-jumper-input-width-md !important;
    & > input {
      text-align: center;
      width: 100% !important;
    }
  }

.pagination-total {
  display: inline-block;
  padding-right: $pagination-jumper-spacing;
  // margin-right: rem(8px);
  &.disabled {
    color: $pagination-disabled-color;
  }
  & > span {
    padding-left: $pagination-total-spacing;
    padding-right: $pagination-total-spacing;
  }
}

.page-item-sm {
  display: inline-block; // Remove list-style and block-level defaults
  vertical-align: middle;
  &:not(:last-child) {
    margin-right: $pagination-item-spacer-x-sm;
  }
  &.active .page-link-sm {
    color: $pagination-active-color;
    border: $pagination-border-width solid $pagination-active-color;
  }
  &.disabled {
    cursor: not-allowed;

    .page-link-sm {
      color: $pagination-disabled-color;
      pointer-events: none;
    }
    .dada-ico-ellipsis-h {
      color: $pagination-disabled-color;
    }
  }
  &.active-disabled-sm {
    .page-link-sm {
      border-color: $pagination-disabled-color;
    }
  }
}

.page-link-sm {
  position: relative;
  display: inline-block;
  min-width: $pagination-link-size-sm;
  min-height: $pagination-link-size-sm;
  line-height: $pagination-link-line-height-sm;
  padding: $pagination-padding-y $pagination-padding-x-sm;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: $pagination-color;
  background-color: $pagination-bg;
  border: $pagination-border-width solid $pagination-bg;
  transition: $pagination-transition;
  border-radius: $pagination-border-radius;

  i {
    font-size: rem(12px);
  }

  &:hover {
    color: $pagination-hover-color;
    text-decoration: none;
  }
}
.page-link-go-md {
  padding: 0 $pagination-link-go-padding-md;
}
.page-link-go-sm {
  border: $pagination-border-width solid $pagination-border-color;
  min-width: $pagination-link-go-sm;
  min-height: $pagination-link-go-sm;
  line-height: $pagination-link-go-line-height-sm;
  font-size: $font-size-sm;
}
.dada-page-disabled {
  color: $pagination-disabled-color;
}
