.search-input {
  padding: var(--spacing-14) var(--spacing-20);
  border-radius: var(--radius-15);
  width: calc(var(--rpx) * 384);
  background-color: var(--blue-100-10);
  border: calc(var(--rpx) * 1) solid var(--blue-100-10);
  transition: var(--transition-fast);
  cursor: pointer;
}
.search-input .h-search-field{
  width: 100%;
}
.search-input .h-svg {
  height: calc(var(--rpx) * 21);
  width: calc(var(--rpx) * 21);
  display: flex;
}

.search-input > .h-svg svg{
  height: calc(var(--rpx) * 21);
  width: calc(var(--rpx) * 21);
}

.search-input .h-search-field {
  display: flex;
}
.search-input:has(input:focus) {
  border-color: var(--blue-100-80);
}
.search-input input {
  font: var(--font-search-medium);
  color: var(--blue-100);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  border-radius: 0;
}
.search-input input::placeholder {
  color: var(--blue-100);
  transition: var(--transition-fast);
}
.search-input input:focus::placeholder {
  color: transparent;
}