/* ==========================================================================
   PAGINATION COMPONENT
   Used in: blog.html
   ========================================================================== */

.pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.pagination__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-primary-10);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination__btn:hover:not(:disabled) {
  background-color: var(--color-primary-5);
}

.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination__btn .material-symbols-outlined {
  font-size: 1rem;
}

.pagination__numbers {
  display: flex;
  gap: 0.5rem;
}

.pagination__number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--color-primary-10);
  background-color: transparent;
  color: var(--color-primary);
}

.pagination__number--active {
  background-color: var(--color-primary);
  color: var(--color-bg-light);
  border-color: var(--color-primary);
}

.pagination__number:not(.pagination__number--active):hover {
  background-color: var(--color-primary-5);
}

.pagination__dots {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--color-primary-40);
}