.drawicon {
  width: 100%;
  max-width: var(--size, 110px);
}

.drawicon svg {
  display: block;
  width: 100%;
  height: auto;
}

.drawicon .dr-p {
  fill: var(--icon-color, #42A72A);
  opacity: 0;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}

.drawicon.is-in .dr-p {
  -webkit-animation: dr-pop .5s cubic-bezier(.2, .9, .3, 1) forwards var(--d);
  animation: dr-pop .5s cubic-bezier(.2, .9, .3, 1) forwards var(--d);
}

@-webkit-keyframes dr-pop {
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes dr-pop {
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

/* BB re-renders nodes in the editor — never hide them there. */
.fl-builder-edit .drawicon .dr-p {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .drawicon.is-in .dr-p { -webkit-animation: none; animation: none; }
  .drawicon .dr-p {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}