/**
 * Shared editor-only styles for all AxcelersBlocks blocks.
 *
 * Only editor UI concerns live here: CodeMirror, dynamic tag chips,
 * block text-area sizing, appender layout, etc.
 *
 * Add sections below as each block is migrated to the attribute-driven approach.
 */

// ── CodeMirror (custom CSS panel, used across all blocks) ────────────────────
@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/material.css';

// ── Inspector control styles (style tabs, control panels, icon modal) ────────
// These style the block inspector sidebar, which renders OUTSIDE the editor
// canvas iframe. They must load via enqueue_block_editor_assets (this file),
// not as a block `style` asset — otherwise they only reach the iframe and the
// side panel is unstyled in block-theme (iframed) editors.
@import '../components/style.scss';

// ── Shared inner-blocks appender (LabeledAppender component) ──────────────────
// Base chrome for the custom "+" appender used across blocks (list, list item,
// table cell …). A clean, page-builder style affordance that replaces WordPress'
// oversized default circle. Blocks may add more specific rules for size/layout.
.axcelersblocks-appender {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: auto;
	min-height: 0;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var( --wp-admin-theme-color, #3858e9 );
	background: rgba( 30, 30, 30, 0.03 );
	border: 1px dashed rgba( 30, 30, 30, 0.2 );
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

	svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

	&:hover,
	&:focus {
		color: #fff;
		background: var( --wp-admin-theme-color, #3858e9 );
		border-color: var( --wp-admin-theme-color, #3858e9 );
		box-shadow: none;
	}
}

// Keep the appender container in normal flow (WordPress core sometimes positions
// `.block-list-appender` absolutely, which makes the "+" overlap the content).
.block-list-appender:has( .axcelersblocks-appender ) {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	display: block;
	margin: 6px 0 2px;
	width: max-content;
	max-width: 100%;
}

// ── Dynamic tag preview UI (heading, bodycopy) ───────────────────────────────
.axcelersblocks-dynamic-preview {
	display: inline;
}

.axcelersblocks-dynamic-chip {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	border-radius: 3px;
	background: rgba(0, 124, 186, 0.1);
	color: #007cba;
	border: 1px solid rgba(0, 124, 186, 0.25);
	font-size: 0.72em;
	font-family: monospace;
	font-weight: 600;
	vertical-align: middle;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;

	&--link::before {
		content: '↗ ';
	}
}

// ── Outline control (Linked Focus / Linked Active tabs) ──────────────────────
// Self-contained here so it always loads in the inspector via shared-editor.css,
// independent of any block's style bundle. Mirrors the Border control's compact
// "Width │ Style ▾ │ ◯color" row.
.outline-controls-wrapper {
	.components-panel__body-toggle {
		.title {
			display: flex;
			align-items: center;
			gap: 8px;
			svg {
				width: 24px;
				height: 24px;
			}
		}
	}

	.border-control {
		margin-bottom: 8px;

		.border-control-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;

			h3 {
				margin-bottom: 0;
			}

			.components-button {
				width: 24px;
				height: 24px;
				min-width: 24px;
				padding: 0;
				svg {
					width: 24px;
					height: 24px;
				}
			}
		}

		.border-control-linked {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 8px;

			.components-base-control {
				margin-bottom: 0;
				.components-base-control__field {
					margin-bottom: 0;
				}
			}

			.components-dropdown {
				&.border-style .components-button {
					font-size: 10px;
					text-transform: uppercase;
					font-weight: 500;
					color: #000000;
					border: 1px solid #000000;
					box-shadow: none;
					height: 32px;
					width: 85px;
					align-items: center;
					justify-content: center;
				}

				&.border-color .components-button {
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
					border: 1px solid #000000;
					box-shadow: none;
					span {
						display: block;
						width: 16px;
						height: 16px;
						border-radius: 50%;
						border: 1px solid #eee;
						background-color: transparent;
					}
				}
			}
		}

		// The Outline Offset field sits directly under the linked row.
		> .axb-unit-control {
			margin-top: 8px;
		}
	}

	// Dropdown list of outline styles (None / Solid / Dashed …).
	.border-style-options {
		display: flex;
		flex-direction: column;
		padding: 4px;
		min-width: 120px;
		.components-button {
			justify-content: flex-start;
			width: 100%;
		}
	}
}

// ── Heading editor layout ────────────────────────────────────────────────────
.axcelersblocks-heading__text {
	width: 100%;

	// When tagName is changed to span, force block display so it fills the editor width.
	&[data-tag-name="span"] {
		display: block;
		width: 100%;
	}

	// No icon: the content fills the editor width for comfortable editing.
	&:not( .has-icon ) .axcelersblocks-heading__content,
	&:not( .has-icon ) .axcelersblocks-heading__content.block-editor-rich-text__editable {
		display: block;
		width: 100%;
		min-width: 100%;
	}

	// With an icon, the content flexes beside it (and can shrink).
	&.has-icon .axcelersblocks-heading__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	// Inline <a> tags inside the RichText area (user-added links within text)
	// should stay inline — do not change their display.
	a {
		display: inline;
	}
}

// ── Bodycopy editor layout ───────────────────────────────────────────────────
.axcelersblocks-bodycopy__text {
	// Link colors in editor mirror the frontend structural rule.
	.axcelersblocks-bodycopy__content a,
	.axcelersblocks-bodycopy__content a:visited,
	.axcelersblocks-bodycopy__content a:hover,
	.axcelersblocks-bodycopy__content a:focus {
		color: inherit;
		text-decoration-color: currentColor;
	}

	// When tagName is changed to span, force block display so it fills the editor width.
	&[data-tag-name="span"] {
		display: block;
		width: 100%;
	}

	// No icon: the content fills the editor width for comfortable editing.
	&:not( .has-icon ) .axcelersblocks-bodycopy__content,
	&:not( .has-icon ) .axcelersblocks-bodycopy__content.block-editor-rich-text__editable {
		display: block;
		width: 100%;
		min-width: 100%;
	}

	// With an icon, the content flexes beside it (and can shrink) instead of
	// forcing full width and pushing the icon out.
	&.has-icon .axcelersblocks-bodycopy__content {
		flex: 1 1 auto;
		min-width: 0;
	}
}