/*===========================================================
= `react-modal`                                             =
===========================================================*/

/*
when changing css transition times here
also change `default_close_timeout` in ./Modal.js accordingly
*/

/* Could have used `opacity` transition on `.ReactModal__Overlay`
   but it introduced a bug in Chrome: the fixed Overlay shriked vertically
   while having its opacity animated at the same time as the Content being scaled */
.ReactModal__Overlay
{
	background-color: transparent;
	/* "auto" introduces a vertical scrollbar when "bouncing" (animation) */
	/* overflow: auto; */
	overflow: hidden;
}

.ReactModal__Overlay--after-open
{
	background-color: rgba(0, 0, 0, 0.25);
}

/* This rule is required for closing animation */
.ReactModal__Overlay--before-close
{
	background-color: transparent;
}

.ReactModal__Overlay--after-open
{
	transition: background-color 300ms ease-out;
}

.ReactModal__Overlay--before-close
{
	transition: background-color 100ms ease-out;
}

.rrui__modal__contents
{
	opacity    : 0;
	/*
	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.95);
	transition : transform 100ms ease-out, opacity 100ms ease-out;
}

.ReactModal__Content--after-open .rrui__modal__contents
{
	opacity   : 1;
	transform : none;
}

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

/*
The extra opacity animation on `<Modal/>` contents
is used to prevent clutter on background while the modal fades in/out.
*/
.rrui__modal__contents-body
{
	opacity : 0;
}

.ReactModal__Content--after-open .rrui__modal__contents-body
{
	opacity    : 1;
	transition : opacity 100ms ease-out;
}

.ReactModal__Content--before-close .rrui__modal__contents-body
{
	opacity    : 0;
	transition : opacity 80ms ease-out;
}

/* Hides `react-modal` scrollbar when closing the modal */
.ReactModal__Overlay--before-close
{
	overflow: hidden;
}

/*
While this would disable page scrolling when modal is presented,
it would introduce page width jumps.
.ReactModal__Body--open
{
	height: 100%;
	overflow: hidden;
}
*/

/*==========================================================
= `<Modal/>`                                               =
===========================================================*/

/*
Make sure to add `.rrui__fixed-full-width` CSS class
to all full-width `position: fixed` elements.
Such elements must not be `width: 100%`
but rather `width: auto` or `left: 0; right: 0;`.
*/
.rrui__fixed-full-width
{
	position : fixed;
	left     : 0;
	right    : 0;
	width    : auto;
}

.rrui__modal__overlay
{
	/* Horizontal centering */
	display         : flex;
	justify-content : center;
}

.rrui__modal__overlay--fullscreen
{
	/* `display: flex` results in a weird content clipping bug in fullscreen mode
	   because of `justify-content: center` on the container */
	display : block;

	background-color : var(--rrui-modal-background-color);
}

.rrui__modal__overlay--hidden
{
	display : none;
}

.rrui__modal__overlay--busy
{
	cursor : wait;
}

.rrui__modal__container
{
	/* Centers everything vertically */
	min-height : 100%;

	/* Using `inline-flex` here so that it doesn't
	   stretch to the whole overlay width */
	display         : inline-flex;
	flex-direction  : column;
}

.rrui__modal__container--fullscreen
{
	display         : flex;
	align-items     : center;
	justify-content : center;
}

.rrui__modal__close:focus
{
	background-color: var(--rrui-modal-close-button-background-color-focus);
	border-radius: 50%;
}

.rrui__modal__close--busy
{
	cursor : wait;
}

.rrui__modal__contents
{
	/* So that modal content won't neccessarily
	   stretch horizontally to the full width of the screen */
	display : inline-block;

	/* Modal content shouldn't stretch vertically */
	flex-grow : 0;
	/* Modal content will contract vertically */
	flex-shrink : 1;
	flex-basis  : auto;

	border-radius : var(--rrui-modal-border-radius);
	background-color : var(--rrui-modal-background-color);
	color : var(--rrui-modal-text-color);
}

.rrui__modal__contents--fullscreen
{
	/* Completely cover the screen */
	border-radius : 0;
}

.rrui__modal__vertical-margin
{
	/* Perhaps "width : 100%" was needed for it to work properly */
	width : 100%;
	/* Vertical padding won't ever shrink below the minimum size */
	flex-shrink : 0;
	flex-basis  : 3%;
}

.rrui__modal__vertical-margin--top
{
	flex-grow : 2;
}

.rrui__modal__vertical-margin--bottom
{
	flex-grow : 5;
}

.rrui__modal__vertical-margin--fullscreen
{
	display: none;
}

.rrui__modal--could-not-close-because-busy
{
	animation: bounce_z 0.6s;
	transform: translate3d(0, 0, 0);
}

/* https://daneden.github.io/animate.css/ */
/* https://github.com/daneden/animate.css/blob/master/source/bouncing_entrances/bounceIn.css */
@keyframes bounce_z
{
	from, 25%, 47%, 72%, to
	{
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0%
	{
		transform: scale3d(1, 1, 1);
	}

	25%
	{
		transform: scale3d(.99, .99, .99);
	}

	47%
	{
		transform: scale3d(1.01, 1.01, 1.01);
	}

	72%
	{
		transform: scale3d(0.995, 0.995, 0.995);
	}

	to
	{
		transform: scale3d(1, 1, 1);
	}
}

.rrui__modal__content .rrui__form__error
{
	margin-bottom : 0;
}

/* Fullscreen `<Modal/>` animation tweaking */

.rrui__modal__overlay--fullscreen:not(.ReactModal__Overlay--after-open),
.rrui__modal__overlay--fullscreen.ReactModal__Overlay--before-close
{
	background-color : transparent;
}

.rrui__modal__overlay--fullscreen
{
	transition : background-color 100ms ease-out;
}

.rrui__modal__overlay--fullscreen .rrui__modal__contents
{
	background-color : transparent;
}

.rrui__modal__actions
{
	display         : flex;
	justify-content : flex-end;
}

/* Using `margin` instead of `padding` for "padding"
   to leverage the "margin collapse" CSS feature. */

.rrui__modal__title,
.rrui__modal__content,
.rrui__modal__actions {
  margin-left: var(--rrui-modal-padding--horizontal);
  margin-right: var(--rrui-modal-padding--horizontal);
}

.rrui__modal__title {
  margin-top: var(--rrui-modal-padding--vertical);
  margin-bottom: 0;
}

.rrui__modal__content {
  margin-top: var(--rrui-modal-padding--vertical);
  margin-bottom: var(--rrui-modal-padding--vertical);
}

.rrui__modal__actions {
  margin-bottom: var(--rrui-modal-padding--vertical);
}

.rrui__modal__title + .rrui__modal__content {
  margin-top: calc(var(--rrui-modal-padding--vertical) - var(--rrui-unit) * 0.5);
}

.rrui__modal__close
{
	/* Prevents `<Modal.Title/>` overlapping with `<Close/>` padding. */
	margin-left : 0;
	/* Prevents the close button from being stretched vertically. */
	line-height : 0;
}

.rrui__modal__content--close-button,
.rrui__modal__title--close-button
{
	display : flex;
	justify-content : space-between;
	align-items : flex-start;
}