@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-Overlay {
	.@{prefix}-Overlay-is-animated& {
		.transition-group-animation-fade();
	}

	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: @zindex-modal;
	background-color: @color-background-white-80; // TODO: white faded instead of black

	&&-is-not-modal {
		background-color: @color-transparent;
		// Setting this to `none` allows us to use flex box to center the content
		// on the screen while still allowing the user to interact with elements
		// behind it
		pointer-events: none;

		// Have to set the pointer events back to initial so the user can interact
		// with the contents
		> * {
			pointer-events: auto;
		}
	}
}