/**
 * Modal Popup
 **/

.toplevel_page_tgwc-customize-my-account {
	.ui-widget {
		&.ui-widget-content {
			border: none;
			padding: 0;
			border-radius: 8px;

			.ui-widget-header {
				background: $color__white;
				border-top: none;
				border-left: none;
				border-bottom: 1px solid $border-color;
				border-right: none;
				padding: 12px 16px;
				border-radius: 8px 8px 0 0;

				.ui-dialog-title {
					font-size: 20px;
					display: block;
					line-height: 1.25;
					font-weight: 500;
				}

				.ui-button {
					&.ui-button-icon-only {
						&.ui-dialog-titlebar-close {
							height: 24px;
							width: 24px;
							margin: 0;
							top: 0;
							right: 0;
							background: none;
							border: none;

							.ui-icon-closethick {
								background: none;

								&::before,
								&::after {
									content: "";
									display: inline-block;
									position: absolute;
									height: 2px;
									width: 16px;
									left: 0;
									right: 0;
									top: 50%;
									margin: 0 auto;
									background: #adb5bd;
									border-radius: 1px;
								}

								&::before {
									transform: translatey(-50%) rotate(45deg);
								}

								&::after {
									transform: translatey(-50%) rotate(135deg);
								}
							}

							&:hover {
								background: #f34c4c;
								.ui-icon-closethick {
									&::before,
									&::after {
										background: #fff;
									}
								}
							}
						}
					}
				}
			}

			.ui-dialog-content {
				padding: 16px;

				form {
					label {
						display: inline-block;
						margin-bottom: 4px;
					}

					input[type="text"] {
						display: block;
						width: 100%;
					}

					.tgwc-error-message {
						margin-top: 4px;
						color: $color__red;
					}
				}
			}

			.ui-dialog-buttonpane {
				margin-top: 0;
				border-radius: 0 0 8px 8px;

				.tgwc-button {
					height: unset;
					border: 0;

					&:hover {
						color: #fff;
					}

					&--link {
						color: #343a40;
						&:hover {
							background: transparent;
							color: #343a40;
						}
					}

					&--danger {
						&:hover,
						&:focus {
							background: #f01c1c;
							color: #fff;
						}
					}
				}
			}

			.tgwc-dialog-content {
				display: flex;

				.ui-icon {
					width: 48px;
					height: 48px;
					border-radius: 50%;
					text-indent: inherit;
					flex: 0 0 48px;
					margin-top: 0;
					margin-right: 15px;
					display: flex;
					align-items: center;
					justify-content: center;

					&.ui-icon-alert {
						background: transparentize($color__red, 0.85) none;
						color: $color__red;
					}
				}

				p {
					font-size: 1.25em;
					margin-top: 0;
				}
			}

			.tgwc-dialog-notice {
				.notice {
					margin: 12px 0 0 0;
				}
			}
		}
	}

	.ui-widget-overlay {
		background: $color__gray-900;
		opacity: 0.6;
	}
}