/* dragula-specific styles */

[data-jss-structure-type=section] {
  /* PARENT FLEX SETTINGS */
  display: flex; /* default = flex - other options: inline-flex */
  /*flex-direction: row;*/ /* default = row - other options: row-reverse, column, column-reverse*/
  /*flex-wrap: wrap;*/ /* default = nowrap - other options: wrap, wrap-reverse */
  flex-flow: row wrap; /* shorthand for flex-direction & flex-wrap... default = row nowrap - other options: column-reverse, column wrap, row-reverse wrap-reverse, etc */
  justify-content: space-around; /* default = flex-start - other options: flex-end, center, space-between, space-around, space-evenly */
  align-items: stretch; /* default = stretch - other options: flex-start, flex-end, center, baseline */
  align-content: stretch; /* default = stretch - other options: flex-start, flex-end, center, space-between, space-around, space-evenly */
  /* OTHER SETTINGS */
  min-height: 8px;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  /* JAM SETTINGS (USERS CAN'T CHANGE) */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  /* HERO SETTINGS */
}

[data-jss-structure-type=column-wrapper] {
  /* CHILD FLEX SETTINGS */
  order: 0; /* default = 0 - other options: -1, 1, 2, etc. */
  align-self: stretch; /* default = auto - other options: flex-start, flex-end, center, baseline, stretch */
  /*flex-grow: 0;*/ /* default = 0 - other options: 1, 2, etc. */
  /*flex-shrink: 1;*/ /* default = 1 - other options: 0, 2, etc. */
  /*flex-basis: auto;*/ /* default = auto - other options: content, X%, Xem, Xpx, etc. */
  flex: 1 1 25%; /* shorthand for flex-grow, flex-shrink & flex-basis... default = 0 1 auto */
  /* JAM SETTINGS (USERS CAN'T CHANGE) */
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  box-sizing: border-box; /* default = content-box - other options: border-box */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

[data-jss-structure-type=column-container] {  
  /* JAM SETTINGS (USERS CAN'T CHANGE) */
  height: 100%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  box-sizing: border-box; /* default = content-box - other options: border-box */
  /* CLIENT SETTINGS */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

[data-jss-structure-type=column] {
  /* OTHER SETTINGS */
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  /* JAM SETTINGS (USERS CAN'T CHANGE) */
  height: 100%;
  box-sizing: border-box; /* default = content-box - other options: border-box */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

[data-jss-structure-type=widget] {
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  /* JAM SETTINGS (USERS CAN'T CHANGE) */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  word-wrap: break-word; /* Added when column gets too small for even one word */
}

/*[data-jss-structure-type=section],
[data-jss-structure-type=column],
[data-jss-structure-type=widget] {
  cursor: initial;
}*/

[data-jss-structure-type=section-handle],
[data-jss-structure-type=column-handle],
[data-jss-structure-type=widget-handle],
[data-jss-structure-type=clone] {
  display: none;
}

[data-jss-structure-type=add] {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: stretch;
  text-align: center;
  padding: 25px 0;
  margin-top: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

[data-jss-structure-type=add] [data-jss-structure-type=add-section],
[data-jss-structure-type=add] [data-jss-structure-type=add-column],
[data-jss-structure-type=add] [data-jss-structure-type=add-widget] {
  position: relative;
  order: 0;
  align-self: stretch;
  flex: 0 1 30%;
  height: 100px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  outline: initial;
  outline-offset: 0px;
  outline: 2px dotted rgba(255, 255, 255, 0.2);
  outline-offset: -2px;
}

[data-jss-structure-type=add] [data-jss-structure-type=add-section] {
  background-color: #f78200;
}

[data-jss-structure-type=add] [data-jss-structure-type=add-column] {
  background-color: #5ebd3e;
}

[data-jss-structure-type=add] [data-jss-structure-type=add-widget] {
  background-color: #973999;
}

[data-jss-structure-type=add] [data-jss-structure-type=add-widget] p,
[data-jss-structure-type=add] [data-jss-structure-type=section-handle],
[data-jss-structure-type=add] [data-jss-structure-type=column-handle],
[data-jss-structure-type=add] [data-jss-structure-type=widget-handle],
[data-jss-structure-type=add] [data-jss-structure-type=clone] {
  display: none;
}

[data-jss-structure-type=add] [data-jss-structure-type=section-wrapper],
[data-jss-structure-type=add] [data-jss-structure-type=column-wrapper],
[data-jss-structure-type=add] [data-jss-structure-type=widget-wrapper] {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: none;
}

[data-jss-structure-type=add-text] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0;
}

[data-jss-structure-type=trash] {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  width: 140px;
  height: 140px;
  padding: 10px
  margin-top: 0;
  margin-bottom: 0;
  line-height: 140px;
  text-align: center;
  background-color: darkred;
}

[data-jss-structure-type=trash] span {
  height: 100%;
  vertical-align: middle;
}

[data-jss-structure-type=trash] div {
  display: none;
}

/*
 * note that styling gu-mirror directly is a bad practice because it's too generic.
 * you're better off giving the draggable elements a unique class and styling that directly!
 */
[data-jss-structure-type=section-wrapper],
[data-jss-structure-type=column-wrapper],
[data-jss-structure-type=widget-wrapper],
.gu-mirror {
  transition: opacity 0.4s ease-in-out;
}

[data-jss-structure-type=section-wrapper],
[data-jss-structure-type=column-wrapper],
[data-jss-structure-type=widget-wrapper] {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.gu-mirror {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  background-color: rgba(255, 255, 255, 0.2);
}

.gu-mirror > * {
  visibility: hidden;
}