/* ConditionPopover 애니메이션 및 스타일 */

/* condition-popover-empty 클래스 삭제 - condition-popover-content로 통합 */

.condition-item {
  @apply flex items-center gap-2 py-1;
  transition: all 0.2s ease-in-out;
}

.condition-item:hover {
  @apply bg-Gray-5 rounded px-1;
}

.condition-number {
  @apply text-body-xsmall text-Gray-70 min-w-[24px] flex-shrink-0;
}

.condition-type {
  @apply font-bold text-body-xsmall text-Gray-70 flex-shrink-0;
}

.condition-operator {
  @apply text-body-xsmall text-Gray-70 flex-shrink-0;
}

.condition-value {
  @apply text-body-xsmall text-Gray-70 flex-shrink-0;
}

.condition-logic {
  @apply flex justify-center py-1;
}

.goto-step {
  @apply flex items-center gap-1 py-1 pl-6 border-l-2 border-Green-20 ml-2;
}

/* 애니메이션 클래스들 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

.animate-fade-out-down {
  animation: fadeOutDown 0.3s ease-out;
}

.animate-pulse {
  animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
    background-color: #f0f9ff;
  }
}

/* Condition items container */
.condition-items-container {
  @apply flex flex-col gap-2;
}

.condition-items-container .condition-item:first-child {
  margin-top: 0;
}

.condition-items-container .condition-item:last-child {
  margin-bottom: 0;
}

/* Logic display styling */
.condition-logic span {
  @apply text-body-xsmall text-Blue-60 font-medium px-2 py-1 bg-Blue-10 rounded;
}

/* Goto step styling */
.goto-step span:first-child {
  @apply text-body-xsmall text-Green-60;
}

.goto-step span:last-child {
  @apply text-body-xsmall text-Green-60 font-medium;
}

/* 반응형 지원 */
@media (max-width: 640px) {
  .condition-popover-content {
    min-width: 150px;
    max-width: 300px;
  }

  .condition-number {
    min-width: 20px;
  }

  .condition-value {
    font-size: 10px;
  }
}

/* 다크모드 지원 (필요시) */
@media (prefers-color-scheme: dark) {
  .condition-popover-content {
    @apply bg-Gray-800 border-Gray-600;
  }

  .condition-item:hover {
    @apply bg-Gray-700;
  }
}

/* 높은 대비 모드 지원 (접근성) */
@media (prefers-contrast: high) {
  .condition-popover-content {
    @apply border-2 border-black;
  }

  .condition-type {
    @apply text-black;
    font-weight: 700;
  }
}