@import "@material/layout-grid/mdc-layout-grid";

.v-column-hide-overflow {
  overflow: hidden;
}

.v-column--relative {
  position: relative;
}

// Used to support side to side scrolling for wide grid elements.
// Grids that contain a wide table use this.
.v-grid__wide {
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
}

@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);

    $tops: (
            top3: $gutter,
            top2: $gutter/2,
            top1: $gutter/4,
            top0: 0
    );

    $rights: (
            right3: $gutter,
            right2: $gutter/2,
            right1: $gutter/4,
            right0: 0
    );

    $bottoms: (
            bottom3: $gutter,
            bottom2: $gutter/2,
            bottom1: $gutter/4,
            bottom0: 0
    );

    $lefts: (
            left3: $gutter,
            left2: $gutter/2,
            left1: $gutter/4,
            left0: 0
    );

    @each $top, $tsize in $tops {
      @each $right, $rsize in $rights {
        @each $bottom, $bsize in $bottoms {
          @each $left, $lsize in $lefts {
            .v-padding-#{$bottom}-#{$left}-#{$right}-#{$top} {
              padding: $tsize $rsize $bsize $lsize !important;
            }
          }
        }
      }
    }
  }
}

.v-grid-column-align-right {
  margin-right: 0;
  margin-left: auto;
}

@each $size in map-keys($mdc-layout-grid-columns) {
  @include mdc-layout-grid-media-query_($size) {
    div.v-gutter-none {
      grid-gap: 0;
      gap: 0;
    }
  }
}