$breakpoint_sm: 600px;
$breakpoint_md: 782px;
$breakpoint_lg: 960px;
$breakpoint_xl: 1440px;
$breakpoint_admin-bar: 782px;

// Responsive breakpoints mixin
@mixin media( $res ) {
	@if small-only == $res {
		@media only screen and (max-width: #{$breakpoint_sm - 1}) {
			@content;
		}
	}
	@if small == $res {
		@media only screen and (min-width: #{$breakpoint_sm}) {
			@content;
		}
	}
	@if medium-only == $res {
		@media only screen and (max-width: #{$breakpoint_md - 1}) {
			@content;
		}
	}
	@if medium == $res {
		@media only screen and (min-width: #{$breakpoint_md}) {
			@content;
		}
	}
	@if large-only == $res {
		@media only screen and (max-width: #{$breakpoint_lg - 1}) {
			@content;
		}
	}
	@if large == $res {
		@media only screen and (min-width: #{$breakpoint_lg}) {
			@content;
		}
	}
	@if xlarge-only == $res {
		@media only screen and (max-width: #{$breakpoint_xl - 1}) {
			@content;
		}
	}
	@if xlarge == $res {
		@media only screen and (min-width: #{$breakpoint_xl}) {
			@content;
		}
	}
	@if admin-bar-only == $res {
		@media only screen and (max-width: #{$breakpoint_admin-bar - 1}) {
			@content;
		}
	}
	@if admin-bar == $res {
		@media only screen and (min-width: #{$breakpoint_admin-bar}) {
			@content;
		}
	}
}

@custom-media --small (min-width: 600px);
@custom-media --smallMax (max-width: 599px);
@custom-media --medium (min-width: 782px);
@custom-media --mediumMax (max-width: 781px);
@custom-media --large (min-width: 960px);
@custom-media --largeMax (max-width: 959px);
@custom-media --huge (min-width: 1440px);
@custom-media --hugeMax (min-width: 1439px);
@custom-media --admin-bar-sm (max-width: 600px);
@custom-media --admin-bar-lg (max-width: 782px);
