/* Poplar Icons - variabili: --picon-size, --picon-color, --picon-rotate (e --picon: url del file) */
.picon {
  display: inline-block;
  flex: none;
  width: var(--picon-size, 1.2em);
  height: var(--picon-size, 1.2em);
  vertical-align: middle;
  transform: rotate(var(--picon-rotate, 0deg));
}

/* Un colore: la forma è l'SVG usato come maschera, il colore è quello del testo (o --picon-color) */
.picon--mask {
  background: var(--picon-color, currentColor);
  -webkit-mask: var(--picon) center / contain no-repeat;
  mask: var(--picon) center / contain no-repeat;
}

/* Più colori: immagine con i colori originali */
.picon--image {
  background: var(--picon) center / contain no-repeat;
}

/* Più colori dallo sprite: <svg><use> */
svg.picon--use {
  overflow: visible;
}