/* stylelint-disable declaration-no-important */
////
/// @author Newton Koumantzelis
////

/// Flex order - by default, flexbox columns will ordereed left to right.  If you need to set the order, you can force positions to first or last.
/// The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
/// @name .flex-order-{size}-first, .flex-order-{size}-last
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container">
///   <div class="flex-row">
///     <div class="flex-col flex-col-sm flex-order-xs-last">
///       <div class="width-100 bg-gray-darkest text-xs-center">First item</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="width-100 bg-gray-light text-xs-center">Second item</div>
///     </div>
///     <div class="flex-col flex-col-sm flex-order-xs-first">
///       <div class="width-100 bg-gray text-xs-center">Third item</div>
///     </div>
///   </div>
/// </div>
@mixin flex-order($breakpoints) {
	.flex-order {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-first {
					order: -1 !important;
				}

				&-#{$breakpoint}-last {
					order: 1 !important;
				}
			}
		}
	}
}

/// Flex utilities - by default, flexbox aligns items in a row formation, so if you need to set them to columns, or reverse order, prevent wrap, enforce wrap, use these utilities.
/// @name .flex-{size}-row, .flex-{size}-column, .flex-{size}-row-reverse, .flex-{size}-column-reverse, .flex-{size}-wrap, .flex-{size}-nowrap, .flex-{size}-wrap-reverse
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container">
///   <div class="flex-row flex-xs-row">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-column" style="height: 72px;">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-row-reverse">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-column-reverse" style="height: 72px;">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-wrap">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest" style="width:600px;">1</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light" style="width:600px;">2</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray" style="width:600px;">3</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-nowrap">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest" style="width:600px;">1</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light" style="width:600px;">2</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray" style="width:600px;">3</div>
///     </div>
///   </div>
///   <div class="m-y-1 spacer"></div>
///   <div class="flex-row flex-xs-wrap-reverse">
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-darkest" style="width:600px;">1</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray-light" style="width:600px;">2</div>
///     </div>
///     <div class="flex-col flex-col-sm">
///       <div class="bg-gray" style="width:600px;">3</div>
///     </div>
///   </div>
/// </div>
@mixin flex-helpers($breakpoints) {
	.flex {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-row {
					flex-direction: row !important;
				}

				&-#{$breakpoint}-column {
					flex-direction: column !important;
				}

				&-#{$breakpoint}-row-reverse {
					flex-direction: row-reverse !important;
				}

				&-#{$breakpoint}-column-reverse {
					flex-direction: column-reverse !important;
				}

				&-#{$breakpoint}-wrap {
					flex-wrap: wrap !important;
				}

				&-#{$breakpoint}-nowrap {
					flex-wrap: nowrap !important;
				}

				&-#{$breakpoint}-wrap-reverse {
					flex-wrap: wrap-reverse !important;
				}

				&-#{$breakpoint}-fill {
					flex: 1 1 auto !important;
				}

				&-#{$breakpoint}-grow-0 {
					flex-grow: 0 !important;
				}

				&-#{$breakpoint}-grow-1 {
					flex-grow: 1 !important;
				}

				&-#{$breakpoint}-shrink-0 {
					flex-shrink: 0 !important;
				}

				&-#{$breakpoint}-shrink-1 {
					flex-shrink: 1 !important;
				}
			}
		}
	}
}

/// It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
/// @name .justify-content-{size}-start,.justify-content-{size}-end,.justify-content-{size}-center,.justify-content-{size}-between,.justify-content-{size}-around
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container">
///   <div class="flex-row">
///     <div class="flex-col flex-col-xs justify-content-xs-start">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-center">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-end">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="flex-row">
///     <div class="flex-col flex-col-xs justify-content-xs-between">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-between">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-between">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
///   <div class="flex-row">
///     <div class="flex-col flex-col-xs justify-content-xs-around">
///       <div class="bg-gray-darkest">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-around">
///       <div class="bg-gray-light">one of three columns</div>
///     </div>
///     <div class="flex-col flex-col-xs justify-content-xs-around">
///       <div class="bg-gray">one of three columns</div>
///     </div>
///   </div>
/// </div>
@mixin justify-content($breakpoints) {
	.justify-content {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-start {
					justify-content: flex-start !important;
				}

				&-#{$breakpoint}-end {
					justify-content: flex-end !important;
				}

				&-#{$breakpoint}-center {
					justify-content: center !important;
				}

				&-#{$breakpoint}-between {
					justify-content: space-between !important;
				}

				&-#{$breakpoint}-around {
					justify-content: space-around !important;
				}
			}
		}
	}
}

