src/static/scripts/components/mediaViewer/_mediaViewer.scss
@use "../../../style/vars";
@use "../../../style/shadow";

.mediaViewer {
	position: relative;
	overflow: hidden;
	user-select: none;

	width: 100%;
	--max-media-height: #{vars.$image-height-limited};
	max-height: var(--max-media-height);

	> .controls {
		.dropDown {
			.dropDownButton {
				background: none;
				border: none;
				padding: 0;

				> img {
					height: 100%;
				}
			}
		}

		.caption {
			position: relative;
			margin-right: .25rem;
			@media (min-width: 850px) {
				max-width: 45%;
			}
			@media (min-width: 625px) and (max-width: 850px) {
				max-width: 33%;
			}
			@media (max-width: 624px) {
				max-width: 3rem;
			}

			.scrollablePopup {
				position: absolute;
				max-height: 15rem;
				padding: 1rem;
				transform: translateY(-100%);
				overflow-y: auto;
				border-top-left-radius: 1rem;
				border-top-right-radius: 1rem;
				line-height: normal;
				white-space: break-spaces;
				background-color: vars.$background-el1;
				border: 1px solid vars.$border-color;
				border-bottom: none;
				user-select: text;
				opacity: 0;
				visibility: hidden;
				transition: all .2s ease 0.4s;
			}

			.inlinePreview {
				max-height: vars.$controls-height;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;
			}

			&:hover {
				.scrollablePopup {
					opacity: 1;
					visibility: visible;
				}
			}
		}

		.resetView {
			display: none;
		}

		.dropDown .dropDownArea {
			overflow: visible;
		}

		.filterWrapper {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			button, img {
				height: 2rem;
			}

			> span {
				margin-right: .25rem;
				font-size: .75rem;
			}

			> input {
				width: 3rem;
				border-bottom: 1px solid vars.$border-color;
				font-size: .75rem;
				text-align: right;
				transition: border-color .15s ease;

				&:focus {
					border-color: vars.$primary;
				}
			}
		}

		.rotateFilter {
			img {
				transition: transform .2s ease;
			}

			.cw img {
				transform: rotate(120deg) scaleX(-1);

				&:hover {
					transform: rotate(140deg) scaleX(-1);
				}
			}

			.ccw img {
				transform: rotate(240deg);

				&:hover {
					transform: rotate(220deg);
				}
			}
		}
	}

	.imageViewer img, .videoPlayer video {
		max-height: var(--max-media-height);
		line-height: 3rem;
	}

	&.isInFullscreen {
		--max-media-height: 100vh;

		> .controls {
			.resetView {
				display: initial;
			}
		}
	}
}

.inlineMediaViewer {
	&::after {
		content: "";
		width: 1rem;
		height: 1rem;
		display: inline-block;
		background: url("/img/arrowFilled.svg");
		background-size: contain;
		transform: rotate(90deg);
	}

	+ .mediaViewer {
		display: none;
		width: auto;
		height: max-content;
		min-width: 0;
		font-size: 1rem;
		transition: min-width .25s ease .75s;

		&:hover {
			min-width: 25rem;
		}
	}

	&.isExpanded {
		vertical-align: top;

		&::after {
			transform: rotate(-90deg);
		}

		+ .mediaViewer {
			display: inline-block;
		}
	}
}
