$media-preview-height: 70px;
$media-preview-width-lg: 40px;
$media-preview-width-sm: 20px;

.vac-media-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.8);
	outline: none;

	.vac-media-preview-container {
		height: calc(100% - #{$media-preview-height * 2});
		width: calc(100% - #{$media-preview-width-lg * 2});
		padding: $media-preview-height $media-preview-width-lg;
		margin: 0 auto;
	}

	.vac-image-preview {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	video {
		width: 100%;
		height: 100%;
	}

	.vac-svg-button {
		position: absolute;
		top: 30px;
		right: 30px;
		transform: scale(1.4);
	}

	@media only screen and (max-width: 768px) {
		.vac-svg-button {
			top: 20px;
			right: 20px;
			transform: scale(1.2);
		}

		.vac-media-preview-container {
			width: calc(100% - #{$media-preview-width-sm * 2});
			padding: $media-preview-height $media-preview-width-sm;
		}
	}
}
