scss/layout/_breakpoints.scss

@use "sass:list";
@use "sass:map";
@use "sass:string";
@use "../config" as *;

// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
//
// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
//    >> breakpoint-next(sm)
//    md
//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    md
//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
//    md
@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
  $n: list.index($breakpoint-names, $name);
  @if not $n {
    @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
  }
  // Use @if/@else because list.nth would error if evaluated when $n equals list length
  @if $n < list.length($breakpoint-names) {
    @return list.nth($breakpoint-names, $n + 1);
  } @else {
    @return null;
  }
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    576px
@function breakpoint-min($name, $breakpoints: $breakpoints) {
  $min: map.get($breakpoints, $name);
  @return if(sass($min != 0): $min; else: null);
}

// Maximum breakpoint width for range media queries.
// Returns the breakpoint value to use as an upper bound in range queries.
//
//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    576px
//    >> breakpoint-max(xxl, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    null
@function breakpoint-max($name, $breakpoints: $breakpoints) {
  @if $name == null {
    @return null;
  }
  $max: map.get($breakpoints, $name);
  @return if(sass($max and $max > 0): $max; else: null);
}

// Escape a name for use at the start of a CSS identifier.
// Leading digits are hex-escaped (e.g., 2xl becomes \32 xl).
@function css-escape-ident($name) {
  $name-str: "#{$name}";
  $digits: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9";
  $first: string.slice($name-str, 1, 1);

  @if list.index($digits, $first) {
    @return "\\3#{$first} #{string.slice($name-str, 2)}";
  }

  @return $name-str;
}

// Returns a blank string if smallest breakpoint, otherwise returns the name
// with an escaped colon as a Tailwind-style prefix for responsive class names.
// Leading digits are CSS-escaped (e.g., 2xl becomes \32 xl) for valid identifiers.
//
//    >> breakpoint-prefix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    ""  (Returns a blank string)
//    >> breakpoint-prefix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    "sm\:"
//    >> breakpoint-prefix(2xl, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
//    "\32 xl\:"
@function breakpoint-prefix($name, $breakpoints: $breakpoints) {
  @if breakpoint-min($name, $breakpoints) == null {
    @return "";
  }

  @return "#{css-escape-ident($name)}\\:";
}

// Iterate all breakpoints and provide the current name and prefix.
//
//    @include loop-breakpoints-up() using ($breakpoint, $prefix) {
//      // ...
//    }
@mixin loop-breakpoints-up($breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint, $breakpoints);
    @content($breakpoint, $prefix);
  }
}

// Iterate all breakpoints and provide the current name, next name, and next prefix.
//
//    @include loop-breakpoints-down() using ($breakpoint, $next, $prefix) {
//      // ...
//    }
@mixin loop-breakpoints-down($breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $next: breakpoint-next($breakpoint, $breakpoints);
    $prefix: breakpoint-prefix($next, $breakpoints);
    @content($breakpoint, $next, $prefix);
  }
}

// Backwards-compatible alias for next/down breakpoint loops.
@mixin loop-breakpoints($breakpoints: $breakpoints) {
  @include loop-breakpoints-down($breakpoints) using ($breakpoint, $next, $prefix) {
    @content($breakpoint, $next, $prefix);
  }
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (width >= $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (width < $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (width >= $min) and (width < $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($lower, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($upper, $breakpoints) {
      @content;
    }
  }
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
  $min:  breakpoint-min($name, $breakpoints);
  $next: breakpoint-next($name, $breakpoints);
  $max:  breakpoint-max($next, $breakpoints);

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


// Container queries
//
// Container queries allow elements to respond to the size of a containing element
// rather than the viewport. These mixins mirror the media-breakpoint-* mixins above.
//
// scss-docs-start container-query-mixins

// Set an element as a query container.
//
//    @include set-container();                    // container-type: inline-size
//    @include set-container(size);                // container-type: size
//    @include set-container(inline-size, sidebar); // container: sidebar / inline-size
//
@mixin set-container($type: inline-size, $name: null) {
  @if $name {
    container: #{$name} / #{$type};
  } @else {
    container-type: #{$type};
  }
}

// Container query of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider within the container.
//
//    @include container-breakpoint-up(md) { ... }
//    @include container-breakpoint-up(lg, sidebar) { ... }  // Query named container
//
@mixin container-breakpoint-up($name, $container-name: null, $breakpoints: $breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @if $container-name {
      @container #{$container-name} (width >= #{$min}) {
        @content;
      }
    } @else {
      @container (width >= #{$min}) {
        @content;
      }
    }
  } @else {
    @content;
  }
}

// Container query of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower within the container.
//
//    @include container-breakpoint-down(lg) { ... }
//    @include container-breakpoint-down(lg, sidebar) { ... }  // Query named container
//
@mixin container-breakpoint-down($name, $container-name: null, $breakpoints: $breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @if $container-name {
      @container #{$container-name} (width < #{$max}) {
        @content;
      }
    } @else {
      @container (width < #{$max}) {
        @content;
      }
    }
  } @else {
    @content;
  }
}

// Container query that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints within the container.
//
//    @include container-breakpoint-between(md, xl) { ... }
//    @include container-breakpoint-between(md, xl, sidebar) { ... }  // Query named container
//
@mixin container-breakpoint-between($lower, $upper, $container-name: null, $breakpoints: $breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @if $container-name {
      @container #{$container-name} (width >= #{$min}) and (width < #{$max}) {
        @content;
      }
    } @else {
      @container (width >= #{$min}) and (width < #{$max}) {
        @content;
      }
    }
  } @else if $max == null {
    @include container-breakpoint-up($lower, $container-name, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include container-breakpoint-down($upper, $container-name, $breakpoints) {
      @content;
    }
  }
}

// Container query between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint within the container.
//
//    @include container-breakpoint-only(md) { ... }
//    @include container-breakpoint-only(md, sidebar) { ... }  // Query named container
//
@mixin container-breakpoint-only($name, $container-name: null, $breakpoints: $breakpoints) {
  $min:  breakpoint-min($name, $breakpoints);
  $next: breakpoint-next($name, $breakpoints);
  $max:  breakpoint-max($next, $breakpoints);

  @if $min != null and $max != null {
    @if $container-name {
      @container #{$container-name} (width >= #{$min}) and (width < #{$max}) {
        @content;
      }
    } @else {
      @container (width >= #{$min}) and (width < #{$max}) {
        @content;
      }
    }
  } @else if $max == null {
    @include container-breakpoint-up($name, $container-name, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include container-breakpoint-down($next, $container-name, $breakpoints) {
      @content;
    }
  }
}
// scss-docs-end container-query-mixins