// =================================================================
// Grid Styles and Placeholders
// =================================================================

@use "sass:math";

// Base styles for all wrapper elements.
//
// Styleguide Grid.Global Styles.Wrapper Styles
//
// Access: Public
//
// Since: 1.2.0

%wrapper-styles {
	overflow: hidden;
}

// Base styles for all container elements.
// You may wish to extend this on a page where you can't use
// `.content-container` for some reason - such as on a landing
// page where you are overriding that class to use the full width
// of the screen.
//
// Styleguide Grid.Global Styles.Container Styles
//
// Access: Public
//
// Since: 1.2.0

%container-styles {
	@extend %clearfix;
	margin: 0 auto;
	padding: $grid-container-padding;
	width: 100%;

	@if ( $enable-css-grid ) {
		@include css-grid-base;
	}

	@include breakpoint( $sm ) {
		max-width: $container-sm;
		padding: $grid-container-padding-desktop;
	}

	@include breakpoint( $md ) {
		max-width: $container-md;
	}

	@include breakpoint( $lg ) {
		max-width: $container-lg;
		grid-gap: $padding * 2;
	}
}

// Base styles for containers that hold grid elements.
// A negative margin is included to counteract the grid item
// margins.
//
// Styleguide Grid.Global Styles.Row Styles
//
// Access: Public
//
// Since: 1.2.0

%row-styles {
	@extend %clearfix;
	margin: $grid-row-margin;

	@include breakpoint( $sm ) {
		margin: $grid-row-margin-desktop;
	}

	@if ( $enable-css-grid ) {
		@include css-grid-base;
	}
}

/// Adds grid support to any container.
/// Can be used on its own to enable grid in a specific
/// place in the theme without turning it on globally.
/// @group global
/// @access public
/// @since 4.0.0

%grid-parent {
	@include css-grid-base;
}

// Base styles for children of a row.
// Usually used for grid items.
//
// Styleguide Grid.Global Styles.Item Styles
//
// Access: Public
//
// Since: 1.2.0

%row-child-styles {
	padding-left: $grid-column-padding;
	padding-right: $grid-column-padding;

	@if ( $enable-css-grid ) {
		@supports ( display: grid ) {
			padding-left: initial;
			padding-right: initial;
		}
	}
}

// A backwards-compatible equal heights solution for
// older browsers.
// Base styles for a container whose children should
// be equal heights.
//
// Styleguide Utilities.Backwards Compatibility.Equal Heights (Container)
//
// Access: Public
//
// Since: 1.2.0

%equal-height-parent-backcompat {
	overflow: hidden;
}

// A backwards-compatible equal heights solution for
// older browsers.
// Base styles for children of the equal-height-parent.
// These styles will make children appear to be equal heights,
// even if the actual content is different heights.
// If you need padding on the bottom of the child items, you might have to adjust
// the margin-bottom to be lower.
//
// Styleguide Utilities.Backwards Compatibility.Equal Heights (Items)
//
// Access: Public
//
// Since: 1.2.0

%equal-height-child-backcompat {
	@include breakpoint( $md ) {
		margin-bottom: -99999px;
		padding-bottom: 99999px;
	}
}

// A newer version of equal heights that takes advantage
// of flexbox. Use this on your container to make all
// children equal heights. Plays nice with the grid.
// Check https://caniuse.com/#search=flexbox for browser
// support. You may want to provide a min-height on a
// case by case basis as a fallback.
//
// Styleguide Utilities.Layout.Equal Heights
//
// Access: Public
//
// Since: 2.0.0

%equal-heights {
	display: flex;
	flex-wrap: wrap;
}

// An extend for base grid styles.
//
// Styleguide Grid.Factory.%col-base
//
// Access: Private
//
// Since: 2.0.0

%col-base {
	@include col-base;
}

// An extend for base grid styles using the margin feature.
//
// Styleguide Grid.Factory.%col-margin-base
//
// Access: Private
//
// Since: 2.0.0

%col-margin-base {
	@include col-margin-base;
}

// Styles for parents of margin grid items.
// Also available in breakpoint flavors,
// just like the grid classes - for example,
// `.col-md-margin-parent`.
//
// Styleguide Grid.Factory.%col-margin-parent
//
// Access: Public
//
// Since: 2.0.0

%col-margin-parent {
	margin-left: -$grid-margin-width * 1%;
	margin-right: 0;

	@if ( $enable-css-grid ) {
		@supports ( display: grid ) {
			margin-left: auto;
		}
	}
}

@if $burf-extras {
	.col-margin-parent {
		@extend %col-margin-parent;
	}
}

// A private map to hold grid widths while
// calculating the grid.
//
// Styleguide Grid.Factory.$grid-widths
//
// Access: Private
//
// Since: 2.0.0

$grid-widths: ();

// A private map to hold grid widths for margins
// while calculating the grid.
//
// Styleguide Grid.Factory.$grid-widths-margins
//
// Access: Private
//
// Since: 2.0.0

