/**
 * Since stencilJs can't use global css files besides for css variables
 * when we need to handle responsive behavior, we have to manually
 * import this scss in the corresponding component.
 *
 * To use any of the mixins, it's as simple as adding a @include
 * with the right tag.
 */

$breakpoint-sm: 320px;
$breakpoint-md: 600px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

@mixin xl {
  @media (min-width: #{$breakpoint-xl}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$breakpoint-lg}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$breakpoint-md}) {
    @content;
  }
}

@mixin sm {
  @media (min-width: 0) {
    @content;
  }
}