/* File: app/static/css/grid.css */

/* ---------------------------------------------
 * Grid (main one-cell spacing lines)
 * ------------------------------------------- */
.grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      transparent calc(var(--cell) - 1px),
      var(--grid-bold) calc(var(--cell) - 1px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--cell) - 1px),
      var(--grid-bold) calc(var(--cell) - 1px)
    );
  background-size:
    var(--cell) var(--cell),
    var(--cell) var(--cell);
  background-color: var(--bg);
}

/* ---------------------------------------------
 * Layer Containers
 * ------------------------------------------- */
.tiles,
.tiles-preview,
.outlines,
.outlines-preview,
.tiles-user {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------------------------------------------
 * Tiles
 * ------------------------------------------- */
.tile {
  position: absolute;
  border-radius: 0;
  background: var(--paint-blue);
}

.tiles-preview .tile {
  opacity: 0.45;
}

/* ---------------------------------------------
 * Red Tiles (alternative highlight)
 * ------------------------------------------- */
.tile-red {
  position: absolute;
  border-radius: 0;
  background: var(--paint-red);
}

/* ---------------------------------------------
 * Outlines
 * ------------------------------------------- */
.area-outline {
  position: absolute;
  border: 2px dashed var(--paint-blue-border);
  border-radius: 0;
  background: transparent;
}

.outlines-preview .area-outline {
  opacity: 0.9;
}