/* MACdraw - what the drawing table alone wears; the window, the menus
   and the dialogs come from the system sheet. The window takes the whole
   desk: 608 by 389 units, the desk being 612 by 414 with the title bar
   and the borders taking the rest. */

#app-macdraw {
  display: flex;
  width: calc(608 * var(--u));
  height: calc(389 * var(--u));
}

/* ---- the tool rail ----------------------------------------------------- */

#draw-tools {
  width: calc(42 * var(--u));
  flex: none;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
}

.draw-tool {
  appearance: none;
  border: 0;
  border-bottom: 1px solid #000;
  background: #fff;
  padding: calc(5 * var(--u)) 0;
  display: flex;
  justify-content: center;
}

.draw-tool svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }

.draw-tool.selected { background: #000; }
.draw-tool.selected svg { filter: invert(1); }

/* The four line weights, each row showing its own stroke. */
#draw-widths { margin-top: calc(8 * var(--u)); border-top: 1px solid #000; }

.draw-width {
  appearance: none;
  border: 0;
  border-bottom: 1px solid #000;
  background: #fff;
  display: block;
  width: 100%;
  height: calc(17 * var(--u));
  position: relative;
}

.draw-width i {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  background: #000;
}

.draw-width[data-w="1"] i { height: 1px; }
.draw-width[data-w="2"] i { height: calc(2 * var(--u)); }
.draw-width[data-w="4"] i { height: calc(4 * var(--u)); }
.draw-width[data-w="8"] i { height: calc(8 * var(--u)); }

.draw-width.selected { background: #000; }
.draw-width.selected i { background: #fff; }

/* The pattern swatches, painted by the script from its own table; the
   chosen one wears a heavy ring. */
#draw-patterns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(5 * var(--u));
  border-top: 1px solid #000;
  margin-top: calc(8 * var(--u));
}

.draw-pattern {
  appearance: none;
  border: 1px solid #000;
  background: #fff;
  padding: 0;
  display: block;
  line-height: 0;
}

.draw-pattern canvas {
  width: 100%;
  height: calc(14 * var(--u));
  image-rendering: pixelated;
}

.draw-pattern.selected {
  outline: calc(2 * var(--u)) solid #000;
  outline-offset: 1px;
}

/* ---- the sheet --------------------------------------------------------- */

#draw-area {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* The bitmap is 512 by 352 and the area 566 by 389 units: the same
   proportions to a third of a percent, so the pixels stay square. */
#draw-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  image-rendering: pixelated;
  touch-action: none;
}

/* The text tool's entry, standing at the anchor until Enter lays the
   line onto the sheet. */
#draw-text-input {
  position: absolute;
  transform: translateY(-50%);
  width: calc(160 * var(--u));
  font: inherit;
  font-size: calc(13 * var(--u));
  border: 1px dashed #000;
  background: #fff;
  padding: 0 calc(3 * var(--u));
}

#draw-text-input[hidden] { display: none; }