/**
 * Responsive breakpoints
 * - breakpoints values are defined in _config-global.scss
 */
@mixin media( $res ) {

	@if mobile-only == $res {
		@media only screen and (max-width: #{map-deep-get($config-global, "breakpoint", "sm") - 1}) {
			@content;
		}
	}

	@if mobile == $res {
		@media only screen and (min-width: map-deep-get($config-global, "breakpoint", "sm")) {
			@content;
		}
	}

	@if tablet == $res {
		@media only screen and (min-width: map-deep-get($config-global, "breakpoint", "md")) {
			@content;
		}
	}

	@if laptop == $res {
		@media only screen and (min-width: map-deep-get($config-global, "breakpoint", "lg")) {
			@content;
		}
	}

	@if desktop == $res {
		@media only screen and (min-width: map-deep-get($config-global, "breakpoint", "xl")) {
			@content;
		}
	}

	@if wide == $res {
		@media only screen and (min-width: map-deep-get($config-global, "breakpoint", "xxl")) {
			@content;
		}
	}
}

/**
 * Align wide widths
 * - Sets .alignwide widths
 */
@mixin alignwide-width( $width: 100%, $multiplier...) {

	@if length($multiplier) == 0 {
		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
	}

	width: calc(#{$width} + #{2 * $multiplier});
	max-width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
}

@mixin alignwide-width-nested( $width: 100%, $multiplier...) {

	@if length($multiplier) == 0 {
		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
	}

	width: calc(#{$width} + #{2 * $multiplier});
	max-width: 100%;
}

/**
 * Crop Text Boundry
 * - Sets a fixed-width on content within alignwide and alignfull blocks
 */
@mixin crop-text($inset-line-height: 1) {

	line-height: $inset-line-height;
	$offset-top: (.5em * $inset-line-height + -.38);
	$offset-bottom: (.5em * $inset-line-height + -.39);

	&:before,
	&:after {
		content: '';
		display: block;
		height: 0;
		width: 0;
	}

	&:before {
		margin-bottom: -($offset-top);
	}

	&:after {
		margin-top: -($offset-bottom);
	}
}

/**
 * Add font-family using CSS variables.
 * It also adds the proper fallback for browsers without support.
 */
@mixin font-family( $config_map ) {
	font-family: #{map-deep-get( $config_map, 'fallback' )}; // For browsers without CSS custom properties support.
	font-family: var( #{map-deep-get( $config_map, 'css-var')}, #{map-deep-get( $config_map, 'fallback' )} );
}