/* ── SVG icon utility ─────────────────────────────────────────────────────── */
/* Usage: <span class="icon icon-close" style="width:14px;height:14px;"></span> */
/* The element's color (currentColor) determines the rendered icon color.       */

.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ── Icon variants ────────────────────────────────────────────────────────── */

.icon-home {
  -webkit-mask-image: url('/static/media/home_icon.svg');
          mask-image: url('/static/media/home_icon.svg');
}
.icon-folder {
  -webkit-mask-image: url('/static/media/folder_icon.svg');
          mask-image: url('/static/media/folder_icon.svg');
}
.icon-new-folder {
  -webkit-mask-image: url('/static/media/new_folder_icon.svg');
          mask-image: url('/static/media/new_folder_icon.svg');
}
.icon-close {
  -webkit-mask-image: url('/static/media/close_icon.svg');
          mask-image: url('/static/media/close_icon.svg');
}
.icon-check {
  -webkit-mask-image: url('/static/media/check_icon.svg');
          mask-image: url('/static/media/check_icon.svg');
}
.icon-arrow-left {
  -webkit-mask-image: url('/static/media/arrow_left_icon.svg');
          mask-image: url('/static/media/arrow_left_icon.svg');
}
.icon-arrow-right {
  -webkit-mask-image: url('/static/media/arrow_right_icon.svg');
          mask-image: url('/static/media/arrow_right_icon.svg');
}
.icon-arrow-down {
  -webkit-mask-image: url('/static/media/arrow_down_icon.svg');
          mask-image: url('/static/media/arrow_down_icon.svg');
}
.icon-arrow-up {
  -webkit-mask-image: url('/static/media/arrow_up_icon.svg');
          mask-image: url('/static/media/arrow_up_icon.svg');
}
.icon-skip-back {
  -webkit-mask-image: url('/static/media/skip_back_icon.svg');
          mask-image: url('/static/media/skip_back_icon.svg');
}
.icon-skip-forward {
  -webkit-mask-image: url('/static/media/skip_forward_icon.svg');
          mask-image: url('/static/media/skip_forward_icon.svg');
}
.icon-swap {
  -webkit-mask-image: url('/static/media/swap_icon.svg');
          mask-image: url('/static/media/swap_icon.svg');
}
.icon-diamond {
  -webkit-mask-image: url('/static/media/diamond_icon.svg');
          mask-image: url('/static/media/diamond_icon.svg');
}
.icon-zoom-reset {
  -webkit-mask-image: url('/static/media/zoom_reset_icon.svg');
          mask-image: url('/static/media/zoom_reset_icon.svg');
}
.icon-crosshair {
  -webkit-mask-image: url('/static/media/crosshair_icon.svg');
          mask-image: url('/static/media/crosshair_icon.svg');
}
.icon-open-project {
  -webkit-mask-image: url('/static/media/open_project_icon.svg');
          mask-image: url('/static/media/open_project_icon.svg');
}
.icon-info {
  -webkit-mask-image: url('/static/media/info_icon.svg');
          mask-image: url('/static/media/info_icon.svg');
}
.icon-plus {
  -webkit-mask-image: url('/static/media/plus_icon.svg');
          mask-image: url('/static/media/plus_icon.svg');
}
.icon-sun {
  -webkit-mask-image: url('/static/media/sun_icon.svg');
          mask-image: url('/static/media/sun_icon.svg');
}
.icon-moon {
  -webkit-mask-image: url('/static/media/moon_icon.svg');
          mask-image: url('/static/media/moon_icon.svg');
}
.icon-bug {
  -webkit-mask-image: url('/static/media/bug_icon.svg');
          mask-image: url('/static/media/bug_icon.svg');
}
.icon-volume {
  -webkit-mask-image: url('/static/media/volume_icon.svg');
          mask-image: url('/static/media/volume_icon.svg');
}