ui-input {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

ui-input label {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

ui-input input {
  width: 100%;
  height: var(--h-field);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--ink-body);
  font-family: inherit;
  font-size: var(--fs-field);
  outline: none;
  transition: var(--transition);
}

ui-input input:hover {
  border-color: var(--line-hover);
}

ui-input input:focus {
  border-color: var(--blue-edge);
  background: var(--white);
  box-shadow: var(--ring);
}

ui-input input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

ui-input[invalid] input {
  border-color: var(--danger-field-line);
  background: var(--danger-field-bg);
}

ui-input[invalid] input:focus {
  border-color: var(--danger);
  box-shadow: var(--ring-danger);
}