$has-nav: false !default;

$stacked-content: em(layout-width(primary, min) + layout-width(secondary, min) + layout-width(inner-spacing));
$not-condensed-content: em(layout-width(page-content, not-condensed));
$partially-condensed-content: em(layout-width(page-content, partially-condensed));

$not-condensed-outer-spacing: em(2 * layout-width(outer-spacing, max));
$partially-condensed-outer-spacing: em(2 * layout-width(outer-spacing, min));

$not-condensed-min-page: $not-condensed-content + $not-condensed-outer-spacing;
$partially-condensed-min-page: $partially-condensed-content + $partially-condensed-outer-spacing;

$nav-size: em(layout-width(nav));
$nav-min-window: em(layout-width(page-with-nav));

@function breakpoint($value, $adjustment: 0) {
  @return em($value) + em($adjustment);
}

// These end up being too awkward because they are already multiline.
// stylelint-disable media-query-list-comma-newline-after

@mixin page-content-breakpoint-before($size) {
  $size: breakpoint($size);

  @if $has-nav {
    @if $size < $partially-condensed-content {
      @media
        (max-width: #{min($nav-min-window, $size)}),
        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size}) { @content; }
    } @else if $size < $not-condensed-content {
      @media
        (max-width: #{min($nav-min-window, $size + $partially-condensed-outer-spacing)}),
        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
    } @else {
      @media
        (max-width: #{min($nav-min-window, $size + $partially-condensed-outer-spacing)}),
        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
    }
  } @else {
    @if $size < $partially-condensed-content {
      @media (max-width: #{$size}) { @content; }
    } @else if $size < $not-condensed-content {
      @media (max-width: #{$size + $partially-condensed-outer-spacing}) { @content; }
    } @else {
      @media (max-width: #{$size + $not-condensed-outer-spacing}) { @content; }
    }
  }
}

@mixin page-content-breakpoint-after($size) {
  $size: breakpoint($size);

  @if $has-nav {
    @if $size < $partially-condensed-content {
      @media
        (max-width: #{$nav-min-window}) and (min-width: #{$size}),
        (min-width: #{$nav-size + $size}) { @content; }
    } @else if $size < $not-condensed-content {
      @media
        (max-width: #{$nav-min-window}) and (min-width: #{$size + $partially-condensed-outer-spacing}),
        (min-width: #{$nav-size + $size + $partially-condensed-outer-spacing}) { @content; }
    } @else {
      @media
        (max-width: #{$nav-min-window}) and (min-width: #{$size + $not-condensed-outer-spacing}),
        (min-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
    }
  } @else {
    @if $size < $partially-condensed-content {
      @media (min-width: #{$size}) { @content; }
    } @else if $size < $not-condensed-content {
      @media (min-width: #{$size + $partially-condensed-outer-spacing}) { @content; }
    } @else {
      @media (min-width: #{$size + $not-condensed-outer-spacing}) { @content; }
    }
  }
}

// stylelint-enable media-query-list-comma-newline-after

@mixin breakpoint-after($breakpoint, $inclusive: true) {
  @media (min-width: #{breakpoint($breakpoint, if($inclusive, 0, 1px))}) {
    @content;
  }
}

@mixin breakpoint-before($breakpoint, $inclusive: true) {
  @media (max-width: #{breakpoint($breakpoint, if($inclusive, 0, -1px))}) {
    @content;
  }
}

@mixin page-content-when-layout-stacked() {
  @include page-content-breakpoint-before($stacked-content) {
    @content;
  }
}

@mixin page-content-when-layout-not-stacked() {
  @include page-content-breakpoint-after($stacked-content) {
    @content;
  }
}

@mixin page-content-when-partially-condensed() {
  @include page-content-breakpoint-before($not-condensed-content) {
    @content;
  }
}

@mixin page-content-when-not-partially-condensed() {
  @include page-content-breakpoint-after($not-condensed-content) {
    @content;
  }
}

@mixin page-content-when-fully-condensed() {
  @include page-content-breakpoint-before($partially-condensed-content) {
    @content;
  }
}

@mixin page-content-when-not-fully-condensed() {
  @include page-content-breakpoint-after($partially-condensed-content) {
    @content;
  }
}

@mixin frame-when-nav-displayed() {
  @include breakpoint-after(layout-width(page-with-nav)) {
    @content;
  }
}

@mixin frame-when-nav-hidden() {
  @include breakpoint-before(layout-width(page-with-nav), false) {
    @content;
  }
}