@theme {
  --icon-arrowDown: url("../../images/icon-arrowDown.svg");
  --icon-arrowDownDown: url("../../images/icon-arrowDownDown.svg");
  --icon-arrowLeft: url("../../images/icon-arrowLeft.svg");
  --icon-arrowLeftLeft: url("../../images/icon-arrowLeftLeft.svg");
  --icon-arrowRight: url("../../images/icon-arrowRight.svg");
  --icon-arrowRightRight: url("../../images/icon-arrowRightRight.svg");
  --icon-arrowTop: url("../../images/icon-arrowTop.svg");
  --icon-arrowTopTop: url("../../images/icon-arrowTopTop.svg");
  --icon-checkbox: url("../../images/icon-checkbox.svg");
  --icon-chip: url("../../images/icon-chip.svg");
  --icon-clander: url("../../images/icon-clander.svg");
  --icon-close: url("../../images/icon-close.svg");
  --icon-code: url("../../images/icon-code.svg");
  --icon-download: url("../../images/icon-download.svg");
  --icon-eye: url("../../images/icon-eye.svg");
  --icon-file: url("../../images/icon-file.svg");
  --icon-home: url("../../images/icon-home.svg");
  --icon-location: url("../../images/icon-location.svg");
  --icon-menu: url("../../images/icon-menu.svg");
  --icon-pin: url("../../images/icon-pin.svg");
  --icon-search: url("../../images/icon-search.svg");
  --icon-set: url("../../images/icon-set.svg");
  --icon-stop: url("../../images/icon-stop.svg");
  --icon-time: url("../../images/icon-time.svg");
  --icon-web: url("../../images/icon-web.svg");
}

@utility icon-* {
  & {
    @apply inline-block h-6 w-6;

    background-color: var(--icon-color, theme("color-neutral-900"));
    mask: center / 100% no-repeat;
    mask-image: --value(--icon- *);
  }
}

@utility icon-checkbox {
  & {
    @apply inline-block h-6 w-6;

    background: var(--icon-checkbox) center / 100% no-repeat;
  }
}