/* ================================== Photo view msgBox ======================== */

/* .msgBoxBackdrop .msgBox {
	container-type: size;
} */

.msgBoxBackdrop .msgBox .photoCarousel {
	width: 100%;
	height: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 90%;
	scroll-snap-type: x proximity;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
}

.msgBoxBackdrop .msgBox .photoCarousel:has(.photoContainer:only-child) {
	grid-auto-columns: auto;
	overflow: auto;
}

.msgBoxBackdrop .msgBox .photoCarousel .photoContainer {
	position: relative;
	padding: 0 5px;
	min-width: 100%;
	min-height: 100%;
	scroll-snap-align: center;
}

.msgBoxBackdrop .msgBox .photoCarousel .photoContainer .photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	vertical-align: middle;
	/* background-color: rgba(255, 255, 255, 0.1); */
	background-color: white;
}

.msgBoxBackdrop .msgBox .photoCarousel .photoContainer .meta {
	position: absolute;
	font-size: 1rem;
	top: 2%;
	right: 2%;
	text-align: right;
	color: rgb(253, 255, 118);
	text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;
}

/* Only on non-touch screen */
@media not screen and (any-pointer: coarse) {
	.msgBoxBackdrop .msgBox .photoCarousel::-webkit-scrollbar {
		height: 0.75rem;
	}

	.msgBoxBackdrop .msgBox .photoCarousel::-webkit-scrollbar-track {
		background-color: darkslategray;
		border-radius: 100vw;
		/* border: 3px dashed hotpink; */
	}

	.msgBoxBackdrop .msgBox .photoCarousel::-webkit-scrollbar-thumb {
		background-color: lightgray;
		border-radius: 100vw;
	}

	.msgBoxBackdrop .msgBox .photoCarousel::-webkit-scrollbar-thumb:hover {
		background-color: white;
	}

	.msgBoxBackdrop .msgBox .photoCarousel .photoContainer {
		padding-bottom: 0.5rem;
	}
}

/* Squish the msgBox areas if window height get below a specified amount (Set in the msgBox JS)*/
.msgBoxBackdrop .msgBox.squish .header {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	z-index: 1;
	width: 100%;
	text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;
	padding: 1rem;
	border: none;
	background: none;
}
.msgBoxBackdrop .msgBox.squish .body {
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	/* margin: 0 0.75rem 0.75rem 0; */
}
.msgBoxBackdrop .msgBox.squish .footer {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	z-index: 1;
	width: 100%;
	text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;
	margin: 0 0.75rem 2rem 0.75rem;
	border: none;
	background: none;
}

/* 
Only applies to the photoView theme (used squish() function in js)
Not sure if this should be done through this media query or the squish function in cwMsgBox.
Doing it through js give more options.  Can pass the height to trigger at and can apply it to any msgBox we want.
*/
/* @media (max-height: 450px) {
	.msgBoxBackdrop .msgBox.photoView .header {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		z-index: 1;
		width: 100%;
		text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;
		padding: 1rem;
		border: none;
		background: none;
	}
	.msgBoxBackdrop .msgBox.photoView .body {
		grid-column: 1 / 2;
		grid-row: 1 / 4;
	}

	.msgBoxBackdrop .msgBox.photoView .footer {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		z-index: 1;
		width: 100%;
		text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;
		padding: 1rem;
		border: none;
		background: none;
	}
} */