/* Accessible product/project lightbox controls. */
.product-lightbox {
	grid-template-columns: minmax(0, 1fr);
}

.product-lightbox button {
	display: inline-flex;
	width: 46px;
	height: 46px;
	min-width: 46px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: var(--rv-color-on-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.product-lightbox button:is(:hover, :focus, :focus-visible, :active) {
	border-color: rgb(255 255 255 / 62%);
	background: rgb(255 255 255 / 22%);
	color: var(--rv-color-on-dark);
}

.product-lightbox__close {
	position: absolute;
	top: max(18px, env(safe-area-inset-top));
	right: max(18px, env(safe-area-inset-right));
	font-size: 25px;
}

.product-lightbox__prev,
.product-lightbox__next {
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
}

.product-lightbox__prev {
	left: max(18px, env(safe-area-inset-left));
}

.product-lightbox__next {
	right: max(18px, env(safe-area-inset-right));
}

.product-lightbox__prev:is(:hover, :focus, :focus-visible, :active),
.product-lightbox__next:is(:hover, :focus, :focus-visible, :active) {
	transform: translateY(-50%);
}

@media (max-width: 767px) {
	.product-lightbox {
		padding: max(64px, calc(env(safe-area-inset-top) + 52px)) 54px max(18px, env(safe-area-inset-bottom));
	}

	.product-lightbox button {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	.product-lightbox__close {
		top: max(10px, env(safe-area-inset-top));
		right: max(10px, env(safe-area-inset-right));
	}

	.product-lightbox__prev {
		left: max(6px, env(safe-area-inset-left));
	}

	.product-lightbox__next {
		right: max(6px, env(safe-area-inset-right));
	}
}