// Quick View card button and modal (Modules\QuickView\QuickViewModule).

// Icon button over the card image.
.noah-quick-view-button--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1e1e1e);
	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}
}

// Page behind the open modal: no scrolling, no layout shift.
.noah-quick-view-is-open {
	overflow: hidden;

	body {
		padding-inline-end: var(--noah-scrollbar-width, 0);
	}
}

.noah-quick-view {
	position: fixed;
	z-index: 100000; // Above the admin bar (99999).
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;

	&[hidden] {
		display: none;
	}
}

.noah-quick-view__overlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 60%);
}

.noah-quick-view__dialog {
	position: relative;
	box-sizing: border-box;
	width: min(960px, 100%);
	min-height: 12rem;
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	padding: 3rem 1.5rem 1.5rem;
	border-radius: 4px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1e1e1e);
	box-shadow: 0 10px 40px rgb(0 0 0 / 30%);
	overscroll-behavior: contain;

	&:focus {
		outline: none;
	}

	@media (min-width: 782px) {
		padding: 3rem 2rem 2rem;
	}
}

.noah-quick-view__close {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;

	&:hover {
		background: rgb(0 0 0 / 6%);
	}

	&:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}
}

.noah-quick-view__status {
	display: flex;
	justify-content: center;
	padding: 3rem 0;

	&[hidden] {
		display: none;
	}
}

.noah-quick-view__spinner {
	width: 2rem;
	height: 2rem;
	border: 3px solid rgb(0 0 0 / 15%);
	border-top-color: currentcolor;
	border-radius: 50%;
	animation: noah-quick-view-spin 0.8s linear infinite;

	@media (prefers-reduced-motion: reduce) {
		animation-duration: 3s;
	}
}

.noah-quick-view__error {
	padding: 2rem 0;
	text-align: center;

	&[hidden] {
		display: none;
	}
}

// Add to cart notices above the popup content.
.noah-quick-view__notices {
	margin-block-end: 1rem;

	&:empty {
		display: none;
	}

	> :last-child {
		margin-block-end: 0;
	}
}

@keyframes noah-quick-view-spin {

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