img,
video {
	display: block;
	margin: 1rem auto;
	box-shadow: var(--edge-highlight), var(--shadow);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	max-width: 100%;

	&.full,
	&[src*="#full"] {
		width: 100%;
	}

	&.full-bleed,
	&[src*="#full-bleed"] {
		margin-inline-start: calc((-100vw + 100%) / 2);
		margin-inline-end: calc((-100vw + 100%) / 2);
		width: 100vw;
		max-width: 100vw;
	}

	&.start,
	&.end,
	&[src*="#start"],
	&[src*="#end"] {
		margin: 0;
		width: 30%;

		@media only screen and (max-width: 720px) {
			float: none;
			margin-inline-start: 0;
			margin-inline-end: 0;
			margin-block-start: 1rem;
			margin-block-end: 1rem;
			width: 100%;
		}
	}

	&.start,
	&[src*="#start"] {
		float: inline-start;
		transform-origin: left;
		margin-inline-end: 1rem;

		:root[dir*="rtl"] & {
			transform-origin: right;
		}
	}

	&.end,
	&[src*="#end"] {
		float: inline-end;
		transform-origin: right;
		margin-inline-start: 1rem;

		:root[dir*="rtl"] & {
			transform-origin: left;
		}
	}

	&.pixels,
	&[src*="#pixels"] {
		image-rendering: pixelated;
	}

	&.transparent,
	&.full-bleed,
	&[src*="#transparent"],
	&[src*="#full-bleed"] {
		box-shadow: none;
		border-radius: 0;
		background-color: transparent;
	}

	&.spoiler,
	&[src*="#spoiler"] {
		opacity: var(--dim-opacity);
		clip-path: inset(0 0 0 0 round var(--rounded-corner));
		filter: blur(1rem);

		&:hover,
		&:active {
			opacity: 1;
			clip-path: inset(
				-0.75rem -0.75rem -0.75rem -0.75rem round
					var(--rounded-corner-small)
			);
			filter: none;
		}

		&.solid,
		&[src*="#solid"] {
			clip-path: none;
			filter: brightness(0) contrast(0.5);
			box-shadow: none;

			&:hover,
			&:active {
				filter: none;
			}
		}
	}
}

img {
	transition: var(--transition-longer);

	&:not(
			.no-hover,
			.full-bleed,
			[src*="#no-hover"],
			[src*="#full-bleed"],
			.emoji
		) {
		cursor: zoom-in;

		&:hover {
			position: relative;
			transform: var(--hover);
			z-index: 1;
			box-shadow: var(--edge-highlight), var(--shadow-raised);
			border-radius: var(--rounded-corner-small);
		}

		&.start,
		&.end,
		&[src*="#start"],
		&[src*="#end"] {
			&:hover {
				transform: scale(2);
			}

			@media only screen and (max-width: 720px) {
				transform-origin: center;

				&:hover {
					transform: var(--hover);
				}
			}
		}

		&.transparent,
		&[src*="#transparent"] {
			&:hover {
				box-shadow: none;
			}
		}
	}
}

a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
	cursor: pointer;
}

video:fullscreen {
	box-shadow: none;
	border-radius: 0;
}

video:-webkit-full-screen {
	box-shadow: none;
	border-radius: 0;
}