/* If a style would not be needed for exporting the map to an image, put it
here. */

.wall-cell-adding, .wall-cell-editing {
  background-color: rgb(215, 215, 190);
  z-index: 2;
}

.wall-cell-removing {
  background-color: rgb(232, 221, 182);
  z-index: 2;
}

.wall-cell-removing > .wall-cover, .wall-cell-editing > .wall-cover {
  visibility: hidden;
}

.text-cell-adding, .text-cell-editing {
  border: 1px dashed rgb(50, 50, 50);
  margin: 1px 2px 2px 1px;
}

.text-cell-removing {
  border: 1px dashed red;
}

.image-cell-removing {
  opacity: 0.4;
}

.text-cell-textarea, .image-cell-textarea {
  position: absolute;
  z-index: 11;
  resize: none;
  margin: 1px 0px 0px 1px;
  overflow: hidden;
  text-align: center;
  border: 0;
  outline: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: 0px 0px 8px 2px rgba(50,50,50,0.5);
  user-select: auto;
}

.image-cell-textarea {
  background-color: rgba(255, 255, 255, 0.5);
}

.hover-widget {
  position: absolute;
  z-index: 10;
}

.image-hover-widget {
  pointer-events: none;
  border: 1px dashed rgb(50, 50, 50);
  margin: -1px 1px 1px -1px;
  box-sizing: content-box;
}

.image-hover-widget-during-delete {
  border: 1px dashed red;
}

.text-hover-widget {
  cursor: text;
  margin: 2px 3px 3px 2px;
}

.stairs-hover-widget {
  pointer-events: none;
  border: 1px dashed rgb(50, 50, 50);
  margin: -1px;
  box-sizing: content-box;
  padding: 0 1px 1px 0;
}

.stairs-hover-widget-during-delete {
  border: 1px dashed red;
}

.hover-widget-during-delete {
  border: 1px dashed red;
  margin: 1px 0 0 1px;
}

.delete-widget {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: pointer;
  z-index: 12;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><line x1='0' y1='0' x2='10' y2='10' stroke='red' stroke-width='2' /><line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='2' /></svg>");
}

.text-delete-widget {
  margin-left: -4px;
  margin-top: -4px;
}

.image-delete-widget {
  margin-top: -4px;
  margin-left: -7px;
}

.stairs-delete-widget {
  margin-top: -4px;
  margin-left: -6px;
}

.resize-widget {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: se-resize;
  z-index: 12;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><polygon points='0,10 10,10 10,0'/></svg>");
}

.text-resize-widget {
  margin-left: -4px;
  margin-top: -4px;
}

.image-resize-widget {
  margin-left: -7px;
  margin-top: -7px;
}

.stairs-resize-widget {
  margin-top: -5px;
  margin-left: -6px;
}

.move-widget {
  position: absolute;
  background-color: yellow;
  width: 10px;
  height: 10px;
  cursor: move;
  z-index: 12;
  margin-top: -4px;
  margin-left: -4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect x='0' y='0' width='10' height='10' stroke-width='1' fill='none' stroke='black'/></svg>");
}

.stairs-cell-adding, .stairs-cell-removing {
  filter: opacity(0.6);
}

.image-cell-removing {
  border-color: red;
}

.shape-cell-corner-removing {
  z-index: -1;
}

.shape-cell-primary-removing, .shape-cell-horizontal-removing,
.shape-cell-vertical-removing {
  z-index: -2;
}

.door-cell-adding, .window-cell-adding {
  background-color: rgba(255, 250, 240, 0.2);
  border-color: rgba(100, 100, 100, 0.8);
}

.door-cell-removing, .window-cell-removing {
  background-color: rgba(255, 250, 240, 0.5);
  border-color: rgba(100, 100, 100, 0.8);
}

.bars-cell-adding, .fence-cell-adding,
.curtain-cell-adding, .archway-cell-adding {
  opacity: 0.7;
}

.bars-cell-removing, .fence-cell-removing,
.curtain-cell-removing, .archway-cell-removing {
  opacity: 0.3;
}

.text-cell-adding {
  color: rgba(50, 50, 50, 0.6);
}

.text-cell-removing {
  color: rgba(50, 50, 50, 0.3);
}

.editor-view .hidden-cell-adding {
  background-image: repeating-linear-gradient(45deg, rgba(102, 51, 153, 0.2), rgba(102, 51, 153, 0.2) 3px, rgba(100, 100, 100, 0.2) 3px, rgba(100, 100, 100, 0.2) 6px);
}

.editor-view .hidden-cell-removing {
  background-image: repeating-linear-gradient(45deg, rgba(102, 51, 153, 0.1), rgba(102, 51, 153, 0.1) 3px, rgba(100, 100, 100, 0.1) 3px, rgba(100, 100, 100, 0.1) 6px);
}

.gmoverlay-square-adding {
  opacity: 0.2;
}

.gmoverlay-square-removing {
  opacity: 0.1;
}

.selected-cell {
  background-color: rgba(223, 219, 229, 0.25);
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%239C92AC' fill-opacity='0.15'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.recently-changed {
  outline-color: red;
  transition: unset;
}