.modal-open {
	overflow: hidden;

	.modal {
		overflow-x: hidden;
		overflow-y: auto;
	}
}

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

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

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

.modal-dialog {
	margin: $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 & {
		transform: $modal-fade-transform;

		@include transition($modal-transition);
	}

	.modal.show & {
		transform: $modal-show-transform;
	}

	// When trying to close, animate focus to scale

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

// Default Modal Max Width

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

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

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

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

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

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

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

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

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

.modal-dialog-scrollable {
	display: flex;
	max-height: calc(100% - #{$modal-dialog-margin * 2});

	.modal-content {
		// IE10/11

		max-height: calc(100vh - #{$modal-dialog-margin * 2});
		overflow: hidden;
	}

	.modal-header,
	.modal-footer {
		flex-shrink: 0;
	}

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

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

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

	&.modal-dialog-scrollable {
		flex-direction: column;
		height: 100%;
		justify-content: center;

		.modal-content {
			max-height: none;
		}

		&::before {
			content: none;
		}
	}
}

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

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

.modal-header {
	$_modal-header: setter(map-get($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: setter(map-get($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 {
	padding: 0;
}

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

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

// Modal Item

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

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

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

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

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

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

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

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

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

// Modal Title

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

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

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

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

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

// Modal Subtitle

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

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

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

// Modal Close

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

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

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

// Modal Iframe

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

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

// Modal Full Screen

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

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

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

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

		border-width: $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) {
		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-content {
		height: $modal-height-sm;
	}
}

.modal-height-md {
	.modal-content {
		height: $modal-height-md;
	}
}

.modal-height-lg {
	.modal-content {
		height: $modal-height-lg;
	}
}

.modal-height-xl {
	.modal-content {
		height: $modal-height-xl;
	}
}

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

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

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

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

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

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

	.modal-body {
		overflow: auto;
	}

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

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

// Modal Variants

@each $color, $value in $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} {
			@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;
}