// Hidden
@mixin hidden($lower, $upper) {
	@include media-breakpoint-between($lower, $upper) {
		display: none;
	}
}

// Padding
@mixin padding-top($breakpoint, $number) {
	@include media-breakpoint-up($breakpoint) {
		padding-top: #{$number}px;
	}
}

@mixin padding-bottom($breakpoint, $number) {
	@include media-breakpoint-up($breakpoint) {
		padding-bottom: #{$number}px;
	}
}

// Boxed
@mixin boxed {
	@include make-container();
	@include make-container-max-widths();
}

// Column
@mixin col($breakpoint, $column) {
	@extend %grid-column;
	@include media-breakpoint-up($breakpoint) {
		@include make-col-span($column);
	}
}

// Center block
@mixin center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

// Clearfix
@mixin clearfix() {
	content: "";
	display: table;
	table-layout: fixed;
}

// Center
@mixin is-translated($width: 100%) {
	width: $width;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

// Absolute center
@mixin absolute-center() {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
	clear: both;
}

/////////////////////////////////////////////////
// Responsive font size
/////////////////////////////////////////////////

// These values are the minimum and maximum viewport sizes to apply the font scaling
$min_width: 554;
$max_width: 1200;

@mixin res-font-size($fontsizemin,$fontsizemax) {
	font-size: #{$fontsizemin}px;
	@include media-breakpoint-between(sm, lg) {
		font-size: calc(#{$fontsizemin}px + (#{$fontsizemax} - #{$fontsizemin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		font-size: #{$fontsizemax}px;
	}
}

/////////////////////////////////////////////////
// Responsive margin and padding
/////////////////////////////////////////////////

@mixin res-padding-top($paddingmin,$paddingmax) {
	padding-top: #{$paddingmin}px;
	@include media-breakpoint-between(sm, lg) {
		padding-top: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		padding-top: #{$paddingmax}px;
	}
}

@mixin res-padding-right($paddingmin,$paddingmax) {
	padding-right: #{$paddingmin}px;
	@include media-breakpoint-between(sm, lg) {
		padding-right: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		padding-right: #{$paddingmax}px;
	}
}

@mixin res-padding-bottom($paddingmin,$paddingmax) {
	padding-bottom: #{$paddingmin}px;
	@include media-breakpoint-between(sm, lg) {
		padding-bottom: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		padding-bottom: #{$paddingmax}px;
	}
}

@mixin res-padding-left($paddingmin,$paddingmax) {
	padding-left: #{$paddingmin}px;
	@include media-breakpoint-between(sm, lg) {
		padding-left: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		padding-left: #{$paddingmax}px;
	}
}

@mixin res-margin-top($marginmin,$marginmax) {
	margin-top: #{$marginmin}px;
	@include media-breakpoint-between(sm, lg) {
		margin-top: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		margin-top: #{$marginmax}px;
	}
}

@mixin res-margin-right($marginmin,$marginmax) {
	margin-right: #{$marginmin}px;
	@include media-breakpoint-between(sm, lg) {
		margin-right: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		margin-right: #{$marginmax}px;
	}
}

@mixin res-margin-bottom($marginmin,$marginmax) {
	margin-bottom: #{$marginmin}px;
	@include media-breakpoint-between(sm, lg) {
		margin-bottom: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		margin-bottom: #{$marginmax}px;
	}
}

@mixin res-margin-left($marginmin,$marginmax) {
	margin-left: #{$marginmin}px;
	@include media-breakpoint-between(sm, lg) {
		margin-left: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
	}
	@include media-breakpoint-up(xl) {
		margin-left: #{$marginmax}px;
	}
}