/**
 * @file
 * This is a modified version of the original GridStack library CSS.
 *
 * Not needed by native CSS Grid, nor static Bootstrap/Foundation.
 * This is a counterpart of gridstack.native.css.
 * This file depends on gridstack.static.css so to re-use at Outlayer Isotope.
 * This file is also loaded at admin UI pages, so beware to not break it.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

.is-gs-enabled.is-gs-layout > .box {
  min-width: 8.33333%;
}

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

.is-gs-enabled.is-gs-layout > .box[gs-x="0"] {
  left: 0%;
}

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

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

.is-gs-enabled.is-gs-layout > .box[gs-x="1"] {
  left: 8.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-min-w="1"] {
  min-width: 8.33333%;
}

.is-gs-enabled.is-gs-layout > .box[gs-max-w="1"] {
  max-width: 8.33333%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.is-gs-enabled.is-gs-layout > .box[gs-x="12"] {
  left: 100%;
}

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

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

.is-gs-enabled.is-gs-layout .box__content {
  position: absolute;
  z-index: 0;
}

/* @todo make it dynamic. Currently only 3: 5, 10, 15 */
/* margin 10 / 2 = 5 */
.is-gs-enabled.is-gs-layout[data-gs-vm="5"] .box__content {
  inset: 5px;
}

/* margin 20 / 2 = 10 */
.is-gs-enabled.is-gs-layout[data-gs-vm="10"] .box__content {
  inset: 10px;
}

/* margin 30 / 2 = 15 */
.is-gs-enabled.is-gs-layout[data-gs-vm="15"] .box__content {
  inset: 15px;
}

/* margin 0 + noMargin being enabled. Admin UI requires absolute. */
.gridstack.is-gs-nomargin > .box > .box__content,
.gridstack.is-gs-nomargin > .box > .placeholder-content {
  inset: 0;
}

/* @todo re-check to use relative when having no margin. */
/* Overrides default rules with over-specified. */
.is-gs-disabled.is-gs-layout .box .box__content,
.gridstack--gs.is-gs-nomargin .box__content {
  position: relative;
  right: auto;
  left: auto;
  width: 100%;
}

/** Destroyed. */
.is-gs-destroyed > .gridstack__box.box {
  position: relative;
  left: auto;
  float: left;
}

/* stylelint-disable declaration-no-important */
.gridstack--js.is-gs-disabled .gridstack__box {
  position: relative;
  top: auto !important;
}

.is-gs-destroyed > .box > .box__content,
.gridstack--gs.is-gs-disabled .box__content {
  position: relative;
}