@use "sass:meta";

@use "../00-config/00-variables/vars-breakpoints" as *;
@use "../00-config/00-variables/vars-grid" as *;
@use "../01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Set breakpoints
// *
// * Responsive indicators for  use in JS (remove color & position when done)
// *
////////////////////////////////////////////////////////////////////////////////

@if $set-breakpoints == true or $set-breakpoints == yes {
  body::after {
    content: "bp-xs";
    position: fixed;
    bottom: 0;
    right: 0;
    display: block;
    padding: rem(10);
    background: red;
    @if $visual-indicators {
      visibility: visible;
      opacity: 1;
    } @else {
      visibility: hidden;
      opacity: 0;
    }
    @include z-index(bp);
  }
  body.theme-debug-mode::after {
    visibility: visible;
  }

  @if meta.variable-exists(bp-sm) {
    @include bp-sm {
      body::after {
        content: "bp-sm";
        background: #ffce00;
      }
    }
  }

  @if meta.variable-exists(bp-md) {
    @include bp-md {
      body::after {
        content: "bp-md";
        background: yellow;
      }
    }
  }

  @if meta.variable-exists(bp-lg) {
    @include bp-lg {
      body::after {
        content: "bp-lg";
        background: green;
      }
    }
  }
}
