@use "./style.scss";

.wp-block-sfb-container {
	outline: 1px dashed rgba(0, 0, 0, 0.1);
}

// Editor-specific overrides for flexbox container
.wp-block-sfb-container.is-flex {
	.block-editor-inner-blocks {
		width: 100% !important;

		.block-editor-block-list__layout {
			display: flex !important;
			// Use the CSS variables directly instead of inherit
			flex-direction: var(--sfb-flex-direction-desktop, row) !important;
			justify-content: var(
				--sfb-justify-content-desktop,
				flex-start
			) !important;
			align-items: var(--sfb-align-items-desktop, stretch) !important;
			align-content: var(--sfb-align-content-desktop, normal) !important;
			flex-wrap: var(--sfb-flex-wrap-desktop, nowrap) !important;
			row-gap: var(--sfb-row-gap-desktop, 0) !important;
			column-gap: var(--sfb-column-gap-desktop, 0) !important;

			// Tablet breakpoint
			@media (max-width: 782px) {
				flex-direction: var(
					--sfb-flex-direction-tablet,
					var(--sfb-flex-direction-desktop, row)
				) !important;
				justify-content: var(
					--sfb-justify-content-tablet,
					var(--sfb-justify-content-desktop, flex-start)
				) !important;
				align-items: var(
					--sfb-align-items-tablet,
					var(--sfb-align-items-desktop, stretch)
				) !important;
				align-content: var(
					--sfb-align-content-tablet,
					var(--sfb-align-content-desktop, normal)
				) !important;
				flex-wrap: var(
					--sfb-flex-wrap-tablet,
					var(--sfb-flex-wrap-desktop, nowrap)
				) !important;
				row-gap: var(
					--sfb-row-gap-tablet,
					var(--sfb-row-gap-desktop, 0)
				) !important;
				column-gap: var(
					--sfb-column-gap-tablet,
					var(--sfb-column-gap-desktop, 0)
				) !important;
			}

			// Mobile breakpoint
			@media (max-width: 600px) {
				flex-direction: var(
					--sfb-flex-direction-mobile,
					var(
						--sfb-flex-direction-tablet,
						var(--sfb-flex-direction-desktop, row)
					)
				) !important;
				justify-content: var(
					--sfb-justify-content-mobile,
					var(
						--sfb-justify-content-tablet,
						var(--sfb-justify-content-desktop, flex-start)
					)
				) !important;
				align-items: var(
					--sfb-align-items-mobile,
					var(--sfb-align-items-tablet, var(--sfb-align-items-desktop, stretch))
				) !important;
				align-content: var(
					--sfb-align-content-mobile,
					var(
						--sfb-align-content-tablet,
						var(--sfb-align-content-desktop, normal)
					)
				) !important;
				flex-wrap: var(
					--sfb-flex-wrap-mobile,
					var(--sfb-flex-wrap-tablet, var(--sfb-flex-wrap-desktop, nowrap))
				) !important;
				row-gap: var(
					--sfb-row-gap-mobile,
					var(--sfb-row-gap-tablet, var(--sfb-row-gap-desktop, 0))
				) !important;
				column-gap: var(
					--sfb-column-gap-mobile,
					var(--sfb-column-gap-tablet, var(--sfb-column-gap-desktop, 0))
				) !important;
			}
		}
	}
}