@import '../variables';

.mdk-reveal {
	z-index: 0;
	position: relative;
	overflow: hidden;
	display: block;

	&[data-opened],
	&--hover:hover {
		.mdk-reveal__partial {
			opacity: 0;
		}
	}
}
.mdk-reveal__content {
	transition: transform .2s;
	background-color: $mdk-reveal-content-bg;
	position: relative;
	z-index: 0;
}
.mdk-reveal__partial {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	content: '';
	background: $mdk-reveal-partial-mask-bg;
	opacity: 1;
	z-index: 1;
	transition: .2s opacity;
	pointer-events: none;
}