@bagelink/blox 1.10.17 → 1.10.21

package/dist/style.css

@@ -1,947 +1,200 @@
 
-.button-wrapper[data-v-9a8c014f] {
-	display: flex;
-}
-.button-wrapper.align-left[data-v-9a8c014f] {
-	justify-content: flex-start;
-}
-.button-wrapper.align-center[data-v-9a8c014f] {
-	justify-content: center;
+* {
+	box-sizing: border-box;
 }
-.button-wrapper.align-right[data-v-9a8c014f] {
-	justify-content: flex-end;
+body {
+	margin: 0;
 }
-.btn[data-v-9a8c014f] {
-	display: inline-block;
-	padding: 0.75rem 1.5rem;
-	text-decoration: none;
-	border-radius: 6px;
-	font-weight: 500;
-	transition: all 0.2s;
+.blox-block-wrapper {
+	position: relative;
 	cursor: pointer;
-	border: 2px solid transparent;
-	text-align: center;
 }
-.btn-full-width[data-v-9a8c014f] {
-	width: 100%;
-}
-
-/* Sizes */
-.btn-sm[data-v-9a8c014f] {
-	padding: 0.5rem 1rem;
-	font-size: 0.875rem;
+.blox-block-overlay {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+	pointer-events: auto;
+	transition:
+		box-shadow 0.12s,
+		background 0.12s;
 }
-.btn-md[data-v-9a8c014f] {
-	padding: 0.75rem 1.5rem;
-	font-size: 1rem;
+.blox-block--hovered .blox-block-overlay {
+	box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.5);
+	background: rgba(99, 102, 241, 0.04);
 }
-.btn-lg[data-v-9a8c014f] {
-	padding: 1rem 2rem;
-	font-size: 1.125rem;
+.blox-block--selected .blox-block-overlay {
+	box-shadow: inset 0 0 0 3px #6366f1;
+	background: rgba(99, 102, 241, 0.06);
 }
 
-/* Variants */
-.btn-primary[data-v-9a8c014f] {
-	background: #3b82f6;
-	color: white;
-}
-.btn-primary[data-v-9a8c014f]:hover {
-	background: #2563eb;
-}
-.btn-secondary[data-v-9a8c014f] {
-	background: #6b7280;
-	color: white;
-}
-.btn-secondary[data-v-9a8c014f]:hover {
-	background: #4b5563;
+/* Label badge */
+.blox-block-label {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 20;
+	padding: 2px 8px;
+	font-size: 11px;
+	font-family: system-ui, sans-serif;
+	font-weight: 600;
+	line-height: 20px;
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+	color: #6366f1;
+	background: rgba(99, 102, 241, 0.1);
+	border-bottom-right-radius: 4px;
+	pointer-events: none;
+	white-space: nowrap;
 }
-.btn-outline[data-v-9a8c014f] {
-	background: transparent;
-	border-color: #3b82f6;
-	color: #3b82f6;
+.blox-block-label--selected {
+	color: #fff;
+	background: #6366f1;
 }
-.btn-outline[data-v-9a8c014f]:hover {
-	background: #3b82f6;
-	color: white;
+body.edit-mode .highlight * {
+	outline: var(--bgl-gray) dashed 1px !important;
 }
-.btn-ghost[data-v-9a8c014f] {
+body.edit-mode .emptyStateLight.emptyState *:not(img):empty.vid_empty::before {
 	background: transparent;
-	color: #3b82f6;
-}
-.btn-ghost[data-v-9a8c014f]:hover {
-	background: rgba(59, 130, 246, 0.1);
+	opacity: 0.5;
 }
 
-.container[data-v-05d5aba4] {
-	margin: 0 auto;
-}
-.layout-vertical[data-v-05d5aba4] {
-	display: flex;
-	flex-direction: column;
-}
-.layout-horizontal[data-v-05d5aba4] {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-.layout-grid[data-v-05d5aba4] {
-	display: grid;
-	grid-template-columns: repeat(var(--f164f006), 1fr);
-}
-@media (max-width: 768px) {
-.layout-grid[data-v-05d5aba4] {
-		grid-template-columns: 1fr;
-}
+/* Hide br in p that only contains br - only in edit mode */
+body.edit-mode .emptyState p:has(br:only-child):not(.emptyStateRT p) br {
+	display: none;
 }
 
-.image-wrapper[data-v-d0552dc2] {
-	margin: 0;
-	padding: 0;
-}
-.image-link[data-v-d0552dc2] {
-	display: block;
-}
-.image[data-v-d0552dc2] {
-	width: 100%;
-	height: auto;
+/* Placeholder for empty richText - only in edit mode */
+body.edit-mode .emptyState .richText:empty::before,
+body.edit-mode .emptyState .richText:has(p:only-child > br:only-child)::before {
+	content: "Add your content here - write something meaningful and engaging that will capture your readers' attention. Start by introducing your topic, share your insights, or tell a story that resonates with your audience...";
+	opacity: 0.3;
 	display: block;
 }
-.image-caption[data-v-d0552dc2] {
-	margin-top: 0.5rem;
-	font-size: 0.875rem;
-	color: #6b7280;
-	text-align: center;
-}
-
-.spacer[data-v-11859d36] {
+img:not([src]) {
+	height: 100%;
 	width: 100%;
+	padding: 0.5rem;
+	background:
+		url('../assets/image-icon.svg') no-repeat center center,
+		#ebebea;
+	background-size: 50% 50%;
 }
-
-.text-align-left[data-v-19fd75d2] {
-	text-align: left;
-}
-.text-align-center[data-v-19fd75d2] {
-	text-align: center;
-}
-.text-align-right[data-v-19fd75d2] {
-	text-align: right;
-}
-.text-align-justify[data-v-19fd75d2] {
-	text-align: justify;
-}
-
-.title-wrapper[data-v-aa7f2c92] {
-	margin-bottom: 1rem;
-}
-.title[data-v-aa7f2c92] {
-	margin: 0 0 0.5rem 0;
-	line-height: 1.2;
-}
-.subtitle[data-v-aa7f2c92] {
-	margin: 0;
-	opacity: 0.8;
-}
-.text-align-left[data-v-aa7f2c92] {
-	text-align: left;
-}
-.text-align-center[data-v-aa7f2c92] {
-	text-align: center;
-}
-.text-align-right[data-v-aa7f2c92] {
-	text-align: right;
-}
-
-.responsive-height[data-v-44f7dcf0] {
-		height: var(--height-desktop);
-}
-.responsive-object-fit[data-v-44f7dcf0] {
-		object-fit: var(--object-fit-desktop);
-}
-@media (max-width: 910px) {
-.responsive-height[data-v-44f7dcf0] {
-			height: var(--height-mobile);
-}
-.responsive-object-fit[data-v-44f7dcf0] {
-			object-fit: var(--object-fit-mobile);
-}
-}
-
-.TitleSize[data-v-13d1e7cc] {
-		--TitleSize: 30;
-		--MobileTitleSize: 20;
-		font-size: var(--TitleSize);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-13d1e7cc] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-.mobileMenu .router-link-active.router-link-exact-active.bgl_btn[data-v-351acf8f] {
-		border-bottom: 1px solid var(--bgl-white);
-		font-weight: 800;
-}
-@media screen and (max-width: 910px) {
-.menuLogo[data-v-351acf8f] {
-			width: 140px;
-}
-.mobileMenu[data-v-351acf8f] {
-			transform: translateX(105%);
-			transition: var(--bgl-transition);
-}
-.openMobileMenu[data-v-351acf8f] {
-			transform: translateX(0%);
-			transition: var(--bgl-transition);
-}
-[dir='rtl'] .mobileMenu[data-v-351acf8f] {
-			transform: translateX(-105%);
-}
-[dir='rtl'] .openMobileMenu[data-v-351acf8f] {
-			transform: translateX(0%);
-}
-}
-
-.responsive-grid[data-v-ede9e3db] {
-		grid-template-columns: repeat(var(--desktop-columns), 1fr);
-}
-@media (max-width: 910px) {
-.responsive-grid[data-v-ede9e3db] {
-			grid-template-columns: repeat(var(--mobile-columns), 1fr);
-}
-}
-
-.TitleSize[data-v-6600c2c0] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-6600c2c0] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-.fakeBtn {
-		cursor: pointer;
-}
-
-.TitleSize[data-v-639daae0] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-@media (max-width: 910px) {
-.TitleSize[data-v-639daae0] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-.faqWrap .accordion-head {
-		height: auto !important;
-}
-.faqWrap .accordion-icon {
-		font-size: 24px;
-		color: var(--bgl-primary);
-}
-.faqWrap .accordion-item.accordionCard {
-		background: var(--bgl-box-bg);
-}
-.faqWrap .accordion-item.accordionCard .accordion-icon {
-		background: var(--bgl-primary);
-		color: var(--bgl-white);
-		border-radius: 100%;
-		padding: 1rem;
-}
-
-.TitleSize[data-v-4be9591d] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-.responsive-title-width[data-v-4be9591d] {
-		max-width: var(--title-width-desktop);
-}
-@media (max-width: 910px) {
-.TitleSize[data-v-4be9591d] {
-			font-size: var(--MobileTitleSize);
-}
-.responsive-title-width[data-v-4be9591d] {
-			max-width: var(--title-width-mobile);
-}
-}
-
-.gridBlock {
-		--columns: 1;
-		--rows: 1;
-		--m_columns: 1;
-		--m_rows: 1;
-		--gap: 1rem;
-		--m_gap: 1rem;
-		gap: var(--gap);
-		/* padding: var(--gap); */
-}
-.grid .min-h-150px {
-		min-height: 150px !important;
-}
-.imageGradient {
-		background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0));
-}
-.gridBlock-columns {
-		grid-template-columns: repeat(var(--columns), 1fr);
-}
-.gridBlock-rows {
-		grid-template-rows: repeat(var(--rows), 1fr);
-}
-.gridBox {
-		--column-span: 1;
-		--row-span: 1;
-		--m_column-span: 1;
-		--m_row-span: 1;
-		grid-column: span var(--column-span) / span var(--column-span);
-		grid-row: span var(--row-span) / span var(--row-span);
-}
-	/*
-אם משתמשים בpadding
-.highlight
-.showGrid {
-  position: relative;
-  box-sizing: border-box;
-  background-image:
-    linear-gradient(to right, var(--bgl-white) calc(var(--gap)), transparent var(--gap)),
-    linear-gradient(to bottom, var(--bgl-white) var(--gap), transparent var(--gap));
-  background-size:
-    calc((100% - (var(--columns, 6) + 1) * var(--gap, 1rem)) / var(--columns, 6) + var(--gap, 1rem)) 100%,
-    100% calc((100% - (var(--rows, 3) + 1) * var(--gap, 1rem)) / var(--rows, 3) + var(--gap, 1rem));
-  background-position: left top;
-  background-repeat: repeat;
-	pointer-events: none;
-	outline: var(--gap) solid var(--bgl-white);
-	outline-offset: calc(-1 * var(--gap));
-	filter: drop-shadow(0 0 1px var(--bgl-primary));
-} */
-.highlight .showGrid {
-		display: grid;
-		grid-template-columns: repeat(var(--columns), 1fr);
-		grid-template-rows: repeat(var(--rows), 1fr);
-		gap: var(--gap);
-		box-sizing: border-box;
-		position: relative;
-		--cell-w: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
-		--cell-h: calc((100% - (var(--rows) - 1) * var(--gap)) / var(--rows));
-		background-image:
-			repeating-linear-gradient(
-				to right,
-				transparent 0 calc(var(--cell-w)),
-				var(--bgl-white) calc(var(--cell-w)) calc(var(--cell-w) + var(--gap))
-			),
-			repeating-linear-gradient(
-				to bottom,
-				transparent 0 calc(var(--cell-h)),
-				var(--bgl-white) calc(var(--cell-h)) calc(var(--cell-h) + var(--gap))
-			);
-		outline: 1px solid var(--bgl-primary);
-		filter: drop-shadow(0 0 1px var(--bgl-primary));
-}
-@media screen and (max-width: 910px) {
-.gridBlock {
-			gap: var(--m_gap);
-			/* padding-inline: var(--m_gap); */
-}
-.gridBlockMobile-columns {
-			grid-template-columns: repeat(var(--m_columns), 1fr);
-}
-.gridBlockMobile-rows {
-			grid-template-rows: repeat(var(--m_rows), 1fr);
-}
-.gridBox {
-			grid-column: span var(--m_column-span) / span var(--m_column-span);
-			grid-row: span var(--m_row-span) / span var(--m_row-span);
-}
-.highlight .showGrid {
-			/* display: grid; */
-			/* padding: 0 0.5rem; */
-			width: calc(100% - (var(--m_gap) * 2)) !important;
-			grid-template-columns: repeat(var(--m_columns), 1fr);
-			grid-template-rows: repeat(var(--m_rows), 1fr);
-			gap: var(--m_gap);
-			/* box-sizing: border-box; */
-			/* position: relative; */
-			--cell-w: calc((100% - (var(--m_columns) - 1) * var(--m_gap)) / var(--m_columns));
-			--cell-h: calc((100% - (var(--m_rows) - 1) * var(--m_gap)) / var(--m_rows));
-			background-image:
-				repeating-linear-gradient(
-					to right,
-					transparent 0 calc(var(--cell-w)),
-					var(--bgl-white) calc(var(--cell-w)) calc(var(--cell-w) + var(--m_gap))
-				),
-				repeating-linear-gradient(
-					to bottom,
-					transparent 0 calc(var(--cell-h)),
-					var(--bgl-white) calc(var(--cell-h)) calc(var(--cell-h) + var(--m_gap))
-				);
-			/* outline:1px solid var(--bgl-primary); */
-			/* filter: drop-shadow(0 0 1px var(--bgl-primary)); */
-}
-}
-
-.responsive-spacing[data-v-452babdb] {
-		gap: var(--space-between-desktop);
-}
-.responsive-box-width[data-v-452babdb] {
-		width: var(--box-width-desktop);
-}
-@media (max-width: 910px) {
-.responsive-spacing[data-v-452babdb] {
-			gap: var(--space-between-mobile);
-}
-.responsive-box-width[data-v-452babdb] {
-			width: var(--box-width-mobile);
-}
-}
-
-.TitleSize[data-v-07ff7bf0] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-.responsive-title-width[data-v-07ff7bf0] {
-		max-width: var(--title-width-desktop);
-}
-.responsive-spacing[data-v-07ff7bf0] {
-		gap: var(--space-between-desktop);
-}
-.responsive-icon-grid[data-v-07ff7bf0] {
-		grid-template-columns: var(--icon-size-desktop) auto;
-}
-@media (max-width: 910px) {
-.TitleSize[data-v-07ff7bf0] {
-			font-size: var(--MobileTitleSize);
-}
-.responsive-title-width[data-v-07ff7bf0] {
-			max-width: var(--title-width-mobile);
-}
-.responsive-spacing[data-v-07ff7bf0] {
-			gap: var(--space-between-mobile);
-}
-.responsive-icon-grid[data-v-07ff7bf0] {
-			grid-template-columns: var(--icon-size-mobile) auto;
-}
-}
-
-.Handlers {
-		display: flex;
-		justify-content: center;
-		gap: 0.5rem;
-		margin: 1rem;
-}
-.sides {
-		top: calc(50% - 2rem);
-}
-
-.linkHover:hover .opacity-7 {
-		opacity: 1;
-}
-
-.grayColor {
-		filter: grayscale(100%);
-}
-.grayColor:hover {
-		filter: grayscale(0%);
-}
-.responsive-spacing {
-		column-gap: var(--space-between-desktop);
-}
-.responsive-item-size {
-		height: calc(var(--item-size-desktop) * 2);
-		max-width: calc(var(--item-size-desktop) * 2.6);
-}
-@media (max-width: 910px) {
-.responsive-spacing {
-			column-gap: var(--space-between-mobile);
-}
-.responsive-item-size {
-			height: calc(var(--item-size-mobile) * 2);
-			max-width: calc(var(--item-size-mobile) * 2.6);
-}
-}
-
-	/* Add your styles here */
-
-.sidePop {
-		top: 40%;
-}
-.fadePopup-enter-active,
-	.fadePopup-leave-active {
-		transition: all 0.3s ease;
-}
-.fadePopup-enter-from,
-	.fadePopup-leave-to {
-		opacity: 0;
-}
-.responsive-width {
-		max-width: var(--width-desktop);
-}
-@media (max-width: 910px) {
-.responsive-width {
-			max-width: var(--width-mobile);
-}
-}
-
-.responsive-space[data-v-8702adbf] {
-		height: var(--desktop-height);
-		margin-bottom: var(--desktop-margin);
-}
-@media (max-width: 910px) {
-.responsive-space[data-v-8702adbf] {
-			height: var(--mobile-height);
-			margin-bottom: var(--mobile-margin);
-}
-}
-
-.tabBlock .active {
-	background: var(--bgl-popup-bg) !important;
-	color: var(--bgl-popup-bgText) !important;
-}
-
-.NameSize[data-v-88b050bd] {
-		font-size: var(--NameSize);
-}
-.responsive-image-height[data-v-88b050bd] {
-		max-height: var(--img-height-desktop);
-}
-.responsive-name-size[data-v-88b050bd] {
-		font-size: var(--name-size-desktop);
-}
-.responsive-spacing[data-v-88b050bd] {
-		gap: var(--space-desktop);
-}
-@media (max-width: 910px) {
-.responsive-image-height[data-v-88b050bd] {
-			max-height: var(--img-height-mobile);
-}
-.responsive-name-size[data-v-88b050bd] {
-			font-size: var(--name-size-mobile);
-}
-.responsive-spacing[data-v-88b050bd] {
-			gap: var(--space-mobile);
-}
-}
-
-.responsive-image-height[data-v-f5cdbfee] {
-		max-height: var(--img-height-desktop);
-}
-@media (max-width: 910px) {
-.responsive-image-height[data-v-f5cdbfee] {
-			max-height: var(--img-height-mobile);
-}
-}
-
-.Handlers {
-		display: flex;
-		justify-content: center;
-		gap: 0.5rem;
-		margin: 1rem;
-}
-.sides {
-		top: calc(50% - 2rem);
-}
-
-.TitleSize[data-v-1a468adf] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-.responsive-height[data-v-1a468adf] {
-		min-height: var(--height-desktop);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-1a468adf] {
-			font-size: var(--MobileTitleSize);
-}
-.responsive-height[data-v-1a468adf] {
-			min-height: var(--height-mobile);
-}
-}
-
-.TitleSize[data-v-24c70320] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-24c70320] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-.TitleSize[data-v-bee838c4] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-bee838c4] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-	/* Responsive colors using CSS variables */
-.title-responsive-colors[data-v-bee838c4] {
-		/* Desktop colors (default) */
-		color: var(--text-color-desktop) !important;
-		background-color: var(--bg-color-desktop) !important;
-}
-
-	/* Mobile override */
-@media (max-width: 910px) {
-.title-responsive-colors[data-v-bee838c4] {
-			color: var(--text-color-mobile) !important;
-			background-color: var(--bg-color-mobile) !important;
-}
-}
-
-.TitleSize[data-v-b842227e] {
-		--TitleSize: 40;
-		--MobileTitleSize: 30;
-		font-size: var(--TitleSize);
-}
-@media screen and (max-width: 910px) {
-.TitleSize[data-v-b842227e] {
-			font-size: var(--MobileTitleSize);
-}
-}
-
-.vid_empty {
-		background: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/bagelBlocks/vid-icon.svg) no-repeat center !important;
-		background-size: 100px !important;
-}
-
-/* Global styles for the Blox page */
-.blox-page-wrapper {
-	min-height: 100vh;
-	background-color: #fff;
-}
-.blox-page-wrapper * {
-	box-sizing: border-box;
-}
-.blockPageWrap {
-	margin: 0 !important;
-	max-width: none !important;
-	width: 100% !important;
-	padding-top: 0.001rem;
-	min-height: 100vh;
-	background-color: #fff;
-}
-.main-content {
-	margin-inline-start: 0 !important;
-}
-/* Placeholder text for empty elements in edit mode - only for blocks with editable content */
-body.blox-edit-mode .blox-selected.has-editable-content p:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h1:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h2:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h3:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h4:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h5:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content h6:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content span:empty:before,
-body.blox-edit-mode .blox-selected.has-editable-content div[contenteditable]:empty:before {
-	content: "write something..." !important;
-	opacity: 0.4 !important;
-	color: #9ca3af !important;
-	font-style: italic !important;
-	pointer-events: none !important;
-}
-
-/* Placeholder text for elements with only br tag in edit mode - only for blocks with editable content */
-body.blox-edit-mode .blox-selected.has-editable-content p:has(br:only-child):before {
-	content: "write something..." !important;
-	opacity: 0.4 !important;
-	color: #9ca3af !important;
-	font-style: italic !important;
-	pointer-events: none !important;
-}
-
-/* Margin visualization like Chrome DevTools */
-body.blox-edit-mode .blox-selected {
-	position: relative;
+body.edit-mode .emptyState .vid_empty::before {
+	content: none !important;
 }
-
-/* Create margin visualization overlay - target the inner div with styles */
-body.blox-edit-mode .blox-selected>div::after {
-	content: '';
-	position: absolute;
-	pointer-events: none;
-	z-index: 999;
-
-	/* Calculate margin area using CSS variables */
-	top: calc(-1 * var(--margin-top, 0rem));
-	bottom: calc(-1 * var(--margin-bottom, 0rem));
-	left: -100vw;
-	right: -100vw;
-
-	/* Orange color like Chrome DevTools - but only show margin areas */
+body.edit-mode .emptyState .vid_empty {
 	background:
-		linear-gradient(to bottom,
-			rgba(255, 155, 0, 0.3) 0,
-			rgba(255, 155, 0, 0.3) var(--margin-top, 0rem),
-			transparent var(--margin-top, 0rem),
-			transparent calc(100% - var(--margin-bottom, 0rem)),
-			rgba(255, 155, 0, 0.3) calc(100% - var(--margin-bottom, 0rem)),
-			rgba(255, 155, 0, 0.3) 100%);
-
-	/* Only show when there are actual margins */
-	opacity: var(--has-margin, 0);
+		url('../assets/vid-icon.svg') no-repeat center center,
+		#ebebea !important;
+	background-size: 25% 25% !important;
 }
-
-/* Loading state */
-.blox-loading[data-v-7e262aee] {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	font-size: 1.2rem;
-	color: #666;
+.bagel-input input[type='color'] {
+	outline: 1px solid var(--dt-5);
+	outline-offset: -5px !important;
 }
-
-/* Empty states */
-.blox-empty-state[data-v-7e262aee] {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	text-align: center;
-	font-size: 1.2rem;
-	color: #666;
-	padding: 2rem;
-}
-.blox-empty-preview[data-v-7e262aee] {
-	min-height: 100vh;
-	background: #fff;
+.modal-footer .bgl_btn-green {
+	--btn-color: #fff !important;
 }
-
-/* Block wrapper */
-.blox-block-wrapper[data-v-7e262aee] {
-	position: relative;
-	cursor: pointer;
+.block-form-container .bagel-input.bgl-checkbox {
+	background: var(--dt-1);
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	width: 100%;
 }
-
-/* Interactive elements should be clickable in preview mode */
-.blox-preview-mode .blox-block-wrapper[data-v-7e262aee] * {
-	pointer-events: auto !important;
-	cursor: auto;
+.block-form-container .bagel-input.bgl-checkbox:has(:checked) {
+	background: #2e5bff48 !important;
 }
-
-/* In edit mode, prevent interactions with inner elements except buttons/links */
-body.blox-edit-mode .blox-block-wrapper[data-v-7e262aee] * {
-	pointer-events: none;
+.block-form-container .bagel-input.bgl-checkbox label {
+	flex-grow: 1;
 }
-body.blox-edit-mode .blox-block-wrapper button[data-v-7e262aee],
-body.blox-edit-mode .blox-block-wrapper a[data-v-7e262aee],
-body.blox-edit-mode .blox-block-wrapper input[data-v-7e262aee],
-body.blox-edit-mode .blox-block-wrapper textarea[data-v-7e262aee],
-body.blox-edit-mode .blox-block-wrapper select[data-v-7e262aee] {
-	pointer-events: auto;
-	position: relative;
-	z-index: 10;
-}
-
-/* Block label */
-.blox-block-label[data-v-7e262aee] {
-	position: absolute;
-	top: 0;
-	left: 0;
-	font-size: 0.625rem;
-	padding: 0.25rem 0.5rem;
-	color: white;
-	background: #9ca3af;
-	border-bottom-right-radius: 5px;
-	z-index: 10001;
+.reorderHover {
 	opacity: 0;
-	transition: opacity 0.2s;
+	cursor: grab;
 }
-
-/* Highlight state */
-.blox-highlight[data-v-7e262aee] {
-	outline: 1px solid #9ca3af;
-	outline-offset: -1px;
+.reorderHover:active {
+	cursor: grabbing !important;
 }
-.blox-highlight .blox-block-label[data-v-7e262aee] {
+.sectionAccordionBlock:hover .reorderHover {
 	opacity: 1;
-	background: #9ca3af;
 }
-.blox-highlight[data-v-7e262aee] * {
-	outline: 1px dashed #9ca3af;
-}
-
-/* Selected state */
-.blox-selected[data-v-7e262aee] {
-	background: rgba(88, 191, 235, 0.08) !important;
-	outline: 2px solid #3b82f6 !important;
-	outline-offset: -2px;
-	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-}
-.blox-selected[data-v-7e262aee] * {
-	outline: 2px dashed #3b83f639 !important;
-}
-.blox-selected .blox-block-label[data-v-7e262aee] {
+.site-iframe {
+	transform-origin: top right;
+	width: 100%;
+	height: 100%;
+	max-width: unset;
+	transition: all 100ms ease;
+}
+.mobile-view {
+	border-radius: 10px;
+}
+.add-sec-btn {
+	height: 18px;
+	padding-top: 2px;
+	user-select: none;
+	margin-top: -12px;
+	margin-bottom: -12px;
+	z-index: 2;
+}
+.add-sec-btn:hover * {
 	opacity: 1;
-	background: #3b82f6;
-}
-
-/* Missing component warning */
-.blox-missing-component[data-v-7e262aee] {
-	padding: 2rem;
-	background: #fef3c7;
-	border: 2px dashed #f59e0b;
-	border-radius: 8px;
-	text-align: center;
-	font-size: 1rem;
-	color: #92400e;
-}
-
-/* Block overlay for click detection - but allow buttons to work */
-.block-overlay[data-v-7e262aee] {
-	pointer-events: none;
+	background: var(--bgl-primary-tint);
 }
-
-/* Allow interactive elements to receive events */
-.block-wrapper button[data-v-7e262aee],
-.block-wrapper a[data-v-7e262aee],
-.block-wrapper input[data-v-7e262aee],
-.block-wrapper textarea[data-v-7e262aee],
-.block-wrapper select[data-v-7e262aee] {
-	pointer-events: auto;
-	position: relative;
-	z-index: 10;
-}
-
-/* Remove all pointer-events CSS - handle only via JavaScript */
-/* In preview mode, ensure all interactions work */
-.preview-mode .block-wrapper[data-v-7e262aee] * {
-	pointer-events: auto !important;
-}
-.highlight[data-v-7e262aee],
-.editMode[data-v-7e262aee]:hover {
-	animation: highlighter-7e262aee 1.5s ease-in-out forwards;
-	background: #9ca3af20;
-}
-.highlight[data-v-7e262aee],
-.editMode[data-v-7e262aee]:hover::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	outline: 1px solid #9ca3af;
-	outline-offset: -1px;
-	/* z-index: 9999; */
-}
-.selected[data-v-7e262aee] {
-	background: #58bfeb15 !important;
-	animation: none !important;
-	box-shadow: 0 0 0 4px rgba(88, 191, 235, 0.1);
-}
-.selected[data-v-7e262aee]::after {
-	outline: 2px solid var(--bgl-primary) !important;
-	outline-offset: -2px !important;
-	content: '';
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	/* z-index: 10000; */
-}
-
-/* Padding visualization - show as inner area */
-.selected[data-v-7e262aee] {
-	position: relative;
-}
-
-/* Create a wrapper for margin visualization */
-.selected .responsive-colors[data-v-7e262aee],
-.highlight .responsive-colors[data-v-7e262aee] {
-	position: relative;
+.add-sec-btn * {
+	background: var(--bgl-gray-light);
+	height: 14px;
+	opacity: 0;
 }
-
-/* Margin visualization using ::before */
-.selected .responsive-colors[data-v-7e262aee]::after,
-.highlight .responsive-colors[data-v-7e262aee]::after {
+.add-sec-btn::before {
 	content: '';
 	position: absolute;
-	pointer-events: none;
-	z-index: 0;
-
-	/* Get margin values from CSS variables set by the component */
-	top: calc(var(--margin-top, 0px) * -1);
-	bottom: calc(var(--margin-bottom, 0px) * -1);
-	left: -100vw;
-	/* Extend to full viewport width */
-	right: -100vw;
-	/* Extend to full viewport width */
-	background: rgb(90, 160, 255, 0.05);
-	mix-blend-mode: multiply;
-	border-top: 2px dashed rgba(46, 91, 255, 0.2);
-	border-bottom: 2px dashed rgba(46, 91, 255, 0.2);
-	box-sizing: content-box;
-
-	/* Only show if there's actual margin */
-	display: var(--has-margin, none);
-}
-.selected .compName[data-v-7e262aee] {
-	background: var(--bgl-primary) !important;
-	opacity: 1 !important;
-}
-
-/* Override hover styles when element is selected */
-.selected.highlight .compName[data-v-7e262aee] {
-	background: var(--bgl-primary) !important;
+	height: 1px;
+	background: var(--border-color);
+	width: 100%;
+	top: 50%;
+	inset-inline: 0;
+	opacity: 0.3;
+	transition: all 200ms;
 }
-
-/* Preview mode styles */
-.preview-mode .block-wrapper[data-v-7e262aee] {
-	/* Remove pointer events and styling in preview mode */
-	pointer-events: auto !important;
+.add-sec-btn:hover:before {
+	opacity: 1;
+	background: var(--bgl-primary-tint);
 }
-.compName[data-v-7e262aee] {
-	opacity: 0;
-	background: var(--bgl-primary);
-	/* border-top-left-radius: 5px; */
-	border-bottom-right-radius: 5px;
-	z-index: 10001;
+[dir='rtl'] .inline-toolbar-content .bgl_btn-icon {
+	transform: rotate(0) !important;
 }
-.highlight .compName[data-v-7e262aee] {
-	opacity: 1 !important;
-	background: #9ca3af !important;
+@keyframes spin {
+from {
+		transform: rotate(0deg);
 }
-@keyframes highlighter-7e262aee {
 to {
-		background: #9ca3af00;
-}
+		transform: rotate(360deg);
 }
-
-/* Global styles for the Blox page */
-.blox-page-wrapper {
-	min-height: 100vh;
-	background-color: #fff;
 }
-.blox-page-wrapper * {
-	box-sizing: border-box;
+.spin {
+	animation: spin 5s ease-in-out infinite;
+	display: block;
 }
-
-/* Loading state */
-.blox-loading[data-v-ad77f76e] {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	font-size: 1.2rem;
-	color: #666;
+.smallerUrl .opacity-7 {
+	font-size: 9px !important;
+	opacity: 0.3 !important;
+	direction: ltr;
+	padding: 0 !important;
+	margin: 0 !important;
+	width: fit-content !important;
 }
-
-/* Missing component warning */
-.blox-missing-component[data-v-ad77f76e] {
-	padding: 2rem;
-	background: #fee;
-	border: 2px solid #faa;
-	border-radius: 8px;
-	text-align: center;
-	font-size: 1rem;
-	color: #c00;
+.line-hover,
+.underline-hover,
+.hover-line,
+.hover-underline {
+	cursor: pointer;
+	transition: all 400ms ease;
+	position: relative;
+	border-bottom: 1px solid transparent;
+	border-radius: 0 !important;
+}
+.line-hover:hover,
+.underline-hover:hover,
+.hover-line:hover,
+.hover-underline:hover {
+	border-bottom: 1px solid currentColor;
 }