// section based on bootstrap 3 - see /templates/default/Guidelines_SCSS-Coding.md

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  0px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

// redefining Bootstrap 5 breakpoints with Bootstrap 3 breakpoints
$grid-breakpoints: (
    xs: $screen-xs,
    sm: $screen-sm,
    md: $screen-md,
    lg: $screen-lg,
    xl: 1400px,
    xxl: 1400px) !default;

// end of section based on bootstrap 3

// note that this excludes print!
@mixin on-screen-size($size) {
  @if $size == small {
    @media screen and (max-width: $screen-sm) { @content; };
  } @else if $size == medium {
    @media screen and (min-width: $screen-sm + 1px) { @content; };
  } @else if $size == large {
    @warn "You SHOULD NOT use on-screen-size(large) for big layout changes. Please consider using on-screen-size(medium) as your largest breakpoint if possible.";
    @media screen and (min-width: $screen-md + 1px) { @content; };
  } @else {
    @error("Invalid input for on-screen-size mixin.");
  }
}