@use "../../../../../../../static/sass/frontend/common-frontend/functions";

.ct-quick-view-card {
	display: flex;
	position: relative;
	overflow: hidden;
	opacity: 1;

	// filter drop-shadow is lighter on the GPU in some cases and may play better with animations
	// box-shadow: var(--theme-box-shadow);
	filter: drop-shadow(var(--theme-box-shadow));

	border-radius: var(--theme-border-radius, 7px);
	transition: opacity 0.2s ease-in-out;

	@include functions.media-breakpoint-down(sm) {
		max-height: 80vh;
	}

	// close button
	.ct-toggle-close {
		--toggle-button-position: absolute;
		--toggle-button-z-index: 1;
		--toggle-button-top: 15px;
		--toggle-button-inset-end: 15px;

		--theme-icon-size: 10px;
		--theme-icon-color: var(--theme-text-color);
		--toggle-button-size: 30px;

		&:not(:hover) svg {
			opacity: 0.6;
		}
	}
}

.ct-quick-view-content {
	width: 100%;
	
	@include functions.media-breakpoint-down(sm) {
		overflow-y: auto;
	}

	@include functions.media-breakpoint-up(md) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}