@lightbox_background_color: default;
@lightbox_border_radius: default;
@lightbox_max_width: default;
@title_color: default;
@title_font: default;
@title_margin_after: default;
@title_size: default;
@title_style: default;
@title_weight: default;
@content_background_color: default;
@content_border: default;
@content_padding: default;
@content_padding_left_inverted: default;
@content_padding_right_inverted: default;
@close_icon_color: default;
@close_icon_size: default;

.siteorigin-lightbox-builder {
	overflow-y: auto;

	// If the compatibility dialog is active, we need to add setup the modal.
	&:has(.siteorigin-lightbox-builder-content) {
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		top: var(--wp-admin--admin-bar--height, 0);
		width: 100%;
		z-index: 1000;

		.siteorigin-lightbox-builder-content {
			margin: 0 auto;
		}
	}

	&::backdrop,
	&:has(.siteorigin-lightbox-builder-content) {
		background-color: @lightbox_background_color;
	}

	&:not(:has(.siteorigin-lightbox-builder-content)),
	&:has(.siteorigin-lightbox-builder-content) .siteorigin-lightbox-builder-content {
		background-color: @content_background_color;
		border: @content_border;
		max-width: @lightbox_max_width;
		min-width: 300px;
		padding: @content_padding;
		position: relative;
		width: 100%;
	}

	&-title {
		color: @title_color;
		font-family: @title_font;
		font-size: @title_size;
		font-style: @title_style;
		font-weight: @title_weight;
		margin-bottom: @title_margin_after;
	}

	&-close {
		background: none;
		border: none;
		color: @close_icon_color;
		cursor: pointer;
		font-size: @close_icon_size;
		line-height: 1;
		padding: 5px;
		position: absolute;
		z-index: 1;

		&:hover {
			opacity: 0.7;
		}

		&:focus {
			opacity: 0.7;
			outline: 1px solid rgba(0, 0, 0, 0.3);
			outline-offset: 1px;
		}

		&:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		&-top-right {
			right: 10px;
			top: 10px;
		}

		&-top-left {
			left: 10px;
			top: 10px;
		}
	}

	// Prevent rows set to Full Width Stretch from being the full size of the page.
	.siteorigin-panels-stretch {
		margin-left: @content_padding_left_inverted !important;
		margin-right: @content_padding_right_inverted !important;
	}
}
