/* No visible image while dragging */
/* Changed to a grey background because the transition for adding images messed up the opacity value */
.sortable-drag {
  /* opacity: 0; */
  background-color: rgb(119, 136, 153);
}

/* fade in/out when adding/deleting images */
div.image-col.htmx-swapping {
  opacity: 0;
  transition: opacity 1s ease-out;
}
div.image-col.htmx-added {
  opacity: 0;
}
div.image-col {
  opacity: 1;
  transition: opacity 1s ease-in;
}

/* Glow behind image on hover */
.image {
  transition: all .3s ease-in-out;
  cursor: default;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.image:hover {
  box-shadow: 0px 0px 30px 10px #6299e9;
}

/* Set icons and text on top of image */
.image-container {
  position: relative;
  margin: 0 auto;
  width: 320px;
  height: 300px;
}
.overlay-icon {
  transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: .5s;
  transition-delay: 0s;
}
.image-container:hover .overlay-icon {
  opacity: .6;
}
.overlay-text {
  position: absolute;
  top: 10%;
  left:50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  user-select: none;
  pointer-events: none;
}
.overlay-handle {
  position: absolute;
  left: 5%;
  top: 2%;
  cursor: grab;
  background-color: grey;
  z-index: 2;
  opacity: .2;
}
.overlay-delete {
  position: absolute;
  right: 3%;
  top: 2%;
  z-index: 2;
  opacity: .2;
  cursor: pointer;
}