.i{
  --icon: none;
  --isize: 18px;
  width: var(--isize);
  height: var(--isize);
  display:inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.i-16{ --isize: 16px; }
.i-18{ --isize: 18px; }
.i-20{ --isize: 20px; }
.i-24{ --isize: 24px; }


.i-home{ --icon: url("/assets/icons/icon-home.svg"); }
.i-menu{ --icon: url("/assets/icons/icon-menu.svg"); }
.i-close{ --icon: url("/assets/icons/icon-close.svg"); }
.i-sun{ --icon: url("/assets/icons/icon-sun.svg"); }
.i-moon{ --icon: url("/assets/icons/icon-moon.svg"); }
.i-monitor{ --icon: url("/assets/icons/icon-monitor.svg"); }
.i-phone{ --icon: url("/assets/icons/icon-phone.svg"); }
.i-mail{ --icon: url("/assets/icons/icon-mail.svg"); }
.i-pin{ --icon: url("/assets/icons/icon-pin.svg"); }
.i-clock{ --icon: url("/assets/icons/icon-clock.svg"); }
.i-calendar{ --icon: url("/assets/icons/icon-calendar.svg"); }
.i-image{ --icon: url("/assets/icons/icon-image.svg"); }
.i-camera{ --icon: url("/assets/icons/icon-camera.svg"); }
.i-search{ --icon: url("/assets/icons/icon-search.svg"); }
.i-download{ --icon: url("/assets/icons/icon-download.svg"); }
.i-external{ --icon: url("/assets/icons/icon-external.svg"); }
.i-arrow-right{ --icon: url("/assets/icons/icon-arrow-right.svg"); }
.i-chevron-right{ --icon: url("/assets/icons/icon-chevron-right.svg"); }
.i-chevron-left{ --icon: url("/assets/icons/icon-chevron-left.svg"); }
.i-chevron-down{ --icon: url("/assets/icons/icon-chevron-down.svg"); }
.i-chevron-up{ --icon: url("/assets/icons/icon-chevron-up.svg"); }

.i-star{ --icon: url("/assets/icons/icon-star.svg"); }
.i-info{ --icon: url("/assets/icons/icon-info.svg"); }
.i-check{ --icon: url("/assets/icons/icon-check.svg"); }
.i-warning{ --icon: url("/assets/icons/icon-warning.svg"); }

.i-fork-knife{ --icon: url("/assets/icons/icon-fork-knife.svg"); }
.i-reserve{ --icon: url("/assets/icons/icon-reserve.svg"); }
.i-map{ --icon: url("/assets/icons/icon-map.svg"); }

.i-facebook{ --icon: url("/assets/icons/icon-facebook.svg"); }
.i-instagram{ --icon: url("/assets/icons/icon-instagram.svg"); }
.i-tiktok{ --icon: url("/assets/icons/icon-tiktok.svg"); }
.i-youtube{ --icon: url("/assets/icons/icon-youtube.svg"); }
.i-whatsapp{ --icon: url("/assets/icons/icon-whatsapp.svg"); }

.icon-text{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.icon-text .i{ margin-top: -1px; }

.icon-muted{ opacity: .78; }
html[data-theme="dark"] .icon-muted{ opacity: .72; }

.i-round{
  border-radius: 999px;
  background-color: currentColor;
}

.icon-stack{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon-stack > .i{ color: inherit; }