.c-pagination {
	display: flex;
	flex-flow: row nowrap;
	gap: var(--spacing-xs);
	min-width: 110px;
	margin-bottom: var(--spacing-xs);
	font-size: 12px;
	place-items: stretch;
	place-content: center;

	@media (width > 550px) {
		margin-bottom: var(--spacing-lg);
	}

	@media (width > 480px) {
		font-size: 14px;
	}

	.c-pagination__internal {
		display: contents;
	}

	.c-pagination__list {
		display: contents;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.c-pagination__list-item {
		display: flex;

		svg {
			width: 10px;
			height: 10px;
		}

		button,
		a,
		span {
			display: flex;
			place-items: center;
			place-content: center;
			width: 24px;
			height: 24px;
			color: var(--color-text);
			font-weight: 700;
			text-align: center;
			border: 0;
			background: transparent;
			transition: all 0.3s ease;

			@media (width > 480px) {
				width: 36px;
				height: 36px;
			}
		}

		button:hover,
		a:hover,
		a:focus,
		&.active span {
			color: var(--color-white);
			background: var(--color-secondary);
			border-color: var(--color-secondary);

			svg {
				color: var(--color-white);
			}
		}

		&.disabled {
			button,
			a {
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}