@import '../variables';

.mdk-box {
	position: relative;
	margin-bottom: $mdk-spacer;
}

.mdk-box__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

[data-effects*="parallax-background"] .mdk-box__bg {
	visibility: hidden;
}

.mdk-box__bg-rear,
.mdk-box__bg-front {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background-size: cover;
}

.mdk-box__bg-rear {
	opacity: 0;
}

.mdk-box__content {
	position: relative;
	width: 100%;
	height: 100%;
}

.mdk-box[disabled] {
	&, 
	&::after,
	.mdk-box__bg-rear,
	.mdk-box__bg-front,
	.mdk-box__content > [data-primary] {
		transition: none !important;
	}
}