:root {
  --color-pagination-border: var(--gray-1);
  --color-pagination-text: var(--gray-3);
  --color-pagination-hover: var(--gray-1);
}

[data-theme="dark"] {
  --color-pagination-border: var(--gray-3);
  --color-pagination-text: var(--gray-1);
  --color-pagination-hover: var(--gray-3);
}

.pagination-container {
  margin: 1.25rem 0;
}

.pagination {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  gap: 0.625rem;
}

.pagination li {
  display: inline;
}

.pagination button {
  background-color: transparent;
  border: 0.0625rem solid var(--color-pagination-border);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0.25rem;
  color: var(--color-pagination-text);
}

.pagination button:disabled {
  color: var(--gray-1);
  cursor: not-allowed;
}

.pagination .dots {
  padding: 0.5rem 0.75rem;
  cursor: default;
  background-color: transparent;
  border: none;
  color: var(--gray-3);
}

@media (pointer: fine) {
  .pagination button:hover {
    background-color: var(--color-pagination-hover);
  }

  .pagination .dots:hover {
    background-color: transparent;
  }
}

@media (width < 576px) {
  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .pagination
    li:not(:nth-child(1), :nth-child(2), :nth-child(3), :nth-last-child(1), :nth-last-child(2)) {
    display: none;
  }
}