.quote-selection-active .search-container {
	opacity: 0;
	pointer-events: none;
	transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-item.selected {
	position: fixed;
	animation:
		moveToCenter 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		pulse 2s cubic-bezier(0.4, 0, 0.2, 1) 2s;
	width: 80%;
	z-index: 100;
	cursor: default;
	transform: none;
	left: 50%;
	transform: translateX(-50%);
}

/* this is for the quote which came through the query parameter */
.result-item.selected:not([style*="--original"]) {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	z-index: 100;
	cursor: default;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes moveToCenter {
	0% {
		top: var(--original-top);
	}
	100% {
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.05);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (max-width: 768px) {
	.result-item.selected {
		width: 85%;
		top: 40%;
	}

	.result-item.selected:not([style*="--original"]) {
		width: 85%;
		top: 40%;
	}

	@keyframes moveToCenter {
		0% {
			top: var(--original-top);
		}
		100% {
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

@media (max-width: 480px) {
	.result-item.selected {
		width: 95%;
		top: 40%;
	}

	.result-item.selected:not([style*="--original"]) {
		width: 95%;
		top: 40%;
	}

	@keyframes moveToCenter {
		0% {
			top: var(--original-top);
		}
		100% {
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}