$grid-widths-margins: ();

// Calculate grid widths
//
// Loops through all columns to set widths in a map
// and create basic grid classes based on grid control settings.
//
// Styleguide Grid.Factory.Calculate widths
//
// Access: Private
//
// Since: 2.0.0

@for $i from 0 through $grid-number-columns {
	// Determine current base width
	$percentage: math.div( $i, $grid-number-columns ) * 100;

	@if ( $percentage <= 0 ) {
		$percentage: initial;
	}

	// Create a list of widths for grid-build to use later
	$grid-widths: append( $grid-widths, $percentage, comma );

	$percentage-margins: ( math.div( $i, $grid-number-columns ) * 100 ) - $grid-margin-width;

	@if ( $percentage-margins <= 0 ) {
		$percentage-margins: initial;
	}

	$grid-widths-margins: append( $grid-widths-margins, $percentage-margins, comma );

	// Create basic grid classes, no breakpoints
	// Example output: %col-1

	@if ( $i != 0 ) {
		%col-#{$i} {
			@extend %col-base;
			@include grid-build( width, $percentage );

			@if ( $enable-css-grid ) {
				@supports ( display: grid ) {
					grid-column: span $i;
					width: 100%;
				}
			}
		}
	}
}

// Create grid sets
//
// Loops through all supported feature sets to create placeholder
// classes for use in Sass.
//
// Styleguide Grid.Factory.Create sets
//
// Access: Private
//
// Since: 2.0.0

@for $i from 0 to length( $grid-widths ) {
	@each $feature, $supported in $grid-supports {
		@if ( $supported ) {
			%col-#{$feature}-#{$i} {
				@extend %col-#{$feature}-base !optional;
				@extend %col-base;
				@include col( '', $feature, $i, $enable-css-grid, false );
			}
		}
	}
}

%grid-item-base {
	@if ( $enable-css-grid ) {
		@supports ( display: grid ) {
			grid-column: span $grid-number-columns;
		}
	}
}

%grid-place-first {
	@supports ( display: grid ) {
		order: -1;
	}
}

%grid-place-last {
	@supports ( display: grid ) {
		order: $grid-number-columns + 1;
	}
}

// Create breakpoint sets
//
// Loops through all supported breakpoints to create placeholder
// classes for each available feature set to use in Sass.
//
// Styleguide Grid.Factory.Create breakpoint classes
//
// Access: Private
//
// Since: 2.0.0

@each $breakpoint, $value in $grid-breakpoints {
	@if ( $enable-css-grid ) {
		@for $i from 0 to length( $grid-widths ) {
			%col-#{$breakpoint}-#{$i} {
				@extend %grid-item-base;
			}
		}
	}

	@include breakpoint( $value ) {
		%col-#{$breakpoint}-margin-base {
			@include col-margin-base;
		}

		%col-#{$breakpoint}-margin-parent {
			margin-left: -$grid-margin-width * 1%;

			@if ( $enable-css-grid ) {
				@supports ( display: grid ) {
					margin-left: auto;
					margin-right: auto;
				}
			}
		}

		%grid-#{$breakpoint}-parent {
			@include css-grid-base;
		}

		%grid-#{$breakpoint}-place-first {
			@supports ( display: grid ) {
				order: -1;
			}
		}

		%grid-#{$breakpoint}-place-last {
			@supports ( display: grid ) {
				order: $grid-number-columns + 1;
			}
		}

		@if $burf-extras {
			.col-#{$breakpoint}-margin-parent {
				@extend %col-#{$breakpoint}-margin-parent;
			}
		}

		@for $i from 0 to length( $grid-widths ) {
			%col-#{$breakpoint}-#{$i} {
				@include col-base;
				@include grid-styles( '', $i );
			}
		}

		@each $feature, $supported in $grid-supports {
			@if ( $supported ) {
				@for $i from 0 to length( $grid-widths ) {
					%col-#{$breakpoint}-#{$feature}-#{$i} {
						@include grid-styles( $feature, $i );
					}
				}
			}
		}
	}

	@each $feature, $supported in $grid-supports {
		@if ( $supported ) {
			@for $i from 0 to length( $grid-widths ) {
				%col-#{$breakpoint}-#{$feature}-#{$i} {
					@extend %col-#{$breakpoint}-#{$feature}-base !optional;
				}
			}
		}
	}
}

// Grid Placeholders
//
// The preferred way of using the grid in Sass.
// Use only where necessary to override grid classes.
// Arguments are the same as you use to write grid classes,
// in the same order.
//
// #### Examples
//
// ##### Override the margin class on a modified callout.
//
// ```
//
// .callout {
// 	@extend %col-sm-margin-quarter;
//	}
//
// Styleguide Grid.How to Use the Grid.Grid Placeholders
//
// Access: Public
//
// Since: 2.0.0