@charset "utf-8";

// "from-dimension" breakpoints
@mixin from-sm {
	// from sm up
	@media screen and (min-width: $min-width-sm) {
		@content;
	}
}

@mixin from-md {
	// from md up
	@media screen and (min-width: $min-width-md) {
		@content;
	}
}

@mixin from-lg {
	// from lg up
	@media screen and (min-width: $min-width-lg) {
		@content;
	}
}

@mixin from-xl {
	// from xl up
	@media screen and (min-width: $min-width-xl) {
		@content;
	}
}

@mixin from-fhd {
	// from fhd up
	@media screen and (min-width: $min-width-fhd) {
		@content;
	}
}

// "dimension-up" breakpoints (alternative names for "from-dimension" breakpoints)
@mixin sm-up {
	// from sm up
	@media screen and (min-width: $min-width-sm) {
		@content;
	}
}

@mixin md-up {
	// from md up
	@media screen and (min-width: $min-width-md) {
		@content;
	}
}

@mixin lg-up {
	// from desktop above
	@media screen and (min-width: $min-width-lg) {
		@content;
	}
}

@mixin xl-up {
	// from widescreen above
	@media screen and (min-width: $min-width-xl) {
		@content;
	}
}

@mixin fhd-up {
	// from fhd up
	@media screen and (min-width: $min-width-fhd) {
		@content;
	}
}

// "until-dimension" breakpoints
@mixin until-xs {
	// from 0 until xs's max width
	@media screen and (max-width: $max-width-xs) {
		@content;
	}
}

@mixin until-sm {
	// from 0 until sm's max width
	@media screen and (max-width: $max-width-sm) {
		@content;
	}
}

@mixin until-md {
	// from 0 until md's max width
	@media screen and (max-width: $max-width-md) {
		@content;
	}
}

@mixin until-lg {
	// from 0 to lg's max width
	@media screen and (max-width: $max-width-lg) {
		@content;
	}
}

@mixin until-xl {
	// from 0 to xl's max width
	@media screen and (max-width: $max-width-xl) {
		@content;
	}
}

@mixin until-fhd {
	// from 0 until fhd's max width
	// Currently fhd is the widest breakpoint. That means, no max width defined
	@media screen {
		@content;
	}
}

// "dimension-down" breakpoints (alternative names for "until-dimension" breakpoints)
@mixin xs-down {
	// from xs's max width down
	@media screen and (max-width: $max-width-xs) {
		@content;
	}
}

@mixin sm-down {
	// from sm's max width down
	@media screen and (max-width: $max-width-sm) {
		@content;
	}
}

@mixin md-down {
	// from md's max width down
	@media screen and (max-width: $max-width-md) {
		@content;
	}
}

@mixin lg-down {
	// from lg's max width down
	@media screen and (max-width: $max-width-lg) {
		@content;
	}
}

@mixin xl-down {
	// from xl's max width down
	@media screen and (max-width: $max-width-xl) {
		@content;
	}
}

@mixin fhd-down {
	// from fhd's max width down
	// Currently fhd is the widest breakpoint. That means, no max width defined
	@media screen {
		@content;
	}
}

@mixin xs-only {
	// from 0 until xs's max width
	// Currently xs is the most narrow breakpoint. That means, no min width defined
	@media screen and (max-width: $max-width-xs) {
		@content;
	}
}

@mixin sm-only {
	// from sm's min width until sm's max width
	@media screen and (min-width: $min-width-sm) and (max-width: $max-width-sm) {
		@content;
	}
}

@mixin md-only {
	// from md's min width until md's max width
	@media screen and (min-width: $min-width-md) and (max-width: $max-width-md) {
		@content;
	}
}

@mixin lg-only {
	// from lg's min width until lg's max width
	@media screen and (min-width: $min-width-lg) and (max-width: $max-width-lg) {
		@content;
	}
}

@mixin xl-only {
	// from xl's min width until xl's max width
	@media screen and (min-width: $min-width-xl) and (max-width: $max-width-xl) {
		@content;
	}
}

@mixin fhd-only {
	// from fhd's min width until fhd's max width
	// Currently fhd is the widest breakpoint. That means, no max width defined
	@media screen and (min-width: $min-width-fhd) {
		@content;
	}
}