// ============================================================================
// :: Breakpoints
// ============================================================================
/**
 * These mixins are used to add breakpoints between your SCSS lines. You can use
 * them within selectors to contain properties or you can place selectors within
 * to limit styling until or to another breakpoint.
 */

/**
 * Apply styling to every element above the given minimum width. This is
 * based on the mobile-first principle.
 *
 * Params:
 * $min-width: minimum width till the media query is applied to
 */
@mixin respond-at($min-width) {
  @media screen and (min-width: $min-width + 1px) {
    @content;
  }
}

/**
 * Apply styling to every element below the given maximum width.
 *
 * Params:
 * $max-width: maximum width till the media query is applied to
 */
@mixin respond-to($max-width) {
  @media screen and (max-width: $max-width) {
    @content;
  }
}

/**
 * Apply styling to every element between a minimum and maximum width. This
 * mixin should be used only in certain situation and is a last resort.
 *
 * Params:
 * $min-width: minimum width till the media query is applied to
 * $max-width: maximum width till the media query is applied to
 */
@mixin respond-between($min-width, $max-width) {
  @media screen and (min-width: $min-width + 1px) and (max-width: $max-width) {
    @content;
  }
}