/* =========================================================
   CMW ICON SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   ICON DEFINITIONS
   --------------------------------------------------------- */

/* Interface */

.cmw-icon-facebook {
  --cmw-icon: url("../images/icons/facebook.svg");
}

.cmw-icon-instagram {
  --cmw-icon: url("../images/icons/instagram.svg");
}

.cmw-icon-x {
  --cmw-icon: url("../images/icons/x.svg");
}

.cmw-icon-youtube {
  --cmw-icon: url("../images/icons/youtube.svg");
}

.cmw-icon-tiktok {
  --cmw-icon: url("../images/icons/tiktok.svg");
}

.cmw-icon-rss {
  --cmw-icon: url("../images/icons/rss.svg");
}
.cmw-icon-chevron-down {
  --cmw-icon: url("../images/icons/chevron-down.svg");
}

.cmw-icon-arrow-right {
  --cmw-icon: url("../images/icons/arrow-right.svg");
}

/* ---------------------------------------------------------
   INLINE ICONS
   --------------------------------------------------------- */

.cmw-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--cmw-icon) center / contain no-repeat;
  mask: var(--cmw-icon) center / contain no-repeat;
}

/* ---------------------------------------------------------
   PSEUDO-ELEMENT ICONS
   --------------------------------------------------------- */

.cmw-icon-before::before,
.cmw-icon-after::after {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  -webkit-mask: var(--cmw-icon) center / contain no-repeat;
  mask: var(--cmw-icon) center / contain no-repeat;
}

.cmw-icon-before::before {
  margin-right: 0.4em;
}

.cmw-icon-after::after {
  margin-left: 0.4em;
}