// Breakpoints for a mobile-first grid. The pixel values of adjacent breakpoints
// can be the same value (i.e. it's unnecessary to write values like
// small: (544px, 767px), medium: (768px, 992px)). Media Query-generating mixins
// will automatically adjust by 1px where necessary.
$breakpoints: (
  xs: (null, 576px),
  small: (576px, 768px),
  medium: (768px, 992px),
  large: (992px, 1200px),
  xl: (1200px, null)
);

$max-widths: (xs: auto, small: 544px, medium: 736px, large: 960px, xl: 1168px);

// 12 columns all the way down.
$columns: (xs: 12, small: 12, medium: 12, large: 12, xl: 12);

$gutter: 32px;

// Mobile-first breakpoint mixin. This is the preferred way to use a
// breakpoint, with larger devices inheriting from smaller ones.
//
// @param  {mixed} $bp  You can pass in "small", "medium", or "large".
// Or, a direct pixel value works too (eg. "800px")
// @return {void}
@mixin from-breakpoint($bp) {
  @if ($bp == 'xs') {
    @content;
  } @else {
    @if map-has-key($breakpoints, $bp) {
      $list: map-get($breakpoints, $bp);
      $bp: nth($list, 1);
    }

    @media screen and (min-width: #{$bp}) {
      @content;
    }
  }
}

// Target a specific breakpoint
@mixin at-breakpoint($bp) {
  $list: map-get($breakpoints, $bp);
  $min: nth($list, 1);
  $max: nth($list, length($list));

  @if ($min == null) {
    @media screen and (max-width: #{$max - 1}) {
      @content;
    }
  } @else if ($max == null) {
    @media screen and (min-width: #{$min}) {
      @content;
    }
  } @else {
    @media screen and (min-width: #{$min}) and (max-width: #{$max - 1}) {
      @content;
    }
  }
}

// Get just the pixel value representing one bound of a breakpoint.
// Defaults to 'upper', as in the upper bound of the given range;
// will always return the lower bound on 'xl' because the upper one is null.
// Usage:
// .page { max-width: breakpoint(large); }
@function breakpoint($which: xs, $bound: 'upper') {
  @if not map-has-key($breakpoints, $which) {
    $valid-bps: map-keys($breakpoints);
    @error "`#{$which}` is not a valid breakpoint. Try one of these: `#{$valid-bps}`";
  }

  $bp: map-get($breakpoints, $which);
  @if ($bound == 'upper') and ($which != 'xl') {
    @return nth($bp, 2);
  } @else {
    @return nth($bp, 1);
  }
}