@import 'bootstrap/variables';

/// Extra small devices ONLY (phones, less than 768px)
/// @example @include media-query-max-xsmall
/// @output @media (max-width: 767px)
/// @group Media queries
@mixin media-query-max-xsmall {
  @media only screen and (max-width: calculateEm($screen-xs-max/1px)) {
    @content;
  }
}

/// Extra small devices ONLY (phones, less than 480px)
/// @example @include media-query-below-xsmall
/// @output @media (max-width: 479px)
/// @group Media queries
@mixin media-query-below-xsmall {
  @media only screen and (max-width: calculateEm(($screen-xs-min - 1)/1px)) {
    @content;
  }
}

/// Extra small devices (480px and up)
/// @example @include media-query-xsmall
/// @output @media only screen and (min-width: 30em)
/// @group Media queries
@mixin media-query-xsmall {
  @media only screen and (min-width: calculateEm($screen-xs/1px)) {
    @content;
  }
}

/// Extra small devices to Small devices(480px to 768px)
/// @example @include media-query-xsmall-small
/// @output @media (min-width: 30em) and (max-width: 48em)
/// @group Media queries

@mixin media-query-xsmall-small {
  @media (min-width: calculateEm($screen-xs/1px)) and (max-width: calculateEm($screen-xs-max/1px)) {
    @content;
  }
}

@mixin media-query-small-landscape {
  @media only screen and (min-width: calculateEm($screen-sm/1px)) and (orientation: landscape) {
    @content;
  }
}

/// Small devices (tablets, 768px and up)
/// @example @include media-query-small
/// @output @media only screen and (min-width: 48em)
/// @group Media queries
@mixin media-query-small {
  @media only screen and (min-width: calculateEm($screen-sm/1px)) {
    @content;
  }
}

/// Medium devices (desktops, 992px and up)
/// @example @include media-query-medium
/// @output @media only screen and (min-width: 62em)
/// @group Media queries
@mixin media-query-medium {
  @media only screen and (min-width: calculateEm($screen-md/1px)) {
    @content;
  }
}

@mixin media-query-max-medium {
  @media only screen and (max-width: calculateEm($screen-md-min/1px)) {
    @content;
  }
}

/// Large devices (large desktops, 1200px and up)
/// @example @include media-query-large
/// @output @media only screen and (min-width: 75em)
/// @group Media queries
@mixin media-query-large {
  @media only screen and (min-width: calculateEm($screen-lg/1px)) {
    @content;
  }
}