/** @format */

/* stylelint-disable block-closing-brace-newline-after */

// Breakpoints
// Forked from https://github.com/Automattic/wp-calypso/blob/809fe3b8ee3b046fcaf569828dee313eefb053ea/client/assets/stylesheets/shared/mixins/_breakpoints.scss

$breakpoints: 480px, 660px, 800px, 960px, 1040px, 1280px, 1400px; // Think very carefully before adding a new breakpoint

@mixin breakpoint( $sizes... ) {
	@each $size in $sizes {
		@if type-of( $size ) == string {
			$approved-value: 0;
			@each $breakpoint in $breakpoints {
				$and-larger: '>' + $breakpoint;
				$and-smaller: '<' + $breakpoint;

				@if $size == $and-smaller {
					$approved-value: 1;
					@media ( max-width: $breakpoint ) {
						@content;
					}
				} @else {
					@if $size == $and-larger {
						$approved-value: 2;
						@media ( min-width: $breakpoint + 1 ) {
							@content;
						}
					} @else {
						@each $breakpoint-end in $breakpoints {
							$range: $breakpoint + '-' + $breakpoint-end;
							@if $size == $range {
								$approved-value: 3;
								@media ( min-width: $breakpoint + 1 ) and ( max-width: $breakpoint-end ) {
									@content;
								}
							}
						}
					}
				}
			}
			@if $approved-value == 0 {
				$sizes: '';
				@each $breakpoint in $breakpoints {
					$sizes: $sizes + ' ' + $breakpoint;
				}
				// TODO - change this to use @error, when it is supported by node-sass
				@warn 'ERROR in breakpoint( #{ $size } ): You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]';
			}
		} @else {
			$sizes: '';
			@each $breakpoint in $breakpoints {
				$sizes: $sizes + ' ' + $breakpoint;
			}
			// TODO - change this to use @error, when it is supported by node-sass
			@warn 'ERROR in breakpoint( #{ $size } ): Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]';
		}
	}
}
