// This file makes use of double quotes to format errors with nested single quotes
// The indentation linting freaks out on comments above else statements and is disabled.

// sass-lint:disable quotes, no-warn, indentation

@import '../variables/responsive';

// A sem-complicated mixin for breakpoints, that takes any number of
// named breakpoints that exists in $euiBreakpoints.

@mixin euiBreakpoint($sizes...) {
  // Loop through each size parameter
  @each $size in $sizes {
    // Store the location of the size in the list to check against
    $index: index($euiBreakpointKeys, $size);

    // Check to make sure it exists in the allowed breakpoint names
    @if ( $index ) {

      // Set the min size to the value of the size
      $minSize: map-get($euiBreakpoints, $size);

      // If it is the last item, don't give it a max-width
      @if ( $index == length($euiBreakpointKeys) ) {
        @media only screen and (min-width: $minSize) {
          @content;
        }
      // If it's not the last item, add a max-width
      } @else {

        // Set the max size to the value of the next size (-1px as to not overlap)
        $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px;

        // If it's the the first item, don't set a min-width
        @if ( $index == 1 ) {
          @media only screen and (max-width: $maxSize) {
            @content;
          }
        // Otherwise it should have a min and max width
        } @else {
          @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
            @content;
          }
        }
      }
    // If it's not a known breakpoint, throw a warning
    } @else {
      @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'";
    }
  }
}