@layer components {

  /* Colour chip for an element type or status (list rows + legend). */
  .swatch {
    --c: var(--color-ink);
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--c);
    border: 1px solid var(--c);
    border-radius: 3px;
  }

  .swatch--radiator {
    --c: var(--color-radiator);
  }

  .swatch--towel-rail {
    --c: var(--color-towel-rail);
  }

  .swatch--boiler {
    --c: var(--color-boiler);
  }

  .swatch--gas-heater {
    --c: var(--color-gas-heater);
  }

  .swatch--electric-heater {
    --c: var(--color-electric-heater);
  }

  /* Hatched like the floor-heating zones in the sketch and the 3D scene. */
  .swatch--floor-heating {
    --c: var(--color-floor-heating);
    background: repeating-linear-gradient(-45deg, var(--c) 0 1.5px, transparent 1.5px 4px);
  }

  .swatch--manifold {
    --c: var(--color-manifold);
  }

  /* Pipe layers. */
  .swatch--pipe-supply {
    --c: var(--color-pipe-supply);
  }

  .swatch--water-cold {
    --c: var(--color-water-cold);
  }

  .swatch--sewer-outlet {
    --c: var(--color-sewer);
  }

  .swatch--stairs {
    --c: var(--color-stairs);
  }

  .swatch--water-source {
    --c: var(--color-water-cold);
  }

  .swatch--bath {
    --c: var(--color-plumbing);
  }

  .swatch--shower {
    --c: var(--color-plumbing);
  }

  .swatch--faucet {
    --c: var(--color-plumbing);
  }

  .swatch--toilet {
    --c: var(--color-plumbing);
  }

  .swatch--bidet {
    --c: var(--color-plumbing);
  }

  .swatch--steam-oven {
    --c: var(--color-appliance);
  }

  .swatch--coffee-machine {
    --c: var(--color-appliance);
  }

  .swatch--ice-maker,
  .swatch--dishwasher,
  .swatch--washing-machine {
    --c: var(--color-appliance);
  }

  .swatch--tile {
    --c: var(--color-covering-tile);
  }

  .swatch--wood {
    --c: var(--color-covering-wood);
  }

  /* Guessed, not yet confirmed. */
  .swatch.is-guess {
    background: transparent;
    border-style: dashed;
  }

  /* The climate's units and vents. */
  .swatch--wall-unit {
    --c: var(--color-air-conditioner);
  }

  .swatch--cassette {
    --c: var(--color-air-conditioner);
  }

  .swatch--ducted-unit {
    --c: var(--color-air-conditioner);
  }

  .swatch--outdoor-unit {
    --c: var(--color-air-conditioner);
  }

  .swatch--recuperator {
    --c: var(--color-ventilation);
  }

  .swatch--duct-fan {
    --c: var(--color-ventilation);
  }

  .swatch--facade-grille {
    --c: var(--color-ventilation);
  }

  .swatch--room-recuperator {
    --c: var(--color-ventilation);
  }

  .swatch--supply-vent {
    --c: var(--color-air-supply);
  }

  .swatch--extract-vent {
    --c: var(--color-air-extract);
  }

  /* The climate's route layers. */
  .swatch--refrigerant {
    --c: var(--color-refrigerant);
  }

  .swatch--condensate {
    --c: var(--color-condensate);
  }
}