/* Ontwerpstudio 3D — eigen iconen voor de keuzetegels.
   Gegenereerd met ~/diebouw-backups/studio-tools/build-iconen.py; niet met de hand bewerken. */

.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="60"])::before,
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="80"])::before,
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="100"])::before,
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="120"])::before,
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="140"])::before,
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="40"])::before,
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="45"])::before,
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="60"])::before,
.jdb-studio .chip:has(input[name="p-meubel-wastafel"][value="kom"])::before,
.jdb-studio .chip:has(input[name="p-meubel-wastafel"][value="geintegreerd"])::before,
.jdb-studio .chip:has(input[name="p-meubel-aantal"][value="1"])::before,
.jdb-studio .chip:has(input[name="p-meubel-aantal"][value="2"])::before,
.jdb-studio .chip:has(input[name="p-meubel-verlichting"][value="led"])::before,
.jdb-studio .chip:has(input[name="p-meubel-verlichting"][value="geen"])::before,
.jdb-studio .chip:has(input[name="p-meubel-blad"][value="front"])::before,
.jdb-studio .chip:has(input[name="p-douchecabine-glas"][value="helder"])::before,
.jdb-studio .chip:has(input[name="p-douchecabine-glas"][value="rook"])::before,
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="25"])::before,
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="30"])::before,
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="40"])::before,
.jdb-studio .chip:has(input[name="p-toilet-inBadkamer"][value="ja"])::before,
.jdb-studio .chip:has(input[name="p-toilet-inBadkamer"][value="nee"])::before,
.jdb-studio .chip:has(input[name="p-radiator-hoogte"][value="120"])::before,
.jdb-studio .chip:has(input[name="p-radiator-hoogte"][value="160"])::before,
.jdb-studio .chip:has(input[name="kraan-wastafel"][value="staand"])::before,
.jdb-studio .chip:has(input[name="kraan-wastafel"][value="wand"])::before,
.jdb-studio .chip:has(input[name="p-douchecabine-profiel"][value="volg"])::before,
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="volg"])::before,
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="volg"])::before,
.jdb-studio .chip:has(input[name="afwijkend-wastafel"][value="volg"])::before,
.jdb-studio .chip:has(input[name="afwijkend-douche"][value="volg"])::before,
.jdb-studio .chip:has(input[name="afwijkend-bad"][value="volg"])::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1.75rem;
    background: currentColor;
    -webkit-mask: var(--icoon) center / contain no-repeat;
    mask: var(--icoon) center / contain no-repeat;
}

