editor.scss

.stk-img-wrapper {
	position: relative;

	&:hover {
		img {
			opacity: 0.8;
		}
	}

	&:not(.stk--is-resizing).stk-img-placeholder {
		// Add default height to image placeholders in case the default height is `auto`.
		height: 300px !important;
	}

	// If there's no image selected yet.
	&.stk-img-placeholder {
		/* stylelint-disable function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 376' xmlns='http://www.w3.org/2000/svg' fill='%23ccc'%3E%3Cpath d='M0 0v376h512V0H0zm480 344H32V32h448v312z'%3E%3C/path%3E%3Ccircle cx='409.1' cy='102.9' r='40.9'%3E%3C/circle%3E%3Cpath d='M480 344H32l86.3-164.2 21.7 11.3 49-77.3 100 113.1 8.9-9.3 17.1 22.3 26-46.4 52.9 71.2 15.1-15.9z'%3E%3C/path%3E%3C/svg%3E") !important;
		background-size: #{ "min(40%, 80px)" } !important; // Workaround since `min` gets confused with a SASS function.
		background-position: center !important;
		background-repeat: no-repeat !important;
		position: relative;
		margin-left: auto;
		margin-right: auto;

		img {
			display: none !important;
		}

		&:hover {
			background-color: #fafafa !important;
		}
		&:focus {
			background-color: #fafafa !important;
			box-shadow: 0 0 0 2px rgba(30, 140, 190, 0.8);
		}

		// Always hide the size tooltip.
		.stk-resizer-tooltip {
			display: none !important;
		}
	}

	&.has-show-handle {
		overflow: visible; // Don't clip resize handlers
	}

	&:not(:hover):not(.stk--is-resizing) {
		.components-resizable-box__handle,
		.stk-resizer-tooltip:not(.stk--is-editing) {
			display: none !important;
		}
	}
	&.stk--is-resizing {
		transition: none !important;
	}
}

.stk-img-upload-remove {
	background: none !important;
	color: #ddd;
	border: none;
	position: absolute;
	top: #{ "min(10%, 16px)" };
	right: #{ "min(10%, 12px)" };
	cursor: pointer;
	display: none;
	z-index: 9 !important;
	svg {
		stroke: rgba(0, 0, 0, 0.3);
		stroke-width: 1px;
		fill: #fff;
		max-width: none;
	}
}

// Only display the X button when selected/hovered.
.block-editor-block-list__block {
	&.is-selected,
	&:hover {
		.stk-img-upload-remove {
			display: block;
		}
	}
}

.stk-img-resizer-tooltip {
	background: rgba(0, 0, 0, 0.75);
	border-radius: 2px;
	box-sizing: border-box;
	font-size: 12px;
	color: #fff;
	padding: 4px 8px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	white-space: nowrap;
	z-index: 9;
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.3s ease-in-out;
	user-select: none;
	&:hover {
		opacity: 1;
	}
	&:focus {
		border-color: #007cba;
		border-color: var(--wp-admin-theme-color);
		box-shadow: 0 0 0 1px #007cba;
		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
		outline: 2px solid transparent;
	}

	// Save for next time on when we decide to allow people to click and type in margins.
	cursor: pointer;
	z-index: 3;
	&::after {
		content: "\f347";
		font-family: Dashicons;
		top: 2px;
		position: relative;
		margin-left: 4px;
		font-size: 11px;
	}

	// Create an outline since the tooltip is small so that it's easier to click.
	&::before {
		content: "";
		position: absolute;
		top: -8px;
		right: -8px;
		bottom: -8px;
		left: -8px;
		z-index: -1;
	}
}

// If the image its too small, don't show the tooltip.
.stk--too-small .stk-img-resizer-tooltip {
	display: none !important;
}

.stk-image-size-popup {
	.components-popover__content {
		padding: 16px;
		min-width: auto;
		width: 200px;
		font-size: 12px;
		.stk-image-size-popup__control-wrapper {
			display: flex;
			column-gap: 8px;
			margin-top: 8px;
		}
		.stk-image-size-popup__x {
			align-self: flex-end;
			padding: 0 8px;
			line-height: 34px;
		}
		.stk-image-size-popup__reset {
			align-self: flex-end;
			margin-bottom: 10px;
		}
	}
	.components-base-control,
	.components-base-control__field {
		margin-bottom: 0 !important;
	}
	// Wide when we can edit both width and height
	&.stk--is-wide {
		.components-popover__content {
			width: 310px;
		}
	}
}

// The wrapper of the image. We need this wrapper for our image zoom feature,
// but the resizer needs overflow visible.
.stk-img-resizer-wrapper {
	position: relative;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	display: block !important;
	overflow: hidden;

	//Added this to fix filter: drop-shadows flicker/do not show in safari browsers
	will-change: filter;

	// Add the placeholder background here so that the border radius would also
	background: transparent;
	mix-blend-mode: multiply;
}

.ugb-button-icon-control__popover .ugb-image-shape-control {
	// Make the option wide.
	.ugb-design-control {
		margin: 0 !important;
		max-height: min(300px, 50vh) !important;
	}
	// Make the option 3 columns.
	.components-radio-control__option {
		width: 25%;
	}
}

// Image mask. We need this since our mask is on the resizable wrapper.
.stk-img-wrapper {
	z-index: 1; // Make the image on top of the background overlays
	&.stk-img-placeholder {
		// show in the placeholder.
		background: #f1f1f1;
	}
	// Shapes.
	&.stk-img--shape .stk-img-resizer-wrapper {
		&,
		&::after {
			mask-mode: alpha;
			mask-repeat: no-repeat;
			mask-size: contain;
			mask-position: center;
			border-radius: none;
		}
	}

	.stk-img-resizer-wrapper::after,
	&.stk-img--gradient-overlay .stk-img-resizer-wrapper::before {
		content: "";
		position: absolute;
		inset: 0;
		opacity: var(--stk-gradient-overlay, 0.3);
		z-index: 1;
	}
}
// make the placeholder occupy the entire area since the placeholder is used to
// measure in image blocks..
.stk-block-image {
	.stk-img-wrapper.stk-img-placeholder {
		min-width: 100%;
	}
}

// Don't do the hover effect when adjusting the hover effect.
.stk-block:not(.stk--is-hovered) > .stk-img-wrapper {
	// If not hovered, hide the overlay hover state.
	&.stk-img--gradient-overlay:not(:hover) .stk-img-resizer-wrapper::before {
		opacity: 0 !important;
	}
	&.stk-img--gradient-overlay:hover .stk-img-resizer-wrapper::after {
		opacity: 0 !important;
	}
	// Firefox doesn't stretch SVG masks via attributes, stretching is done here. Fixes #246.
	&.stk-image--shape-stretch .stk-img-resizer-wrapper {
		mask-size: 100% 100%;
		// Firefox doesn't automatically inherit the mask-size from the parent. Fixes #3042.
		img {
			mask-size: inherit !important;
		}
	}
}

// Editing page templates may make the image grow past the screen.
.stk-img {
	max-width: 100%;
}

.stk-img-wrapper {
	.stk-img-media-manager-button {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	&:not(.stk--no-click-to-edit) {
		.stk-img-media-manager-button {
			cursor: copy;
		}
	}
}