// Breakpoints

@import "init/variables";
$breakpoints: $grid-breakpoints;

@import "node_modules/include-media/dist/_include-media";

// Debug
body::after {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10000000000;
  padding: 0 .5em;
  font-family: "FuraCode Nerd Font", "Fira Code", "Fira Mone", monospace;
  color: #ccc;
  text-align: right;
  background: #333;
  opacity: .25;

  @include media(">=xs") {
    content: "#{map-get($grid-breakpoints, xs)}|#{map-get($grid-breakpoints, sm)} >=xs 1⁷";
  }
  @include media(">=sm") {
    content: "#{map-get($grid-breakpoints, sm)}|#{map-get($grid-breakpoints, md)} >=sm 2⁷";
  }
  @include media(">=md") {
    content: "#{map-get($grid-breakpoints, md)}|#{map-get($grid-breakpoints, lg)} >=md 3⁷";
  }
  @include media(">=lg") {
    content: "#{map-get($grid-breakpoints, lg)}|#{map-get($grid-breakpoints, xl)} >=lg 4⁷";
  }
  @include media(">=xl") {
    content: "#{map-get($grid-breakpoints, xl)}|#{map-get($grid-breakpoints, xxl)} >=xl 5⁷";
  }
  @include media(">=xxl") {
    content: "#{map-get($grid-breakpoints, xxl)}|#{map-get($grid-breakpoints, bigxxl)} >=xl 6⁷";
  }
  @include media(">=bigxxl") {
    content: "#{map-get($grid-breakpoints, bigxxl)}|∞ >=xxl 7⁷";
  }
}