/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

@import "@material/layout-grid/variables";
@import "@material/layout-grid/mixins";

@mixin layout-grid($query: mdc-feature-all()) {
  :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)};
    }
  }

  .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);
      }
    }
  }

  .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);
      }
    }
  }

  .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.
          @at-root .layout-grid__cell--span-#{$span},
            .layout-grid__cell--span-#{$span}-#{$size},
            .layout-grid__cell[data-span="#{$span}"],
            .layout-grid__cell[data-span-#{$size}="#{$span}"] {
            @include mdc-layout-grid-cell-span_($size, $span, $gutter);
          }
        }
      }
    }

    // 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);
    }
  }

  .layout-grid--fixed-column-width,
  .layout-grid[data-grid-fixed-width=true] {
    @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);
      }
    }
  }

  .layout-grid--align-left,
  [data--grid-align="left"] {
    margin-right: auto;
    margin-left: 0;
  }

  .layout-grid--align-right,
  [data-grid-align="right"] {
    margin-right: 0;
    margin-left: auto;
  }
}
