.wp-block-image {
	position: relative;
	margin: 0;

	img {
		display: block;
		width: 100%;
	}

	&.is-resized img {
		height: 100%;
	}

	&.is-transient img {
		@include loading_fade;
	}
}

.wp-block-image__resize-handler-top-right,
.wp-block-image__resize-handler-bottom-right,
.wp-block-image__resize-handler-top-left,
.wp-block-image__resize-handler-bottom-left {
	display: none;
	border-radius: 50%;
	border: 2px solid white;
	width: 15px !important;
	height: 15px !important;
	position: absolute;
	background: $blue-medium-500;
	padding: 0 3px 3px 0;
	box-sizing: border-box;
	cursor: se-resize;

	.wp-block-image.is-focused & {
		display: block;
		z-index: z-index( '.wp-block-image__resize-handlers' );
	}
}

/*!rtl:begin:ignore*/
.wp-block-image__resize-handler-top-right {
	top: -6px !important;
	right: -6px !important;
}

.wp-block-image__resize-handler-top-left {
	top: -6px !important;
	left: -6px !important;
}

.wp-block-image__resize-handler-bottom-right {
	bottom: -6px !important;
	right: -6px !important;
}

.wp-block-image__resize-handler-bottom-left {
	bottom: -6px !important;
	left: -6px !important;
}
/*!rtl:end:ignore*/

.wp-core-ui .wp-block-audio__upload-button.button,
.wp-core-ui .wp-block-image__upload-button.button,
.wp-core-ui .wp-block-video__upload-button.button {
	margin-right: 5px;

	.dashicon {
		vertical-align: middle;
		margin-bottom: 3px;
	}


	&:hover {
		color: $dark-gray-800;
	}
}

.editor-block-list__block[data-type="core/image"][data-align="center"] {
	.wp-block-image {
		margin-left: auto;
		margin-right: auto;
	}

	&[data-resized="false"] .wp-block-image > div {
		margin-left: auto;
		margin-right: auto;
	}
}

.edit-post-sidebar .blocks-image__dimensions {
	margin-bottom: 1em;

	.blocks-image__dimensions__row {
		display: flex;
		justify-content: space-between;

		.blocks-image__dimensions__width,
		.blocks-image__dimensions__height {
			margin-bottom: 0.5em;

			// Fix the text and placeholder text being misaligned in Safari
			input {
				line-height: 1.25;
			}
		}

		.blocks-image__dimensions__width {
			margin-right: 5px;
		}

		.blocks-image__dimensions__height {
			margin-left: 5px;
		}
	}
}

.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .blocks-format-toolbar__link-modal {
	position: absolute;
	left: 0;
	right: 0;
	margin: -1px 0;

	@include break-small() {
		margin: -1px;
	}
}