/*=============================================
=            Responsive column mixins          =
=============================================*/

// Core's Columns block responds to the *viewport*:
//
//   @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }
//   @media (max-width: 781px) {
//     .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
//       flex-basis: 100% !important;
//     }
//   }
//
// The layouts instead respond to their *container* (.affr-layout sets
// `container-type: inline-size`, and the rules use @container queries).
// When the composable patterns use core Columns, both systems run at once and
// the layout stacks at the wrong widths.
//
// This mixin neutralises core's viewport rules and drives the layout purely
// from container queries, so the layouts stack like the legacy blocks did.
//
// @param $bases  Map of column class name -> desktop flex-basis.
// @param $stack  Map of container max-width -> list of column class names to stack.
// @param $gap    Column gap. Defaults to 0: the patterns use percentage bases
//                that sum to 100%, and a theme gap would push them past 100%
//                and cause unwanted wrapping.
@mixin affr-columns($bases, $stack: (), $gap: 0) {
	// Core forces `nowrap` at >=782px viewport; restore wrapping so the
	// container queries below can actually stack the columns.
	flex-wrap: wrap !important;
	gap: $gap !important;

	// Re-assert the intended desktop widths. Core would otherwise force every
	// column to 100% at <=781px viewport, even when the block is wide.
	> .wp-block-column {
		@each $name, $basis in $bases {
			&.#{$name} {
				flex-basis: $basis !important;
			}
		}
	}

	// Stack the given columns when the *container* (not the viewport) is narrow.
	@each $width, $names in $stack {
		@container (max-width: #{$width}) {
			> .wp-block-column {
				@each $name in $names {
					&.#{$name} {
						flex-basis: 100% !important;
					}
				}
			}
		}
	}
}

/*=====  End of Responsive column mixins  ======*/