.modal-content {
	overflow: hidden;
}

.modal-header {
	align-items: center;
	background-color: $modal-header-bg;
	border-color: $modal-header-border-color;
	color: $modal-header-color;
	flex-shrink: 0;
	height: $modal-header-height;
	padding-bottom: 0;
	padding-top: 0;

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

	.close {
		margin: 0;
		padding: 0;
	}
}

.modal-body {
	background-color: $modal-body-bg;
	color: $modal-body-color;

	&.inline-scroller {
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		padding: $modal-inner-padding;
	}
}

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

.modal-footer {
	background-color: $modal-footer-bg;

	@include box-shadow($modal-footer-box-shadow);

	color: $modal-footer-color;
	flex-shrink: 0;
	flex-wrap: wrap;
	height: $modal-footer-height;
	justify-content: flex-start;
	padding-bottom: $modal-footer-padding-y;
	padding-left: $modal-footer-padding-x;
	padding-right: $modal-footer-padding-x;
	padding-top: $modal-footer-padding-y;

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

// Modal Item

.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-item {
	flex-grow: 1;
}

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

// Modal Title

.modal-title {
	font-size: $modal-title-font-size;
	font-weight: $modal-title-font-weight;
	flex-grow: 1;
	text-align: $modal-title-text-align;

	@include text-truncate;

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

.modal-title-indicator {
	display: inline-block;
	font-size: $modal-title-indicator-font-size;
	margin-right: $modal-title-indicator-spacer-x;
	margin-top: -0.2em;
	vertical-align: middle;
}

// Modal Close

.modal .close {
	&:first-child {
		margin-left: -$modal-close-spacer-x;
	}

	&:last-child {
		margin-right: -$modal-close-spacer-x;
	}
}

.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: -$modal-md / 2;
			margin-right: 0;
			margin-top: 0;
			top: 0;
		}

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

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

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

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

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

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

// Modal Variants

@each $color, $value in $modal-palette {
	.modal-#{$color} {
		@include clay-modal-variant($value);
	}
}