/* ============================================
   COMPONENT: Pagination
   ============================================ */

.pagination {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	margin-top: var(--sp-5);
}

.pagination__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: none;
	background-color: transparent;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: var(--font-family-heading);
	font-size: var(--fs-400);
	font-weight: var(--fw-regular);
	line-height: 2.2rem;
	color: var(--gray-900);
	cursor: pointer;
	transition: all var(--transition-base);
}

.pagination__button--prev,
.pagination__button--next {
	padding: 0;
}

.pagination__button--prev img,
.pagination__button--next img {
	width: 1.1rem;
	height: 1rem;
	object-fit: contain;
}

.pagination__button--active {
	background-color: var(--brand-primary);
	color: var(--color-light);
}

.pagination__button:not(.pagination__button--prev):not(
		.pagination__button--next
	):not(.pagination__button--active) {
	background-color: #f5f5f5;
}

.pagination__button:hover:not(.pagination__button--active) {
	background-color: var(--gray-100);
	transform: scale(1.1);
}

.pagination__button:focus {
	outline: 0.2rem solid var(--brand-primary);
	outline-offset: 0.2rem;
}

/* Tablet */
@media (max-width: 1199px) {
	.pagination__button {
		width: 3.6rem;
		height: 3.6rem;
		font-size: var(--fs-body);
		line-height: 1.9rem;
	}

	.pagination__button--prev img,
	.pagination__button--next img {
		width: 1rem;
		height: 0.9rem;
	}
}

/* Mobile */
@media (max-width: 575px) {
	.pagination {
		margin-top: var(--sp-4);
	}

	.pagination__button {
		width: 3.2rem;
		height: 3.2rem;
		font-size: var(--fs-body-sm);
		line-height: 1.2;
	}

	.pagination__button--prev img,
	.pagination__button--next img {
		width: 0.9rem;
		height: 0.8rem;
	}
}