$page-max-width: layout-width(primary, max) + layout-width(secondary, max) +
  layout-width(inner-spacing);

$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) {
  $adjusted-value: em($adjustment);

  // Reduces chances to have a style void
  // between two media queries
  // See https://github.com/sass-mq/sass-mq/issues/6
  @if ($adjustment == -1px) {
    $adjusted-value: -0.01em;
  } @else if ($adjustment == 1px) {
    $adjusted-value: 0.01em;
  }

  @return em($value) + $adjusted-value;
}

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

  @if $size < $partially-condensed-content {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @media (max-width: #{min($nav-min-window, $size)}),
        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size}) {
          @content;
      }
    }

    @media (max-width: #{$size}) {
      @content;
    }
  } @else if $size < $not-condensed-content {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @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;
      }
    }

    @media (max-width: #{$size + $partially-condensed-outer-spacing}) {
      @content;
    }
  } @else {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @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;
      }
    }

    @media (max-width: #{$size + $not-condensed-outer-spacing}) {
      @content;
    }
  }
}

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

  @if $size < $partially-condensed-content {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @media (max-width: #{$nav-min-window}) and (min-width: #{$size}),
        (min-width: #{$nav-size + $size}) {
          @content;
      }
    }

    @media (min-width: #{$size}) {
      @content;
    }
  } @else if $size < $not-condensed-content {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @media (max-width: #{$nav-min-window}) and (min-width: #{$size + $partially-condensed-outer-spacing}),
        (min-width: #{$nav-size + $size + $partially-condensed-outer-spacing}) {
          @content;
      }
    }

    @media (min-width: #{$size + $partially-condensed-outer-spacing}) {
      @content;
    }
  } @else {
    // prettier-ignore
    [data-has-navigation] #{if(&, "&", "*")} {
      @media (max-width: #{$nav-min-window}) and (min-width: #{$size + $not-condensed-outer-spacing}),
        (min-width: #{$nav-size + $size + $not-condensed-outer-spacing}) {
          @content;
      }
    }

    @media (min-width: #{$size + $not-condensed-outer-spacing}) {
      @content;
    }
  }
}

@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-when-not-max-width() {
  @include breakpoint-before($page-max-width) {
    @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;
  }
}