:root {
	--ska-placeholder-image-control--size: 63px;
}

.ska-placeholder-image-control {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;

	&__placeholder {
		width: var(--ska-placeholder-image-control--size);
		height: var(--ska-placeholder-image-control--size);
		flex-shrink: 0;
		border-radius: 2px;
		overflow: hidden;
		background: #fafafa;

		& > img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		& > :has(> .ska-placeholder) {
			width: 100%;
			height: 100%;

			& > .ska-placeholder {
				max-height: 100%;
			}
		}
	}

	& .components-base-control__help {
		margin-right: calc((55px + 8px) * -1);
	}

	&__preview-toggle {
		position: absolute;
		bottom: 1.5rem;
		right: 1rem;
	}

	&:last-child {

		& > .components-base-control {
			margin-bottom: 0;
		}

		.ska-placeholder-image-control__preview-toggle {
			bottom: 0.5rem;
		}
	}
}