/* ===== 输入框/搜索框统一清空按钮（前台 + 后台通用） ===== */
/* 有内容且聚焦时显示：灰色圆圈白色叉；悬停：红色圆圈白色叉 */

.clearable-field {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
}

.clearable-field > input,
.clearable-field > textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* 隐藏 type=search 的原生清除按钮，统一使用自定义清空按钮 */
.clearable-field > input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* 输入框原有 margin 会挤占包装层高度、导致按钮偏离垂直居中，统一转移到包装层 */
.clearable-field > input,
.clearable-field > textarea {
  margin-top: 0;
  margin-bottom: 0;
}

.contact-form .clearable-field {
  margin-top: 8px;
}

/* 输入框预留按钮空间，避免文字被按钮遮挡 */
.clearable-field > input {
  padding-right: 36px;
}

/* 多行文本域：预留右上角按钮空间 */
.clearable-field > textarea {
  padding-right: 38px;
}

.clearable-field .input-clear-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #9aa0a6;
  color: #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.15s ease;
}

.clearable-field.has-value.is-focused .input-clear-btn {
  display: inline-flex;
}

.clearable-field .input-clear-btn:hover {
  background: #e02020;
}

.clearable-field .input-clear-btn svg {
  display: block;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

/* 多行文本域：按钮固定在右上角 */
.clearable-field.is-textarea .input-clear-btn {
  top: 18px;
  transform: none;
}

/* number 输入框：避开原生上下调节按钮 */
.clearable-field > input[type='number'] {
  padding-right: 44px;
}

.clearable-field.has-spinner .input-clear-btn {
  right: 26px;
}

/* 登录页密码框：避开右侧"密码可见"切换按钮 */
.clearable-field.has-right-control .input-clear-btn {
  right: 44px;
}

/* 登录页：包装后保持左侧图标聚焦变色效果 */
.login-input-wrap .clearable-field:focus-within ~ .login-input-icon {
  color: var(--admin-primary);
}

[data-theme='light'] .login-input-wrap .clearable-field:focus-within ~ .login-input-icon {
  color: #e85d04;
}