@use 'mixins/mixins' as *;

@include b(pagination) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;

  &--center {
    justify-content: space-between;
    
    .el-pagination {
      margin: 0 auto;
    }
  }
}

/* 分页器所有方块元素统一尺寸 */
.el-pagination.is-background {
  .el-pager li,
  .btn-prev,
  .btn-next {
    box-sizing: border-box !important;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 4px;
  }

  .el-pager li {
    width: auto !important;
    padding: 0 4px;
  }
}

.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
  display: flex !important;
}

/* 分页器激活页码渐变样式 - 与 Primary 按钮保持一致 */
.el-pagination.is-background .el-pager li.is-active {
  background: linear-gradient(
    90deg,
    var(--pure-button-primary-gradient-start) 0%,
    var(--pure-button-primary-gradient-end) 100%
  ) !important;
  border-color: transparent !important;

  &:hover {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--pure-button-primary-gradient-start), white 15%)
        0%,
      color-mix(in srgb, var(--pure-button-primary-gradient-end), white 15%)
        100%
    ) !important;
  }
}