/*
 * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
	--ck-html-object-embed-unfocused-outline-width: 1px;
}

.ck-widget.html-object-embed {
	font-size: var(--ck-font-size-base);
	background-color: var(--ck-color-base-foreground);
	padding: var(--ck-spacing-small);
	/* Leave space for label */
	padding-top: calc(var(--ck-font-size-tiny) + var(--ck-spacing-large));
	min-width: calc(76px + var(--ck-spacing-standard));

	&:not(.ck-widget_selected):not(:hover) {
		outline: var(--ck-html-object-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
	}

	&::before {
		font-weight: normal;
		font-style: normal;
		position: absolute;
		content: attr(data-html-object-embed-label);
		top: 0;
		left: var(--ck-spacing-standard);
		background: hsl(0deg 0% 60%);
		transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
		padding: calc(var(--ck-spacing-tiny) + var(--ck-html-object-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
		border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
		color: var(--ck-color-base-background);
		font-size: var(--ck-font-size-tiny);
		font-family: var(--ck-font-face);
	}

	/* Make space for label. */
	& .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
		margin-left: 50px;
	}

	& .html-object-embed__content {
		/* Disable user interaction with embed content */
		pointer-events: none;
	}
}

div.ck-widget.html-object-embed {
	margin: 1em auto;
}

span.ck-widget.html-object-embed {
	display: inline-block;
}

