@import "./import.less";

.@{prefix}-chat-loading {
  display: flex;
  align-items: center;

  & *, *::before, *::after {
    box-sizing: border-box;
  }
  
  &__skeleton {
    display: block;
    width: 100%;
    min-width: 100%;
  }

  &__moving {
    position: relative;
    width: var(--td-chat-loading-moving-width);
    height: var(--td-chat-loading-moving-height);
    left: 2px;
    margin: var(--td-chat-loading-moving-margin);
    scale: 0.8;
    > div {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background-color: var(--td-brand-color);
    }
    &--top {
      top: -4px;
      left: 3px;
      animation: dot-moving-top .6s ease-in-out alternate infinite
    }
    &--left {
      bottom: -5px;
      left: -5px;
      animation: dot-moving-left .6s ease-in-out alternate infinite
    }
    &--right {
      bottom: -5px;
      right: -5px;
      animation: dot-moving-right .6s ease-in-out alternate infinite
    }
  }

  
  &__gradient {
      width: var(--td-chat-loading-circle-width);
      height: var(--td-chat-loading-circle-height);
      background-color: transparent;
      border-radius: var(--td-chat-loading-border-radius);
      border: 1.5px solid var(--td-brand-color);
      animation: border-gradient-color .6s ease-in-out alternate infinite;
      box-sizing: border-box;
  }
  &__circle {
    position: relative;
    width: var(--td-chat-loading-circle-width);
    height: var(--td-chat-loading-circle-height);
    border-radius: var(--td-chat-loading-border-radius);
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: var(--td-chat-loading-circle-border);
      border-radius: var(--td-chat-loading-border-radius);
    }
    &::after {
      content: '';
      position: absolute;
      width: 102%;
      height: 102%;
      top: -1%;
      left: -1%;
      border: 2px solid transparent;
      border-top-color: var(--td-chat-loading-circle-border-top-color);
      border-radius: var(--td-chat-loading-border-radius);
      animation: t-chat-circle-pending 1s linear infinite;
    }
  }

  &__dot {
    display: flex;
    align-items: center;
    gap: var(--td-chat-loading-dot-gap, 4px);
  }

  &__dot-item {
    animation: DotsAnimation 1.4s ease-in-out infinite;
    display: inline-block;
    height: var(--td-chat-loading-dot-size, 6px);
    width: var(--td-chat-loading-dot-size, 6px);
    background: var(--td-chat-loading-dot-color, var(--td-brand-color));
    border-radius: var(--td-radius-circle);
    margin-right: 0px;
    opacity: 0.3;
  }

  &__text {
    margin-left: 8px;
  }
}


@keyframes border-gradient-color {
  0% {
      border-color: var(--td-brand-color);
      border-width: 1.5px
  }

  50% {
      border-color: var(--td-brand-color-8);
      border-width: 3px
  }

  to {
      border-color: var(--td-brand-color-6);
      border-width: 4px
  }
}

@keyframes dot-moving-top {
  0% {
      transform: scale(1);
      top: -4px
  }

  to {
      transform: scale(1.75);
      top: 3px
  }
}

@keyframes dot-moving-left {
  0% {
      transform: scale(1);
      bottom: -4px;
      left: -4px
  }

  to {
      transform: scale(1.75);
      bottom: 3px;
      left: 3px
  }
}

@keyframes dot-moving-right {
  0% {
      transform: scale(1);
      bottom: -4px;
      right: -4px
  }

  to {
      transform: scale(1.75);
      bottom: 3px;
      right: 3px
  }
}
@keyframes t-chat-circle-pending {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes DotsAnimation {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}