$modal-backdrop-bg: var(--modal-backdrop-background-color) !default;
$modal-backdrop-opacity: var(--modal-backdrop-opacity) !default;

$modal-backdrop: () !default;
$modal-backdrop: map-deep-merge(
	(
		background-color: $modal-backdrop-bg,
		height: 100vh,
		left: 0rem,
		position: fixed,
		top: 0rem,
		width: 100vw,
		z-index: $zindex-modal-backdrop,

		'&.fade': (
			opacity: 0,
		),

		'&.show': (
			opacity: $modal-backdrop-opacity,
		),
	),
	$modal-backdrop
);

// Modal Dialog

$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;

$modal-fade-transform: translate(0, -50px) !default;
$modal-scale-transform: scale(1.02) !default;
$modal-show-transform: none !default;
$modal-transition: transform 0.3s ease-out !default;

// Modal Content

$modal-content-bg: var(--modal-content-bg, $white) !default;
$modal-content-color: var(--modal-content-color, inherit) !default;
$modal-content-border-color: var(
	--modal-content-border-color,
	transparent
) !default;
$modal-content-border-radius: var(
	--modal-content-border-radius,
	$border-radius-lg
) !default;
$modal-content-border-width: var(
	--modal-content-border-width,
	$border-width
) !default;

$modal-content-inner-border-radius: calc(
	#{$modal-content-border-radius} - #{$modal-content-border-width}
) !default;

$modal-content-box-shadow-xs: 0 0 3px 1px
	unquote('hsl(from #{$black} h s l / 0.3)') !default;

$modal-content-box-shadow-sm-up: var(
	--modal-content-box-shadow-sm-up,
	0 8px 16px unquote('hsl(from #{$black} h s l / 0.5)')
) !default;

