@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/media-query';
@use '../../mixins/spacing';

/**
 * 1. If horizontal items are shown at the wrong column count, they will appear
 *    to break the grid. This rule keeps items densely packed so it will always
 *    appear visually correct.
 */

.o-deck {
  display: grid;
  grid-auto-flow: dense; /* 1 */
  grid-gap: spacing.$fluid-gap;

  /**
   * We define a media query for our initial grid so child elements will flex
   * for viewports smaller than our minimum column size.
   *
   * `auto-fill` creates extra columns as space allows, and will not stretch
   * columns to fill empty space (which makes sure adjacent objects with
   * differing item counts will stay aligned).
   */

  @media (width >= breakpoint.$xs) {
    grid-template-columns: repeat(
      auto-fill,
      minmax(#{size.$width-card-column-min}, 1fr)
    );
  }
}

/**
 * Responsive column count modifiers
 *
 * These modifier classes specify a hard-set column count at a particular
 * breakpoint. This may be used to limit the column count to a particular
 * maximum or to coordinate with adjacent elements.
 */

@for $i from 1 through 6 {
  .o-deck--#{$i}-column {
    @include media-query.breakpoint-classes($from: s, $to: xl) {
      grid-template-columns: repeat(#{$i}, 1fr);
    }
  }
}

/**
 * Content alignment modifier
 */

.o-deck--align-start {
  align-items: start;
}