/* Lucide icons drawn as masks, so they take the text color of their parent. */

.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  background-color: currentcolor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon[data-icon="arrow-up-right"] {
  --icon: url("../assets/icons/arrow-up-right.svg");
}

.icon[data-icon="calendar-days"] {
  --icon: url("../assets/icons/calendar-days.svg");
}

.icon[data-icon="cloud"] {
  --icon: url("../assets/icons/cloud.svg");
}

.icon[data-icon="cloud-drizzle"] {
  --icon: url("../assets/icons/cloud-drizzle.svg");
}

.icon[data-icon="cloud-fog"] {
  --icon: url("../assets/icons/cloud-fog.svg");
}

.icon[data-icon="cloud-lightning"] {
  --icon: url("../assets/icons/cloud-lightning.svg");
}

.icon[data-icon="cloud-rain"] {
  --icon: url("../assets/icons/cloud-rain.svg");
}

.icon[data-icon="cloud-snow"] {
  --icon: url("../assets/icons/cloud-snow.svg");
}

.icon[data-icon="cloud-sun"] {
  --icon: url("../assets/icons/cloud-sun.svg");
}

.icon[data-icon="droplet"] {
  --icon: url("../assets/icons/droplet.svg");
}

.icon[data-icon="locate-fixed"] {
  --icon: url("../assets/icons/locate-fixed.svg");
}

.icon[data-icon="map-pin"] {
  --icon: url("../assets/icons/map-pin.svg");
}

.icon[data-icon="search"] {
  --icon: url("../assets/icons/search.svg");
}

.icon[data-icon="sun"] {
  --icon: url("../assets/icons/sun.svg");
}

.icon[data-icon="thermometer"] {
  --icon: url("../assets/icons/thermometer.svg");
}

.icon[data-icon="wind"] {
  --icon: url("../assets/icons/wind.svg");
}

.icon[data-icon="x"] {
  --icon: url("../assets/icons/x.svg");
}