.pagination {
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	/* height: 50px; */
	justify-content: center;
	background: var(--color-primary);
	max-width: 600px;
	margin: 30px auto;
	overflow: visible;
}

.pagination__btn {
	font-size: 2rem;
	color: #fff;
	margin: 0.3rem;
	padding: 0.7rem;
	min-width: 4rem;
	text-align: center;
	align-self: center;
	border-radius: 5px;
	text-decoration: none;
	background: var(--color-primary-light);
	background: linear-gradient(
		to left bottom,
		var(--color-primary-light),
		var(--color-primary)
	);
	box-shadow: inset 1px 1px 3px rgba(255 255 255 /0.3),
		1px 1px 1px rgba(128 128 128 /0.7), 0 0 3px rgba(140 140 140 / 1);
}

.pagination__btn:hover {
	color: #fff;
	box-shadow: inset 1px 1px 3px rgba(128 128 128 /1);
}

.pagination__selected {
	background: var(--color-primary-dark);
	color: #fff;
	box-shadow: inset 1px 1px 3px rgba(128 128 128 /1);
}

.dark {
	background: var(--color-primary-dark);
}

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