/* Fence drawing parts from tools/drawings.py. Each look sets the crop, --ink, --ink-2, --paper, --wood*, --metal, --galv*, --fd-seam and --fd-dim-size. */
.fd {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.fd :where(rect, path, circle) {
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fd-ground {
  fill: none;
  stroke-width: 1.5;
}

.fd-dim {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1;
}

.fd-dim-text {
  fill: var(--ink-2);
  font-size: var(--fd-dim-size);
  font-weight: 500;
}

.fd-hidden {
  fill: none;
  stroke: var(--ink-2);
  stroke-dasharray: 6 5;
  opacity: 0.7;
}

.fd-hw {
  fill: var(--ink);
}

.fd--wood .fd-board {
  fill: var(--wood);
}

.fd--wood .fd-board-alt {
  fill: var(--wood-2);
}

.fd--wood .fd-rail,
.fd--wood .fd-post,
.fd--wood .fd-cap {
  fill: var(--wood-3);
}

.fd--vinyl .fd-board,
.fd--vinyl .fd-rail,
.fd--vinyl .fd-post,
.fd--vinyl .fd-cap,
.fd--picket .fd-picket,
.fd--picket .fd-rail,
.fd--picket .fd-post,
.fd--picket .fd-cap {
  fill: var(--paper);
}

.fd-seam {
  fill: none;
  stroke: var(--fd-seam);
}

.fd--aluminum .fd-picket,
.fd--aluminum .fd-rail,
.fd--aluminum .fd-post,
.fd--aluminum .fd-cap {
  fill: var(--metal);
  stroke: var(--metal);
}

.fd-arch {
  fill: none;
  stroke: var(--metal);
  stroke-width: 3;
}

.fd--chain-link .fd-post,
.fd--chain-link .fd-rail {
  fill: var(--galv);
  stroke: var(--galv-2);
}

/* Fill comes from the mesh pattern; no outline. */
.fd-mesh {
  stroke: none;
}

.fd-weave {
  fill: none;
  stroke: var(--galv-2);
  stroke-width: 1.1;
  vector-effect: none;
}

.fd-frame,
.fd-wire {
  fill: none;
  stroke: var(--galv-2);
  stroke-width: 2.5;
}