/* Picture layers in the collaborative board's layers list (GM, player and guest boards).
   The base rules style every span in a layer row as the little colour swatch, so the picture
   row restates its own spans with enough specificity to opt out. */
.collab-board-layer.is-image {
  grid-template-columns: 38px minmax(0, 1fr);
}

.collab-board-layer.is-image.is-selected {
  outline: 2px solid #c9a227;
  outline-offset: -2px;
}

.collab-board-layer.is-image.is-hidden strong {
  opacity: 0.55;
  text-decoration: line-through;
}

.collab-board-layer.is-image .collab-board-layer-thumb {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 6px;
  background-color: rgba(128, 128, 128, 0.18);
  background-image: none;
  background-position: center;
  background-size: cover;
}

.collab-board-layer.is-image .collab-board-layer-thumb[style] {
  background-color: transparent;
}

.collab-board-layer.is-image .collab-board-layer-opacity {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.78rem;
}

.collab-board-layer.is-image .collab-board-layer-opacity span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

.collab-board-layer.is-image .collab-board-layer-opacity input[type="range"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.collab-board-layer.is-image .collab-board-layer-opacity-value {
  min-width: 3.4ch;
  text-align: right;
}

/* The Move tool, only the GM has it. */
.collab-board-card[data-collab-tool="move"] .collab-board-canvas-shell canvas {
  cursor: move;
}

/* Six small actions fit a 3 x 2 grid instead of six stacked bars. */
.collab-board-layer.is-image .collab-board-layer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collab-board-layer.is-image .collab-board-layer-actions button {
  flex: none;
  min-height: 30px;
}

/* In the GM tool view the layers list sits in a 300px popover: stack its rows so they scroll
   vertically, rather than a sideways strip that cuts the second row off. */
html.gm-tool-view-collab-board .collab-board-layers.gm-board-layers-popover {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
html.gm-tool-view-collab-board .collab-board-layers.gm-board-layers-popover > .collab-board-layer {
  flex: 0 0 auto;
}