@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.preview-wrapper {
	position: relative;
	margin: auto;
}

.preview-image {
	width: auto;
}

.container {
	position: relative;
	display: grid;
	justify-content: center;
	grid-template-rows: 1fr auto 2fr;
	background-color: var(--jp-gray-0);
	border: 1px dashed var(--jp-gray-20);
	margin-bottom: 8px;
	padding: 24px;
	width: 100%;
	min-height: 130px;
	border-radius: calc(var(--jp-border-radius) * 0.5);

	> * {
		justify-self: center;
	}

	> button {
		grid-row: 2;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	> span {
		grid-row: 3;
		margin-top: 16px;
		font-size: 13px;
		line-height: 16px;
		text-align: center;
		color: var(--jp-gray-60);
	}

	> svg {
		position: absolute;
		align-self: center;
		margin: 0;
	}
}

.subtitle {
	color: gb.$gray-700;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	margin-bottom: 8px;
}

.preview {
	width: 100%;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.remove,
%remove {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 2;
	line-height: 0;
	background-color: var(--jp-black);
	border: 1.5px solid var(--jp-white);
	border-radius: 100%;
	transition: 0.1s ease-in-out background;

	svg {
		fill: var(--jp-white);
	}

	&:hover {
		background-color: var(--wp-admin-theme-color);
	}
}

.remove-loading {

	@extend %remove;
	// This is to make the close button appear in the right place
	// when we are loading the image. With this it is possible to
	// close/stop loading images if the request takes too long.
	top: -56px;
	right: -5px;
}
