@use "variables" as _variables;
@use "functions" as _functions;

// --------------------------------------------------------------------------
//  Mixins - Breakpoints - Opinionated from Bootstrap - https://getbootstrap.com/
// --------------------------------------------------------------------------

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
@mixin media-up($name, $breakpoints: _variables.$s-breakpoints) {
   $min: _functions.breakpoint-min($name, $breakpoints);
   @if $min {
      @media (min-width: $min) {
         @content;
      }
   } @else {
      @content;
   }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
@mixin media-down($name, $breakpoints: _variables.$s-breakpoints) {
   $max: _functions.breakpoint-max($name, $breakpoints);
   @if $max {
      @media (max-width: $max) {
         @content;
      }
   } @else {
      @content;
   }
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
@mixin media-only($name, $breakpoints: _variables.$s-breakpoints) {
   $min: _functions.breakpoint-min($name, $breakpoints);
   $max: _functions.breakpoint-max($name, $breakpoints);

   @if $min != null and $max != null {
      @media (min-width: $min) and (max-width: $max) {
         @content;
      }
   } @else if $max == null {
      @include media-up($name, $breakpoints) {
         @content;
      }
   } @else if $min == null {
      @include media-down($name, $breakpoints) {
         @content;
      }
   }
}