/* make images masonery full screen width */
/* .litegraph.litecontextmenu { */
.fullWidthMenu {
  left: initial !important;
  top: 100px !important;
}

/* https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ */
.masonry {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  grid-auto-rows: 0;
}

.masonry-item {
  border-radius: 5px;
}

.masonry-item {
   background-color: #eee;
   border-radius: 5px;
   overflow: hidden;
   text-align: center
}

.masonry-item,
.masonry-item img {
  position: relative;
  display: inline-grid;
  /* max-height is handled by contextMenuFilterThumbnails.js since it's a manager option */
  /* max-height: 100px; */
  /* trick to get lazy load holder size reserved AND keep aspect ratio: add min-width < width, and max-width 100% */
  min-width: 50px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin:auto;
}


/* TODO: explore alternative: https://www.geeksforgeeks.org/css-image-overlay-hover-title/ */
/* to control the showText, we need to hide it from the initiator */
/* but we cannot do that because that alters other image loaders like rgthree, while our ext is not even used */
/* .litegraph .litemenu-entry, .litemenu-title { */
  /* font-size: 0; */
/* } */

.litegraph .hideText {
  font-size: 0;
}

.showText {
  font-size: small !important;
}

/* :root { */
  /* counter-reset: masonry; */
/* } */
.masonry-item:after {
  content: attr(data-size);
  
  /* counter-increment: masonry; */
  /* content: counter(masonry); */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/attr */
  /* content: attr(data-value); */
  position: absolute;
  top: 0;
  font-size: small;
  height: 0;
  width: 100%;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .1s linear;
}

.masonry-item:hover:after {
  color: white;
  height: 1em;
  background-color: rgba(0, 0, 0, .75);
}

/* always show folder names: method 2 (top text, does not alter height of first row) */
.masonry-item.folder:after {
  color: white;
  height: 1em;
  background-color: rgba(0, 0, 0, .50);
}

.btn-delete {
  opacity: 0.1;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  cursor: pointer;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  color: #666;
  z-index: 2;
  touch-action: manipulation;
}
.masonry-item:hover .btn-delete,
.btn-delete:hover {
  opacity: 1;
}

