@layer components {

  /* Element ID label floating next to each element in the 3D scene. */
  .tag {
    --c: var(--color-ink);
    margin-top: -4px;
    padding: 3px 5px;
    font: 600 11px/1 ui-monospace, monospace;
    color: var(--c);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    background: color-mix(in oklch, var(--color-surface-sunken) 75%, transparent);
    border: 1px solid color-mix(in oklch, var(--c) 55%, transparent);
    border-radius: 3px;

    &.is-hovered,
    &.is-selected {
      color: var(--white);
      border-color: var(--white);
    }

    &.is-dimmed {
      opacity: 0.2;
    }

    /* Context from another workspace: visible, not clickable. */
    &.is-faded {
      opacity: 0.3;
      pointer-events: none;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .tag--floor-heating {
    --c: var(--color-floor-heating);
  }


  /* The designer's: a click picks the floor; the active one stands out. */
  .floor-tag--designer {
    padding-bottom: 4px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;

    &.is-active {
      color: var(--color-ink);
    }
  }

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

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

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

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

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

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

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

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

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

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

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