// Responsive breakpoints media query helper functions
// How to use:
// @include break-xs() {
//    body {
//        background: red;
//    }
// }
@mixin break-xs() {
  $xs-bp: map-get($RESPONSIVE_BREAKPOINTS, "xs");
  @media screen and (max-width: $xs-bp) {
    @content;
  }
}

@mixin break-sm() {
  $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, "sm");
  $md-bp: map-get($RESPONSIVE_BREAKPOINTS, "md");
  @media screen and (min-width: $sm-bp) and (max-width: ($md-bp - 1px)) {
    @content;
  }
}

@mixin break-sm-min() {
  $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, "sm");
  @media screen and (min-width: $sm-bp) {
    @content;
  }
}

@mixin break-sm-max() {
  $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, "sm");
  @media screen and (max-width: ($sm-bp - 0.02px)) {
    @content;
  }
}

@mixin break-md() {
  $md-bp: map-get($RESPONSIVE_BREAKPOINTS, "md");
  $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, "lg");
  @media screen and (min-width: $md-bp) and (max-width: ($lg-bp - 1px)) {
    @content;
  }
}

@mixin break-md-min() {
  $md-bp: map-get($RESPONSIVE_BREAKPOINTS, "md");
  @media screen and (min-width: $md-bp) {
    @content;
  }
}

@mixin break-md-max() {
  $md-bp: map-get($RESPONSIVE_BREAKPOINTS, "md");
  @media screen and (max-width: ($md-bp - 0.02px)) {
    @content;
  }
}

@mixin break-lg() {
  $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, "lg");
  $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
  @media screen and (min-width: $lg-bp) and (max-width: ($xl-bp - 1px)) {
    @content;
  }
}

@mixin break-lg-min() {
  $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, "lg");
  @media screen and (min-width: $lg-bp) {
    @content;
  }
}

@mixin break-lg-max() {
  $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, "lg");
  @media screen and (max-width: ($lg-bp - 0.02px)) {
    @content;
  }
}

@mixin break-xl() {
  $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
  $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xxl");
  @media screen and (min-width: $xl-bp) and (max-width: ($xxl-bp - 1px)) {
    @content;
  }
}

@mixin break-xl-min() {
  $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
  @media screen and (min-width: $xl-bp) {
    @content;
  }
}

@mixin break-xl-max() {
  $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
  @media screen and (max-width:  ($xl-bp - 0.02px)) {
    @content;
  }
}

@mixin break-xxl() {
  $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xxl");
  @media screen and (min-width: $xxl-bp) {
    @content;
  }
}

@mixin break-xxl-max() {
  $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xxl");
  @media screen and (max-width: ($xxl-bp - 0.02px)) {
    @content;
  }
}