@use '../../components/code-editor/style.scss' as code-editor;
@use './blocks/gallery/editor.scss' as gallery;
@use './blocks/image/editor.scss' as image;
@use './blocks/tailwind/editor.scss' as tailwind;

.editor-styles-wrapper {

	/** skaBlocksRender editorNoRender feature. */
	[data-ska-editor-no-render]:not(:is(.is-selected, .has-child-selected)) {
		display: none !important;
	}
}

/** Repeat appender (competing with block styles here). */
.block-editor-block-list__layout:not(#_):not(#_):not(#_) {

	.block-list-appender:has(>.ska-appender--repeat) {
		--bg-default: var(--wp-components-color-foreground, #1e1e1e);
		--bg-hover: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
		--bg-active: color-mix(in oklab, var(--bg-hover), black 10%);
		--bg: var(--bg-default);
		--height: 24px;
		--arrow-size: 0.5rem;
	}

	.block-list-appender > .ska-appender--repeat:not(#_):not(#_):not(#_) {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 4px;
		font-size: 13px;
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left: 6px;
		padding-right: 12px;
		margin: 0;
		height: var(--height);
		box-shadow: none;
		color: #fff;
		background: var(--bg);
		border: 0;
		border-radius: 2px;
		opacity: 0;
		transition: opacity 0.3s ease;

		&:hover {
			--bg: var(--bg-hover);
		}

		&:active {
			--bg: var(--bg-active);
		}

		&:focus {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		&::before {
			--size: var(--arrow-size);
			content: '';
			display: block;
			position: absolute;
			top: calc(var(--size) / 4 * -3); // Negative 75% of size
			left: 0;
			margin: calc(var(--size) * -1) 0 0 calc(var(--size) * 2);
			border: var(--size) solid var(--bg);
			border-right-color: transparent;
			border-left-color: transparent;
			border-top-color: transparent;
		}

		/** Pointer events fix. */
		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 3px;
			top: -3px;
			left: 0;
		}
	}

	.wp-block:is(.is-hovered, :has(.is-hovered)) > .block-list-appender > .ska-appender--repeat:not(#_):not(#_):not(#_) {
		opacity: 1;
	}

	.block-list-appender:has(>.ska-appender--repeat):not(#_):not(#_):not(#_) {
		display: flex;
		justify-content: center;
		align-items: center;
		background: transparent;
		bottom: calc((var(--height) + 1px) * -1);
		right: 0;
	}
}

.wp-block img:not([draggable]),
.wp-block svg:not([draggable]) {
	pointer-events: none;
}

/** Reset core CSS `.wp-block img:not([draggable]), .wp-block svg:not([draggable]) { pointer-events: none; }`. */
.wp-block[class*="wp-block-ska-"] {

	img, svg {

		&:not([draggable]) {
			pointer-events: initial;
		}
	}
}