.component-pagination {
  margin-top: var(--block-spacing);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.component-pagination > .prev-btn > svg > rect,
.component-pagination > .next-btn > svg > rect {
  transition: stroke 0.3s, fill 0.3s;
}
.component-pagination > .prev-btn > svg > path,
.component-pagination > .next-btn > svg > path {
  transition: fill 0.3s;
}
.component-pagination > .prev-btn:hover > svg > rect,
.component-pagination > .next-btn:hover > svg > rect {
  stroke: var(--color-secondary-1);
  fill: var(--color-secondary-1);
}
.component-pagination > .prev-btn:hover > svg > path,
.component-pagination > .next-btn:hover > svg > path {
  fill: white;
}
.component-pagination > .prev-btn.disabled,
.component-pagination > .next-btn.disabled {
  pointer-events: none;
}
.component-pagination > .prev-btn.disabled > svg > rect,
.component-pagination > .next-btn.disabled > svg > rect {
  stroke: var(--color-gray-5);
}
.component-pagination > .prev-btn.disabled > svg > path,
.component-pagination > .next-btn.disabled > svg > path {
  fill: var(--color-gray-5);
}
.component-pagination > .dot-text,
.component-pagination > .num-btn {
  width: 48px;
  height: 48px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.component-pagination > .dot-text.hidden,
.component-pagination > .num-btn.hidden {
  display: none;
}
.component-pagination > .num-btn {
  border-radius: 999px;
  background-color: var(--color-gray-6);
  color: var(--color-gray-1);
  transition: background-color 0.3s, color 0.3s;
}
.component-pagination > .num-btn:hover, .component-pagination > .num-btn.active {
  background-color: var(--color-secondary-1);
  color: white;
}
.component-pagination > .num-btn.active {
  pointer-events: none;
}

@media screen and (width < 768px) {
  .component-pagination {
    gap: 16px;
  }
  .component-pagination > .prev-btn > svg,
  .component-pagination > .next-btn > svg,
  .component-pagination > .num-btn {
    width: 36px;
    height: 36px;
  }
}