// -------------------------------------------------------------------
// :: MODALS
// -------------------------------------------------------------------

.m-modal__container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: $z-index-highest;

	&--collapse {
		display: none;
	}

	.m-modal__fade {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba($black, 0.4);

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: stretch;
	}

	.m-modal {
		flex: 0 1 auto;
		margin: rem($grid-gutter-width);
		max-width: 55em;
	}
}

.m-modal {
	background: $white;
	border-radius: 5px;
	box-shadow: $box-shadow-modal;

	.m-modal__header,
	.m-modal__body,
	.m-modal__footer {
		padding: 0 rem(34px);
		position: relative;
		z-index: 100;
	}

	.m-modal__body {
		padding: rem(34px);
	}

	.m-modal__header {
		background: $light;
		padding-top: rem(21px);
		padding-bottom: rem(21px);
		border-radius: 5px 5px 0 0;
	}

	.m-modal__footer {
		padding-bottom: rem(34px);
		text-align: right;
	}
}