body:has(.media-viewer.shown) {
	overflow: hidden;
}

.media-viewer {
	position: fixed;

	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;

	background: rgba(0,0,0,.5);
	backdrop-filter: blur(16px);

	z-index: 9999;
}

.media-viewer-header {
	position: absolute;
	height: 72px;
	width: 100%;
	padding: var(--size-m);

	display: flex;
	align-items: center;
}

.media-viewer-header > .media-viewer-btns {
	margin-left: auto;
}

.media-viewer-body {
	height: 100%;
	width: 100%;

	display: flex;
	flex-direction: row;
}

.media-viewer-actions {
	padding: var(--size-xl);
	flex-shrink: 0;

	display: flex;
	align-items: center;
	justify-content: center;
}

.media-viewer-content {
	padding: var(--size-xl);

	height: 100%;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.media-viewer-content > img {
	height: 100%;
	border-radius: var(--radius-s);
	box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.4);
	user-select: none;
}

@media (max-width: 480px) {
	.media-viewer-content {
		padding: var(--size-m);
	}

	.media-viewer-actions {
		padding: 0;
		position: absolute;
		top: 0;
        bottom: 0;
		z-index: 100;
	}

	.media-viewer-actions[data-mouvement="left"] {
		left: var(--size-l);
	}

	.media-viewer-actions[data-mouvement="right"] {
		right: var(--size-l);
	}

	.media-viewer-actions > .btn {
		background: var(--clr-surface-a0);
	}

	.media-viewer-content > img {
		height: auto;
	}
}