@import './styles/variables';
@import './styles/mixins';

.dev-grid {
  align-items: stretch;
  background-color: transparent;
  block-size: 100%;
  display: flex;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 50%;
  opacity: 0.15;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 9999;

  .container {
    @include grid-container;

    .warp {
      @include grid-cols($grid-columns);
      height: 100%;

      @include media-down(md) {
        @include grid-cols($grid-columns-mobile);
        row-gap: 0;
      }
    }
  }

  span {
    background-color: #ccc;
    display: block;
  }
}

.dev-breakpoints {
  font-size: 0;
  position: fixed;
  text-align: center;
  z-index: 9999;
  bottom: 0;
  left: 0;
  pointer-events: none;

  &::after {
    @include text-dev;

    content: 'auto';
    display: block;
    color: #fff;
    padding: 4px;
    white-space: pre;
    background-color: #000;
    opacity: 0.20;
  }

  @each $breakpoint, $width in $grid-breakpoints {
    @include media-up($breakpoint) {
      &::after {
        content: '#{$breakpoint}\A#{$width}';
      }
    }
  }
}