/*!
 * Puzzingo Icons (Font Awesome-style SVG helpers)
 * Class prefix: pz-icon-
 */

.pz-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  overflow: visible;
  color: currentColor;
}

.pz-icon use,
.pz-icon path,
.pz-icon polygon,
.pz-icon rect,
.pz-icon circle,
.pz-icon line {
  fill: currentColor;
  stroke: currentColor;
}

/* Size helpers */
.pz-icon-1x { font-size: 1em; }
.pz-icon-2x { font-size: 2em; }
.pz-icon-3x { font-size: 3em; }
.pz-icon-4x { font-size: 4em; }
.pz-icon-5x { font-size: 5em; }

/* Fixed width */
.pz-icon-fw {
  width: 1.25em;
  text-align: center;
}

/* Spin */
@keyframes pz-icon-spin { to { transform: rotate(360deg); } }
.pz-icon-spin { animation: pz-icon-spin 1s linear infinite; }

/* Rotate / flip */
.pz-icon-rotate-90  { transform: rotate(90deg); }
.pz-icon-rotate-180 { transform: rotate(180deg); }
.pz-icon-rotate-270 { transform: rotate(270deg); }
.pz-icon-flip-horizontal { transform: scaleX(-1); }
.pz-icon-flip-vertical   { transform: scaleY(-1); }

.swatch {
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,.04);
}