:root {
	--outline-color: lightgray;
	--outline-text-color: black;
	--outline-style: solid;
	--outline-opacity: 1;
	--outline-padding: 3px;
}
.outline-floating-block-data {
	display: none;
}

body.is-dragging-components-draggable {
	.block-editor-block-list__layout .wp-block:not(.block-list-appender):not(.block-editor-default-block-appender) {
		outline: 1px var(--outline-style) transparent;
	}

	.outline-floating-block-data {
		display: none;
	}
}
body:not(.is-dragging-components-draggable) {
	.block-editor-block-list__layout .wp-block:not(.block-list-appender):not(.block-editor-default-block-appender) {
		outline: 1px var(--outline-style) transparent;
		transition: outline 0.2s;
		&.outline-block-hovered {
			outline-color: var(--outline-color);

			&::before,
			&::after {
				opacity: 1;
			}
		}

		&::before {
			content: attr(data-type);
			padding: 0.3em 0.6em;
			font-size: 0.8rem;
			position: absolute;
			color: var(--outline-text-color);
			font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
			top: 0;
			right: -1px;
			bottom: initial;
			left: initial !important;
			background-color: var(--outline-color);
			transition: opacity 0.2s;
			opacity: 0;
			pointer-events: none;
			z-index: 5;
			font-weight: normal;
			transform: translateY(-100%);
			// Sapcer block
			width: auto;
			height: auto;
		}

		&::after {
			content: attr(class);
			padding: 0.3em 0.6em;
			font-size: 11px;
			position: absolute;
			color: var(--outline-text-color);
			font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
			bottom: 0;
			right: -1px;
			top: auto;
			left: initial !important;
			background-color: var(--outline-color);
			transition: opacity 0.2s;
			opacity: 0;
			pointer-events: none;
			z-index: 5;
			font-weight: normal;
			line-height: 1em;
			transform: translateY(100%);
			min-height: auto;
			// Sapcer block
			width: auto;
			height: auto;
		}
	}

	&[block-data-position='floating'] {
		.outline-floating-block-data {
			padding: 1em;
			position: fixed;
			pointer-events: none;
			background-color: var(--outline-color);
			display: inline-block;
			color: var(--outline-text-color);
			transform: translate(15px, -10px);
			box-shadow: 0 0 0.8em 5px rgba(0, 0, 0, 0.1);
			border: 1px solid var(--outline-text-color);
			font-size: 12px;
			border-radius: 5px;
			> div {
				margin-bottom: 5px;
			}
			.floating-row-title {
				font-size: 15px;
				font-weight: bold;
				text-align: center;
			}
			ul {
				padding: 0;
				margin: 0;
				margin-left: 20px;
				list-style: circle;
				li {
					margin: 0;
				}
			}
		}
	}
}

// Block data (name and class) position
body {
	&[block-data-position='inside'] {
		.block-editor-block-list__layout .wp-block {
			&::before,
			&::after {
				transform: translateY(0) !important;
			}
		}
	}

	&[block-data-position='floating'] {
		.block-editor-block-list__layout .wp-block {
			&::before,
			&::after {
				opacity: 0 !important;
			}
		}
	}
}
// Hide block names if not set
body[show-block-name='false'] {
	.block-editor-block-list__layout .wp-block::before {
		opacity: 0 !important;
	}
}

// Hide class name if not enabled by user
body[show-class-name='false'] {
	.block-editor-block-list__layout .wp-block::after {
		opacity: 0 !important;
	}
}

// Always show outline
body[show-outline='always'] {
	.block-editor-block-list__layout .wp-block:not(.block-list-appender):not(.block-editor-default-block-appender) {
		outline-color: var(--outline-color);
		&::before,
		&::after {
			opacity: 1;
		}
	}
}

// disable outline
body[show-outline='never'] {
	.outline-floating-block-data {
		display: none;
	}
	.block-editor-block-list__layout .wp-block {
		outline-color: transparent !important;
		&::before,
		&::after {
			opacity: 0 !important;
		}
	}
}

body[lock-block-outline='true'] {
	.block-editor-block-list__layout
		.wp-block.is-selected:not(.block-list-appender):not(.block-editor-default-block-appender) {
		outline-color: var(--outline-color);
		opacity: 1;
		&::before,
		&::after {
			opacity: 1;
		}
	}
}

body[enable-outline-padding='true'] {
	.block-editor-block-list__layout .wp-block:not(.block-list-appender):not(.block-editor-default-block-appender) {
		padding: var(--outline-padding);
	}
}

/* -------------------------------------------------------------------------- */
/*                                Sidebar Style                               */
/* -------------------------------------------------------------------------- */

.editor-block-outline-sidebar {
	h2 {
		margin: 1em 0 0.5em 0;
	}

	hr {
		border-color: #0000001c;
		width: 40%;
		left: 30%;
		position: relative;
		margin: 2em 0;
	}
}