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

@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

:root {
	--ck-show-blocks-border-color: hsl(0, 0%, 46%);
}

@define-mixin block-name-background-ltr $text {
	background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>$(text)</text></svg>");
	background-position: 1px 1px;
}

@define-mixin block-name-background-rtl $text {
	background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>$(text)</text></svg>");
	background-position: calc(100% - 1px) 1px;
}

@define-mixin block-name-background $text {
	background-repeat: no-repeat;
	padding-top: 15px;

	/* Fix for Multi-root editor
	https://github.com/ckeditor/ckeditor5/issues/15969 */
	[dir=ltr] & {
		@mixin block-name-background-ltr $text;
	}
	[dir=rtl] & {
		@mixin block-name-background-rtl $text;
	}

	&:not(.ck-widget_selected):not(.ck-widget:hover) {
		outline: 1px dashed var(--ck-show-blocks-border-color);
	}

	@mixin ck-dir ltr {
		@mixin block-name-background-ltr $text;
	}
	@mixin ck-dir rtl {
		@mixin block-name-background-rtl $text;
	}
}

.ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) {
	& address {
		@mixin block-name-background ADDRESS;
	}

	& aside {
		@mixin block-name-background ASIDE;
	}

	& blockquote {
		@mixin block-name-background BLOCKQUOTE;
	}

	& details {
		@mixin block-name-background DETAILS;
	}

	& div:not(.ck-widget, .ck-widget *) {
		@mixin block-name-background DIV;
	}

	& footer {
		@mixin block-name-background FOOTER;
	}

	& h1 {
		@mixin block-name-background H1;
	}

	& h2 {
		@mixin block-name-background H2;
	}

	& h3 {
		@mixin block-name-background H3;
	}

	& h4 {
		@mixin block-name-background H4;
	}

	& h5 {
		@mixin block-name-background H5;
	}

	& h6 {
		@mixin block-name-background H6;
	}

	& header {
		@mixin block-name-background HEADER;
	}

	& main {
		@mixin block-name-background MAIN;
	}

	& nav {
		@mixin block-name-background NAV;
	}

	& pre {
		@mixin block-name-background PRE;
	}

	& ol {
		@mixin block-name-background OL;
	}

	& ul {
		@mixin block-name-background UL;
	}

	& p {
		@mixin block-name-background P;
	}

	& section {
		@mixin block-name-background SECTION;
	}

	& :where(figure.image, figure.table) figcaption {
		@mixin block-name-background FIGCAPTION;
	}
}