div.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	&.dimmed {
		background-color: var(--dimmed-overlay-background-color);
	}

	&.modal > div.modal-box {
		background-color: var(--background-color);
		border-radius: 1rem;
		padding: 1rem;

		max-width: min(80rem, 80vw);
		max-height: min(80rem, 80vh);
		overflow: hidden;
		display: flex;

		&.full-screen-mobile {
			@media screen and (max-width: 30rem) {
				max-width: 100%;
				max-height: 100%;
				width: 100%;
				height: 100%;
				border-radius: 0;
			}
		}

		> div.modal-box-inner {
			overflow: auto;
		}
	}
}

div.lightbox {
	> div.controls {
		position: fixed;
		top: .5rem;
		right: .5rem;
		display: flex;
		z-index: 1;

		> button, > a {
			color: var(--lightbox-button-color);
			width: 3rem;
			height: 3rem;

			> svg {
				width: 2rem;
				height: 2rem;
			}
		}
	}

	> img {
		max-width: 75%;
		max-height: 75%;

		transition: rotate 0.2s;
	}
}