.embedded-assets {

	&_button {

		#header & {
			position: relative;
			overflow: hidden;
			margin-right: 7px;
		}
	}

	&_form {

		&_field {
			position: relative;
			z-index: 1;
			display: flex;
			padding: 0 24px;
			box-shadow: 0 1px rgba(0, 0, 20, 0.1);

			> label,
			> input {
				padding: 22px 0;
				font-size: 14px;
				line-height: 20px;
			}

			> label {
				order: 1;
				padding-right: 14px;
				font-weight: normal;
				color: #8f98a3;
				cursor: text;
				user-select: none;
			}

			> input {
				order: 2;
				flex: 1;
				box-sizing: border-box;
				display: block;
				border-radius: 0;
				border: 0;
				background: transparent;
				color: #29323d;
				appearance: none;
				outline: 0;
			}
		}

		&_body {
			position: relative;
			overflow: hidden;
			transition: height 0.3s;

			> .embedded-assets_preview,
			> .spinner {
				opacity: 0;
				transition: opacity 0.3s;
			}

			> .embedded-assets_preview {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			> .spinner {
				pointer-events: none;
				position: absolute;
				top: 95px * (1/2);
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.embedded-assets_form[data-state='idle'] & {
				height: 0 !important;
			}

			.embedded-assets_form[data-state='requesting'] & {
				height: 95px !important;

				> .spinner {
					opacity: 1;
				}
			}

			.embedded-assets_form[data-state='requested'] &,
			.embedded-assets_form[data-state='saving'] & {
				height: 300px;

				> .embedded-assets_preview {
					opacity: 1;
				}
			}
		}
	}

	&_preview {
		position: relative;

		> iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}

		.elementeditor & {
			margin-top: -8px;
			margin-bottom: 8px;
			background-color: #f2f5f8;

			&::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 1px;
				background-color: rgba(0, 0, 20, 0.1);
			}
		}
	}

	&_hud {

		&_main {
			transition: padding-bottom 0.3s;
		}

		&_footer {
			position: absolute !important;
			left: 0;
			right: 0;
			bottom: 0;
			transform: translateY(100%);
			transition: transform 0.3s;
		}

		&.show-footer &_main {
			padding-bottom: 46px;
		}

		&.show-footer &_footer {
			opacity: 1;
			transform: none;
		}
	}

	&_label {
		display: block;
		line-height: 16px;
		white-space: nowrap;

		> img {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-right: 10px;
			vertical-align: middle;
			object-fit: contain;
		}
	}
}

//
// This is a fix for the Craft image previewer to ensure images are cropped correctly.
//
// The issue is that when getting thumbnails for embedded assets, the external URL directly to the image is supplied.
// This means that thumbnails aren't actually transformed to fit the size requested by Craft.
//
// When double-clicking an asset to edit it's fields, a large thumbnail for that asset is shown above the fields. The
// problem is the containing element for this thumbnail just assumes the image is the right size. This causes issues
// when it's not by the thumbnail exceeding the boundaries and obstructing the below fields.
//
// To fix this, since these thumbnails are contained within a fixed box size (380x190), the maximum size can just be
// forced.
//
.elementeditor .image-preview > img {
	max-width: 380px;
	max-height: 190px;
}