// Extracted from the (unmaintained) microscope-sass package.
//
// Responsive styling is limited to two kinds of viewports: mobile and desktop. We
// currently do not support intermediate viewports. This means we only consider one
// breakpoint value.

/// The breakpoint until where mobile-only styling is applied.
$breakpoint: 768px !default;

// Styling applied to mobile viewports, and only to mobile viewports.
@mixin mobile-only {
  @media screen and (max-width: $breakpoint - 1px) {
    @content;
  }
}

// Styling applied to viewports larger than the mobile breakpoint.
@mixin desktop {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}