.modal-open,
&.modal-open {
	overflow: hidden;
}

@at-root {
	#{clay-insert-before('.cadmin', '.modal-open ')} {
		.modal {
			overflow-x: hidden;
			overflow-y: auto;
		}
	}
}

.modal,
&.modal {
	@include clay-css($cadmin-modal);

	$_media-breakpoint-down: map-get($cadmin-modal, media-breakpoint-down);
	$_media-breakpoint-up: map-get($cadmin-modal, media-breakpoint-up);

	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
		@include clay-generate-media-breakpoints(
			$cadmin-modal,
			'clay-map-to-css'
		);
	}
}

.modal-dialog {
	margin: $cadmin-modal-dialog-margin;
	position: relative;

	// allow clicks to pass through for custom click handling to close modal

	pointer-events: none;
	width: auto;
}

// When fading in the modal, animate it to slide down

.modal.fade,
&.modal.fade {
	.modal-dialog {
		transform: $cadmin-modal-fade-transform;

		@include transition($cadmin-modal-transition);
	}
}

.modal.show,
&.modal.show {
	display: block;

	.modal-dialog {
		transform: $cadmin-modal-show-transform;
	}
}

// When trying to close, animate focus to scale

.modal.modal-static,
&.modal.modal-static {
	transform: $cadmin-modal-scale-transform;
}

// Default Modal Max Width