/// It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
/// @name .align-items-{size}-start, .align-items-{size}-end, .align-items-{size}-center, .align-items-{size}-baseline, .align-items-{size}-stretch
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container">
///   <div class="bg-gray-lightest flex-row align-items-xs-start">
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-darkest p-a-1">1<br />2</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-light p-a-1">3</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">4<br />5</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">6</div>
///     </div>
///   </div>
///   <div class="flex-row align-items-xs-end">
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-darkest p-a-1">1<br />2</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-light p-a-1">3</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">4<br />5</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">6</div>
///     </div>
///   </div>
///   <div class="bg-gray-lightest flex-row align-items-xs-center">
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-darkest p-a-1">1<br />2</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-light p-a-1">3</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">4<br />5</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">6</div>
///     </div>
///   </div>
///   <div class="flex-row align-items-xs-baseline">
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-darkest p-a-1">1<br />2</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-light p-a-1">3</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">4<br />5</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">6</div>
///     </div>
///   </div>
///   <div class="bg-gray-lightest flex-row align-items-xs-stretch">
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-darkest p-a-1">1<br />2</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray-light p-a-1">3</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">4<br />5</div>
///     </div>
///     <div class="flex-col flex-col-xs">
///       <div class="bg-gray p-a-1">6</div>
///     </div>
///   </div>
/// </div>
@mixin align-items($breakpoints) {
	.align-items {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-baseline {
					align-items: baseline !important;
				}

				&-#{$breakpoint}-center {
					align-items: center !important;
				}

				&-#{$breakpoint}-end {
					align-items: flex-end !important;
				}

				&-#{$breakpoint}-start {
					align-items: flex-start !important;
				}

				&-#{$breakpoint}-stretch {
					align-items: stretch !important;
				}
			}
		}
	}
}

