/**
 * @file
 * Provides basic theme to avoid broken display OOTB for js-driven layouts.
 *
 * At most cases, might need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

/* .gridstack--js .media, .gridstack--js .blazy__caption */
.gridstack--js .box__caption,
.gridstack--js .box__category,
.gridstack--js .field__label,
.is-gs-enabled .box__content {
  top: 0;
  margin: 0;
}

.gridstack--js .box__category,
.gridstack--js .box__caption,
.gridstack--js .field__label {
  position: absolute;
}

/** Should not be shown, but in case confusing broken gapless grids. */
.gridstack--js .field__label {
  top: 15px;
  left: 15px;
}

.gridstack--js .box__caption {
  width: 100%;
}

.gridstack--js .box__category {
  right: 0;
  left: auto;
  width: auto;
  padding: 5px 15px;
  text-align: right;
}

.gridstack--js .box--stamp .box__content {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
}

.gridstack--js .box__stamp > * {
  padding: 15px;
}

/**
 * When gridstack is packing/ preparing its layout for ~100ms.
 * Do not use display: none. Use visibility, or opacity, and some transitions.
 * This assumes a theme which outputs .js class on HTML element, else useless.
 */
.js .is-gs-packing:not(.ungridstack) {
  visibility: hidden;
  opacity: 0;
}