.mm-pagination-content-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;

	@media (min-width: 1365px) {
		grid-template-columns: 1fr 314px;
	}

	.sidebar {
		background-color: var(--color-accent-1);
		padding: 1rem;
		font-size: 0.8rem;
		.items {
			position: sticky;
			top: 86px;

			.widget {
				&.widget_text {
					ul {
						list-style: square;
						padding-left: 1rem;
						display: flex;
						flex-direction: column;
						gap: 0.5rem;

						li {
							color: var(--color-background-primary);
							a {
								color: var(--color-background-primary);
							}
						}
					}
				}
			}
		}
	}
}

.mm-pagination-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
	z-index: 2;
}

.mm-pagination-spinner {
	width: 52px;
	height: 52px;
	border: 4px solid rgba(152, 93, 115, 0.18);
	border-top-color: var(--color-accent-1);
	border-radius: 50%;
	animation: mmPaginationSpin 0.7s linear infinite;
}

.js-mm-pagination-section.is-loading {
	.mm-pagination-loader {
		opacity: 1;
		visibility: visible;
	}

	.js-mm-pagination-grid {
		opacity: 0.45;
		transition: opacity 0.2s ease;
	}
}

.companies-pagination {
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 0 1rem;
	justify-content: center;

	&.is-loading {
		pointer-events: none;
		opacity: 0.72;
	}

	button {
		padding: 0.5rem 2rem;
		border-radius: 7px;
		&.is-active {
			background-color: var(--color-accent-1) !important;
			color: var(--color-background-primary) !important;
		}
		&:disabled {
			color: var(--color-text-muted);
		}
	}
}

@keyframes mmPaginationSpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}