/// It helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
/// @name .align-content-{size}-start, .align-content-{size}-end, .align-content-{size}-center, .align-content-{size}-baseline, .align-content-{size}-stretch
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container clearfix">
///   <div class="pull-xs-left flex-row align-content-xs-start" style="width: 120px; height: 300px;">
///     <div class="bg-gray-darkest p-a-1">1</div>
///     <div class="bg-gray-darkest p-a-1">2</div>
///     <div class="bg-gray-darkest p-a-1">3</div>
///     <div class="bg-gray-darkest p-a-1">4</div>
///     <div class="bg-gray-darkest p-a-1">5</div>
///     <div class="bg-gray-darkest p-a-1">6</div>
///   </div>
///   <div class="pull-xs-left flex-row align-content-xs-end" style="width: 120px; height: 300px;">
///     <div class="bg-gray-lightest p-a-1">1</div>
///     <div class="bg-gray-lightest p-a-1">2</div>
///     <div class="bg-gray-lightest p-a-1">3</div>
///     <div class="bg-gray-lightest p-a-1">4</div>
///     <div class="bg-gray-lightest p-a-1">5</div>
///     <div class="bg-gray-lightest p-a-1">6</div>
///   </div>
///   <div class="pull-xs-left flex-row align-content-xs-center" style="width: 120px; height: 300px;">
///     <div class="bg-gray-darker p-a-1">1</div>
///     <div class="bg-gray-darker p-a-1">2</div>
///     <div class="bg-gray-darker p-a-1">3</div>
///     <div class="bg-gray-darker p-a-1">4</div>
///     <div class="bg-gray-darker p-a-1">5</div>
///     <div class="bg-gray-darker p-a-1">6</div>
///   </div>
///   <div class="pull-xs-left flex-row align-content-xs-between" style="width: 120px; height: 300px;">
///     <div class="bg-gray-lighter p-a-1">1</div>
///     <div class="bg-gray-lighter p-a-1">2</div>
///     <div class="bg-gray-lighter p-a-1">3</div>
///     <div class="bg-gray-lighter p-a-1">4</div>
///     <div class="bg-gray-lighter p-a-1">5</div>
///     <div class="bg-gray-lighter p-a-1">6</div>
///   </div>
///   <div class="pull-xs-left flex-row align-content-xs-around" style="width: 120px; height: 300px;">
///     <div class="bg-gray-dark p-a-1">1</div>
///     <div class="bg-gray-dark p-a-1">2</div>
///     <div class="bg-gray-dark p-a-1">3</div>
///     <div class="bg-gray-dark p-a-1">4</div>
///     <div class="bg-gray-dark p-a-1">5</div>
///     <div class="bg-gray-dark p-a-1">6</div>
///   </div>
///   <div class="pull-xs-left flex-row align-content-xs-stretch" style="width: 120px; height: 300px;">
///     <div class="bg-gray-light p-a-1">1</div>
///     <div class="bg-gray-light p-a-1">2</div>
///     <div class="bg-gray-light p-a-1">3</div>
///     <div class="bg-gray-light p-a-1">4</div>
///     <div class="bg-gray-light p-a-1">5</div>
///     <div class="bg-gray-light p-a-1">6</div>
///   </div>
/// </div>
@mixin align-content($breakpoints) {
	.align-content {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-around {
					align-content: space-around !important;
				}

				&-#{$breakpoint}-between {
					align-content: space-between !important;
				}

				&-#{$breakpoint}-center {
					align-content: center !important;
				}

				&-#{$breakpoint}-end {
					align-content: flex-end !important;
				}

				&-#{$breakpoint}-start {
					align-content: flex-start !important;
				}

				&-#{$breakpoint}-stretch {
					align-content: stretch !important;
				}
			}
		}
	}
}

/// It makes possible to override the `align-items` value for specific flex items.
/// @name .align-self-{size}-auto, .align-self-{size}-start, .align-self-{size}-end, .align-self-{size}-center, .align-self-{size}-baseline, .align-self-{size}-stretch
/// @since 2.0.0 - The Jedi
/// @example html
/// <div class="container clearfix">
///   <div class="flex-row" style="height: 300px;">
///     <div class="bg-gray-darkest p-a-1 align-self-xs-auto" style="width: 100px; line-height: 100px;">1</div>
///     <div class="bg-gray-darkest p-a-1 align-self-xs-start" style="width: 100px; line-height: 100px;">2</div>
///     <div class="bg-gray-darkest p-a-1 align-self-xs-end" style="width: 100px; line-height: 100px;">3</div>
///     <div class="bg-gray-darkest p-a-1 align-self-xs-center" style="width: 100px; line-height: 100px;">4</div>
///     <div class="bg-gray-darkest p-a-1 align-self-xs-baseline" style="width: 100px; line-height: 100px;">5</div>
///     <div class="bg-gray-darkest p-a-1 align-self-xs-stretch" style="width: 100px; line-height: 100px;">6</div>
///   </div>
/// </div>
@mixin align-self($breakpoints) {
	.align-self {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-auto {
					align-self: auto !important;
				}

				&-#{$breakpoint}-baseline {
					align-self: baseline !important;
				}

				&-#{$breakpoint}-center {
					align-self: center !important;
				}

				&-#{$breakpoint}-end {
					align-self: flex-end !important;
				}

				&-#{$breakpoint}-start {
					align-self: flex-start !important;
				}

				&-#{$breakpoint}-stretch {
					align-self: stretch !important;
				}
			}
		}
	}
}