@use "../common/variables" as *;
@use "../common/mixins/utilities" as *;

//
// ATUM Modals
//------------

@use "sass:math";

.swal2-container.atum-modal {
	text-align: left;
	
	.swal2-popup {
		background-color: var(--atum-table-bg);
	}
	
	h2.swal2-title small {
		color: var(--atum-text-color-var1);
	}
	
	.swal2-title {
		color: var(--main-title);
		font-size: 18px;
		text-align: left;
		padding-left: 1.1em;
		padding-right: 1.1em;
	}
	
	.swal2-html-container {
		margin-top: 0;
		margin-left: 1.1em;
		margin-right: 1.1em;
		z-index: unset;
	}
	
	.atum-modal-content {
		position: relative;
		min-height: 75px;
		
		.note {
			text-align: left;
			font-size: 12px;
			color: var(--atum-text-color-dark2);
			margin-bottom: math.div($grid-gutter-width, 2);
		}
		
		hr {
			border-top-color: $gray-400;
			border-bottom: none;
			margin-left: -1.1em;
			margin-right: -1.1em;
		}
		
		input[type=text], input[type=email], input[type=search] {
			width: 100% !important;
			height: 31px !important;
		}
		
		input[type=text], input[type=email], input[type=search], input[type=number] {
			background-color: var(--atum-table-bg);
			color: var(--atum-text-color-var3);
			border-color: var(--main-border-alt);
			
			@include placeholder {
				text-align: left;
				font-size: 12px;
				font-style: italic;
				color: var(--atum-text-color-var1);
			}
			
		}
		
		form {
			margin-left: -20px;
			margin-right: -20px;
			
			fieldset {
				
				&:first-child {
					padding-bottom: 10px;
				}
				
				&:not(:first-child) {
					padding-top: 10px;
					border-top: 1px solid $gray-400;
				}
				
				h3 {
					text-align: left;
					padding-left: 20px;
					font-size: 14px;
					color: var(--main-title) !important;
					margin-bottom: 10px;
				}
			}
			
			.input-group {
				padding: 5px 20px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				label {
					font-size: 13px;
					color: var(--atum-text-color-var1);
				}
				
				input[type=text], input[type=email], input[type=search], select, .atum-enhanced-select {
					width: 230px !important;
					max-width: 100%;
					background-color: var(--atum-table-bg);
					color: var(--atum-text-color-var3);
					border-color: var(--main-border-alt);
				}
				
				.atum-enhanced-select {
					.select2-selection--single {
						border-radius: 4px;
						text-align: left;
					}
					
					.select2-selection__placeholder {
						font-size: 12px;
						font-style: italic;
						color: var(--atum-text-color-var1);
					}
					
					.select2-selection__rendered {
						color: var(--atum-text-color-var3)!important;
						font-size: 14px;
						
						li.select2-search.select2-search--inline {
							display: flex;
							
							input.select2-search__field {
								max-width: 85%;
							}
						}
						
						li.select2-selection__choice {
							color: var(--atum-text-color-var3);
						}
					}
					
					.select2-selection__arrow {
						&:after {
							display: none;
						}
					}
					
					.select2-selection--multiple {
						background-color: var(--atum-table-bg);
						border-color: var(--main-border-alt);
						
						.select2-selection__rendered {
							padding-left: 10px;
							padding-right: 10px;
							box-sizing: content-box;
							
							.select2-selection__choice {
								height: 16px;
							}
						}
					}
				}
				
				.alert {
					text-align: left;
					display: block;
					font-size: 11px;
					margin-bottom: 0;
				}
			}
			
		}
	}
	
	.swal2-confirm {
		float: right;
	}
	
	div.swal2-actions {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid $gray-400;
		margin-top: 0;
		padding-right: 20px;
		padding-left: 20px;
		padding-top: 10px;
	}
	
	.swal2-validation-message {
		text-align: left;
		font-size: 13px;
	}
	
}
