.icon {
  background-color: var(--icon-color, currentColor);
  block-size: var(--icon-size, 1rem);
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--icon-size, 1rem);
  mask-image: var(--svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  pointer-events: none;
  user-select: none;
}

img.icon {
  background: none;
}

.icon--loading {
  --svg: url("loading.svg");

  animation: var(--animate-spin);
  animation-duration: 1s;
}

/****************************************************************
* Lucide (https://lucide.dev)
* Open-source icon library with a consistent style
*****************************************************************/
.icon--chevron-left {
  --svg: url("/assets/chevron-left-2f23878f.svg");
}

.icon--chevron-right {
  --svg: url("/assets/chevron-right-ac88bbdd.svg");
}

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

.icon--chevrons-up-down {
  --svg: url("chevrons-up-down.svg");
}

.icon--menu {
  --svg: url("/assets/menu-5b8caef9.svg");
}

.icon--x {
  --svg: url("/assets/x-2fabf707.svg");
}

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

.icon--copy {
  --svg: url("/assets/copy-5d987942.svg");
}

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

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

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

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

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

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