/* Utilities :: Grid */

// Basic Fabric Element, for illustrative purposes only.

.u-fabric {
  padding: $fabric-global-spacing-unit;
  text-align: center;
  // outline: 1px solid red;
}

$fabric-grid: top-left, top-middle, top-right, left, middle, right, bottom-left,
  bottom-middle, bottom-right;

@each $fabric-key in $fabric-grid {
  .u-fabric-grid__#{$fabric-key} {
    grid-area: $fabric-key;
  }
}

.u-fabric-grid {
  display: grid;
}

$fabric-grid-columns: (
  '--one': 1,
  '--two': 2,
  '--three': 3,
  '--four': 4,
) !default;

$fabric-grid-gaps: (
  null: $fabric-global-spacing-unit,
  '--tiny': $fabric-global-spacing-unit-tiny,
  '--small': $fabric-global-spacing-unit-small,
  '--large': $fabric-global-spacing-unit-large,
  '--huge': $fabric-global-spacing-unit-huge,
) !default;

@each $fabric-grid, $grid in $fabric-grid-columns {
  [class~='u-fabric-grid#{$fabric-grid}'] {
    grid-template-columns: repeat($grid, 1fr);
  }
}

@each $fabric-grid-gap, $gap in $fabric-grid-gaps {
  [class~='u-fabric-grid-gap#{$fabric-grid-gap}'] {
    grid-gap: $gap;
  }
}

.u-fabric-grid--1\/2 {
  grid-template-columns: 33% auto;
}

.u-fabric-grid--2\/1 {
  grid-template-columns: 66% auto;
}

// Icon Grid (display only)

$iconGridCols: 12;

.u-fabric-icon-grid-small {
  grid-template-columns: repeat($iconGridCols, 40px);
  grid-gap: $fabric-global-spacing-unit;
}

.u-fabric-icon-grid-default {
  grid-template-columns: repeat($iconGridCols, 48px);
  grid-gap: $fabric-global-spacing-unit;
}

.u-fabric-icon-grid-large {
  grid-template-columns: repeat($iconGridCols, 72px);
  grid-gap: $fabric-global-spacing-unit;
}

.u-fabric-icon-grid-jumbo {
  grid-template-columns: repeat(8, 120px);
  grid-gap: $fabric-global-spacing-unit;
}

.u-fabric-icon-grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(96px, auto));
  grid-gap: $fabric-global-spacing-unit;
}