@use "../../../010-settings/"as *;
@use "../../../030-tools/_tool_browser-prefixes" as *;
@use "../../../030-tools/tool_clearfix" as *;
@use "../../../030-tools/tool_dialog-patterns" as *;
@use "../../../050-layout/layout_breakpoints" as *;
@use "../../../050-layout/basics" as *;

// section based on bootstrap 3 - see /templates/default/Guidelines_SCSS-Coding.md
//== Modal

$zindex-modal-background:  1040 !default;
$zindex-modal:             1050 !default;

//** Background color of modal content area
$modal-content-bg:                             #fff !default;
//** Modal content border color
$modal-content-border-color:                   rgba(0, 0, 0, .2) !default;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color:          #999 !default;
//** Modal header border color
$modal-header-border-color:   #e5e5e5 !default;
//** Modal footer border color
$modal-footer-border-color:   $modal-header-border-color !default;

$legacy-modal-md:                    $il-column-standard-width * 2 + $il-padding-xlarge-horizontal * 2 + 2 !default;
$legacy-modal-sm:                    $il-column-standard-width + $il-padding-xlarge-horizontal * 2 + 2 !default;

$modal-title-padding: $il-padding-xlarge-vertical $il-padding-xlarge-horizontal;
$modal-title-line-height: $il-line-height-base;

$modal-inner-padding: $il-padding-xlarge-vertical $il-padding-xlarge-horizontal;

$il-modal-transition-speed: 0.15s;
$il-modal-light-color: $il-main-bg;
$il-modal-dark-color: $il-neutral-color;
$il-modal-dark-carousel-color: $il-main-bg !default;

//
// Modals
// --------------------------------------------------

.c-modal,
.il-prompt dialog {
	border: none;
	background: none;
	@include box-shadow($il-shadow--large);

	&.il-modal-lightbox-dark {
		.modal-content {
			background-color: $il-modal-dark-color;
			color: $il-modal-light-color;
			.modal-header {
				border-bottom-color: $il-modal-light-color;
			}
			.modal-title {
				padding: 0px;
			}
			.carousel-inner {
				padding: 0px;
			}
			.carousel-control {
				color: $il-modal-dark-carousel-color;
				width: 15%;
			}
		}
		.close {
			color: $il-modal-light-color;
			background-color: $il-modal-dark-color;
			opacity: 1;
		}
	}
}

// .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 shit

