// TODO: Refactor 'breakpoint-and-up' (fold into main breakpoint mixin).
// https://jira.plaid.com/browse/SITE-2050

// These breakpoints have been moved over from _settings.scss in order
// to encapsulate the logic in a breakpoint-specific mixin as we start
// to transition away from Foundation.

$breakpoints: (
  small: 0,
  small-max: 639px,
  medium: 640px,
  medium-max: 1023px,
  large: 1024px,
  large-max: 1279px,
  main-nav-breakpoint: 1120px,
  xlarge: 1280px,
  xxlarge: 1440px,
  xxxlarge: 1680px,
);

// Now breakpoint-and-up is just a wrapper for our breakpoint
// function. Will save the complete switchover for another day.

@mixin breakpoint-and-up($min-width-breakpoint) {
  @include breakpoint($min-width-breakpoint) {
    @content;
  }
}

// The main breakpoint mixin. Identical in invocation to
// the Foundation breakpoint mixin. Uses the breakpoint
// overrides set up in _settings.scss and copied above as
// $breakpoints. This could probably be DRYed up, good bit
// of code duplication here.

@mixin breakpoint($sizeVal) {
  $size: nth($sizeVal, 1);
  $restriction: '';

  @if length($sizeVal) == 2 {
    $restriction: nth($sizeVal, 2);
  }

  // $size is a string, e.g. "small", "xxlarge"
  @if type-of($size) == 'string' {
    @if $size == 'small' {
      @if $restriction == 'only' {
        @media screen and (max-width: map-get($breakpoints, small-max)) {
          @content;
        }
      } @else if $restriction == 'down' {
        @media screen and (max-width: map-get($breakpoints, small-max)) {
          @content;
        }
      } @else {
        @content;
      }
    }
    @if $size == 'medium' {
      @if $restriction == 'only' {
        @media screen and (min-width: map-get($breakpoints, medium)) and (max-width: map-get($breakpoints, medium-max)) {
          @content;
        }
      } @else if $restriction == 'down' {
        @media screen and (max-width: map-get($breakpoints, medium-max)) {
          @content;
        }
      } @else {
        @media screen and (min-width: map-get($breakpoints, medium)) {
          @content;
        }
      }
    }
    @if $size == 'large' {
      @if $restriction == 'only' {
        @media screen and (min-width: map-get($breakpoints, large)) and (max-width: map-get($breakpoints, large-max)) {
          @content;
        }
      } @else if $restriction == 'down' {
        @media screen and (max-width: map-get($breakpoints, large-max)) {
          @content;
        }
      } @else {
        @media screen and (min-width: map-get($breakpoints, large)) {
          @content;
        }
      }
    }
    @if $size == 'xlarge' {
      @media screen and (min-width: map-get($breakpoints, xlarge)) {
        @content;
      }
    }
    @if $size == 'xxlarge' {
      @media screen and (min-width: map-get($breakpoints, xxlarge)) {
        @content;
      }
    }
    @if $size == 'xxxlarge' {
      @media screen and (min-width: map-get($breakpoints, xxxlarge)) {
        @content;
      }
    }
    @if $size == 'main-nav-breakpoint' {
      @media screen and (min-width: map-get($breakpoints, main-nav-breakpoint)) {
        @content;
      }
    }
  }
  // $size is a number -- Sass considers a value a number even if the unit of measure is included, e.g. "99px"
  @else {
    @if unitless($size) {
      //  e.g. "640"
      @if $restriction == 'down' {
        @media screen and (max-width: #{$size}px) {
          @content;
        }
      } @else {
        @media screen and (min-width: #{$size}px) {
          @content;
        }
      }
    } @else {
      // e.g. "99px"
      @if $restriction == 'down' {
        @media screen and (max-width: #{$size}) {
          @content;
        }
      } @else {
        @media screen and (min-width: #{$size}) {
          @content;
        }
      }
    }
  }
}