
@import "../../styles/variables";

.uagb-lottie_upload_wrap {
	background: #eee;

	// Initial selection screen/media-placeholder.
	.components-placeholder.block-editor-media-placeholder {
		box-shadow: none;
		border: 1px dashed #555d66;

		.components-placeholder__label {
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 8px;
			font-size: 24px;
			font-weight: 400;

			.block-editor-block-icon {
				margin-right: 12px;

				svg.uagb-editor-icons {

					path {
						stroke: #0063a1;
					}
				}
			}
		}

		.components-placeholder__fieldset {
			justify-content: center;

			.components-placeholder__instructions {
				width: 100%;
				text-align: center;
				margin-bottom: 32px;
			}
		}

		// The 'Media Library' and 'Insert from URL' buttons in the MediaPlaceholder are tertiary,
		// but we require the styling of secondary buttons.
		.components-button.is-tertiary {
			box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
			padding: 6px 12px;

			&:hover {
				box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
				color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
			}
		}
	}

	.components-resizable-box__container {
		max-width: 100% !important;
		height: auto !important;

		img {
			max-width: 100% !important;
		}
	}

	.components-placeholder.is-medium {
		.components-placeholder__instructions {
			display: block !important;
		}

		.components-placeholder__fieldset {
			flex-direction: row;

			.components-button {
				margin-right: 10px;
			}
		}
	}

	.block-editor-media-placeholder__url-input-container {
		.components-button.is-pressed:hover:not(:disabled),
		.components-button.is-pressed {
			background-color: $spectra-color-plain-background;

		}
	}

	.components-placeholder.block-editor-media-placeholder .components-placeholder__instructions {
		align-self: center;
	}
}

.uagb-lottie_upload_wrap-controller .components-placeholder {
	box-shadow: none;
}

.uagb-show-notice {
	padding: 20px;
	background: #eee;
}

.uagb-lottie__center {
	margin: 0 auto;
}

.uagb-lottie__right {
	margin-left: auto;
}

.uagb-lottie__left {
	margin-right: auto;
}
// CSS to resolve Edit URL Button overflows outside the container, When the Replace BlockControl is opened.
.block-editor .block-editor__container {
	.block-editor-media-flow__url-input .block-editor-link-control {
		width: auto;
	}
}

// In the zip, the pointer events were set to 'none' and so the lottie website link is not accessible.
// Hence to fix the issue which is specific to the final build/zip, we use '!important'.
.uagb-lottie-instructions__lottie-url {
	pointer-events: auto !important;
}
