/* Configuração base para todos os ícones */
[class^="icon-"], [class*=" icon-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1em; 
  height: 1em;

  vertical-align: middle;
  line-height: 1;
  
  /* Troca de background-image para mask */
  background-color: currentColor; /* O ícone assume a cor do texto (ex: vermelho) */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Sociais */
.icon-facebook  { -webkit-mask-image: url('social/facebook.svg'); mask-image: url('social/facebook.svg'); }
.icon-instagram { -webkit-mask-image: url('social/instagram.svg'); mask-image: url('social/instagram.svg'); }
.icon-linkedin  { -webkit-mask-image: url('social/linkedin.svg'); mask-image: url('social/linkedin.svg'); }
.icon-pinterest { -webkit-mask-image: url('social/pinterest.svg'); mask-image: url('social/pinterest.svg'); }
.icon-tiktok    { -webkit-mask-image: url('social/tiktok.svg');    mask-image: url('social/tiktok.svg'); }
.icon-twitter   { -webkit-mask-image: url('social/twitter.svg');   mask-image: url('social/twitter.svg'); }
.icon-youtube   { -webkit-mask-image: url('social/youtube.svg');   mask-image: url('social/youtube.svg'); }
.icon-whatsapp  { -webkit-mask-image: url('social/whatsapp.svg');  mask-image: url('social/whatsapp.svg'); }

/* UI */
.icon-menu-basic       { -webkit-mask-image: url('ui/menu-basic.svg');       mask-image: url('ui/menu-basic.svg'); }
.icon-smile-basic      { -webkit-mask-image: url('ui/smile-basic.svg');      mask-image: url('ui/smile-basic.svg'); }
.icon-arrow-basic      { -webkit-mask-image: url('ui/arrow-basic.svg');      mask-image: url('ui/arrow-basic.svg'); }
.icon-share-basic      { -webkit-mask-image: url('ui/share-basic.svg');      mask-image: url('ui/share-basic.svg'); }
.icon-email-basic      { -webkit-mask-image: url('ui/email-basic.svg');      mask-image: url('ui/email-basic.svg'); }
.icon-copy-basic       { -webkit-mask-image: url('ui/copy-basic.svg');       mask-image: url('ui/copy-basic.svg'); }
.icon-magnifying-basic { -webkit-mask-image: url('ui/magnifying-basic.svg'); mask-image: url('ui/magnifying-basic.svg'); }
.icon-close-basic      { -webkit-mask-image: url('ui/close-basic.svg');      mask-image: url('ui/close-basic.svg'); }
.icon-badge-basic      { -webkit-mask-image: url('ui/badge-basic.svg');      mask-image: url('ui/badge-basic.svg'); }
.icon-menu-dots        { -webkit-mask-image: url('ui/menu-dots.svg');        mask-image: url('ui/menu-dots.svg'); }
.icon-clock-basic      { -webkit-mask-image: url('ui/clock-basic.svg');      mask-image: url('ui/clock-basic.svg'); }
.icon-heart-basic      { -webkit-mask-image: url('ui/heart-basic.svg');      mask-image: url('ui/heart-basic.svg'); }
.icon-heart-solid      { -webkit-mask-image: url('ui/heart-solid.svg');      mask-image: url('ui/heart-solid.svg'); }
.icon-comment-basic    { -webkit-mask-image: url('ui/comment-basic.svg');    mask-image: url('ui/comment-basic.svg'); }
.icon-feed-basic       { -webkit-mask-image: url('ui/feed-basic.svg');       mask-image: url('ui/feed-basic.svg'); }