@import url(./box.css);

button[component^="image-display-box"]{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100% - .5em);/*minus margin*/
	width: 100%;
	border: 0;
	font: inherit;
	cursor: zoom-in;
	& img{
		display: block;
		min-width: 0;
		min-height: 0;
		max-width: 100%;
		flex: 1 1 0;
		object-fit: contain;
	}
	& h3{
		text-align: center;
		margin-bottom: 0;
		&::before, &::after {
			content: "'";
		}
	}
	& p{
		margin-top: 0;
	}
}
#ImageViewer:modal{
	border: none;
	box-shadow: 0 0 2em black;
	margin: auto;
	width: max(80vw, min(100vw, 500px));
	height: 100%;
	min-width: 0;
	max-width: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: min-content 1fr;
	padding: 0.5em;
	gap: 0.5em;
	--scale: 1;
	--translatex: 0;
	--translatey: 0;
	& button{
		border-radius: 50%;
		width: 2em;
		aspect-ratio: 1;
		border: none;
		padding: 0;
		text-shadow: /* weird way to force bold */
			0 -1px black,
			1px -1px black,
			1px 0 black;
		&:nth-child(1){
			grid-column: 2;
			justify-self: end;
		}
		&:nth-child(3){
			grid-column: 4;
			justify-self: end;
		}
	}
	& .viewer{
		grid-row: 2;
		grid-column: 1/5;
		width: 100%;
		height: 100%;
		border: 1px solid black;
		overflow: clip;
		min-height: 0;
		min-width: 0;
		& img{
			width: 100%;
			height: 100%;
			object-fit: contain;
			transform-origin: top left;
			transform:
				/* multiply by 1px to get the units */
				translate(calc(1px * var(--translatex)), calc(1px * var(--translatey)))
				scale(var(--scale));
			display: block;
			user-select: none;
		}
	}
}