/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

.thinking-node {
  background: #fff;
  border: 1px solid oklch(80.9% .105 251.813);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 16px;
  background-color: oklch(97% .014 254.604);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: auto;
  min-width: 200px;

  .node-form {
    transition: opacity 1s ease-in-out;
  }
}

.thinking-node-loading {
  &::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(90deg,
        transparent,
        transparent,
        transparent,
        transparent,
        rgba(59, 130, 246, 0.6),
        rgba(96, 165, 250, 0.6),
        transparent,
        transparent,
        transparent,
        transparent,
        transparent,
        transparent);
    background-size: 400% 100%;
    border-radius: 8px;
    z-index: -1;
    animation: flowing-border 5s linear infinite;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(90deg,
        transparent,
        transparent,
        transparent,
        transparent,
        rgba(59, 130, 246, 0.08),
        rgba(96, 165, 250, 0.08),
        transparent,
        transparent,
        transparent,
        transparent,
        transparent,
        transparent);
    background-size: 400% 100%;
    border-radius: 8px;
    z-index: 1;
    animation: flowing-border 5s linear infinite;
    pointer-events: none;
  }
}

@keyframes flowing-border {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 400% 0;
  }
}
