@burger-editor/client 4.0.0-alpha.11 → 4.0.0-alpha.13

package/dist/client.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset "utf-8";
 	dl.svelte-zdu8xx {
 		padding: 0;
 		margin: 0;
@@ -489,345 +489,514 @@
 		}
 	}
 
+
 :root {
-  --bge-lightest-color: #fff;
-  --bge-darkest-color: #000;
-  --bge-border-primary-color: #cfd1cf;
-  --bge-background-color01: #f5f5f5;
-  --bge-background-color02: #555;
-  --bge-border-color: #c6c6d8;
-  --bge-ui-primary-color: #0c7e9e;
-  --bge-ui-background-color: #eaedf0;
-  --bge-button-background-color: var(--bge-lightest-color);
-  --bge-dialog-font-color: #0f1533;
-  --bge-dialog-background-color: var(--bge-ui-background-color);
-  --bge-focus-outline-width: 2px;
-  --bge-tooltip-background-color: rgb(0 0 0 / 60%);
-  --bge-font-family-monospace: "Courier New", monospace;
+	--bge-lightest-color: #fff;
+	--bge-darkest-color: #000;
+	--bge-border-primary-color: #cfd1cf;
+	--bge-background-color01: #f5f5f5;
+	--bge-background-color02: #555;
+	--bge-border-color: #c6c6d8;
+	--bge-ui-primary-color: #0c7e9e;
+	--bge-ui-background-color: #eaedf0;
+	--bge-button-background-color: var(--bge-lightest-color);
+	--bge-dialog-font-color: #0f1533;
+	--bge-dialog-background-color: var(--bge-ui-background-color);
+	--bge-focus-outline-width: 2px;
+	--bge-tooltip-background-color: rgb(0 0 0 / 60%);
+	--bge-font-family-monospace: 'Courier New', monospace;
 }
 
 :where(body:has(dialog[open])) {
-  overflow: hidden;
+	overflow: hidden;
 }
 
 :where(dialog[open]) {
-  --dialog-margin: 40px;
-  --dialog-margin-inline: var(--dialog-margin);
-  --dialog-margin-block: var(--dialog-margin);
-  --border-radius: 0.5em;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  inline-size: calc(100vw - var(--dialog-margin-inline) * 2);
-  max-inline-size: 40em;
-  max-block-size: calc(100vh - var(--dialog-margin-block) * 2);
-  padding: 0;
-  padding-block: 1em;
-  overscroll-behavior: contain;
-  font-size: 16px;
-  color: var(--bge-dialog-font-color);
-  resize: both;
-  background: var(--bge-dialog-background-color);
-  border: none;
-  border-radius: var(--border-radius);
-}
-:where(:where(dialog[open]) *) {
-  box-sizing: border-box;
-}
-:where(dialog[open])::backdrop {
-  background: rgba(0, 0, 1, 0.6);
-}
-:where(dialog[open]):has([data-bge-dialog="2col"]), :where(dialog[open]):has([data-bge-dialog=wide]) {
-  max-inline-size: 80em;
-}
-:where(dialog[open])[style*="width:"] {
-  max-inline-size: none;
-}
-:where(dialog[open]) > div {
-  --padding-block: 0em;
-  --padding-inline: 1em;
-  padding-block: calc(var(--padding-block) + var(--bge-focus-outline-width));
-  padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
-  overflow: auto;
-  outline: none;
-}
-:where(dialog[open]) > div > form {
-  block-size: max-content;
-  margin: 0;
-}
-:where(dialog[open]) > footer {
-  --padding-block: 1em;
-  --padding-inline: 1em;
-  display: flex;
-  gap: 0.5em;
-  justify-content: flex-end;
-  padding-block-start: calc(var(--padding-block) + var(--bge-focus-outline-width));
-  padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
-  background: var(--bge-dialog-background-color);
-}
-:where(dialog[open]) [data-bge-dialog="2col"] {
-  display: flex;
-  gap: 2em;
-  align-items: flex-start;
-}
-:where(dialog[open]) [data-bge-dialog="2col"] > div {
-  flex: 0 0 calc(50% - 1em);
-}
-:where(dialog[open]) [data-bge-dialog-ui*=sticky] {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 1;
-  background: var(--bge-dialog-background-color);
-}
+	--dialog-margin: 40px;
+	--dialog-margin-inline: var(--dialog-margin);
+	--dialog-margin-block: var(--dialog-margin);
+	--border-radius: 0.5em;
+	display: grid;
+	grid-template-rows: minmax(0, 1fr) auto;
+	inline-size: calc(100vw - (var(--dialog-margin-inline) * 2));
+	max-inline-size: 40em;
+	max-block-size: calc(100vh - (var(--dialog-margin-block) * 2));
+	padding: 0;
+	padding-block: 1em;
+	overscroll-behavior: contain;
+	font-size: 16px;
+	color: var(--bge-dialog-font-color);
+	resize: both;
+	background: var(--bge-dialog-background-color);
+	border: none;
+	border-radius: var(--border-radius);
 
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is(:not([type]),
-[type=text],
-[type=number],
-[type=password],
-[type=email],
-[type=url],
-[type=tel],
-[type=search],
-[type=color],
-[type=date],
-[type=time],
-[type=datetime-local],
-[type=month],
-[type=week]),
-select,
-textarea) {
-  inline-size: 100%;
-  padding-block: 0.5em;
-  padding-inline: 0.7em;
-  font-size: 1em;
-  line-height: 1.1;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
-select,
-textarea,
-[contenteditable]) {
-  background: var(--bge-lightest-color);
-  border: 1px solid var(--bge-border-color);
-  border-radius: var(--border-radius);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
-select,
-textarea,
-[contenteditable]):disabled {
-  background: initial;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input, textarea, select, button, [contenteditable]):focus-visible {
-  --bge-border-color: var(--bge-ui-primary-color);
-  --bge-outline-color: var(--bge-ui-primary-color);
-  --allow-color: var(--bge-ui-primary-color);
-  outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(select) {
-  --allow-size: 0.4em;
-  --allow-padding: 0.5em;
-  --allow-color: currentColor;
-  --separator-width: 1px;
-  --separator-height: calc(100% - 4px * 2);
-  --separator-color: var(--bge-border-color);
-  appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, var(--allow-color) 50%), linear-gradient(135deg, var(--allow-color) 50%, transparent 50%), linear-gradient(to right, var(--separator-color), var(--separator-color));
-  background-repeat: no-repeat;
-  background-position: right calc(var(--allow-padding) + var(--allow-size) * 2) center, right calc(var(--allow-padding) + var(--allow-size) * 1 + 1px) center, right calc(var(--allow-padding) * 2 + var(--allow-size) * 4) center;
-  background-size: var(--allow-size) var(--allow-size), var(--allow-size) var(--allow-size), var(--separator-width) var(--separator-height);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(textarea) {
-  field-sizing: content;
-  max-block-size: 50vh;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button) {
-  padding-block: 0.5em;
-  padding-inline: 1em;
-  font-size: inherit;
-  line-height: 1.1;
-  appearance: none;
-  cursor: pointer;
-  background: var(--bge-button-background-color);
-  border: 1px solid var(--bge-border-color);
-  border-radius: var(--border-radius);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button:is([aria-pressed=true], [aria-selected=true])) {
-  color: #fff;
-  background-color: var(--bge-ui-primary-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button:is([aria-pressed=true], [aria-selected=true])):focus-visible {
-  box-shadow: 0 0 0 2px #fff inset;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is([type=checkbox], [type=radio], [type=range])) {
-  inline-size: 1.5em;
-  block-size: 1.5em;
-  margin: 0;
-  accent-color: var(--bge-ui-primary-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is([type=range])) {
-  inline-size: 100%;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for], :has(+ button))):last-of-type {
-  padding-block-end: 0;
-  border-block-end: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for], :has(+ button))):has(+ small[id]):has(input[aria-describedby]) {
-  margin-block-end: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for])) {
-  display: block;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(:is(label:not([for]), small[id], [role=radiogroup]) ~ :is(label:not([for]),
-div:has(> label, > span > label):has(> :is(input, select, textarea)),
-[role=radiogroup])) {
-  padding-block-start: 1em;
-  margin-block-start: 1em;
-  border-block-start: 1px solid var(--bge-border-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(:is(label:not([for]), small[id]) + fieldset) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for]) > span:has(+ input, + select, + textarea)) {
-  display: block;
-  margin-block-end: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for]):has(input:is([type=checkbox], [type=radio]))) {
-  display: flex;
-  gap: 0.3em;
-  align-items: center;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(fieldset) {
-  padding: 1em;
-  margin-block-end: 1em;
-  border: 1px solid var(--bge-border-color);
-  border-radius: var(--border-radius);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(fieldset):is(* + :where(dialog[open], [data-bge-component=block-menu]) :where(fieldset)) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(* + bge-wysiwyg-editor) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(bge-wysiwyg-editor:has(+ *)) {
-  margin-block-end: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) > :not(label):first-child::after {
-  content: ":";
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) > label {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)) {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-  justify-content: flex-end;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)):has(> label) {
-  align-items: flex-end;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)):has(> label) > label {
-  flex-grow: 1;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(iframe) {
-  display: block;
-  inline-size: 100%;
-  border: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(code) {
-  display: inline-block;
-  padding-block: 0.1em;
-  padding-inline: 0.3em;
-  font-size: 0.75em;
-  font-weight: bold;
-  vertical-align: middle;
-  color: color-mix(in srgb, currentcolor 80%, var(--bge-lightest-color) 20%);
-  background: color-mix(in srgb, var(--bge-dialog-background-color) 80%, var(--bge-lightest-color) 20%);
-  border: 1px solid color-mix(in srgb, var(--bge-border-color) 80%, var(--bge-lightest-color) 20%);
-  border-radius: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(p):first-child {
-  margin-block-start: 0;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(p):last-child {
-  margin-block-end: 0;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([data-bge-editor-ui]) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([data-bge-editor-ui]):first-child {
-  margin-block-start: 0;
-}
+	:where(&, *) {
+		box-sizing: border-box;
+	}
 
-[data-bge-component$=-editable-area][data-bge-component-mode=visual] iframe {
-  display: block;
-  margin-block: 0;
-  margin-inline: auto;
-  overflow: hidden;
-  border: none;
-}
-[data-bge-component$=-editable-area][data-bge-component-mode=visual] textarea {
-  display: none;
-}
-[data-bge-component$=-editable-area][data-bge-component-mode=source] iframe {
-  display: none;
-}
+	&::backdrop {
+		background: rgb(0 0 1 / 60%);
+	}
 
-[data-bge-component=editable-area] [data-bgi] {
-  --outline: none;
-  min-inline-size: 20px;
-  min-block-size: 20px;
-  outline: var(--outline);
-}
-[data-bge-component=editable-area] [data-bgi]:where([data-bge-container]:hover [data-bge-component=editable-area] [data-bgi]) {
-  --outline: 1px #a6a6a6 dotted;
-}
-[data-bge-component=editable-area] [data-bgi]:hover {
-  --outline: 1px solid var(--bge-ui-primary-color);
-  cursor: pointer;
-  background-color: oklch(from currentcolor l c h/5%);
-  background-blend-mode: darken;
+	&:has([data-bge-dialog='2col']),
+	&:has([data-bge-dialog='wide']) {
+		max-inline-size: 80em;
+	}
+
+	&[style*='width:'] {
+		max-inline-size: none;
+	}
+
+	> div {
+		--padding-block: 0em; /* stylelint-disable-line length-zero-no-unit */
+		--padding-inline: 1em;
+		padding-block: calc(var(--padding-block) + var(--bge-focus-outline-width));
+		padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
+		overflow: auto;
+		outline: none;
+	}
+
+	> div > form {
+		block-size: max-content;
+		margin: 0;
+	}
+
+	> footer {
+		--padding-block: 1em;
+		--padding-inline: 1em;
+		display: flex;
+		gap: 0.5em;
+		justify-content: flex-end;
+		padding-block-start: calc(var(--padding-block) + var(--bge-focus-outline-width));
+		padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
+		background: var(--bge-dialog-background-color);
+	}
+
+	[data-bge-dialog='2col'] {
+		display: flex;
+		gap: 2em;
+		align-items: flex-start;
+	}
+
+	[data-bge-dialog='2col'] > div {
+		flex: 0 0 calc(50% - 2em / 2);
+	}
+
+	[data-bge-dialog-ui*='sticky'] {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 1;
+		background: var(--bge-dialog-background-color);
+	}
+}
+
+:where(dialog[open], [data-bge-component='block-menu']) {
+	:where(
+		input:is(
+			:not([type]),
+			[type='text'],
+			[type='number'],
+			[type='password'],
+			[type='email'],
+			[type='url'],
+			[type='tel'],
+			[type='search'],
+			[type='color'],
+			[type='date'],
+			[type='time'],
+			[type='datetime-local'],
+			[type='month'],
+			[type='week']
+		),
+		select,
+		textarea
+	) {
+		inline-size: 100%;
+		padding-block: 0.5em;
+		padding-inline: 0.7em;
+		font-size: 1em;
+		line-height: 1.1;
+	}
+
+	:where(
+		input:not([type='radio'], [type='checkbox'], [type='range']),
+		select,
+		textarea,
+		[contenteditable]
+	) {
+		background: var(--bge-lightest-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+
+		&:disabled {
+			background: initial;
+		}
+	}
+
+	:where(input, textarea, select, button, [contenteditable]):focus-visible {
+		--bge-border-color: var(--bge-ui-primary-color);
+		--bge-outline-color: var(--bge-ui-primary-color);
+		--allow-color: var(--bge-ui-primary-color);
+		outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
+	}
+
+	:where(select) {
+		--allow-size: 0.4em;
+		--allow-padding: 0.5em;
+		--allow-color: currentColor;
+		--separator-width: 1px;
+		--separator-height: calc(100% - 4px * 2);
+		--separator-color: var(--bge-border-color);
+		appearance: none;
+		background-image:
+			linear-gradient(45deg, transparent 50%, var(--allow-color) 50%),
+			linear-gradient(135deg, var(--allow-color) 50%, transparent 50%),
+			linear-gradient(to right, var(--separator-color), var(--separator-color));
+		background-repeat: no-repeat;
+		background-position:
+			right calc(var(--allow-padding) + var(--allow-size) * 2) center,
+			right calc(var(--allow-padding) + var(--allow-size) * 1 + 1px) center,
+			right calc(var(--allow-padding) * 2 + var(--allow-size) * 4) center;
+		background-size:
+			var(--allow-size) var(--allow-size),
+			var(--allow-size) var(--allow-size),
+			var(--separator-width) var(--separator-height);
+	}
+
+	:where(textarea) {
+		field-sizing: content;
+		max-block-size: 50vh;
+	}
+
+	:where(button) {
+		padding-block: 0.5em;
+		padding-inline: 1em;
+		font-size: inherit;
+		line-height: 1.1;
+		appearance: none;
+		cursor: pointer;
+		background: var(--bge-button-background-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+	}
+
+	:where(button:is([aria-pressed='true'], [aria-selected='true'])) {
+		color: #fff;
+		background-color: var(--bge-ui-primary-color);
+
+		&:focus-visible {
+			box-shadow: 0 0 0 2px #fff inset;
+		}
+	}
+
+	:where(input:is([type='checkbox'], [type='radio'], [type='range'])) {
+		inline-size: 1.5em;
+		block-size: 1.5em;
+		margin: 0;
+		accent-color: var(--bge-ui-primary-color);
+	}
+
+	:where(input:is([type='range'])) {
+		inline-size: 100%;
+	}
+
+	:where(label:not([for], :has(+ button))) {
+		&:last-of-type {
+			padding-block-end: 0;
+			border-block-end: none;
+		}
+
+		&:has(+ small[id]):has(input[aria-describedby]) {
+			margin-block-end: 0.3em;
+		}
+	}
+
+	:where(label:not([for])) {
+		display: block;
+	}
+
+	:where(
+		:is(label:not([for]), small[id], [role='radiogroup'])
+			~ :is(
+				label:not([for]),
+				div:has(> label, > span > label):has(> :is(input, select, textarea)),
+				[role='radiogroup']
+			)
+	) {
+		padding-block-start: 1em;
+		margin-block-start: 1em;
+		border-block-start: 1px solid var(--bge-border-color);
+	}
+
+	:where(:is(label:not([for]), small[id]) + fieldset) {
+		margin-block-start: 1em;
+	}
+
+	:where(label:not([for]) > span:has(+ input, + select, + textarea)) {
+		display: block;
+		margin-block-end: 0.3em;
+	}
+
+	:where(label:not([for]):has(input:is([type='checkbox'], [type='radio']))) {
+		display: flex;
+		gap: 0.3em;
+		align-items: center;
+	}
+
+	:where(fieldset) {
+		padding: 1em;
+		margin-block-start: 1em;
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+	}
+
+	:where([role='radiogroup']) {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1em;
+
+		> :not(label):first-child {
+			&::after {
+				content: ':';
+			}
+		}
+
+		> label {
+			padding: 0;
+			margin: 0;
+			border: none;
+		}
+	}
+
+	:where(div:has(input):has(> button:last-child)) {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+		justify-content: flex-end;
+
+		&:has(> label) {
+			align-items: flex-end;
+
+			> label {
+				flex-grow: 1;
+			}
+		}
+	}
+
+	:where(iframe) {
+		display: block;
+		inline-size: 100%;
+		border: none;
+	}
+
+	:where(code) {
+		display: inline-block;
+		padding-block: 0.1em;
+		padding-inline: 0.3em;
+		font-size: 0.75em;
+		font-weight: bold;
+		vertical-align: middle;
+		color: color-mix(in srgb, currentcolor 80%, var(--bge-lightest-color) 20%);
+		background: color-mix(
+			in srgb,
+			var(--bge-dialog-background-color) 80%,
+			var(--bge-lightest-color) 20%
+		);
+		border: 1px solid
+			color-mix(in srgb, var(--bge-border-color) 80%, var(--bge-lightest-color) 20%);
+		border-radius: 0.3em;
+	}
+
+	:where(p) {
+		&:first-child {
+			margin-block-start: 0;
+		}
+
+		&:last-child {
+			margin-block-end: 0;
+		}
+	}
+
+	:where([data-bge-editor-ui]) {
+		margin-block-start: 1em;
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+	}
+
+	bge-wysiwyg-editor {
+		display: block;
+		margin-block-start: 1em;
+
+		> fieldset {
+			margin-block: 0;
+		}
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+
+		[data-bge-toolbar] {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25em;
+			align-items: center;
+			justify-content: space-between;
+			margin-block-end: 0.5em;
+		}
+
+		[data-bge-toolbar-group] {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25em;
+			align-items: center;
+		}
+
+		[data-bge-toolbar-button] {
+			--size: 1lh;
+			--stroke-width: 1.5;
+			--padding: 0.25em;
+			padding: 0.25em;
+			font-size: inherit;
+			cursor: pointer;
+			background: var(--bge-lightest-color);
+			border: 1px solid var(--bge-border-color);
+			border-radius: var(--border-radius);
+
+			&:hover,
+			&:focus-visible {
+				--bge-border-color: var(--bge-ui-primary-color);
+				--bge-outline-color: var(--bge-ui-primary-color);
+				outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
+			}
+
+			&:disabled {
+				color: inherit;
+				cursor: not-allowed;
+				outline: none;
+				opacity: 0.3;
+			}
+
+			&[aria-pressed='true'] {
+				--stroke-width: 2;
+				color: #fff;
+				background-color: var(--bge-ui-primary-color);
+
+				&:focus-visible {
+					box-shadow: 0 0 0 2px #fff inset;
+				}
+			}
+
+			&:not(:has(svg)) {
+				padding-inline: calc(var(--padding) * 3);
+			}
+
+			svg {
+				inline-size: var(--size);
+				block-size: var(--size);
+				stroke: currentcolor;
+				stroke-width: var(--stroke-width);
+			}
+
+			[data-bge-rotate] {
+				display: block;
+				rotate: -90deg;
+			}
+		}
+	}
 }
-[data-bge-component=editable-area] [data-bgi]:hover img {
-  filter: brightness(90%);
+
+[data-bge-component$='-editable-area'] {
+	&[data-bge-component-mode='visual'] {
+		iframe {
+			display: block;
+			margin-block: 0;
+			margin-inline: auto;
+			overflow: hidden;
+			border: none;
+		}
+
+		textarea {
+			display: none;
+		}
+	}
+
+	&[data-bge-component-mode='source'] {
+		iframe {
+			display: none;
+		}
+	}
 }
-[data-bge-component=editable-area] [data-bgi] a,
-[data-bge-component=editable-area] [data-bgi] area,
-[data-bge-component=editable-area] [data-bgi] button,
-[data-bge-component=editable-area] [data-bgi] input,
-[data-bge-component=editable-area] [data-bgi] label,
-[data-bge-component=editable-area] [data-bgi] select,
-[data-bge-component=editable-area] [data-bgi] summary,
-[data-bge-component=editable-area] [data-bgi] textarea,
-[data-bge-component=editable-area] [data-bgi] iframe {
-  pointer-events: none;
+
+[data-bge-component='editable-area'] [data-bgi] {
+	--outline: none;
+	min-inline-size: 20px;
+	min-block-size: 20px;
+	outline: var(--outline);
+
+	&:where([data-bge-container]:hover &) {
+		--outline: 1px #a6a6a6 dotted;
+	}
+
+	&:hover {
+		--outline: 1px solid var(--bge-ui-primary-color);
+		cursor: pointer;
+		background-color: oklch(from currentcolor l c h / 5%);
+		background-blend-mode: darken;
+
+		img {
+			filter: brightness(90%);
+		}
+	}
+
+	a,
+	area,
+	button,
+	input,
+	label,
+	select,
+	summary,
+	textarea,
+	iframe {
+		pointer-events: none;
+	}
 }
 
 button svg.tabler-icon {
-  inline-size: auto;
-  block-size: 1em;
+	inline-size: auto;
+	block-size: 1em;
 }
 
-[data-bge-editor-ui-component=thumbnail] svg.tabler-icon {
-  inline-size: 100%;
-  block-size: 100%;
+[data-bge-editor-ui-component='thumbnail'] svg.tabler-icon {
+	inline-size: 100%;
+	block-size: 100%;
 }
 
-label:has(input[type=radio][name=bge-scale-type][value=container]) > span::before {
-  content: "コンテナ";
-}
-label:has(input[type=radio][name=bge-scale-type][value=container]) > span:is([data-bge-container^="grid:"] *, [data-bge-container=grid] *)::before {
-  content: "グリッド";
+label:has(input[type='radio'][name='bge-scale-type'][value='container']) {
+	& > span {
+		&::before {
+			content: 'コンテナ';
+		}
+
+		&:is([data-bge-container^='grid:'] *, [data-bge-container='grid'] *) {
+			&::before {
+				content: 'グリッド';
+			}
+		}
+	}
 }
 
-[data-bge-editor-ui=tabs] + * {
-  padding: 1em;
-  margin-block: -1px 1em;
-  border: 1px solid var(--bge-border-color);
-  border-radius: 0.5em;
-}
+[data-bge-editor-ui='tabs'] {
+	& + * {
+		padding: 1em;
+		margin-block: -1px 1em;
+		border: 1px solid var(--bge-border-color);
+		border-radius: 0.5em;
+	}
+}