.wp-block-sfb-container {
	// Default: desktop values
	padding-top: var(--sfb-padding-desktop-top);
	padding-right: var(--sfb-padding-desktop-right);
	padding-bottom: var(--sfb-padding-desktop-bottom);
	padding-left: var(--sfb-padding-desktop-left);

	margin-top: var(--sfb-margin-desktop-top);
	margin-right: var(--sfb-margin-desktop-right);
	margin-bottom: var(--sfb-margin-desktop-bottom);
	margin-left: var(--sfb-margin-desktop-left);

	// Tablet
	@media (max-width: 1024px) {
		padding-top: var(--sfb-padding-tablet-top, var(--sfb-padding-desktop-top));
		padding-right: var(
			--sfb-padding-tablet-right,
			var(--sfb-padding-desktop-right)
		);
		padding-bottom: var(
			--sfb-padding-tablet-bottom,
			var(--sfb-padding-desktop-bottom)
		);
		padding-left: var(
			--sfb-padding-tablet-left,
			var(--sfb-padding-desktop-left)
		);

		margin-top: var(--sfb-margin-tablet-top, var(--sfb-margin-desktop-top));
		margin-right: var(
			--sfb-margin-tablet-right,
			var(--sfb-margin-desktop-right)
		);
		margin-bottom: var(
			--sfb-margin-tablet-bottom,
			var(--sfb-margin-desktop-bottom)
		);
		margin-left: var(--sfb-margin-tablet-left, var(--sfb-margin-desktop-left));
	}

	// Mobile
	@media (max-width: 782px) {
		padding-top: var(
			--sfb-padding-mobile-top,
			var(--sfb-padding-tablet-top, var(--sfb-padding-desktop-top))
		);
		padding-right: var(
			--sfb-padding-mobile-right,
			var(--sfb-padding-tablet-right, var(--sfb-padding-desktop-right))
		);
		padding-bottom: var(
			--sfb-padding-mobile-bottom,
			var(--sfb-padding-tablet-bottom, var(--sfb-padding-desktop-bottom))
		);
		padding-left: var(
			--sfb-padding-mobile-left,
			var(--sfb-padding-tablet-left, var(--sfb-padding-desktop-left))
		);

		margin-top: var(
			--sfb-margin-mobile-top,
			var(--sfb-margin-tablet-top, var(--sfb-margin-desktop-top))
		);
		margin-right: var(
			--sfb-margin-mobile-right,
			var(--sfb-margin-tablet-right, var(--sfb-margin-desktop-right))
		);
		margin-bottom: var(
			--sfb-margin-mobile-bottom,
			var(--sfb-margin-tablet-bottom, var(--sfb-margin-desktop-bottom))
		);
		margin-left: var(
			--sfb-margin-mobile-left,
			var(--sfb-margin-tablet-left, var(--sfb-margin-desktop-left))
		);
	}

	// Flexbox styles for container block
	// Force flex when is-flex class is present
	&.is-flex {
		display: flex;

		// Desktop flexbox properties - only apply when flex
		flex-direction: var(--sfb-flex-direction-desktop, row);
		justify-content: var(--sfb-justify-content-desktop, flex-start);
		align-items: var(--sfb-align-items-desktop, stretch);
		align-content: var(--sfb-align-content-desktop, normal);
		flex-wrap: var(--sfb-flex-wrap-desktop, nowrap);
		row-gap: var(--sfb-row-gap-desktop, 0);
		column-gap: var(--sfb-column-gap-desktop, 0);

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

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

// Responsive flex item styles.
.wp-block-sfb-container.is-flex > * {
	// Desktop
	flex: var(--flex-desktop, 1 1 auto);
	align-self: var(--align-self-desktop, auto);
	order: var(--order-desktop, 0);

	// Tablet
	@media (max-width: 782px) {
		flex: var(--flex-tablet, var(--flex-desktop, 1 1 100%));
		align-self: var(--align-self-tablet, var(--align-self-desktop, auto));
		order: var(--order-tablet, var(--order-desktop, 0));
		width: 100%;
	}

	// Mobile
	@media (max-width: 600px) {
		flex: var(--flex-mobile, var(--flex-tablet, var(--flex-desktop, 1 1 100%)));
		align-self: var(
			--align-self-mobile,
			var(--align-self-tablet, var(--align-self-desktop, auto))
		);
		order: var(--order-mobile, var(--order-tablet, var(--order-desktop, 0)));
	}
}
// Editor-specific styles to override WordPress defaults
.editor-styles-wrapper .wp-block-sfb-container.is-flex {
	display: flex !important;

	// Override WordPress block editor inner blocks wrapper
	> .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		width: 100%;
		flex-direction: inherit;
		justify-content: inherit;
		align-items: inherit;
		align-content: inherit;
		flex-wrap: inherit;
		row-gap: inherit;
		column-gap: inherit;
	}
}