$modal-content: () !default;
$modal-content: map-deep-merge(
	(
		background-clip: padding-box,
		background-color: $modal-content-bg,
		border-radius: clay-enable-rounded($modal-content-border-radius),
		border: $modal-content-border-width solid $modal-content-border-color,
		box-shadow: clay-enable-shadows($modal-content-box-shadow-xs),
		color: $modal-content-color,
		display: flex,
		flex-direction: column,
		max-height: calc(100vh - #{$modal-dialog-margin} * 2),
		outline: 0,
		overflow: hidden,
		pointer-events: auto,
		position: relative,
		width: 100%,
	),
	$modal-content
);

// Modal Header

$modal-header-bg: var(--modal-header-bg, transparent) !default;
$modal-header-border-color: var(
	--modal-header-border-color,
	$gray-300
) !default;
$modal-header-border-width: var(
	--modal-header-border-width,
	$modal-content-border-width
) !default;
$modal-header-color: var(--modal-header-color, inherit) !default;
$modal-header-height: var(--modal-header-height, 64px) !default;
$modal-header-padding-x: var(--modal-header-padding-x, 24px) !default;
$modal-header-padding-y: var(--modal-header-padding-y, 24px) !default;

$modal-header-padding: var(--modal-header-padding, 24px) !default;

$modal-header-height-mobile: null !default;

$modal-header: () !default;
$modal-header: map-deep-merge(
	(
		breakpoint-down: sm,

		align-items: center,
		background-color: $modal-header-bg,
		border-color: $modal-header-border-color,
		border-style: solid,
		border-top-radius:
			clay-enable-rounded($modal-content-inner-border-radius),
		border-width: 0px 0px $modal-header-border-width 0px,
		color: $modal-header-color,
		display: flex,
		flex-shrink: 0,
		height: $modal-header-height,
		justify-content: space-between,
		padding: $modal-header-padding,
		padding-bottom: 0rem,
		padding-top: 0rem,
		z-index: 1,

		'.modal-title': (
			margin-bottom: 0rem,
			margin-top: 0rem,
		),

		mobile: (
			height: $modal-header-height-mobile,
		),
	),
	$modal-header
);

// Modal Body

$modal-inner-padding: var(--modal-inner-padding, 24px) !default;

$modal-body-bg: var(--modal-body-bg, transparent) !default;
$modal-body-color: var(--modal-body-color, inherit) !default;

$modal-body: () !default;
$modal-body: map-deep-merge(
	(
		background-color: $modal-body-bg,
		border-top:
			var(
				--modal-body-border-top,
				$modal-content-border-width solid $border-color
			),
		color: $modal-body-color,
		flex-grow: 1,
		flex-shrink: 1,
		margin-top:
			var(
				--modal-body-margin-top,
				calc(#{$modal-content-border-width} * -1)
			),
		overflow: auto,
		overflow-wrap: break-word,
		padding: $modal-inner-padding,
		position: relative,

		'.aspect-ratio': (
			margin-left: calc(#{$modal-inner-padding} * -1),
			margin-right: calc(#{$modal-inner-padding} * -1),
			top: calc(#{$modal-inner-padding} * -1),
		),

		'&.inline-scroller': (
			max-height: none,
			-webkit-overflow-scrolling: touch,
			overflow: auto,
			padding: $modal-inner-padding,
		),

		'.modal-banner-img': (
			margin-left: calc(#{$modal-inner-padding} * -1),
			margin-right: calc(#{$modal-inner-padding} * -1),
			top: calc(#{$modal-inner-padding} * -1),
		),

		'> .close': (
			position: absolute,
			right: 1rem,
			top: 1rem,
			z-index: 1,
		),
	),
	$modal-body
);

// Modal Footer

$modal-footer-margin-between: var(
	--modal-footer-margin-between,
	0.5rem
) !default;

$modal-footer-bg: var(--modal-footer-bg, transparent) !default;
$modal-footer-border-color: var(
	--modal-footer-border-color,
	$modal-header-border-color
) !default;
$modal-footer-border-width: var(
	--modal-footer-border-width,
	$modal-header-border-width
) !default;
$modal-footer-box-shadow: var(--modal-footer-box-shadow, none) !default;
$modal-footer-color: var(--modal-footer-color, inherit) !default;
$modal-footer-height: var(--modal-footer-height, auto) !default;
$modal-footer-padding-x: var(--modal-footer-padding-x, 1.5rem) !default;
$modal-footer-padding-y: var(--modal-footer-padding-y, 1rem) !default;

$modal-footer-height-mobile: null !default;

$modal-item-padding-x: var(--modal-item-padding-x, 0rem) !default;
$modal-item-padding-y: var(--modal-item-padding-y, 0rem) !default;

$modal-item-group: () !default;
$modal-item-group: map-deep-merge(
	(
		align-items: center,
		display: flex,
		flex-wrap: wrap,
		min-width: 3rem,
		padding-left: 0.5rem,
		padding-right: 0.5rem,
		width: 100%,
	),
	$modal-item-group
);

$modal-item-group-first-child: () !default;
$modal-item-group-first-child: map-deep-merge(
	(
		padding-left: 0rem,
	),
	$modal-item-group-first-child
);

$modal-item-group-last-child: () !default;
$modal-item-group-last-child: map-deep-merge(
	(
		padding-right: 0rem,
	),
	$modal-item-group-last-child
);

$modal-item-group-only-child: () !default;
$modal-item-group-only-child: map-deep-merge(
	(
		padding-left: 0rem,
		padding-right: 0rem,
	),
	$modal-item-group-only-child
);

$modal-item: () !default;
$modal-item: map-deep-merge(
	(
		display: flex,
		flex-direction: column,
		flex-grow: 1,
		flex-shrink: 1,
		max-width: 100%,
		min-height: 0rem,
		min-width: 3.125rem,
		padding: 0rem,
		position: relative,
		word-wrap: break-word,
	),
	$modal-item
);

$modal-item-shrink: () !default;
$modal-item-shrink: map-deep-merge(
	(
		flex-grow: 0,
	),
	$modal-item-shrink
);

// Modal Title

$modal-title-font-size: var(--modal-title-font-size, 20px) !default;
$modal-title-font-weight: var(
	--modal-title-font-weight,
	$font-weight-bold
) !default;
$modal-title-line-height: var(
	--modal-title-line-height,
	$headings-line-height
) !default;
$modal-title-text-align: var(--modal-title-text-align, left) !default;

$modal-title-font-size-mobile: null !default;

$modal-title-indicator-font-size: var(
	--modal-title-indicator-font-size,
	14px
) !default;
$modal-title-indicator-spacer-x: var(
	--modal-title-indicator-spacer-x,
	8px
) !default;

// Modal Subtitle

$modal-subtitle: () !default;
$modal-subtitle: map-deep-merge(
	(
		display: inline-block,
	),
	$modal-subtitle
);

$modal-subtitle-divider: () !default;
$modal-subtitle-divider: map-deep-merge(
	(
		display: inline-block,
		margin-left: 0.25rem,
		margin-right: 0.25rem,
	),
	$modal-subtitle-divider
);

$modal-subtitle-strong: () !default;

// Modal Close

$modal-close-spacer-x: 0.3125rem !default;

// Modal Full Screen

$modal-full-screen-spacer-x: 45px !default;
$modal-full-screen-spacer-y: $modal-full-screen-spacer-x !default;

// Modal Width

$modal-sm: var(--modal-sm, 320px) !default;

$modal-md: var(--modal-md, 600px) !default;

$modal-lg: var(--modal-lg, 896px) !default;

$modal-xl: var(--modal-xl, 1140px) !default;

// Modal Height

$modal-height-sm: var(--modal-height-sm, 250px) !default;

$modal-height-md: var(--modal-height-md, 450px) !default;

$modal-height-lg: var(--modal-height-lg, 650px) !default;

$modal-height-xl: var(--modal-height-xl, 800px) !default;

$modal-height-full-modal-content: () !default;
$modal-height-full-modal-content: map-merge(
	(
		bottom: $modal-dialog-margin-y-sm-up,
		left: auto,
		position: absolute,
		right: auto,
		top: $modal-dialog-margin-y-sm-up,
	),
	$modal-height-full-modal-content
);

$modal-height-full-modal-content-sm-up: () !default;
$modal-height-full-modal-content-sm-up: map-merge(
	(
		bottom: $modal-dialog-margin-y-sm-up,
		left: auto,
		right: auto,
		top: $modal-dialog-margin-y-sm-up,
	),
	$modal-height-full-modal-content-sm-up
);

// Modal

$modal: () !default;
$modal: map-deep-merge(
	(
		display: none,
		height: 100%,
		left: 0rem,
		outline: 0,
		overflow: hidden,
		position: fixed,
		top: 0rem,
		width: 100%,
		z-index: $zindex-modal,

		close: (
			'&:first-child': (
				margin-left: calc(#{$modal-close-spacer-x} * -1),
			),

			'&:last-child': (
				margin-right: calc(#{$modal-close-spacer-x} * -1),
			),
		),

		modal-header: $modal-header,

		modal-body: $modal-body,

		modal-footer: (
			align-items: center,
			background-color: $modal-footer-bg,
			border-bottom-left-radius:
				clay-enable-rounded($modal-content-inner-border-radius),
			border-bottom-right-radius:
				clay-enable-rounded($modal-content-inner-border-radius),
			border-top: $modal-footer-border-width solid
				$modal-footer-border-color,
			box-shadow: clay-enable-shadows($modal-footer-box-shadow),
			color: $modal-footer-color,
			display: flex,
			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,

			'> *': (
				margin: 0rem calc(#{$modal-footer-margin-between} * 0.5),
			),
		),

		modal-title: (
			flex-grow: 1,
			font-family: var(--modal-title-font-family, inherit),
			font-size: $modal-title-font-size,
			font-weight: $modal-title-font-weight,
			line-height: $modal-title-line-height,
			margin: var(--modal-title-margin, 16px 0 24px 0),
			overflow: hidden,
			text-align: $modal-title-text-align,
			text-overflow: ellipsis,
			white-space: nowrap,

			'[tabindex="-1"]': (
				outline: 0,
			),
		),

		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,
		),

		media-breakpoint-down: (
			sm: (
				close: (
					margin-right: -0.5rem,
				),

				modal-header: (
					height: 3rem,
					padding: 0.5rem 1rem,
				),

				modal-title: (
					font-size: 1.125rem,
				),

				modal-body: (
					padding: 0.5rem 1rem,
				),

				modal-body-iframe: (
					padding: 0rem,
				),

				modal-footer: (
					padding: 0.5rem,
				),
			),
		),
	),
	$modal
);

// Modal Success

$modal-success: () !default;
$modal-success: map-deep-merge(
	(
		modal-header: (
			background-color:
				var(--modal-success-modal-header-background-color, $success-l2),
			border-color:
				var(--modal-success-modal-header-border-color, $success-l1),
			color: var(--modal-success-modal-header-color, $success),
			close: (
				color: var(--modal-success-modal-header-close-color, $success),
				hover: (
					color:
						var(
							--modal-success-modal-header-close-hover-color,
							inherit
						),
				),

				disabled: (
					color:
						var(
							--modal-success-modal-header-close-disabled-color,
							inherit
						),
				),
			),
		),
	),
	$modal-success
);

// Modal Info

$modal-info: () !default;
$modal-info: map-deep-merge(
	(
		modal-header: (
			background-color:
				var(--modal-info-modal-header-background-color, $info-l2),
			border-color: var(--modal-info-modal-header-border-color, $info-l1),
			color: var(--modal-info-modal-header-color, $info),
			close: (
				color: var(--modal-info-modal-header-close-color, $info),
				hover: (
					color:
						var(
							--modal-info-modal-header-close-hover-color,
							inherit
						),
				),

				disabled: (
					color:
						var(
							--modal-info-modal-header-close-disabled-color,
							inherit
						),
				),
			),
		),
	),
	$modal-info
);

// Modal Warning

$modal-warning: () !default;
$modal-warning: map-deep-merge(
	(
		modal-header: (
			background-color:
				var(--modal-warning-modal-header-background-color, $warning-l2),
			border-color:
				var(--modal-warning-modal-header-border-color, $warning-l1),
			color: var(--modal-warning-modal-header-color, $warning),
			close: (
				color: var(--modal-warning-modal-header-close-color, $warning),
				hover: (
					color:
						var(
							--modal-warning-modal-header-close-hover-color,
							inherit
						),
				),

				disabled: (
					color:
						var(
							--modal-warning-modal-header-close-disabled-color,
							inherit
						),
				),
			),
		),
	),
	$modal-warning
);

// Modal Danger

$modal-danger: () !default;
$modal-danger: map-deep-merge(
	(
		modal-header: (
			background-color:
				var(--modal-danger-modal-header-background-color, $danger-l2),
			border-color:
				var(--modal-danger-modal-header-border-color, $danger-l1),
			color: var(--modal-danger-modal-header-color, $danger),
			close: (
				color: var(--modal-danger-modal-header-close-color, $danger),
				hover: (
					color:
						var(
							--modal-danger-modal-header-close-hover-color,
							inherit
						),
				),

				disabled: (
					color:
						var(
							--modal-danger-modal-header-close-disabled-color,
							inherit
						),
				),
			),
		),
	),
	$modal-danger
);

$modal-palette: () !default;
$modal-palette: map-deep-merge(
	(
		success: $modal-success,

		info: $modal-info,

		warning: $modal-warning,

		danger: $modal-danger,
	),
	$modal-palette
);