.block-byv-thermometer{padding-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);}

.thermometer{text-align:center;}

.thermometer__bar{border-radius:var(--wp--custom--border-radius);height:40px;background-color:rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.thermometer__bar-inner{border-radius:var(--wp--custom--border-radius);background-color:var(--wp--preset--color--primary);position:absolute;top:0;left:0;bottom:0;transition:2s width;}

.hellophant{position:relative;color:var(--wp--preset--color--primary);font-size:125%;}
.hellophant__bubble{color:#000;font-size:40%;background-color:rgba(0,0,0,0.05);padding:0.5em 0.75em;border-radius:var(--wp--custom--border-radius);position:absolute;left:50%;bottom:100%;transform-origin:1em calc(100% + .5em);animation:4s wave infinite;}
.hellophant__bubble:after{content:'';position:absolute;top:100%;left:1em;border:0.25em solid rgba(0,0,0,0.05);border-right-color:transparent;border-bottom-color:transparent;}
.hellophant__name{color:var(--wp--preset--color--primary);}

.block-byv-thermometer:not(.visible) .thermometer__bar-inner{width:0 !important;}


@keyframes wave {
  0% {transform:rotate(0deg) scale(1);}
  2% {transform:rotate(-8deg) scale(1);}
  4% {transform:rotate(8deg) scale(1.1);}
  6% {transform:rotate(-4deg) scale(1.2);}
  8% {transform:rotate(4deg) scale(1.1);}
  10% {transform:rotate(0deg) scale(1);}
}