@import '../../styles/variables';
@import '../../styles/mixins';
@import './components';

.overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	width: 100%;
	height: 100%;
	z-index: 9001;
	transition: opacity .3s;
	opacity: 1;

	.inner {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
	}

	&.transparent .inner {
		background-color: transparent;
	}

	&.overlay-enter,
	&.overlay-leave-active {
		opacity: 0;
	}
}