/* `<Modal/>` goes full-screen wide and high. */

/* Without this line a long `<Modal/>` won't be scrollable to its beginning. */
.rrui__modal__overlay
{
	display : block;
}

/* Disable `<Modal/>` overlay fade in/out. */
.rrui__modal__overlay
{
	background-color : transparent;
}

/* Centers `<Modal/>` content (body) horizontally and vertically */
.rrui__modal__container
{
	display          : flex;
	align-items      : center;
	justify-content  : center;
	background-color : var(--rrui-white-color);
}

.ReactModal__Overlay--before-close .rrui__modal__container
{
	background-color : transparent;
}

/* `<Modal/>` goes full-screen wide and high */
.rrui__modal__vertical-margin
{
	display : none;
}

/* `<Modal/>` goes full-screen wide and high */
.rrui__modal__contents
{
	border-radius : 0;
}

/* Reduce `<Modal/>` scaling motion on smaller screens */
.rrui__modal__contents
{
	/*
	Scaling `<Modal/>` down on appear looks cool
	but it also can cause scrollbars to appear
	due to overflow which is a weird `scale()` behaviour.
	Those scrollbars alter window width resulting in
	`<Modal/>` positioning glitches (while centering itself).
	Therefore not using `scale()`s above `1`, only downscaling.
	transform: scale(1.07);
	*/
	transform : scale(0.995);
}

/* This rule is required for closing animation */
.ReactModal__Content--before-close .rrui__modal__contents
{
	transform : scale(0.995);
}

/* The styles for an open `<Modal/>` */
.ReactModal__Content--after-open .rrui__modal__contents
{
	transform : scale(1);
}

/* Shortening `<Modal/>` animation duration */
.rrui__modal__contents
{
	transition : transform 100ms ease-out;
}