.floating-block {
  position: fixed;
  z-index: 3100;
  bottom: 15%;
  right: 5%;
}
.floating-block__btn {
  --btn-size: 72px;
  --icon-size: 40px;
  position: relative;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fb0;
  transition: all 300ms;
  transition-property: transform, background-color;
}
.floating-block__btn:focus,
.floating-block__btn:hover {
  transform: scale(1.1);
}
.floating-block__options {
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding: 15px 0;
  transform-origin: 50% 100%;
  transform: translate(-50%, 50px) scale(0);
  transition: transform 300ms;
}
.floating-block.active .floating-block__options {
  transform: translate(-50%, 0) scale(1);
}
.floating-block__options > .floating-block__btn {
  --btn-size: 60px;
  margin-bottom: 10px;
}
.floating-block__btn--pulsating::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.4;
  background-color: #fb0;
  transform: scale(1.1);
  animation: pulse 5s 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1.3);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}
.floating-block__btn--full-svg {
  --icon-size: 100%;
  background-color: transparent !important;
}
.floating-block__btn--telegram {
  background-color: #08c;
}
.floating-block__btn--viber {
  background-color: #7360f2;
}
.floating-block__btn--whatsapp {
  background-color: #25d366;
}
.floating-block__icon {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
}
.inner-bracket-path,
.outer-bracket-path {
  animation: appearRightTop 1s infinite;
}
.inner-bracket-path {
  animation-delay: 2s;
}
.outer-bracket-path {
  animation-delay: 2.35s;
}
@keyframes appearRightTop {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: translate(1px, -1px);
  }
  75% {
    opacity: 1;
    transform: translate(1.5px, -1.5px);
  }
  100% {
    opacity: 0;
    transform: translate(2px, -2px);
  }
}
.phone-path {
  transform-origin: 20% 60%;
  animation: shaking 2s infinite;
}
@keyframes shaking {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}