/* 分页组件样式 */
.pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 959px) {
  .pagination {
    gap: 8px;
  }
}

.pagination a {
  border: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.pagination__parts-wrapper,
.pagination__parts {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 959px) {
  .pagination__parts-wrapper,
  .pagination__parts {
    gap: 8px;
  }
}

.pagination__parts-wrapper--reverse,
.pagination__parts--reverse {
  flex-direction: row-reverse;
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上一页/下一页箭头按钮 */
.pagination__button {
  width: 20px;
  height: 20px;
  color: rgba(var(--color-light-text), 1);
  transition: color 0.2s ease;
}

.pagination__button:hover:not(.pagination__button--disabled) {
  color: rgb(var(--color-text));
}

/* 禁用状态（置灰） */
.pagination__button--disabled {
  color: rgba(var(--color-light-text), 0.3) !important;
  cursor: not-allowed;
  pointer-events: none;
  border: none !important;
}

@media (max-width: 959px) {
  .pagination__button {
    width: 20px;
    height: 20px;
  }

  .pagination__button .icon {
    width: 12px;
  }
}

.pagination__button--previous {
  transform: rotate(180deg);

}

/* 页码指示器（方形按钮样式） */
.pagination__indicator {
  min-width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination__indicator a {
  width: 100%;
  height: 100%;
  color: #000;
  border-radius: 6px;
  font-size: 14px;
}

/* 省略号样式 */
.pagination__indicator.is-text {
  border: none;
  background-color: transparent;
  min-width: auto;
  padding: 0 4px;
}

.pagination__indicator.is-text a {
  cursor: default;
}

/* 非当前页悬停效果 */
.pagination__indicator:not(.active):not(.is-text):hover {
  border-color: rgba(var(--color-text), 0.3);
  background-color: rgba(var(--color-text), 0.05);
}

/* 当前页样式（橙色背景） */
.pagination__indicator.active {
  background-color: #c68635 !important;
  border: none;
  /* border-color: rgb(var(--color-button-background)); */
}

.pagination__indicator:hover {
  background-color: #c68635 !important;
  border-color: rgb(var(--color-button-background));
}
.pagination__indicator:hover a {
  color: rgb(var(--color-button-text));
}
.pagination__indicator.active a {
  color: rgb(var(--color-button-text));
  border: none;
}

@media (max-width: 959px) {
  .pagination__indicator {
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
  }

  .pagination__indicator a {
    font-size: 14px;
  }

  .pagination__indicator.is-text + .pagination__indicator {
    display: none;
  }

  .pagination__indicator.active {
    display: flex;
  }
}