/*
  Utility classes for SVG icons.
  Usage: <i class="local-icon local-icon--chevron-right local-icon--medium"></i>
  Make sure the SVG exists in /assets/icons.

  .local-icon             – core icon size/appearance
  .local-icon--chevron-right (etc.) – sets icon image
  .local-icon--small/.local-icon--medium/.local-icon--big/.local-icon--very-big – set icon size
  Change color via .local-icon (color: ...) or a modifier.
*/

/* Main icon class */
.local-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  mask: no-repeat center/contain;
  -webkit-mask: no-repeat center/contain;
  background-color: currentColor;  /* default black via color property */
  color: #000;           /* default black */
  font-size: 1.15em;     /* base icon size, scalable by modifier classes */
  /* Mask-image allows color change via background-color or color */
}



/* Example icon variants — add more as needed */
.local-icon--chevron-right  { 
  mask-image: url('../assets/icons/utils/chevron-right.svg');
  -webkit-mask-image: url('../assets/icons/utils/chevron-right.svg');
}
.local-icon--chevron-left   { 
  mask-image: url('../assets/icons/utils/chevron-left.svg');
  -webkit-mask-image: url('../assets/icons/utils/chevron-left.svg');
}

.local-icon--chevron-thin-right  { 
  mask-image: url('../assets/icons/utils/chevron-thin-right.svg');
  -webkit-mask-image: url('../assets/icons/utils/chevron-thin-right.svg');
}
.local-icon--chevron-thin-left   { 
  mask-image: url('../assets/icons/utils/chevron-thin-left.svg');
  -webkit-mask-image: url('../assets/icons/utils/chevron-thin-left.svg');
}

.local-icon--good {
  mask-image: url('../assets/icons/air-quality/good.svg');
  -webkit-mask-image: url('../assets/icons/air-quality/good.svg');
}
.local-icon--normal {
  mask-image: url('../assets/icons/air-quality/normal.svg');
  -webkit-mask-image: url('../assets/icons/air-quality/normal.svg');
}
.local-icon--bad {
  mask-image: url('../assets/icons/air-quality/sad.svg');
  -webkit-mask-image: url('../assets/icons/air-quality/sad.svg');
}
.local-icon--unknown {
  mask-image: url('../assets/icons/air-quality/unknown.svg');
  -webkit-mask-image: url('../assets/icons/air-quality/unknown.svg');
}

.local-icon--calendar {
  mask-image: url('../assets/icons/utils/calendar.svg');
  -webkit-mask-image: url('../assets/icons/utils/calendar.svg');
}

.local-icon--location {
  mask-image: url('../assets/icons/utils/location.svg');
  -webkit-mask-image: url('../assets/icons/utils/location.svg');
}

.local-icon--info {
  mask-image: url('../assets/icons/utils/info.svg');
  -webkit-mask-image: url('../assets/icons/utils/info.svg');
}

.local-icon--facebook {
  mask-image: url('../assets/icons/utils/facebook.svg');
  -webkit-mask-image: url('../assets/icons/utils/facebook.svg');
}

.local-icon--reddit {
  mask-image: url('../assets/icons/utils/reddit.svg');
  -webkit-mask-image: url('../assets/icons/utils/reddit.svg');
}

.local-icon--twitter {
  mask-image: url('../assets/icons/utils/twitter.svg');
  -webkit-mask-image: url('../assets/icons/utils/twitter.svg');
}

.local-icon--whatsapp {
  mask-image: url('../assets/icons/utils/whatsapp.svg');
  -webkit-mask-image: url('../assets/icons/utils/whatsapp.svg');
}

.local-icon--pinterest {
  mask-image: url('../assets/icons/utils/pinterest.svg');
  -webkit-mask-image: url('../assets/icons/utils/pinterest.svg');
}

.local-icon--external-link {
  mask-image: url('../assets/icons/utils/external-link.svg');
  -webkit-mask-image: url('../assets/icons/utils/external-link.svg');
}

.local-icon--up-arrow {
  mask-image: url('../assets/icons/utils/up-arrow.svg');
  -webkit-mask-image: url('../assets/icons/utils/up-arrow.svg');
}


/* Color modifiers - use color property to change icon color */
.local-icon.red    { color: #e53935; }
.local-icon.green  { color: #43a047; }
.local-icon.blue   { color: #1e88e5; }
.local-icon.yellow { color: #fbc02d; }
.local-icon.white  { color: #ffffff; }
.local-icon.gray   { color: #666666; }

/* Size modifiers */
.local-icon.vsmall    { font-size: 0.4em; }
.local-icon.small    { font-size: 0.9em; }
.local-icon.medium   { font-size: 1.3em; }
.local-icon.big      { font-size: 2em;   }
.local-icon.vbig { font-size: 3em;   }

/* Hide accidental text in <i> or <span> */
.local-icon::before {
  content: "";
}