@layer components {
    .icon {
        -webkit-touch-callout: none;
        background-color: currentColor;
        block-size: var(--icon-size, 1em);
        display: inline-block;
        flex-shrink: 0;
        inline-size: var(--icon-size, 1em);
        mask-image: var(--svg);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: var(--icon-size, 1em);
        pointer-events: none;
        user-select: none;
    }

    img.icon {
        background: none;
    }

    .icon--arpedon {
        --svg: url("../icons/logo.b0445de88cd1.svg");
    }

    .icon--add {
        --svg: url("../icons/add.8cf6bdc3cc54.svg");
    }

    .icon--add--meta {
        --svg: url("../icons/add--meta.b588082c82e2.svg");
    }

    .icon--arrow-left {
        --svg: url("../icons/arrow-left.67777c303e6f.svg");
    }

    .icon--arrow-right {
        --svg: url("../icons/arrow-right.894db96e07d4.svg");
    }

    .icon--arrow-up {
        --svg: url("../icons/arrow-up.8b8201f80e94.svg");
    }

    .icon--art {
        --svg: url("../icons/art.11479d5602b2.svg");
    }

    .icon--asset {
        --svg: url("../icons/asset.f6e1ea54ee5f.svg");
    }

    .icon--assigned {
        --svg: url("../icons/assigned.719cb10fed40.svg");
    }

    .icon--attachment {
        --svg: url("../icons/attachment.a2f4eefc5e8b.svg");
    }

    .icon--bell-alert {
        --svg: url("../icons/bell-alert.2bae14afffae.svg");
    }

    .icon--bell-off {
        --svg: url("../icons/bell-off.b01fc4f61f8f.svg");
    }

    .icon--bell {
        --svg: url("../icons/bell.034123f31afa.svg");
    }

    .icon--bolt {
        --svg: url("../icons/bolt.361ef1476b8d.svg");
    }

    .icon--bookmark-outline {
        --svg: url("../icons/bookmark-outline.177c473a22bd.svg");
    }

    .icon--bookmark {
        --svg: url("../icons/bookmark.8610e8d97971.svg");
    }

    .icon--boost {
        --svg: url("../icons/boost.449f91a05127.svg");
    }

    .icon--camera {
        --svg: url("../icons/camera.cd665bb30788.svg");
    }

    .icon--caret-down {
        --svg: url("../icons/chevron-down.597eba0ec4b1.svg");
    }

    .icon--check {
        --svg: url("../icons/check.269ee96c8797.svg");
    }

    .icon--check-circle {
        --svg: url("../icons/check-circle.5fc69b744c62.svg");
    }

    .icon--check-all {
        --svg: url("check-all.svg");
    }

    .icon--clipboard {
        --svg: url("../icons/clipboard.4e14a9fa15e1.svg");
    }

    .icon--close {
        --svg: url("../icons/xmark.52229a8a82cf.svg");
    }

    .icon--close-circle {
        --svg: url("../icons/close-circle.5ea2b08e5e3e.svg");
    }

    .icon--collapse {
        --svg: url("../icons/collapse.dd07edc47143.svg");
    }

    .icon--section {
        --svg: url("../icons/section.b7ea3ecc731f.svg");
    }

    .icon--column-left {
        --svg: url("../icons/column-left.465b1c0c6da0.svg");
    }

    .icon--column-right {
        --svg: url("../icons/column-right.39703f59e7ac.svg");
    }

    .icon--comment {
        --svg: url("../icons/comment.0931552093b1.svg");
    }

    .icon--copy-paste {
        --svg: url("../icons/copy-paste.b8c4a04bd910.svg");
    }

    .icon--crown {
        --svg: url("../icons/crown.3dc47f4b58f9.svg");
    }

    .icon--email {
        --svg: url("../icons/email.387e899cef50.svg");
    }

    .icon--everyone {
        --svg: url("../icons/everyone.52eca7ab0978.svg");
    }

    .icon--expand {
        --svg: url("../icons/expand.3b451a57ccac.svg");
    }

    .icon--eye {
        --svg: url("../icons/eye.d44ca71eb40d.svg");
    }

    .icon--eye-slash {
        --svg: url("../icons/eye-slash.d68e407314ed.svg");
    }

    .icon--gear {
        --svg: url("../icons/gear.055170dfac75.svg");
    }

    .icon--grid {
        --svg: url("../icons/grid.eea3a87b55b3.svg");
    }

    .icon--grip {
        --svg: url("../icons/grip.ca28df94a110.svg");
    }

    .icon--filter {
        --svg: url("../icons/filter.afe36261d3ff.svg");
    }

    .icon--fizzy {
        --svg: url("../icons/fizzy.8c386f27727b.svg");
    }

    .icon--globe {
        --svg: url("../icons/globe.6eb45fb57ef9.svg");
    }

    .icon--golden-ticket {
        --svg: url("../icons/golden-ticket.2fba77eaebdf.svg");
    }

    .icon--history {
        --svg: url("../icons/history.a05903b6e4cb.svg");
    }

    .icon--home {
        --svg: url("../icons/home.ab0feaaa8d85.svg");
    }

    .icon--install {
        --svg: url("../icons/install.575d0606e433.svg");
    }

    .icon--install {
        --svg: url("../icons/install.575d0606e433.svg");
    }

    .icon--install-edge {
        --svg: url("../icons/install-edge.908fd2e0d5d6.svg");
    }

    .icon--lifebuoy {
        --svg: url("../icons/lifebuoy.a1b3e2920fce.svg");
    }

    .icon--lock {
        --svg: url("../icons/lock.0386bca31778.svg");
    }

    .icon--logout {
        --svg: url("../icons/logout.37f704a6885b.svg");
    }

    .icon--marker {
        --svg: url("../icons/marker.4ea57301ab32.svg");
    }

    .icon--maximize {
        --svg: url("../icons/maximize.5af6b6fd5d60.svg");
    }

    .icon--menu {
        --svg: url("menu.svg");
    }

    .icon--menu-dots-horizontal {
        --svg: url("../icons/menu-dots-horizontal.15c5c5bae90b.svg");
    }

    .icon--menu-dots-vertical {
        --svg: url("../icons/menu-dots-vertical.ee056dfb7325.svg");
    }

    .icon--minus {
        --svg: url("../icons/minus.77ce694ddf95.svg");
    }

    .icon--move {
        --svg: url("../icons/move.6250c0954d77.svg");
    }

    .icon--notification-bell-access-only {
        --svg: url("../icons/bell.034123f31afa.svg");
    }

    .icon--notification-bell-watching {
        --svg: url("../icons/bell-off.b01fc4f61f8f.svg");
    }

    .icon--notification-bell-reverse-access-only {
        --svg: url("../icons/bell-off.b01fc4f61f8f.svg");
    }

    .icon--notification-bell-reverse-watching {
        --svg: url("../icons/bell.034123f31afa.svg");
    }

    .icon--password {
        --svg: url("../icons/password.a5bf2c501906.svg");
    }

    .icon--point-add {
        --svg: url("../icons/point-add.a70fd6100e8a.svg");
    }

    .icon--pencil {
        --svg: url("../icons/pencil.10d28e450ebe.svg");
    }

    .icon--person {
        --svg: url("../icons/person.961878bc5373.svg");
    }

    .icon--person-add {
        --svg: url("../icons/person-add.a93e5f07f543.svg");
    }

    .icon--picture-add {
        --svg: url("../icons/picture-add.2078d8f4cbd7.svg");
    }

    .icon--picture-double {
        --svg: url("picture-double.svg");
    }

    .icon--picture-remove {
        --svg: url("../icons/picture-remove.c38809e63ce5.svg");
    }

    .icon--picture-zoom {
        --svg: url("../icons/picture-zoom.3fe8bfa69524.svg");
    }

    .icon--pinned {
        --svg: url("../icons/pinned.c12b215b3e0d.svg");
    }

    .icon--qr-code {
        --svg: url("../icons/qr-code.4861ed220b9f.svg");
    }

    .icon--route {
        --svg: url("../icons/route.76f76ea39a3d.svg");
    }

    .icon--refresh {
        --svg: url("../icons/arrows-rotate.5994485a8e74.svg");
    }

    .icon--refresh--meta {
        --svg: url("../icons/arrows-rotate.5994485a8e74.svg");
    }

    .icon--remove {
        --svg: url("../icons/remove.f0d3e54d630b.svg");
    }

    .icon--rename {
        --svg: url("../icons/rename.4a61aac023f2.svg");
    }

    .icon--search {
        --svg: url("../icons/search.938237833dc8.svg");
    }

    .icon--settings {
        --svg: url("../icons/settings.214bceca8a2a.svg");
    }

    .icon--share {
        --svg: url("../icons/share.8b2b9bc0576d.svg");
    }

    .icon--siren {
        --svg: url("../icons/siren.d3f5dbaf982a.svg");
    }

    .icon--sliders {
        --svg: url("../icons/sliders.214bceca8a2a.svg");
    }

    .icon--switch {
        --svg: url("../icons/switch.d11710377e01.svg");
    }

    .icon--tag {
        --svg: url("../icons/tag.5273ca85265c.svg");
    }

    .icon--tag-outline {
        --svg: url("../icons/tag-outline.d5d6c11171fd.svg");
    }

    .icon--triangle {
        --svg: url("../icons/triangle.5ae4dfa210eb.svg");
    }

    .icon--thumb-up {
        --svg: url("../icons/thumb-up.d1672a0956c0.svg");
    }

    .icon--trash {
        --svg: url("../icons/trash.7dcc1179e0e6.svg");
    }

    .icon--unpinned {
        --svg: url("../icons/unpinned.49fb9539b532.svg");
    }

    .icon--unseen {
        --svg: url("../icons/unseen.2f162dcb139e.svg");
    }

    .icon--warning {
        --svg: url("../icons/warning.9566c2cc320a.svg");
    }

    .icon--world {
        --svg: url("../icons/world.4488f443f27a.svg");
    }

    .icon--xmark {
        --svg: url("../icons/xmark.52229a8a82cf.svg");
    }

    .icon--youtube {
        --svg: url("../icons/youtube.8fba848739f7.svg");
    }

    .icon--zone {
        --svg: url("../icons/zone.266d93798ff6.svg");
    }

    /* Measurement type icons */
    .icon--thermometer {
        --svg: url("../icons/thermometer.1a8fac22c83e.svg");
    }

    .icon--waveform {
        --svg: url("../icons/waveform.8d2db0612e2f.svg");
    }

    .icon--analysis {
        --svg: url("../icons/analysis.89fe125ccc94.svg");
    }

    .icon--gauge {
        --svg: url("../icons/gauge.af42c2bf17ee.svg");
    }

    .icon--droplet {
        --svg: url("../icons/droplet.b0494a7c7542.svg");
    }

    .icon--lightning {
        --svg: url("../icons/lightning.c93fd4520e61.svg");
    }

    .icon--tachometer {
        --svg: url("../icons/tachometer.c273ca4e676d.svg");
    }

    .icon--thermography {
        --svg: url("../icons/thermography.807097f2cf67.svg");
    }

    .icon--vibration {
        --svg: url("../icons/waveform.8d2db0612e2f.svg");
    }

    .icon--ultrasound {
        --svg: url("../icons/waveform-lines.3d26a47d3439.svg");
    }

    /* Icon colors for measurement types */
    .icon--temp-color {
        color: oklch(var(--lch-red-medium));
    }

    .icon--vibration-color {
        color: oklch(var(--lch-blue-medium));
    }

    .icon--pressure-color {
        color: oklch(var(--lch-purple-medium, 55% 0.2 290));
    }

    .icon--flow-color {
        color: oklch(var(--lch-cyan-medium, 65% 0.15 200));
    }

    .icon--electrical-color {
        color: oklch(var(--lch-yellow-medium));
    }
}