/**
 * 表单组件样式
 */

@layer components {
  /* 表单组 */
  .form-group {
    @apply mb-4;
  }

  .form-group:last-child {
    @apply mb-0;
  }

  /* 表单标签 */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .form-label.required::after {
    content: "*";
    @apply text-[#f5222d] ml-1;
  }

  /* 表单控件 */
  .form-input,
  .form-select,
  .form-textarea {
    @apply block w-full rounded-md border-gray-300 shadow-sm py-2 px-3 text-sm
           focus:border-[#00684a] focus:ring focus:ring-[#00684a] focus:ring-opacity-20
           disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed;
  }

  .form-select {
    @apply pr-10;
  }

  .form-textarea {
    @apply min-h-[100px];
  }

  /* 表单控件尺寸 */
  .form-input-sm,
  .form-select-sm,
  .form-textarea-sm {
    @apply py-1.5 px-2.5 text-xs;
  }

  .form-input-lg,
  .form-select-lg,
  .form-textarea-lg {
    @apply py-2.5 px-3.5 text-base;
  }

  /* 表单验证状态 */
  .form-input.error,
  .form-select.error,
  .form-textarea.error {
    @apply border-[#f5222d] focus:border-[#f5222d] focus:ring-[#f5222d];
  }

  .form-input.success,
  .form-select.success,
  .form-textarea.success {
    @apply border-[#52c41a] focus:border-[#52c41a] focus:ring-[#52c41a];
  }

  /* 表单帮助文本 */
  .form-help {
    @apply mt-1 text-sm text-gray-500;
  }

  .form-error {
    @apply mt-1 text-sm text-[#f5222d];
  }

  /* 表单复选框和单选框 */
  .form-checkbox-group,
  .form-radio-group {
    @apply space-y-2;
  }

  .form-check {
    @apply flex items-center;
  }

  .form-checkbox,
  .form-radio {
    @apply h-4 w-4 text-[#00684a] border-gray-300 focus:ring-[#00684a] focus:ring-opacity-20 rounded;
  }

  .form-radio {
    @apply rounded-full;
  }

  .form-check-label {
    @apply ml-2 block text-sm text-gray-700;
  }

  /* 行内表单 */
  .form-inline {
    @apply flex flex-wrap items-end space-x-2;
  }

  /* 水平表单 */
  .form-horizontal .form-group {
    @apply flex items-center;
  }

  .form-horizontal .form-label {
    @apply w-1/3 mb-0;
  }

  .form-horizontal .form-control-container {
    @apply w-2/3;
  }

  /* 搜索框 */
  .search-box {
    @apply relative flex;
  }

  .search-box input {
    @apply pr-10;
  }

  .search-box button {
    @apply absolute inset-y-0 right-0 flex items-center px-2;
  }
}