@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.quoted__message__preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 8px 16px;
  animation: slide-in 0.2s ease-out;
  transform-origin: bottom;

  @include theme() {
    background-color: get(bg-color-input);
  }

  &__content {
    width: 100%;
    position: relative;
    padding: 8px 12px;
    background: var(--chat-hover-bg);

    @include theme() {
      background-color: get(bg-color-operate);
      border-left: 6px solid get(text-color-tertiary);
    }

    &--header {
      display: flex;
      margin-bottom: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    &--title {
      font-size: 14px;
      font-weight: 500;

      @include theme() {
        color: get(text-color-primary);
      }
    }

    &--text {
      font-size: 14px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      @include theme() {
        color: get(text-color-secondary);
      }
    }
  }

  &__close {
    cursor: pointer;
    transition: color 0.2s ease;

    @include theme() {
      color: get(text-color-secondary);
    }

    &:hover {
      color: var(--chat-text-color);
    }
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}