/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Opmaak van de gedeelde CAD-componenten.

   Staat in de bibliotheek zelf, niet in Flow of in het portaal: dan hoort het bij de component en
   kan het niet in één van de twee projecten achterblijven. Beide projecten laden hem via
   _content/FerroxXFlow.Cad/cad.css.

   Kleuren via de fx-tokens van beide projecten, met een terugval zodat de component ook leesbaar is
   als die tokens er (nog) niet zijn.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.cad-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 12rem;
    padding: .5rem;
    background: var(--fx-surface, #1b2b2f);
    border: 1px solid var(--fx-border, rgba(69, 99, 106, .14));
    border-radius: var(--fx-radius, .5rem);
}

.cad-viewer svg {
    width: 100%;
    height: 100%;
    max-height: 32rem;
}

/* De buitenkant van het product: de snijlijn. */
.cad-viewer .cad-outer {
    fill: var(--fx-accent-glow-soft, rgba(16, 126, 119, .16));
    stroke: var(--fx-accent, #107e77);
    stroke-width: 1.5;
    /* Meeschalen met de viewBox zou de lijn dik maken bij een klein deel en haarfijn bij een groot
       deel; zo is hij overal even dik. */
    vector-effect: non-scaling-stroke;
}

/* Gaten: geen vulling, want daar zit juist niets. */
.cad-viewer .cad-hole {
    fill: var(--fx-bg, #101a1c);
    stroke: var(--fx-accent, #107e77);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* Graveer- en hulplijnen: wel zichtbaar, maar duidelijk geen snijcontour. */
.cad-viewer .cad-reference {
    fill: none;
    stroke: var(--fx-text-muted, #8aa3a8);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

/* Kantlijnen: waar het deel gezet wordt. */
.cad-viewer .cad-bendline {
    fill: none;
    stroke: var(--fx-warn, #e6a700);
    stroke-width: 1;
    stroke-dasharray: 8 4;
    vector-effect: non-scaling-stroke;
}