.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="60"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.0' y='9' width='8' height='6' rx='1'/%3E%3Cpath d='M8.0 18h8M8.0 17v2M16.0 17v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="80"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.75' y='9' width='10.5' height='6' rx='1'/%3E%3Cpath d='M6.75 18h10.5M6.75 17v2M17.25 17v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="100"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='9' width='13' height='6' rx='1'/%3E%3Cpath d='M5.5 18h13M5.5 17v2M18.5 17v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="120"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.25' y='9' width='15.5' height='6' rx='1'/%3E%3Cpath d='M4.25 18h15.5M4.25 17v2M19.75 17v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-breedte"][value="140"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.0' y='9' width='18' height='6' rx='1'/%3E%3Cpath d='M3.0 18h18M3.0 17v2M21.0 17v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="40"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='9' width='7' height='5' rx='1'/%3E%3Cpath d='M8.5 17h7M8.5 16v2M15.5 16v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="45"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.75' y='9' width='8.5' height='5' rx='1'/%3E%3Cpath d='M7.75 17h8.5M7.75 16v2M16.25 16v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-fontein-breedte"][value="60"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='9' width='11' height='5' rx='1'/%3E%3Cpath d='M6.5 17h11M6.5 16v2M17.5 16v2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-wastafel"][value="kom"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h18M5 13v6h14v-6M8 13c0-2.6 1.8-4 4-4s4 1.4 4 4'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-wastafel"][value="geintegreerd"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18v9H3zM8 10c0 2 1.8 3.2 4 3.2s4-1.2 4-3.2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-aantal"][value="1"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18v8H3zM9 10c0 1.8 1.3 2.6 3 2.6s3-.8 3-2.6'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-aantal"][value="2"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18v8H3zM5.5 10c0 1.6 1.1 2.4 2.5 2.4s2.5-.8 2.5-2.4M13.5 10c0 1.6 1.1 2.4 2.5 2.4s2.5-.8 2.5-2.4'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-verlichting"][value="led"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v8H4zM4 15.5h16' stroke-dasharray='1 2'/%3E%3Cpath d='M7 18l-1 2M12 18v2.5M17 18l1 2'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-verlichting"][value="geen"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v8H4z'/%3E%3Cpath d='M8 18h8' opacity='.4'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-meubel-blad"][value="front"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v10H3zM3 11.5h18M9 15h6'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchecabine-glas"][value="helder"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v18H7zM10 9l3-3M10 13l5-5'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchecabine-glas"][value="rook"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M7 3h10v18H7z'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="25"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='9.75' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='14.25' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='9.75' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='14.25' r='.5' fill='%23000'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="30"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='9.0' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='15.0' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='9.0' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='15.0' r='.5' fill='%23000'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchekraan-kop"][value="40"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='7.75' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='16.25' cy='12' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='7.75' r='.5' fill='%23000'/%3E%3Ccircle cx='12' cy='16.25' r='.5' fill='%23000'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-toilet-inBadkamer"][value="ja"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h5v7H7zM5 10h14c0 3.5-2.5 6-6 6h-1l1 4H8l1-4.4C6.6 14.6 5 12.6 5 10z'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-toilet-inBadkamer"][value="nee"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h5v7H7zM5 10h14c0 3.5-2.5 6-6 6h-1l1 4H8l1-4.4C6.6 14.6 5 12.6 5 10z'/%3E%3Cpath d='M3 21L21 3'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-radiator-hoogte"][value="120"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10v11M16 10v11M8 12h8M8 15h8M8 18h8'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-radiator-hoogte"][value="160"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v18M16 3v18M8 5h8M8 8h8M8 11h8M8 14h8M8 17h8M8 20h8'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="kraan-wastafel"][value="staand"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M9 20v-8a3 3 0 0 1 3-3h4v2.5M7 15h4'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="kraan-wastafel"][value="wand"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v18M4 9h8a3 3 0 0 1 3 3v1.5M8 19h12'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-douchecabine-profiel"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="afwijkend-wastafel"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="afwijkend-douche"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.jdb-studio .chip:has(input[name="afwijkend-bad"][value="volg"])::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }

.jdb-studio .chip:has(input[name="p-douchecabine-profiel"][value="zwart"])::before,
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="wit"])::before,
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="zwart"])::before,
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="wit"])::before,
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="zwart"])::before,
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="antraciet"])::before,
.jdb-studio .chip:has(input[name="p-bad-kleur"][value="mat"])::before,
.jdb-studio .chip:has(input[name="p-bad-kleur"][value="glans"])::before {
    content: "";
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}

.jdb-studio .chip:has(input[name="p-douchecabine-profiel"][value="zwart"])::before { background: #1d1c1b; }
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="wit"])::before { background: #f4f2ee; }
.jdb-studio .chip:has(input[name="p-toilet-plaat"][value="zwart"])::before { background: #1d1c1b; }
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="wit"])::before { background: #f4f2ee; }
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="zwart"])::before { background: #1d1c1b; }
.jdb-studio .chip:has(input[name="p-radiator-kleur"][value="antraciet"])::before { background: #3d3f42; }
.jdb-studio .chip:has(input[name="p-bad-kleur"][value="mat"])::before { background: #efede8; }
.jdb-studio .chip:has(input[name="p-bad-kleur"][value="glans"])::before { background: radial-gradient(circle at 35% 30%, #fff 0 22%, #e9e7e2 60%, #cfccc5 100%); }