/* ToanTuDuy Shapes & Grids - frontend and TinyMCE visual editor styles */
.ttd-figure-wrap {
	display: block !important;
	position: relative !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-height: 1px !important;
	margin: 18px 0 !important;
	padding: 4px !important;
	overflow: visible !important;
	line-height: 0 !important;
	clear: both !important;
}

.ttd-grid {
	display: inline-grid !important;
	box-sizing: content-box !important;
	gap: 2px !important;
	padding: 2px !important;
	margin: 0 !important;
	vertical-align: top !important;
	line-height: 0 !important;
	isolation: isolate !important;
}

.ttd-grid > .ttd-grid__cell {
	display: block !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	line-height: 0 !important;
	overflow: hidden !important;
	color: transparent !important;
	font-size: 1px !important;
}

.ttd-shape {
	display: block !important;
	box-sizing: border-box !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #2563eb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 1px !important;
	line-height: 0 !important;
}

.ttd-shape--square,
.ttd-shape--rectangle {
	min-width: 0 !important;
	min-height: 0 !important;
}

/* Triangle uses an outer coloured triangle and an inset inner triangle,
   therefore it keeps a visible outline without relying on SVG. */
.ttd-shape--triangle {
	position: relative !important;
	border: 0 !important;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%) !important;
	overflow: hidden !important;
}

.ttd-shape--triangle > span {
	position: absolute !important;
	display: block !important;
	left: 4px !important;
	right: 4px !important;
	top: 5px !important;
	bottom: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%) !important;
}

/* Equilateral triangle grid for triangle-counting exercises. The line spans
   contain a non-breaking space so TinyMCE does not discard them on save. */
.ttd-triangle-grid {
	position: relative !important;
	display: inline-block !important;
	box-sizing: content-box !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: top !important;
	line-height: 0 !important;
	font-size: 0 !important;
	isolation: isolate !important;
	overflow: visible !important;
}

.ttd-triangle-grid__fill {
	position: absolute !important;
	display: block !important;
	inset: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ttd-fill, #ffffff) !important;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%) !important;
	z-index: 0 !important;
	pointer-events: none !important;
	color: transparent !important;
	font-size: 1px !important;
	line-height: 0 !important;
}

.ttd-triangle-grid__line {
	position: absolute !important;
	display: block !important;
	height: 2px !important;
	min-height: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ttd-border, #2563eb) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform-origin: 0 50% !important;
	z-index: 1 !important;
	pointer-events: none !important;
	color: transparent !important;
	font-size: 1px !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

/* Classic Editor: prevent the editor iframe from clipping the very first/last
   pixel of transformed triangle lines, and make inserted figures selectable. */
body#tinymce .ttd-figure-wrap,
.mce-content-body .ttd-figure-wrap {
	padding: 8px 4px 12px !important;
	overflow: visible !important;
	cursor: default;
}

body#tinymce .ttd-triangle-grid,
.mce-content-body .ttd-triangle-grid {
	overflow: visible !important;
}