/******************************************************************
Site Name:
Author:

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants. I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques like gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

******************************************************************/

@use "sass:math";

//
// Clearfix
//

// http://nicolasgallagher.com/micro-clearfix-hack/
// @see _classes.scss
@mixin clearfix {
	zoom: 1;

	&:after,
	&:before {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

//
// Alerts and Notices
//

@mixin alert {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	margin: 0 0 2em;
	background-color: #EEE;
	border-top-width: 3px;
	border-top-style: solid;
	width: 100%;

	&:before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 1.5em;
		display: inline-block;
		margin-right: 0.875em;
	}
}

//
// Alignment
//

// Vertical Align Dynamic Height
// http://css-tricks.com/centering-in-the-unknown/
@mixin dynamicVerticalAlign {
	&:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		width: .1px;
	}
}

//
// Typography
//

// Text Truncate
// values are: clip, ellipsis, or a string
@mixin truncateText($overflow: ellipsis) {
	overflow: hidden;
	text-overflow: $overflow;
	white-space: nowrap;
}


//
// Bootstrap Grid
//

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
	// Common properties for all breakpoints
	%grid-column {
		position: relative;
		width: 100%;
		min-height: 1px; // Prevent columns from collapsing when empty
		padding-right: math.div($gutter, 2);
		padding-left: math.div($gutter, 2);
	}

	@each $breakpoint in map-keys($breakpoints) {
		$infix: breakpoint-infix($breakpoint, $breakpoints);

		// Allow columns to stretch full width below their breakpoints
		@for $i from 1 through $columns {
			.col#{$infix}-#{$i} {
				@extend %grid-column;
			}
		}
		.col#{$infix},
		.col#{$infix}-auto {
			@extend %grid-column;
		}

		@include media-breakpoint-up($breakpoint, $breakpoints) {
			// Provide basic `.col-{bp}` classes for equal-width flexbox columns
			.col#{$infix} {
				flex-basis: 0;
				flex-grow: 1;
				max-width: 100%;
			}
			.col#{$infix}-auto {
				flex: 0 0 auto;
				width: auto;
				max-width: none; // Reset earlier grid tiers
			}

			@for $i from 1 through $columns {
				.col#{$infix}-#{$i} {
					@include make-col($i, $columns);
				}
			}

			.order#{$infix}-first {
				order: -1;
			}

			.order#{$infix}-last {
				order: $columns + 1;
			}

			@for $i from 0 through $columns {
				.order#{$infix}-#{$i} {
					order: $i;
				}
			}

			// `$columns - 1` because offsetting by the width of an entire row isn't possible
			@for $i from 0 through ($columns - 1) {
				@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
					.offset#{$infix}-#{$i} {
						@include make-col-offset($i, $columns);
					}
				}
			}
		}
	}
}

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container() {
	width: 100%;
	padding-right: math.div($grid-gutter-width, 2);
	padding-left: math.div($grid-gutter-width, 2);
	margin-right: auto;
	margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
	@each $breakpoint, $container-max-width in $max-widths {
		@include media-breakpoint-up($breakpoint, $breakpoints) {
			max-width: $container-max-width;
		}
	}
}

@mixin make-row() {
	display: flex;
	flex-wrap: wrap;
	margin-right: math.div($grid-gutter-width, -2);
	margin-left: math.div($grid-gutter-width, -2);
}

@mixin make-col-ready() {
	position: relative;
	// Prevent columns from becoming too narrow when at smaller grid tiers by
	// always setting `width: 100%;`. This works because we use `flex` values
	// later on to override this initial width.
	width: 100%;
	min-height: 1px; // Prevent collapsing
	padding-right: math.div($grid-gutter-width, 2);
	padding-left: math.div($grid-gutter-width, 2);
}

@mixin make-col($size, $columns: $grid-columns) {
	flex: 0 0 percentage(math.div($size, $columns));
	//flex: 0 0 percentage(math.div($size, $columns));
	// Add a `max-width` to ensure content within each column does not blow out
	// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
	// do not appear to require this.
	max-width: percentage(math.div($size, $columns));
}

@mixin make-col-offset($size, $columns: $grid-columns) {
	$num: math.div($size, $columns);
	margin-left: if($num == 0, 0, percentage($num));
}

//
// Media Queries
//

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
	$min: breakpoint-min($name, $breakpoints);
	@if $min {
		@media (min-width: $min) {
			@content;
		}
	} @else {
		@content;
	}
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
	$max: breakpoint-max($name, $breakpoints);
	@if $max {
		@media (max-width: $max) {
			@content;
		}
	} @else {
		@content;
	}
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
	$min: breakpoint-min($lower, $breakpoints);
	$max: breakpoint-max($upper, $breakpoints);

	@if $min != null and $max != null {
		@media (min-width: $min) and (max-width: $max) {
			@content;
		}
	} @else if $max == null {
		@include media-breakpoint-up($lower, $breakpoints) {
			@content;
		}
	} @else if $min == null {
		@include media-breakpoint-down($upper, $breakpoints) {
			@content;
		}
	}
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
	$min: breakpoint-min($name, $breakpoints);
	$max: breakpoint-max($name, $breakpoints);

	@if $min != null and $max != null {
		@media (min-width: $min) and (max-width: $max) {
			@content;
		}
	} @else if $max == null {
		@include media-breakpoint-up($name, $breakpoints) {
			@content;
		}
	} @else if $min == null {
		@include media-breakpoint-down($name, $breakpoints) {
			@content;
		}
	}
}
