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

.@{prefix}-OverlayWrapper {
	display: block;
	position: relative;

	&-message-container {
		.transition-group-animation-fade();

		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: none;
	}

	&-has-overlay {
		background-color: @color-transparent-gray-60;
		z-index: @zindex-modal;
	}

	&-kind-light {
		background-color: @color-white-85;
	}

	&-anchored-message {
		align-items: flex-start;
		padding-top: 100px;
	}

	&-fixed-message {
		.lucid-LoadingMessage {
			position: fixed;
			top: 45%;
			left: 45%;
		}
	}
}