.c-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-inline: auto;
}

.c-pagination__item {
	display: grid;
	place-content: center;
	width: 40px;
	background-color: var(--color-main-orange);
	--radius: 4px;
	clip-path: polygon(var(--radius) 0px, calc(100% - var(--radius)) 0px, 100% var(--radius), 100% calc(100% - var(--radius)), calc(100% - var(--radius)) 100%, var(--radius) 100%, 0% calc(100% - var(--radius)), 0px var(--radius));
	font-weight: 700;
	line-height: 1;
	color: #fff;
	aspect-ratio: 1/1;
	text-align: center;
	transition: background-color 0.3s;
}

.c-pagination__item--current {
	background-color: var(--color-text-disabled);
}

.c-pagination__spacer {
	line-height: 1;
}

.c-pagination__prev,
.c-pagination__next {
	display: grid;
	place-content: center;
}

.c-pagination__prev::before,
.c-pagination__next::after {
	content: '';
	display: block;
	width: 10px;
	height: 16px;
	background-color: var(--color-main-orange);
	--width: 4px;
	transition: background-color 0.3s;
}

.c-pagination__prev::before {
	clip-path: polygon(0px 50%, calc(100% - var(--width)) 0px, 100% 0px, var(--width) 50%, 100% 100%, calc(100% - var(--width)) 100%);
}

.c-pagination__next::after {
	clip-path: polygon(0px 0px, var(--width) 0px, 100% 50%, var(--width) 100%, 0px 100%, calc(100% - var(--width)) 50%);
}

@media (any-hover: hover) {
	.c-pagination__item:not(.c-pagination__item--current):hover {
		background-color: var(--color-main-navy);
		text-decoration: none;
	}

	.c-pagination__prev:hover::before,
	.c-pagination__next:hover::after {
		background-color: var(--color-main-navy);
	}
}

@media screen and (max-width: 767px) {
	.c-pagination {
		gap: 10px;
	}
}