[data-type="coblocks/gif"] {

	.components-placeholder.wp-block-coblocks-gif {

		.dashicon {
			position: relative;
			top: -2px;
		}
	}

	&[data-align="center"] .wp-block-coblocks-gif:not(.components-placeholder),
	&[data-align="center"][data-resized="false"] .wp-block-coblocks-gif:not(.components-placeholder) > div {
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-coblocks-gif {

		button {
			background: none !important;
			border: none !important;
			height: auto !important;
			padding: 0 !important;
			width: 100% !important;
		}

		form,
		.components-placeholder__fieldset {
			display: block;
			max-width: none;
			width: auto;

			input {
				max-width: 300px;
			}
		}

		.components-spinner {
			margin: 16px auto 0;
		}

		&__results {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			line-height: 1;
			list-style: none;
			margin: 1em 0 0 -5px;
			padding: 0;
			width: calc(100% + 10px);

			li {
				display: block;
				flex: 0 0 auto;
				height: 100px;
				margin: 0;
				overflow: hidden;
				padding: 5px;
				position: relative;
				width: auto;

				img {
					height: 100%;
					width: 100%;
				}
			}
		}

		&__attribution {
			position: absolute;
			right: 20px;
			top: 15px;
			width: 120px;
		}
	}

	&[data-align="center"] {

		.wp-block-coblocks-gif:not(.components-placeholder) {
			margin-left: auto !important;
			margin-right: auto !important;
		}

		&[data-resized="false"] .wp-block-coblocks-gif:not(.components-placeholder) > div {
			margin-left: auto !important;
			margin-right: auto !important;
		}
	}

	.block-editor-block-list__block-edit figure.is-resized {
		display: table;
		margin: 0;
	}

	figure.wp-block-coblocks-gif {
		padding: 0;

		img {
			width: 100%;
		}
	}
}

// Ensure the resize handles are visible when the image is focused.
.wp-block-coblocks-gif.is-focused .components-resizable-box__handle {
	display: block;
	z-index: z-index(".block-library-image__resize-handlers");
}
