/**
 * @file
 * Provides basic static layout for GridStack JS layout, Outlayer Isotope, etc.
 *
 * This is not needed by native CSS Grid, nor CSS Bootstrap/Foundation.
 * This file is also loaded at admin UI pages, so beware to not break it.
 * This file can be loaded along with gridstack.library.css, or if using
 * Outlayer Isotope to support both native CSS Grid and dynamic sortable layout.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

.is-gs-layout .box {
  left: 0;
}

.is-gs-enabled.is-gs-layout > .box {
  position: absolute;
  padding: 0;
}

.is-gs-enabled.is-gs-layout > .box,
.is-gs-enabled.is-gs-layout > .box[gs-w="12"] {
  width: 100%;
}

/** @todo use mediaqueries to avoid !important rule somewhere. */
.is-gs-enabled.is-gs-layout > .box[gs-w="1"] {
  width: 8.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="2"] {
  width: 16.66667%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="3"] {
  width: 25%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="4"] {
  width: 33.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="5"] {
  width: 41.66667%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="6"] {
  width: 50%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="7"] {
  width: 58.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="8"] {
  width: 66.66667%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="9"] {
  width: 75%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="10"] {
  width: 83.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-w="11"] {
  width: 91.66667%;
}

/**
 * The following rules are front-end only, note the .gridstack--gs class.
 * The above rules are also affecting admin UI pages.
 * Gridstack is disabled by default at 768.
 * @todo remove once the library stops outputting inline styles.
 * @todo remove if JS fixes do address it all.
 */
.gridstack--gs.is-gs-disabled {
  /* Also to fix ungridstack with Masonry/ Packery layout inline styles. */
  height: auto !important; /* csslint allow: known-properties, important */
}

/* @todo re-enable here if JS fixes don't address it all, yet. */
/* Needed !important to override JS inline styles, or unexpected overrides. */
/* Also to fix ungridstack with Masonry/ Packery layout inline styles. */
/* Masonry/ Packery during resizing.
.gridstack--gs.is-gs-disabled > .box {
  float: none;
  height: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin-bottom: 0;
  width: 100% !important;
  transform: none !important;
}
*/