// SASS 变量定义
$form-primary-color: #00a6ff;
$form-error-color: #ff4d4f;
$form-text-color: #333;
$form-label-color: #86909c;
$form-border-color: #ddd;
$form-input-border-color: #ddd;
$form-bg-color: #f5f5f5;
$form-header-bg-color: rgba(25, 144, 255, 0.06);
$form-border-radius: 8px;
$form-transition: all 0.2s ease;

.form-wrapper {
  display: inline-block;
  font-size: 0;
  border-radius: $form-border-radius;
  overflow: hidden;
  width: 280px;
  margin-right: 12px;
}

.form-header {
  background-color: $form-header-bg-color;
  box-sizing: border-box;
  border: 1px solid $form-border-color;
  border-radius: $form-border-radius $form-border-radius 0 0;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  min-height: 44px;

  .minus,
  .delete {
    height: 22px;
    width: 22px;
    cursor: pointer;
    transition: $form-transition;

    &:hover {
      transform: scale(1.1);
    }
  }

  .delete {
    margin-left: auto;
  }
}

.form-title {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
  color: $form-primary-color;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-item-wrapper {
  background-color: $form-bg-color;
  border-radius: 0 0 $form-border-radius $form-border-radius;
  box-sizing: border-box;
  border: 1px solid $form-border-color;
  border-top: none;
  padding: 12px;
}

.form-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-item-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-label {
  font-size: 14px;
  color: $form-label-color;
  width: 50px;
  flex-shrink: 0;
  font-weight: 500;
  margin-right: 10px;
}

.form-input {
  flex: 1;
  font-size: 14px;
  color: $form-text-color;
  border: none;
  border-bottom: 1px solid $form-input-border-color;
  background: transparent;
  outline: none;
  transition: $form-transition;
  min-height: 20px;

  &::placeholder {
    color: $form-label-color;
    opacity: 0.8;
  }

  &:focus {
    border-bottom-color: $form-primary-color;

    &::placeholder {
      opacity: 0.5;
    }
  }

  &.form-input-error {
    border-bottom-color: $form-error-color;

    &:focus {
      border-bottom-color: $form-error-color;
    }
  }
}

.form-error {
  font-size: 12px;
  color: $form-error-color;
  margin-top: 6px;
  margin-left: 60px;
  line-height: 1.4;
  animation: fadeInError 0.3s ease-in-out;
}

// 错误信息淡入动画
@keyframes fadeInError {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}