@media (width <= 500px) {
	.vrec-dialog {
		right: 0 !important;
		left: 0 !important;

		margin: 10px;

		& > .video-container > video {
			width: 100%;
			height: 100%;

			background: #000000;
		}
	}
}

.vrec-dialog {
	position: absolute;

	visibility: hidden;

	padding: 5px;

	opacity: 0;
	border-radius: 5px;

	box-shadow:
		0 1px 1px 0 rgba(0, 0, 0, 0.2),
		0 2px 10px 0 rgba(0, 0, 0, 0.16);

	&.show {
		display: block;
		visibility: visible;

		opacity: 1;
	}

	& .buttons {
		display: flex;
		justify-content: space-between;

		& .disabled {
			background-color: desaturate(#02acec, 80%);
		}

		& .rc-button {
			min-width: 40px;
			margin: 0;
		}

		&__wrapper {
			display: flex;
		}
	}

	& .video-container {
		overflow: hidden;

		height: 240px;
		margin-bottom: 5px;

		transform: scaleX(-1);

		border-radius: 5px;
		filter: FlipH;
	}
}

.vrec-dialog button.hide {
	visibility: hidden;

	opacity: 0;
}

.vrec-dialog button.show {
	display: block;
	visibility: visible;

	opacity: 1;
}