// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and stuff

$modal-dialog-margin: $sp-3;

.modal {
	// --header-padding: #{1.6rem $sp-4};
	// --footer-padding: #{0 $sp-4 $sp-4};
	// --inner-padding: #{$sp-6};
	--header-padding: #{2rem $sp-6};
	--footer-padding: #{0 $sp-6 $sp-6};
	--inner-padding: #{$sp-6};

	position: fixed;
	top: 0;
	left: 0;
	z-index: $z-index-modal;
	display: none;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: $modal-dialog-margin;
	pointer-events: none;

	.modal.fade & {
		transition: transform .3s ease-out;
		transform: translate(0, -50px);
	}
	.modal.show & {
		transform: none;
	}

	.modal.modal-static & {
		transform: scale(1.02);
	}
}

.modal-dialog-scrollable {
	height: calc(100% - #{$modal-dialog-margin * 6});

	.modal-content {
		max-height: 100%;
		overflow: hidden;
	}

	.modal-body {
		overflow-y: auto;
		@include scrollBar();
	}
}

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - #{$modal-dialog-margin * 6});
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--text-color);
	pointer-events: auto;
	background-color: $co-base-1;
	background-clip: padding-box;
	border: 1px solid transparent;
	@if $useBorderRadius { border-radius: $border-radius-3;}
	outline: 0;

	html[data-theme="dark"] & {
		background-color: var(--co-gray-80);
	}
}

.modal-backdrop {
	position: fixed;
    top: 0;
    left: 0;
    z-index: ($z-index-modal - 1);
    width: 100vw;
    height: 100vh;
    background-color: $co-theme-0;

	&.fade { opacity: 0; }
	&.show { opacity: $backdrop-color; }
}

.modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: var(--header-padding);
	border-bottom: 1px solid var(--co-gray-70);
	background-color: var(--co-gray-80);
	@if $useBorderRadius {
		border-top-left-radius: calc(#{$border-radius-3} - 3px);
		border-top-right-radius: calc(#{$border-radius-3} - 3px);
	}
	html[data-theme="dark"] & {
		border-bottom: 1px solid var(--co-gray-80);
		background-color: var(--co-gray-90);
	}
}

.modal-title {
	margin-bottom: 0;
	line-height: 1.5;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: var(--inner-padding);

	&.has-only-form {
		padding-bottom: $sp-4;
	}
}

.modal-body-scroll {
	max-height: 55vh;
	overflow-y: auto;
	background-color: var(--co-gray-90);
	@include scrollBar();
}

.modal-buttons {
	position: absolute;
	top: 10.2rem;
	width: 4.8rem;

	&-right {
		right: -2.4rem;
	}

	&-item {
		padding: $sp-1;
		background-color: var(--co-theme-1);
		border-radius: 50%;
	}
}

.modal-footer {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	padding: var(--footer-padding);
	// border-top: 1px solid $co-gray-70;
	// background-color: $co-gray-90;
	@if $useBorderRadius {
		border-bottom-left-radius: calc(#{$border-radius-3} - 1px);
		border-bottom-right-radius: calc(#{$border-radius-3} - 1px);
	}
}

.modal.has-buttons-right {
	.modal-body {
		min-height: 22rem;
	}
}

.modal-fima {
	.modal-dialog {
		max-width: 1300px;
		margin: $sp-3;
	}
	.modal-content {
		min-width: 33.6rem;
		overflow: hidden;
	}
	.modal-header {
		padding: $sp-3 $sp-4 $sp-2;
		border: none;
		background-color: $co-theme-1;
	}
	.modal-body {
		padding: 0;
		overflow: hidden;
	}
}

.modal-open {
	.cke_dialog_background_cover {
		z-index: 100 !important;
	}
	.cke_dialog {
		z-index: 200 !important;
	}
}


@include mediaQ(sm) {
	// .modal {
	// 	--header-padding: #{2rem $sp-6};
	// 	--footer-padding: #{0 $sp-6 $sp-6};
	// 	--inner-padding: #{$sp-6};
	// }

	.modal-dialog {
		max-width: 700px;
		margin: $sp-6 auto;
	}
	.modal-fima {
		.modal-dialog {
			margin: $sp-6;
		}
	}

	.modal-sm {
		max-width: 620px;
	}

	.modal-logs {
		.modal-dialog {
			max-width: none;
			margin: $sp-6;
		}
	}
}

@include mediaQ(lg) {
	.modal-lg {
		max-width: 1140px;
	}

	.modal-fima {
		.modal-dialog {
			max-width: 1220px;
			margin: $sp-6 auto;
		}
	}

	.modal-logs {
		.modal-dialog {
			max-width: 1200px;
			margin: $sp-6 auto;
		}
	}
}

.modal-fullscreen {
	width: 100vw;
	max-width: none;
	height: 100%;
	margin: 0;

	.modal-content {
		height: 100%;
		border: 0;
		border-radius: 0;
	}

	.modal-header {
		border-radius: 0;
	}

	.modal-body {
		overflow-y: auto;
	}

	.modal-footer {
		border-radius: 0;
	}
}