/**
 * @file
 * This file is for: native CSS grid, js-driven. Not Bootstrap/Foundation.
 *
 * Intentionally over-specified to not break easily.
 * As of v1.1, the library still does not display the corect aspect ratio.
 * The following is an attempt to fix it internally, not perfect, yet.
 * Combined with gridstack/ratio.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

/**
 * Sizer to determine correct aspect ratio, don't display: none.
 */
.gridstack.gridstack--js > .box.gridstack__sizer {
  position: relative; /* Native Grid must be relative, else collapsed. */
  z-index: -1;
  top: 0;
  left: 0;
  visibility: hidden;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  font-size: 0;
  line-height: 0;
  /*
  background: red;
  opacity: 1;
  visibility: visible;
  z-index: 99;
*/
}

.gridstack.gridstack--js > .box.gridstack__sizer .box__content {
  position: relative;
  overflow: hidden;
  /* height: 0 !important;
  height: calc(100% - 16px); */
  margin: 0;
  padding-top: 0;
  padding-bottom: 100%;
}

.gridstack.gridstack--js > .box.gridstack__sizer .box__content,
.gridstack.gridstack--js > .box.gridstack__sizer .box__content::before {
  left: 0;
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  font-size: 0;
  line-height: 0;
}

.gridstack.gridstack--js > .box.gridstack__sizer .box__content::before {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  content: "";
}

/**
 * Sizer to determine correct aspect ratio specific for JS.
 * These rules is for gridstack js, not native Grid.
 */
.gridstack--gs.is-gs-layout > .box.gridstack__sizer {
  position: absolute; /* GridStack JS must be absolute, else collapsed. */
}

.gridstack--gs.is-gs-layout > .box.gridstack__sizer .box__content {
  height: 0 !important; /* csslint allow: known-properties, important */
}

/* We are done sizing, safe to ditch it. Basically taking it out of grid calc. */
.gridstack.gridstack--js > .box.gridstack__sizer.is-gs-sized {
  /* Native Grid must be relative, else collapsed. Unless done its calc. */
  position: fixed !important; /* csslint allow: known-properties, important */
}