.hs-scroll-nav-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

@supports (padding: max(0px)) {
  .hs-scroll-nav-float{
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

.hs-scroll-btn{
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  border: 0;
  background: transparent;
  cursor: pointer;

  transition: transform .15s ease, opacity .2s ease;
}

.hs-scroll-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #FFDF22;
  z-index: 0;
}

.hs-scroll-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #2B4047;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}

.hs-scroll-btn__icon{
  position: relative;
  z-index: 2;
}

.hs-scroll-btn__icon svg{
  display: block;
  fill: #2B4047;
  transition: fill .25s ease;
}

.hs-scroll-btn:hover{
  transform: translateY(2px);
}

.hs-scroll-btn:hover::after{
  transform: translateY(0);
}

.hs-scroll-btn:hover .hs-scroll-btn__icon svg{
  fill: #fff;
}

.hs-scroll-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}