// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "./variables";
@import "./mixins";

:root {
  @each $size in map-keys($mdc-layout-grid-columns) {
    --mdc-layout-grid-margin-#{$size}: map-get($mdc-layout-grid-default-margin, $size);
    --mdc-layout-grid-gutter-#{$size}: map-get($mdc-layout-grid-default-gutter, $size);
    --mdc-layout-grid-column-width-#{$size}: map-get($mdc-layout-grid-column-width, $size);
  }
}

// postcss-bem-linter: define layout-grid
.mdc-layout-grid {
  @each $size in map-keys($mdc-layout-grid-columns) {
    @include mdc-layout-grid-media-query_($size) {
      $margin: map-get($mdc-layout-grid-default-margin, $size);

      @include mdc-layout-grid($size, $margin, $mdc-layout-grid-max-width);
    }
  }
}

.mdc-layout-grid__inner {
  @each $size in map-keys($mdc-layout-grid-columns) {
    @include mdc-layout-grid-media-query_($size) {
      $margin: map-get($mdc-layout-grid-default-margin, $size);
      $gutter: map-get($mdc-layout-grid-default-gutter, $size);

      @include mdc-layout-grid-inner($size, $margin, $gutter);
    }
  }
}

.mdc-layout-grid__cell {
  // select the upper breakpoint
  $upper-breakpoint: nth(map-keys($mdc-layout-grid-columns), 1);

  @each $size in map-keys($mdc-layout-grid-columns) {
    @include mdc-layout-grid-media-query_($size) {
      $gutter: map-get($mdc-layout-grid-default-gutter, $size);

      @include mdc-layout-grid-cell($size, $mdc-layout-grid-default-column-span, $gutter);

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

  // Order override classes.
  @for $i from 1 through map-get($mdc-layout-grid-columns, $upper-breakpoint) {
    &--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);
  }
}

.mdc-layout-grid--fixed-column-width {
  @each $size in map-keys($mdc-layout-grid-columns) {
    @include mdc-layout-grid-media-query_($size) {
      $margin: map-get($mdc-layout-grid-default-margin, $size);
      $gutter: map-get($mdc-layout-grid-default-gutter, $size);
      $column-width: map-get($mdc-layout-grid-column-width, $size);

      @include mdc-layout-grid-fixed-column-width($size, $margin, $gutter, $column-width);
    }
  }
}

.mdc-layout-grid--align-left {
  margin-right: auto;
  margin-left: 0;
}

.mdc-layout-grid--align-right {
  margin-right: 0;
  margin-left: auto;
}
// postcss-bem-linter: end