//General Animations
@keyframes lbaic-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes lbaic-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes lbaic-fade-in-out {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes lbaic-fade-out-in {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

//Chat Open Animations
//1
@keyframes lbaic-chat-open-anim-fade-in-down {
  0% {
    transform: translate3d(0, -8px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

//2
@keyframes lbaic-chat-open-anim-fade-in-up {
  0% {
    transform: translate3d(0, 8px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lbaic-chat-open-anim-fade-in-out {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 8px, 0);
  }
}

//3
@keyframes lbaic-chat-open-anim-scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.lbaic-chat-anim {
  &-open {
    &-fade-in-down {
      --lbaic-chat-in-transform: translate3d(0, -8px, 0);
      --lbaic-chat-in-opacity: 0;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-fade-in-down 240ms ease-in-out forwards, lbaic-fade-in 240ms ease-in-out forwards;
    }

    &-fade-in-up {
      --lbaic-chat-in-transform: translate3d(0, 8px, 0);
      --lbaic-chat-in-opacity: 0;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-fade-in-up 240ms ease-in-out forwards, lbaic-fade-in 240ms ease-in-out forwards;
    }

    &-scale {
      --lbaic-chat-in-transform: scale(0);
      --lbaic-chat-inner-opacity: 0;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-scale 360ms ease-in-out forwards;
      --lbaic-chat-inner-animation: lbaic-fade-in 240ms ease-in-out 360ms forwards;
    }
  }

  &-close {
    &-fade-out-up {
      --lbaic-chat-in-transform: translate3d(0, 0, 0);
      --lbaic-chat-in-opacity: 1;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-fade-in-down 240ms ease-in-out forwards reverse, lbaic-fade-out 240ms ease-in-out forwards;
    }

    &-fade-out-down {
      --lbaic-chat-in-transform: translate3d(0, 0, 0);
      --lbaic-chat-in-opacity: 1;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-fade-in-out 240ms ease-in-out forwards, lbaic-fade-out 240ms ease-in-out forwards;
    }

    &-scale {
      --lbaic-chat-in-transform: scale(1);
      --lbaic-chat-inner-opacity: 1;
      --lbaic-chat-in-animation: lbaic-chat-open-anim-scale 360ms ease-in-out 240ms forwards reverse;
      --lbaic-chat-inner-animation: lbaic-fade-out 240ms ease-in-out forwards;
    }
  }
}

//Trigger Show Animations
//1
@keyframes lbaic-trigger-show-anim-right {
  0% {
    transform: translate3d(var(--lbaic-trigger-size), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

//2
@keyframes lbaic-trigger-show-anim-up {
  0% {
    transform: translate3d(0, var(--lbaic-trigger-size), 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

//3
@keyframes lbaic-trigger-show-anim-up-right {
  0% {
    transform: translate3d(var(--lbaic-trigger-size), var(--lbaic-trigger-size), 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

//widgets show
@keyframes show-widgets {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

//Fade in up animation
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.lbaic-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lbaic-trigger-anim {
  &-show {
    &-right {
      --lbaic-trigger-in-transform: translate3d(var(--lbaic-trigger-size), 0, 0);
      --lbaic-trigger-in-opacity: 0;
      --lbaic-trigger-in-animation: lbaic-trigger-show-anim-right 360ms ease-in-out forwards, lbaic-fade-in 360ms ease-in-out forwards;
    }

    &-up {
      --lbaic-trigger-in-transform: translate3d(0, var(--lbaic-trigger-size), 0);
      --lbaic-trigger-in-opacity: 0;
      --lbaic-trigger-in-animation: lbaic-trigger-show-anim-up 360ms ease-in-out forwards, lbaic-fade-in 360ms ease-in-out forwards;
    }

    &-up-right {
      --lbaic-trigger-in-transform: translate3d(var(--lbaic-trigger-size), var(--lbaic-trigger-size), 0);
      --lbaic-trigger-in-opacity: 0;
      --lbaic-trigger-in-animation: lbaic-trigger-show-anim-up-right 360ms ease-in-out forwards, lbaic-fade-in 360ms ease-in-out forwards;
    }
  }
}

//Intro icon Animations
.lbaic-intro {
  &-label-header {
    &:hover {
      .lbaic-intro-label-desc-i {
        animation: moveRight 0.6s ease;
      }
    }
  }

  //widgets show
  &-widgets.show-widgets {
    animation: show-widgets 0.6s ease-in-out;
  }

  &-scroll-row {
    &:hover {
      .lbaic-intro-label-desc-i {
        animation: moveRight 0.6s ease;
      }
    }
  }

  &-row {
    &:hover {
      .lbaic-arrow {
        animation: moveAndBack 0.6s ease;
      }

      .lbaic-plus {
        animation: scale 0.6s ease;
        transform-origin: center;
      }
    }
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moveAndBack {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(2px, -2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes moveRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(2px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

//Trigger Icon Animations
@keyframes lbaic-trigger-icon-dot-anim {
  0%, 50% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes lbaic-trigger-icon-part-anim {
  0%, 50% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(var(--lbaic-trigger-icon-part-translate)) rotate(var(--lbaic-trigger-icon-part-rotate));
  }
}

@keyframes lbaic-trigger-icon-line-anim {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  10% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  25% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  30% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes lbaic-trigger-icon-line-anim2 {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  2% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  17.5% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  32.5% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  45% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  60% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.lbaic-trigger {
  &:hover {
    [href^='#lbaic-chatbot-icon'][href$='left'], [href^='#lbaic-chatbot-icon'][href$='center'], [href^='#lbaic-chatbot-icon'][href$='right'] {
      animation: lbaic-trigger-icon-dot-anim 1500ms ease-in-out var(--lbaic-trigger-icon-dot-delay) infinite;
    }

    [href^='#lbaic-chatbot-icon'][href$='first'], [href^='#lbaic-chatbot-icon'][href$='last'] {
      animation: lbaic-trigger-icon-part-anim 1920ms ease-in-out infinite;
      transform-origin: 50% 50%;
    }

    [href^='#lbaic-chatbot-icon'][href$='line'] {
      transform-box: fill-box;
      transform-origin: left center;
      animation: lbaic-trigger-icon-line-anim 2500ms ease-in-out infinite;
    }

    [href^='#lbaic-chatbot-icon'][href$='line-2'] {
      transform: scaleX(1);
      transform-box: fill-box;
      transform-origin: left center;
      animation: lbaic-trigger-icon-line-anim2 2500ms ease-in-out infinite;
    }
  }
}

[href^='#lbaic-chatbot-icon'][href$='left'] {
  --lbaic-trigger-icon-dot-delay: 200ms;
}

[href^='#lbaic-chatbot-icon'][href$='center'] {
  --lbaic-trigger-icon-dot-delay: 300ms;
}

[href^='#lbaic-chatbot-icon'][href$='right'] {
  --lbaic-trigger-icon-dot-delay: 400ms;
}

[href^='#lbaic-chatbot-icon'][href$='first'] {
  --lbaic-trigger-icon-part-translate: 0, 0, 0;
  --lbaic-trigger-icon-part-rotate: -10deg;
}

[href^='#lbaic-chatbot-icon'][href$='last'] {
  --lbaic-trigger-icon-part-translate: 0, 0, 0;
  --lbaic-trigger-icon-part-rotate: 10deg;
}