Viewing File: /home/fshjisk/myqueen/wp-content/plugins/user-registration/assets/css/components/_modal.scss

.user-registration-page {
	&.user-registration-modal-open {
		overflow: hidden; // Hide scrollbar on body when modal is open.

		.user-registration-modal {
			max-width: 100%;
		}
	}
}

.user-registration-modal {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	margin: 0 auto !important;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 999;

	.user-registration-modal__backdrop {
		position: fixed;
		left: 0;
		top: 0;
		background-color: transparentize($gray_base, 0.5);
		min-width: 100%;
		min-height: 100%;
		z-index: 1;
	}

	.user-registration-modal__content {
		background: $white;
		position: relative;
		width: auto;
		margin: 16px;
		border-radius: 8px;
		z-index: 99999;
		box-shadow: 0 3px 25px 0px transparentize($gray_base, 0.6);
		@media (min-width: 576px) {
			max-width: 500px;
			margin: auto;
		}

		&.user-registration-modal__content--xl,
		&.user-registration-modal__content--lg {
			@media (min-width: 992px) {
				max-width: 800px;
			}
		}

		&.user-registration-modal__content--xl {
			@media (min-width: 1200px) {
				max-width: 1140px;
			}
		}
	}

	.user-registration-modal__header {
		display: flex;
		padding: 16px;
		border-bottom: 1px solid $border-color;

		.user-registration-modal__title {
			font-size: 20px;
			line-height: 1.4;
			margin: 0;
			padding: 0;
		}

		.user-registration-modal__close-icon {
			position: relative;
			display: block;
			width: 32px;
			height: 32px;
			flex: 0 0 32px;
			cursor: pointer;
			margin-left: auto;

			&::before,
			&::after {
				content: "";
				height: 2px;
				width: 16px;
				display: block;
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				margin: 0 auto;
				background: $color_gray_three;
			}

			&::before {
				transform: rotate(45deg);
			}

			&::after {
				transform: rotate(135deg);
			}
		}
	}

	.user-registration-modal__body {
		position: relative;
		padding: 16px;
		max-height: 75vh;
		overflow-y: scroll;

		// Customize UR form for modal
		#user-registration,
		.user-registration,
		.login {
			margin: 0;
			padding: 0;
			border: none;
		}
	}

	.user-registration-modal__footer {
		padding: 16px;
		border-top: 1px solid $border-color;

		& * {
			margin: 4px;
		}
	}
}

// Customize Sweet alert
.swal2-container {
	.user-registration-swal2-modal {
		padding: 40px;

		.swal2-input {
			@extend .ur-input !optional;
			font-size: 16px;
		}

		.swal2-animate-success-icon {
			& [class^="swal2-success-line"],
			& [class^="swal2-success-circular-line"] {
				animation: none;
			}
		}

		.swal2-header {
			.swal2-icon {
				width: 56px;
				height: 56px;
				line-height: 56px;
				margin: 0 auto 16px;
				border-width: 2px;
				border-radius: 50%;

				.swal2-x-mark {
					& [class^="swal2-x-mark-line"] {
						height: 3px;
						width: 28px;
						top: 50%;
						left: 0;
						right: 0;
						margin: 0 auto;

						&[class$="left"] {
							transform: translateY(-50%) rotate(45deg);
						}

						&[class$="right"] {
							transform: translateY(-50%) rotate(-45deg);
						}
					}
				}

				&.swal2-success {
					& [class^="swal2-success-line"] {
						height: 3px;

						&[class$="tip"] {
							width: 16px;
							top: 56%;
							left: 10px;
						}

						&[class$="long"] {
							top: 47%;
							width: 32px;
							right: 6px;
						}
					}

					& [class^="swal2-success-circular-line"] {
						height: 64px;
						width: 32px;

						&[class$="left"] {
							top: -75px;
							left: 27px;
						}

						&[class$="right"] {
							top: -26px;
							left: 82px;
						}
					}

					.swal2-success-ring {
						top: -3px;
						left: -2px;
						border-width: 2px;
					}

					.swal2-success-fix {
						height: 64px;
						left: 2px;
						right: 0px;
						margin: 0 auto;
						top: -2px;
						bottom: 0;
						width: 6px;
					}
				}

				&::before {
					font-size: 40px;
				}
			}

			.swal2-title {
				color: $gray_base;
				font-size: 24px;
				flex-wrap: wrap;
				margin-bottom: 16px;

				.dashicons {
					color: $red;
					font-size: 28px;
					width: 56px;
					height: 56px;
					line-height: 56px;
					margin: 0 auto 16px;
					border: 2px solid $red;
					border-radius: 50%;
				}
			}
		}

		&__title {
			line-height: 1.35;
			display: block;
		}

		.swal2-content {
			color: $color_gray_one;
			font-size: 1em;
			line-height: 1.5;
		}

		.swal2-actions {
			button {
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		// Centered Style
		&--centered {
			.swal2-title {
				flex-direction: column;
			}
		}
	}
}

//Modal z-index fix
.user-registration-modal-open{
	.wp-block-cover {
		z-index: 99;
	}
}