/**
 * @file
 *
 * .gridstack: module defined classes to abide its namespace.
 * .grid-stack: JS defined classes, or managed by JS dynamically.
 */

.gridstack--js {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  min-height: 210px;
  position: relative;
}

.gridstack--js.grid-stack-rtl {
  direction: ltr;
}

.gridstack--js.grid-stack-rtl > .box {
  direction: rtl;
}

/*
.gridstack--js,
.gridstack--js .box {
  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
}
*/

.gridstack--js .box,
.gridstack--js .box__content {
  overflow: hidden;
}

.gridstack--js .box {
  min-height: 40px;
}

.gridstack--js .box img {
  height: auto;
}

.gridstack--js .box img,
.gridstack--js .box iframe {
  display: block;
  max-width: 100%;
  width: 100%;
}

/** @todo remove when core library has correct aspect ratio. */
.gridstack--js .box .media--background,
.gridstack--js .box .media--ratio {
  height: 100%;
}

/* .gridstack--js .media, .gridstack--js .blazy__caption */
.gridstack--js .box__category,
.gridstack--js .box__caption,
.gridstack--enabled .box__content {
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

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

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

.gridstack--js .box__content > a,
.gridstack--js .box__content {
  display: block;
  height: 100%;
}

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

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

.gridstack--js .media--loading::before,
.gridstack--js .media--loading .box__caption {
  opacity: 0;
}

.gridstack--js .b-loaded .box__caption,
.grid-stack-static .media--loading::before,
.grid-stack-static .media--loading .box__content {
  opacity: 1;
}

.grid-stack-static .media--loading .box__content {
  background-color: #333;
}

/**
 * When gridstack is packing/ preparing its layout for ~300ms.
 * Do not use display: none. Use visibility, or opacity, and some transitions.
 * .gridstack--packing {}
 */