/**
 * @file
 * This file is implementing native browser CSS Grid Layout.
 *
 * Not needed by original js-driven GridStack, nor static Bootstrap/Foundation.
 * This is a counterpart of gridstack.library.css.
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid
 * This file is NOT loaded at admin UI pages, just front-end.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

.gridstack--native {
  /* gap: attr(data-vertical-margin px, "10px");  csslint allow: known-properties, gap */
  /* Masonry grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); */
  /*
  grid-template-columns: repeat(4, 80px);
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(12, 1fr);
  */
  grid-template-columns: auto;
  /* Unfortunately  attr() support is still sparse, not even Chrome 2020.
  * This part is dynamically overriden by gridstack.native.min.js to make it
  * responsive based on config. */
  grid-auto-rows: 80px;
  align-content: start; /* csslint allow: known-properties, start */
  justify-content: center;
  /* grid-auto-rows: attr(data-cell-height px, "80px"); */
  gap: 10px; /* csslint allow: known-properties, gap */
}

.gridstack--native.is-gs-enabled {
  display: grid;
}

/** Without margin. */
.gridstack--native.is-gs-nomargin {
  gap: 0; /* csslint allow: known-properties, gap */
}

.gridstack--native > .box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* @todo must disable
  overflow: visible; */
}

/* The original .box js-driven layout is absolute like Masonry, etc. */
.gridstack--native > .box,
/**
 * Absolute is bad for Isotope. Good for static.
 * Relative bad for embedded Slick.
 * @todo re-check for the best deal.
 */
.gridstack--native .box__content {
  position: relative;
}

/* The rules are defined at gridstack/ratio, dups in case forgotten/ overriden. */
.gridstack--native.is-gs-enabled .box__content {
  /*
   * @todo check for various contents, including empty, if ok using relative.
   * Make it absolute again if any issue. Relative is possible when its inner
   * contents have defined heights as solved by JS for few contents. Not all.
   */
  /* position: absolute; */
  width: 100%; /* Normaly auto for JS layout. */
  height: 100%; /* Should be 0 with padding hack, but it doesn't work that way. */
}

/** grid-row == height */
.gridstack--native > .box[gs-h="1"] {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.gridstack--native > .box[gs-h="2"] {
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.gridstack--native > .box[gs-h="3"] {
  -ms-grid-row-span: 3;
  grid-row: span 3;
}

.gridstack--native > .box[gs-h="4"] {
  -ms-grid-row-span: 4;
  grid-row: span 4;
}

.gridstack--native > .box[gs-h="5"] {
  -ms-grid-row-span: 5;
  grid-row: span 5;
}

.gridstack--native > .box[gs-h="6"] {
  -ms-grid-row-span: 6;
  grid-row: span 6;
}

.gridstack--native > .box[gs-h="7"] {
  -ms-grid-row-span: 7;
  grid-row: span 7;
}

.gridstack--native > .box[gs-h="8"] {
  -ms-grid-row-span: 8;
  grid-row: span 8;
}

.gridstack--native > .box[gs-h="9"] {
  -ms-grid-row-span: 9;
  grid-row: span 9;
}

.gridstack--native > .box[gs-h="10"] {
  -ms-grid-row-span: 10;
  grid-row: span 10;
}

.gridstack--native > .box[gs-h="11"] {
  -ms-grid-row-span: 11;
  grid-row: span 11;
}

.gridstack--native > .box[gs-h="12"] {
  -ms-grid-row-span: 12;
  grid-row: span 12;
}

/** grid-column == width */
.gridstack--native > .box[gs-w="1"] {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.gridstack--native > .box[gs-w="2"] {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.gridstack--native > .box[gs-w="3"] {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}

.gridstack--native > .box[gs-w="4"] {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}

.gridstack--native > .box[gs-w="5"] {
  -ms-grid-column-span: 5;
  grid-column: span 5;
}

.gridstack--native > .box[gs-w="6"] {
  -ms-grid-column-span: 6;
  grid-column: span 6;
}

.gridstack--native > .box[gs-w="7"] {
  -ms-grid-column-span: 7;
  grid-column: span 7;
}

.gridstack--native > .box[gs-w="8"] {
  -ms-grid-column-span: 8;
  grid-column: span 8;
}

.gridstack--native > .box[gs-w="9"] {
  -ms-grid-column-span: 9;
  grid-column: span 9;
}

.gridstack--native > .box[gs-w="10"] {
  -ms-grid-column-span: 10;
  grid-column: span 10;
}

.gridstack--native > .box[gs-w="11"] {
  -ms-grid-column-span: 11;
  grid-column: span 11;
}

.gridstack--native > .box[gs-w="12"] {
  -ms-grid-column-span: 12;
  grid-column: span 12;
}

/* The disabled grid for mobile. */
.gridstack--native.is-gs-disabled,
.gridstack--native.is-gs-disabled > .box {
  display: block;
}

/**
 * It appears CSSLint doesn't abide by its own rule. It still complains for
 * something it doesn't understand while already being told to ignore it.
 * Perhaps it is high time Drupal tests to switch to stylelint?
 */
/* csslint ignore:start */
@media screen and (min-width: 1024px) {
  /* https://github.com/CSSLint/parser-lib/issues/228 */
  .gridstack--native {
    grid-template-columns: repeat(12, 1fr); /* csslint allow: known-properties, grid-template-columns */
  }
}
/* csslint ignore:end */