@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
	.modal-dialog {
		margin: $cadmin-modal-dialog-margin-y-sm-up auto;
		max-width: $cadmin-modal-md;
	}

	.modal-dialog-scrollable {
		max-height: calc(100% - #{$cadmin-modal-dialog-margin-y-sm-up * 2});

		.modal-content {
			max-height: calc(
				100vh - #{$cadmin-modal-dialog-margin-y-sm-up * 2}
			);
		}
	}

	.modal-dialog-centered .modal-dialog,
	.modal-dialog-centered.modal-dialog {
		min-height: calc(100% - #{$cadmin-modal-dialog-margin-y-sm-up * 2});

		&::before {
			height: calc(100vh - #{$cadmin-modal-dialog-margin-y-sm-up * 2});
		}
	}

	.modal-content {
		@include box-shadow($cadmin-modal-content-box-shadow-sm-up);
	}

	.modal-sm {
		max-width: $cadmin-modal-sm;
	}
}

@include media-breakpoint-up(lg, $cadmin-grid-breakpoints) {
	.modal-lg,
	.modal-xl {
		max-width: $cadmin-modal-lg;
	}
}

@include media-breakpoint-up(xl, $cadmin-grid-breakpoints) {
	.modal-xl {
		max-width: $cadmin-modal-xl;
	}
}

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

	&::before {
		content: '';
		display: block;
		height: calc(100vh - #{$cadmin-modal-dialog-margin * 2});
	}
}

.modal-backdrop,
&.modal-backdrop {
	@include clay-map-to-css($cadmin-modal-backdrop);
}

.modal-content {
	@include clay-map-to-css($cadmin-modal-content);
}

.modal-header,
&.modal-header {
	$_modal-header: setter(map-get($cadmin-modal, modal-header), ());

	$_breakpoint-down: map-get($_modal-header, breakpoint-down);
	$_mobile: map-get($_modal-header, mobile);

	$_modal-header: map-remove($_modal-header, breakpoint-down, mobile);

	@include clay-map-to-css($_modal-header);

	@include clay-scale-component(null, $_breakpoint-down) {
		@include clay-css(map-get($_modal-header, mobile));
	}
}

.modal-body,
&.modal-body {
	$_modal-body: setter(map-get($cadmin-modal, modal-body), ());
	$_modal-body: map-deep-merge(
		$_modal-body,
		(
			'&.inline-scroller':
				map-merge(
					setter(map-get($_modal-body, '&.inline-scroller'), ()),
					setter(map-get($_modal-body, inline-scroller), ())
				),
		)
	);

	@include clay-map-to-css($_modal-body);
}

.modal-body-flush,
&.modal-body-flush {
	padding: 0;
}

.modal-footer,
&.modal-footer {
	@include clay-map-to-css(map-get($cadmin-modal, modal-footer));

	@include clay-scale-component {
		height: $cadmin-modal-footer-height-mobile;
	}
}

// Modal Item

.modal-item-group {
	@include clay-css($cadmin-modal-item-group);

	&:first-child,
	&.modal-item-group-first {
		@include clay-css($cadmin-modal-item-group-first-child);
	}

	&:last-child,
	&.modal-item-group-last {
		@include clay-css($cadmin-modal-item-group-last-child);
	}

	&:only-child,
	&.modal-item-group-only {
		@include clay-css($cadmin-modal-item-group-only-child);
	}
}

.modal-item {
	@include clay-css($cadmin-modal-item);
}

.modal-item-shrink {
	@include clay-css($cadmin-modal-item-shrink);
}

.modal-item-first,
.modal-item,
.modal-item-last {
	padding-bottom: $cadmin-modal-item-padding-y;
	padding-left: $cadmin-modal-item-padding-x;
	padding-right: $cadmin-modal-item-padding-x;
	padding-top: $cadmin-modal-item-padding-y;
}

.modal-item-last {
	margin-left: auto;
}

.modal-footer,
&.modal-footer {
	> .modal-item-last {
		margin-left: auto;
		margin-right: 0;
	}
}

// Modal Title

.modal-title {
	$_modal-title: setter(map-get($cadmin-modal, modal-title), ());

	@include clay-map-to-css($_modal-title);

	&[tabindex='-1'] {
		@include clay-css(map-get($_modal-title, '[tabindex="-1"]'));
	}

	@include clay-scale-component {
		font-size: $cadmin-modal-title-font-size-mobile;
	}
}

.modal-title-indicator {
	@include clay-map-to-css(map-get($cadmin-modal, modal-title-indicator));
}

// Modal Subtitle

.modal-subtitle {
	@include clay-css($cadmin-modal-subtitle);

	strong {
		@include clay-css($cadmin-modal-subtitle-strong);
	}
}

.modal-subtitle-divider {
	@include clay-css($cadmin-modal-subtitle-divider);
}

// Modal Close

&.modal,
.modal {
	.close {
		@include clay-close(map-get($cadmin-modal, close));
	}
}

.close + .modal-title {
	margin-left: $cadmin-modal-close-spacer-x;
}

.modal-title + .close {
	margin-right: $cadmin-modal-close-spacer-x;
}

// Modal Iframe

.modal-body-iframe,
&.modal-body-iframe {
	height: 160px;
	padding: 0;

	iframe {
		border-width: 0;
		height: 100%;
		position: absolute;
		width: 100%;
	}
}

// Modal Full Screen

&.modal-full-screen,
.modal-full-screen {
	bottom: $cadmin-modal-full-screen-spacer-y;
	left: $cadmin-modal-full-screen-spacer-x;
	margin: 0;
	max-width: none;
	position: absolute;
	right: $cadmin-modal-full-screen-spacer-x;
	top: $cadmin-modal-full-screen-spacer-y;

	@include clay-scale-component {
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
	}

	.modal-content {
		border-color: $cadmin-modal-content-border-color;

		@include border-radius($cadmin-modal-content-border-radius);

		border-width: $cadmin-modal-content-border-width;
		height: 100%;

		@include clay-scale-component {
			@include border-radius(0);

			border-width: 0;
		}
	}

	.modal-body {
		overflow: auto;
	}
}

// Modal Responsive Full Screen

.modal-full-screen-sm-down {
	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
		bottom: 0;
		left: 0;
		margin: 0;
		max-width: none;
		position: absolute;
		right: 0;
		top: 0;

		.modal-body {
			overflow: auto;
		}

		.modal-content {
			@include border-radius(0);

			border-width: 0;
			height: 100%;
		}
	}
}

// Modal Height

&.modal-height-sm,
.modal-height-sm {
	.modal-content {
		height: $cadmin-modal-height-sm;
	}
}

&.modal-height-md,
.modal-height-md {
	.modal-content {
		height: $cadmin-modal-height-md;
	}
}

&.modal-height-lg,
.modal-height-lg {
	.modal-content {
		height: $cadmin-modal-height-lg;
	}
}

&.modal-height-xl,
.modal-height-xl {
	.modal-content {
		height: $cadmin-modal-height-xl;
	}
}

&.modal-height-full,
.modal-height-full {
	.modal-dialog {
		height: 100%;
		margin: 0;

		@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
			bottom: 0;
			height: 100%;
			left: 50%;
			margin-bottom: 0;
			margin-left: calc(#{math-sign($cadmin-modal-md)} / 2);
			margin-right: 0;
			margin-top: 0;
			top: 0;
		}

		&.modal-sm {
			@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
				margin-left: calc(#{math-sign($cadmin-modal-sm)} / 2);
			}
		}

		&.modal-lg {
			@include media-breakpoint-up(lg, $cadmin-grid-breakpoints) {
				margin-left: calc(#{math-sign($cadmin-modal-lg)} / 2);
			}
		}

		&.modal-xl {
			@include media-breakpoint-up(lg, $cadmin-grid-breakpoints) {
				margin-left: calc(#{math-sign($cadmin-modal-lg)} / 2);
			}

			@include media-breakpoint-up(xl, $cadmin-grid-breakpoints) {
				margin-left: calc(#{math-sign($cadmin-modal-xl)} / 2);
			}
		}
	}

	.modal-body {
		overflow: auto;
	}

	.modal-content {
		@include clay-css($cadmin-modal-height-full-modal-content);

		@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
			@include clay-css($cadmin-modal-height-full-modal-content-sm-up);
		}
	}
}

// Modal Variants

@each $color, $value in $cadmin-modal-palette {
	@if not clay-is-map-unset($value) {
		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
			'danger', 'dark', 'light';

		$selector: if(
			index($deprecated-keys, '#{$color}') != null,
			str-insert($color, '.modal-', 1),
			$color
		);

		&#{$selector},
		#{$selector} {
			@include clay-modal-variant($value);
		}
	}
}

// Off canvas element for measuring scrollbar width during modal show/hide

.modal-scrollbar-measure {
	height: 50px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
	width: 50px;
}