/*
Grid

Snippets i.e. atomic abstractions of useful grid functionality.

Caveats:
- Do not combine two `x-grid--layout-rows-…` nor two `x-grid--layout-cols-…`.

Reference:
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

%x-grid--layout-rows-equal-max-height - Same height rows, match tallest content
%x-grid--layout-rows-equal-set-height - Same height rows, default var. height (custom properties: `--height`)
%x-grid--layout-cols-equal-set-count  - Same width columns, auto. column count (custom properties: `--count`)
%x-grid--layout-cols-equal-min-width  - Same width columns, default min. width (custom properties: `--width`)
%x-grid--layout-cols-equal-min-width-max-count  - Same width columns, default min. width, max. column count (custom properties: `--min-width`, `--max-cols`, `--row-height`, `--gap`)
%x-grid--content-align-center         - Align content vert.ly and horz.ly center

Styleguide Tools.Mixins.Grid
*/





/* Layout */



/* Layout: Columns */

/* Layout: Columns: Same Width, Preset Col. Count */

%x-grid--layout-cols-equal-set-count, /* DEPRECATED */
.x-grid--layout-cols-equal-set-count {
  /* --count */

  grid-template-columns: repeat(var(--count), auto);
}

/* Layout: Columns: Same Width, Preset Min. Width */

%x-grid--layout-cols-equal-min-width, /* DEPRECATED */
.x-grid--layout-cols-equal-min-width {
  /* --width */

  grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
}
/* Suggestion for User: Avoid content overflow */
/*
.x-grid--layout-cols-equal-min-width > * {
  max-width: 100%; \/* effectual if cell width is smaller than content *\/
  max-height: 100%; \/* effectual if cell height is smaller than content *\/
}
*/

/* Layout: Columns: Same Width, Preset Col. Count, Preset Min. Width */
/* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
/* TODO: Replace `x-grid--layout-cols-equal-min-width` with this */

.x-grid--layout-cols-equal-min-width-max-count {
  /* input */
  --gap: var(--global-space--grid-gap);
  --max-cols: 7;
  --min-width: 250px;
  --row-height: auto;
    /* auto (row height match tallest content in only that row) */
    /* 1fr (row height match tallest content of entire grid) */

  /* calculated */
  --gap-count: calc(var(--max-cols) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--gap));
  --max-width: calc( ( 100% - var(--total-gap-width) ) / var(--max-cols));

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), var(--max-width)), 1fr));
  grid-auto-rows: var(--row-height);
}
/* Suggestion for User: Avoid content overflow */
/*
.x-grid--layout-cols-equal-min-width-max-count > * {
  max-width: 100%; \/* effectual if cell width is smaller than content *\/
  max-height: 100%; \/* effectual if cell height is smaller than content *\/
}
*/



/* Layout: Rows */

/* Layout: Rows: Same Height (equal to height of tallest content in grid) */

%x-grid--layout-rows-equal-max-height, /* DEPRECATED */
.x-grid--layout-rows-equal-max-height {
  grid-auto-rows: 1fr;
}

/* Layout: Rows: Same Height (equal to default, variable value) */

%x-grid--layout-rows-equal-set-height, /* DEPRECATED */
.x-grid--layout-rows-equal-set-height {
  /* --height */

  grid-auto-rows: var(--height);
}





/* Content */



/* Content: Align Vert/Horz Center */

%x-grid--content-align-center, /* DEPRECATED */
.x-grid--content-align-center {
  justify-items: center;
  align-items: center;
}





/* Suggestions for User */

/*
.user-block {
  --gap: ...;

  display: grid;
  gap: var(--gap);
}

.user-block--modifier {
  @extend .x-grid--...;
}

\/* Avoid leting content size (e.g. image) exceed cell size *\/
\/* FAQ: An intentionally loose limitation (so user can choose to ignore it) *\/
.user-block * {
  max-height: 100%;
  max-width: 100%;
}
*/