@use './mixins/dev_and_debug';
@use './core/mediaqueries';
@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;

.visualized-page-spacing div,
.visualized-grid div {
  @include dev_and_debug.development-style;

  padding: 0;
  height: 100px;
}

.visualized-page-spacing span {
  display: inline-block;
  padding: 1em;
}

.visualized-grid div {
  display: none;

  $columns: (
    'zero': sbb-tokens.$sbb-layout-base-grid-columns-zero,
    'small': sbb-tokens.$sbb-layout-base-grid-columns-small,
    'large': sbb-tokens.$sbb-layout-base-grid-columns-large,
    'ultra': sbb-tokens.$sbb-layout-base-grid-columns-ultra,
  );

  // Only show divs (columns) which are available on the grid for each breakpoint
  @each $breakpoint, $columnCount in $columns {
    @include mediaqueries.mq($from: #{$breakpoint}) {
      &:nth-child(-n + #{$columnCount}) {
        display: block;
      }
    }
  }
}