/**
 * 搜索框组件样式
 */

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

/* 搜索框与按钮并排显示 */
.search-box-row {
  @apply flex items-center;
}

/* .search-box-row .form-input {
  @apply rounded-r-none;
} */

.search-box-row .search-button {
  @apply  h-full flex items-center;
}

/* 搜索输入框 */
.form-input {
  @apply w-full py-2 px-4 border border-gray-200 rounded-md text-sm
         focus:outline-none focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a]
         placeholder-gray-400 transition-all duration-200;
}

/* 搜索按钮 */
.search-button {
  @apply bg-[#00684a] text-white px-3 py-2 rounded-md border border-[#00684a];
}

.search-button:hover {
  @apply bg-[#005a3f] border-[#005a3f];
}

.search-button i {
  @apply mr-1;
}

/* 仅图标按钮样式 */
.icon-only-btn {
  @apply px-2;
}

.icon-only-btn i {
  @apply mr-0;
}

/* 搜索框大小 */
.search-box-sm .form-input {
  @apply py-1.5 text-sm;
}

.search-box-lg .form-input {
  @apply py-2.5 text-base;
}

/* 搜索图标 */
.search-box-icon {
  @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
}

/* 清除按钮 */
.search-box-clear {
  @apply absolute right-3 top-1/2 transform -translate-y-1/2 
         text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200;
}

/* 带边框的搜索框 */
.search-box-bordered {
  @apply shadow-sm;
}

/* 搜索框禁用状态 */
.form-input:disabled {
  @apply bg-gray-100 cursor-not-allowed opacity-70;
}