/* ページネーションのスタイル */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-16);
  margin: var(--size-32) 0;
}

.pagination__numbers {
  display: flex;
  gap: var(--size-8);
}

.pagination__number,
.pagination__prev,
.pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-40);
  height: var(--size-40);
  padding: 0 var(--size-8);
  border: 1px solid var(--color-text-gray);
  border-radius: var(--size-4);
  color: var(--color-text-black);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: var(--font-weight-medium);
}

.pagination__prev,
.pagination__next {
  color: var(--color-text-black);
}

.pagination__number:hover:not(.pagination__number--disabled):not(
    .pagination__number--current
  ),
.pagination__prev:hover:not(.pagination__prev--disabled),
.pagination__next:hover:not(.pagination__next--disabled) {
  background-color: var(--color-bg-light-gray2);
  border-color: var(--color-text-black);
}

.pagination__number--current {
  background-color: var(--color-main-blue);
  border-color: var(--color-main-blue);
  color: var(--color-white);
}

.pagination__prev--disabled,
.pagination__next--disabled {
  color: var(--color-text-gray);
  border-color: var(--color-bg-light-gray1);
  cursor: not-allowed;
}

/* SVGアイコンのスタイル */
.pagination__prev svg,
.pagination__next svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (min-width: 769px) {
  .pagination__number,
  .pagination__prev,
  .pagination__next {
    min-width: var(--size-42);
    height: var(--size-42);
  }
}