/* ==========================================================================
   Config
   ========================================================================== */
$modal-title-font-size: 21px !default;
$modal-large-width: 780px !default;
$modal-x-large-width: 900px !default;
$modal-small-width: 400px !default;
$modal-padding: $layout-spacing-base !default;
$modal-heading-font-size: $typo-size-large !default;
$modal-column-padding: $modal-padding !default;
$modal-media-close-dimensions: 30px;

/* ==========================================================================
   Styles
   ========================================================================== */

.gui-legacy-modal {
	width: 600px;

	.gui-modal-header {
		@apply border-0 border-b border-neutral-90 border-solid p-3 min-h-16;

		.gui-react-modal-header__text {
			@apply p-0;
		}
	}

	.gui-modal-footer {
		@apply border-0 border-t border-neutral-90 border-solid flex p-4;
	}

	.gui-modal-body {
		overflow: hidden;
	}

	&.gui-modal--small {
		width:400px;
	}

	&.gui-modal--large {
		width: 780px;
	}

	&.gui-modal--x-large {
		width: 900px;
	}

	&.gui-modal--full-screen {
		width: calc(100vw - 128px);
	}
}

.gui-modal__row {
	display: flex;

	@include respond-to(small) {
		display: block;
	}
}

.gui-modal__column {
	padding: $modal-column-padding;
}

.gui-modal__body-title {
	font-size: $modal-title-font-size;
	font-weight: $typo-weight-roman;
	color: rgb(75 86 95);
}

.gui-modal__illustration {
	margin: 90px 0 0;

	svg {
		transform: scale(1);
		height: 100px;
	}
}

.gui-modal__actions {
	position: absolute;
	background-color: transparent !important;
	bottom: $layout-spacing-base;
	right: 30px;
}

.gui-modal__header-intro {
	margin-bottom: 0;
	margin-top: 1rem;
}

.gui-modal-footer {
	display: flex;
	align-items: center;
	background: white;
	border-radius: 0 0 6px 6px;
}

.gui-modal__footer-text {
	margin-right: auto;
}

.gui-modal-footer.gui-modal-footer--space-between {
  justify-content: space-between;

  &::before {
    content: none;
  }

  &::after {
    content: none;
  }

}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.gui-modal--large {
	.gui-modal-dialog {
		@include respond-to(medium) {
			width: $modal-large-width;
		}
	}
}

.gui-modal--x-large {
	.gui-modal-dialog {
		display: block;

		@include respond-to(medium) {
			width: $modal-x-large-width;
		}
	}
}

.gui-modal--small {
	.gui-modal-dialog {
		@include respond-to(medium) {
			width: $modal-small-width;
		}
	}
}

.gui-modal--full-screen {
	.gui-modal-dialog {
		width: calc(100vw - #{$layout-spacing-base*2});
	}
}

.gui-modal--center {
	text-align: center;

	.gui-modal-header {
		position: static;
		justify-content: center;
	}

	.gui-modal-title {
		margin: 0 auto;
	}

	.gui-modal-footer {
		justify-content: center;
	}
}

.gui-modal.gui-modal--center .gui-close {
	position: absolute;
	right: $modal-padding*1.5;
	top: $modal-padding*1.5;
	transform: none;
}

.gui-modal--clear {
	.gui-modal-content {
		padding: $modal-padding*1.5;
	}

	.gui-modal-header {
		padding-bottom: 0;

		.gui-react-modal-header__text {
			padding:0;
			left:0;
			right:0;
		}
	}

	.gui-modal-footer {
		padding-top: 0;
	}

	.gui-modal-header,
	.gui-modal-footer {
		background: none;
		border: 0;
	}
}

.gui-modal--overflow {
		position: absolute;
		inset: 0;

	.gui-react-modal-inner {
		position: absolute;
		bottom: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}

	.gui-modal-body {
		flex-grow: 1;
		overflow: scroll;
	}

	.gui-modal-footer {
		margin-top: auto;
	}
}

.gui-modal--overflow-half {
	.gui-modal-body {
		max-height: 40vh;
		overflow: auto;
	}

	.gui-modal-footer {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: -26px;
			left: 0;
			right: 0;
			height: 25px;
			width: 100%;
			background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 50%), rgb(255 255 255 / 75%));
		}
	}
}

.gui-modal--highlight .gui-modal-body,
.gui-modal__column-wrapper--highlight {
	background: $neutral-base-lighter;
	color: rgb(76 88 96);
	border-right: 1px solid rgb(229 233 238);
}

.gui-modal--collapse {
	.gui-modal-body {
		padding: 0;
	}
}

.gui-modal--media-only.gui-Modal {
	height: 100%;
	width: 100%;
	display: flex;
	margin: 0;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	background: none;
	box-shadow: none;

	.gui-modal-body {
		@apply shadow-small;
		@include file-backgound;

		max-height: 100% !important;
	}

	.gui-react-modal-inner {
		position: relative;
		background:none;
	}

	.gui-modal-header {
		@apply rounded;

		background: none;
		position: absolute;
		right: 0;
		border: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;

		.gui-close-button {
			@apply rounded-tl-none rounded-br-none m-0 bg-white;

			&:hover path {
				fill: $neutral-dark;
			}
		}

		.gui-modal-header-inner {
			display: none;
		}
	}

	.gui-modal-footer {
		width: 100%;
		display: flex;
		justify-content: center;
		background: none;
		border: 0;
	}

	.gui-react-modal-inner,
	.gui-modal-body {
		pointer-events: auto;
	}

	img {
		display: block;
		max-width: 90vw;
		max-height: 90vh;
	}
}

.gui-modal-header.gui-modal-header-with-nav {
	@apply pb-0;

	.gui-react-modal-header-inner {
		@apply flex flex-row;
	}
}