@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;
  }

  .text--with-icon:has(.icon) {
    display: inline-flex;
    align-items: center;
    gap: var(--block-space-quarter, 0.25em);

    .icon {
      --icon-size: 1.2em;
    }
  }

  img.icon {
    background: none;
  }

  .icon--add { --svg: url("/assets/add-880260c1.svg"); }
  .icon--arrow-left { --svg: url("/assets/arrow-left-abe40556.svg"); }
  .icon--arrow-right { --svg: url("/assets/arrow-right-61dca488.svg"); }
  .icon--arrow-up { --svg: url("/assets/arrow-up-f96b3895.svg"); }
  .icon--attachment { --svg: url("/assets/attachment-cfa1f89c.svg"); }
  .icon--bell-alert { --svg: url("/assets/bell-alert-b467cde7.svg"); }
  .icon--bell-off { --svg: url("/assets/bell-off-d8096c76.svg"); }
  .icon--bell { --svg: url("/assets/bell-cde41b14.svg"); }
  .icon--bookmark-outline { --svg: url("/assets/bookmark-outline-bbb8078f.svg"); }
  .icon--bookmark { --svg: url("/assets/bookmark-92557340.svg"); }
  .icon--calendar { --svg: url("/assets/calendar-1c4d5c5f.svg"); }
  .icon--camera { --svg: url("/assets/camera-927323b8.svg"); }
  .icon--caret-down { --svg: url("/assets/caret-down-b59252bf.svg"); }
  .icon--check { --svg: url("/assets/check-611182fc.svg"); }
  .icon--check-circle { --svg: url("/assets/check-circle-505e76c3.svg"); }
  .icon--clipboard { --svg: url("/assets/clipboard-b2c44b50.svg"); }
  .icon--close { --svg: url("/assets/close-b9e837a5.svg"); }
  .icon--close-circle { --svg: url("/assets/close-circle-5e9b8106.svg"); }
  .icon--collapse { --svg: url("/assets/collapse-93f70f6b.svg"); }
  .icon--comment { --svg: url("/assets/comment-41d3ab44.svg"); }
  .icon--copy-paste { --svg: url("/assets/copy-paste-4c379063.svg"); }
  .icon--email { --svg: url("/assets/email-6c595bc5.svg"); }
  .icon--expand { --svg: url("/assets/expand-5d1825e8.svg"); }
  .icon--gear { --svg: url("/assets/gear-50e77d2b.svg"); }
  .icon--filter { --svg: url("/assets/filter-37a7ac58.svg"); }
  .icon--home { --svg: url("/assets/home-1c935bcc.svg"); }
  .icon--lock { --svg: url("/assets/lock-5192fa2d.svg"); }
  /*.icon--logout { --svg: url("logout.svg"); } */
  .icon--marker { --svg: url("/assets/marker-04289650.svg"); }
  .icon--maximize { --svg: url("/assets/maximize-c5514b27.svg"); }
  .icon--menu { --svg: url("/assets/menu-40ddc9fe.svg"); }
  .icon--menu-dots-horizontal { --svg: url("/assets/menu-dots-horizontal-f6a5d793.svg"); }
  .icon--menu-dots-vertical { --svg: url("/assets/menu-dots-vertical-c247e3cc.svg"); }
  .icon--minus { --svg: url("/assets/minus-b31a1093.svg"); }
  .icon--move { --svg: url("/assets/move-282b3bcc.svg"); }
  .icon--notification-bell-access-only { --svg: url("/assets/bell-cde41b14.svg"); }
  .icon--notification-bell-watching { --svg: url("/assets/bell-off-d8096c76.svg"); }
  .icon--notification-bell-reverse-access-only { --svg: url("/assets/bell-off-d8096c76.svg"); }
  .icon--notification-bell-reverse-watching { --svg: url("/assets/bell-cde41b14.svg"); }
  .icon--pencil { --svg: url("/assets/pencil-a8559afd.svg"); }
  .icon--pinned { --svg: url("/assets/pinned-9533c2d7.svg"); }
  .icon--rainbow { --svg: url("/assets/rainbow-2c17e013.svg"); }
  .icon--rainbow-colored { --svg: url("/assets/rainbow-colored-29065f83.svg"); }
  .icon--reaction { --svg: url("/assets/reaction-41dcf1f6.svg"); }
  .icon--refresh { --svg: url("/assets/refresh-249f0509.svg"); }
  .icon--remove { --svg: url("/assets/remove-d18dd986.svg"); }
  .icon--search { --svg: url("/assets/search-5f29565f.svg"); }
  .icon--settings { --svg: url("/assets/settings-aee56972.svg"); }
  .icon--share { --svg: url("/assets/share-acee98a8.svg"); }
  .icon--trash { --svg: url("/assets/trash-708c7eb2.svg"); }
  .icon--unpinned { --svg: url("/assets/unpinned-2fab4bad.svg"); }
  .icon--unseen { --svg: url("/assets/unseen-abf780e7.svg"); }
  .icon--world { --svg: url("/assets/world-36f1fe50.svg"); }
}