// Kill the scroll on the body
.modal-open {
	overflow: hidden;
  }

  // Container that the modal scrolls within
  .modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: $zindex-modal;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;


	// Prevent Chrome on Windows from adding a focus outline. For details, see
	// https://github.com/twbs/bootstrap/pull/10951.
	outline: 0;

	// When fading in the modal, animate it to slide down
	&.fade {
		transition-property: opacity;
		transition-duration: $il-modal-transition-speed;
		transition-timing-function: linear;
		transition-delay: 0s;
	}
	&.fade .modal-dialog {
	  @include translate(0, -25%);
	  @include transition-transform(unquote("#{$il-modal-transition-speed} ease-out"));
	}
	&.in .modal-dialog {
		@include translate(0, 0);
	}
	&.il-modal-lightbox-dark {
		.modal-content {
			background-color: $il-modal-dark-color;
			color: $il-modal-light-color;
			.modal-header {
				border-bottom-color: $il-modal-light-color;
			}
			.modal-title {
				padding: 0px;
			}
			.carousel-inner {
				padding: 0px;
			}
			.carousel-control {
				color: $il-modal-dark-carousel-color;
				width: 15%;
			}
		}
		.close {
			color: $il-modal-light-color;
			background-color: $il-modal-dark-color;
			opacity: 1;
		}
	}
  }
  .modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
  }

  // Shell div to position the modal with bottom padding
  .modal .modal-dialog {
	position: relative;
	width: auto;
	margin: 10px;
  }

  // Actual modal
  .modal-content, .il-prompt dialog {
	position: relative;
	background-color: $modal-content-bg;
	background-clip: padding-box;
	border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
	border: 1px solid $modal-content-border-color;
	border-radius: $il-border-radius-large;
	// @include box-shadow(0 3px 9px rgba(0, 0, 0, .5));
	// Remove focus outline from opened modal
	outline: 0;
  }

  .il-prompt dialog hr {
	  margin: 0;
  }

  // Modal background
  .modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: $zindex-modal-background;
	background-color: $modal-backdrop-bg;
	// Fade for backdrop
	&.fade { @include opacity(0); }
	&.fade.in { @include opacity($modal-backdrop-opacity); }
  }

  .modal-header,
  .il-prompt__header,
  .modal-body,
  .il-prompt__contents,
  .modal-footer,
  .il-prompt__buttons {
	  padding: $modal-title-padding;
	  @include clearfix;
  }

  // Modal header
  // Top section of the modal w/ title and dismiss
  .modal-header {
	border-bottom: 1px solid $modal-header-border-color;
  }
  // Close icon
  .modal-header .close {
	margin-top: -2px;
  }

  // Title text within header
  .modal-title {
	font-size: $il-font-size-large;
	margin: 0;
	line-height: $modal-title-line-height;
	padding: 0px;
  }

  // Modal body
  // Where all modal content resides (sibling of .modal-header and .modal-footer)
  .modal-body {
	position: relative;

	  .il-standard-form {
		  .il-standard-form-header + .il-section-input {
			  margin-top: 0;
		  }
	  }
  }

  // Footer (for actions)
  .modal-footer {
	text-align: right; // right align buttons
	border-top: 1px solid $modal-footer-border-color;
	@include clearfix; // clear it in case folks use .pull-* classes on buttons

	// Properly space out buttons
	.btn + .btn {
	  margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
	  margin-left: 5px;
	}
	// but override that for button groups
	.btn-group .btn + .btn {
	  margin-left: -1px;
	}
	// and override it for block buttons as well
	.btn-block + .btn-block {
	  margin-left: 0;
	}
  }

  // Measure scrollbar width for padding body during modal show/hide
  .modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
  }




	// legacy modal sizing: Scale up the modal
	@media (min-width: $il-grid-float-breakpoint-max) {
		// Automatically set modal's width for larger viewports
		.modal .modal-dialog {
			width: $legacy-modal-md;
			margin: 30px auto;
		}
		.modal .modal-content {
			@include box-shadow(0 5px 15px rgba(0, 0, 0, .5));
		}

		// Modal sizes
		.modal .modal-sm { width: $legacy-modal-sm; }
	}

	@media (min-width: $screen-md-min) {
		.modal .modal-lg { width: $legacy-modal-md; }
	}

	// end of section based on bootstrap 3

// modal sizes responsive and variants
.c-modal, .il-prompt {
	@include on-screen-size(small) {
		margin: 0;
		padding: 0;
		max-width: 100vw;
		max-width: 100svw;
	}
	.modal-dialog,
	dialog {
		width: 70vw;
		width: 70svw;
		&.modal-sm {
			width: 40vw;
			width: 40svw;
		}
		&.modal-lg {
			width: 80vw;
			width: 80svw;
		}
		&, &.modal-sm, &.modal-lg {
			@include on-screen-size(small) {
				width: 100vw;
				width: 100svw;
				max-height: 100vh;
				max-height: 100svh;
			}
		}
	}
}

	.il-modal-roundtrip {
		//Override the grid system for forms in modals, see #33172
		.il-standard-form {
			.row {
				.col-sm-4, .col-md-3, .col-lg-2 {
					width: 33.33%;
				}
				.col-sm-8, .col-md-9, .col-lg-10 {
					width: 66.67%
				}
			}
		}
	}

	.c-modal--interruptive {
		.c-modal--interruptive__items {
			margin-bottom: $il-margin-xxxlarge-vertical;
			.c-modal--interruptive__items__key-value {
				.c-modal--interruptive__items__key-value__key {
					float: left;
					clear: left;
					font-weight: initial;
				}
				.c-modal--interruptive__items__key-value__value {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-style: italic;
					color: $il-text-light-color;
					padding-left: $il-padding-small-horizontal;
				}
			}
		}
	}