@use '../app/variables.scss' as *;
@use '../app/mixins.scss' as *;
@use "divi" as *;
@use "elementor" as *;
@use "seedprod" as *;
@use "wpbakery" as *;
@use "avada" as *;
@use "siteorigin" as *;
@use "thrive-architect" as *;

.aioseo-pagebuilder-modal {
	position: relative;
	top: calc(#{$modal-spacing} + #{$adminbar-height});
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: $modal-width;
	padding-top: $modal-header-height;
	background: #fff;
	box-shadow: 0 5px 30px rgba(44, 135, 218, 0.2);
	border-radius: 3px 3px 0 0;

	&-is-closed {
		display: none;
	}

	&-header {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: $modal-header-height;
		padding-right: 21px;
		padding-left: 26px;
		color: #fff;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		cursor: move;

		&-title {
			font-family: $font-family;
			font-size: 18px;
			font-weight: 600;
			font-style: normal;
			line-height: 16px;
			cursor: move;
			user-select: none;
			text-decoration: none;
			letter-spacing: 0;
			text-transform: none;
			color: #fff;
		}

		&-close {
			cursor: pointer;

			svg {
				width: 16px;
				height: 16px;
				fill: #fff;
			}
		}
	}

	&-body {
		position: relative;
		z-index: 1;
		overflow: hidden;
		overflow-y: auto;
		max-height: calc(100vh - #{$adminbar-height} - #{$settings-bar-height} - #{$modal-spacing} - #{$modal-header-height});

		p {
			padding-bottom: 0;
		}
	}
}