/* Media Queries */

// breakpoints for varied device viewports, based on bootsrap 5 breakpoints!

// Note that for the max values we subtract 0.02px. As mentioned in the Bootstrap docs this is because:
// Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

$breakpoints: (
  sm: (
    min: 576px,
    max: 575.98px,
  ),
  md: (
    min: 768px,
    max: 767.98px,
  ),
  lg: (
    min: 992px,
    max: 991.98px,
  ),
  xl: (
    min: 1200px,
    max: 1199.98px,
  ),
  xxl: (
    min: 1400px,
    max: 1399.98px,
  ),
);

// mapping out the breakpoints
$extra-small-screen-breakpoint: 322px;
$breakpoints-map: (
  'small': 576px,
  'medium': 768px,
  'large': 992px,
  'xlarge': 1200px,
);

// breakpoints mixin!
@mixin breakpoint($breakpoint, $direction: min) {
  //check if the supplied breakpoint exists in our breakpoits map
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-values: map-get($breakpoints, $breakpoint);
    $breakpoint-min: map-get($breakpoint-values, min);
    $breakpoint-max: map-get($breakpoint-values, max);

    //check if we are writing styles for larger or smaller screens
    @if $direction == min {
      @media (min-width: $breakpoint-min) {
        @content;
      }
    } @else {
      @media (max-width: $breakpoint-max) {
        @content;
      }
    }

    // use the custom value if the breakpoint is not part of the pre-defined list
  } @else {
    @if $direction == min {
      @media (min-width: $breakpoint) {
        @content;
      }
    } @else {
      @media (max-width: $breakpoint) {
        @content;
      }
    }
  }
}

// extra large device special mixin
@mixin media-xl {
  @media screen and (min-width: 1600px) {
    @content;
  }
}

// usage example

// //styling a button following a mobile-first approach

// .button {
//   width: 100%;

//   @include breakpoint(sm) {
//     width: 50%;
//   }

//   @include breakpoint(lg) {
//     width: 200px;
//   }
// }

// //alternatively, you can use it to style smaller screens

// .button {
//   width: 200px;

//   @include breakpoint(md, max) {
//     width: 100%;
//   }

//   // or use a custom value

//   @include breakpoint(400px, max) {
//     width: 50%;
//   }
// }