/* breakpoints
----------------------------------------------------------------------------------------------------------------------*/
$breakpoints: (
	small: 0px,
	medium: 768px,
	large: 1024px,
	xlarge: 1280px,
	xxlarge: 1440px,
	xxxlarge: 1600px,
	huge: 1920px,
) !default;

$image-breakpoints: (
	small: 400,
	medium: 768,
	large: 1024,
	xxlarge: 1440,
	xxxlarge: 1600,
	huge: 0,
) !default;


@function next_breakpoint($size) {
	$values: map-keys($breakpoints);
	$i: 0;

	@if map-has-key($breakpoints, $size) {
		$i: index($values, $size) + 1;
	}

	@if $i>length($breakpoints) or $i==0 {
		@return '';
	} @else {
		@return map-get($breakpoints, nth($values, $i)) - 1;
	}
}

// super simplified version of foundation's breakpoint
@function breakpoint($size) {
	$bp: nth($size, 1);
	$direction: if(length($size) > 1, nth($size, 2), up);
	$value: map-get($breakpoints, $bp);

	// might need to be better at handling breakpoints
	// assumes pixel if value isn't found in breakpoints array
	@if not $value {
		$value: $bp;
	}

	$str: '';

	@if $direction== 'up' {
		$str: '(min-width: #{$value})';
	} @else if $direction== 'only' {
		$next: next_breakpoint($bp);
		$str: '(min-width: #{$value})';

		@if $next {
			$str: $str + ' and (max-width: #{$next})';
		}
	} @else if $direction== 'down' {
		$next: next_breakpoint($bp);
		$str: '(max-width: #{$next})';
	}

	@return $str;
}

@mixin breakpoint($value) {
	$str: breakpoint($value);

	@media screen and #{$str} {
		@content;
	}
}

@mixin small($direction: up) {
	@include breakpoint(small $direction) {
		@content;
	}
}

@mixin medium($direction: up) {
	@include breakpoint(medium $direction) {
		@content;
	}
}

@mixin large($direction: up) {
	@include breakpoint(large $direction) {
		@content;
	}
}

@mixin xlarge($direction: up) {
	@include breakpoint(xlarge $direction) {
		@content;
	}
}

@mixin xxlarge($direction: up) {
	@include breakpoint(xxlarge $direction) {
		@content;
	}
}

@mixin xxxlarge($direction: up) {
	@include breakpoint(xxxlarge $direction) {
		@content;
	}
}

@mixin huge($direction: up) {
	@include breakpoint(huge $direction) {
		@content;
	}
}

@mixin responsive-background-image($url) {
	@each $key, $breakpoint in $image-breakpoints {
		@include breakpoint($key) {
			@if $breakpoint == 0 {
				background-image: url('#{$url}');
			} @else {
				background-image: url('#{$url}?size=#{$breakpoint}');
			}
		}
	}
}