// postcss-bem-linter: define layout-grid
.mdc-layout-grid {
  @include mdc-layout-grid($mdc-layout-grid-default-margin, $mdc-layout-grid-default-gutter);
}

.mdc-layout-grid__cell {
  @include mdc-layout-grid-cell($mdc-layout-grid-default-gutter);

  @each $size in map-keys($mdc-layout-grid-columns) {
    @include mdc-layout-grid-media-query_($size) {
      @for $span from 1 through map-get($mdc-layout-grid-columns, desktop) {
        // Span classes.
        // stylelint-disable max-nesting-depth
        @at-root .mdc-layout-grid__cell--span-#{$span},
          .mdc-layout-grid__cell--span-#{$span}-#{$size}.mdc-layout-grid__cell--span-#{$span}-#{$size} {
          @include mdc-layout-grid-cell-span_($size, $span, $mdc-layout-grid-default-gutter);
        }
        // stylelint-enable max-nesting-depth
      }
    }
  }

  // Order override classes.
  @for $i from 1 through map-get($mdc-layout-grid-columns, desktop) {
    &--order-#{$i} {
      @include mdc-layout-grid-cell-order($i);
    }
  }

  // Alignment classes.
  &--align-top {
    @include mdc-layout-grid-cell-align(top);
  }

  &--align-middle {
    @include mdc-layout-grid-cell-align(middle);
  }

  &--align-bottom {
    @include mdc-layout-grid-cell-align(bottom);
  }
}

// postcss-bem-linter: end