.bui-input {
  --height: var(--bui-input-height, 32px);
  --padding: var(--bui-input-padding, 4px 10px);
  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
  --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
  --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
  --background-color: var(--bui-input-background-color, transparent);
  --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
  position: relative;
  display: flex;
  align-items: center;
  height: var(--height);
  padding: var(--padding);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: 1px solid var(--bui-color-border-default);
  font-family: var(--bui-font-family);
}
.bui-input-icon {
  display: flex;
  align-items: center;
  color: var(--bui-color-fg-subtle);
  font-size: var(--bui-title-size-3);
}
.bui-input-icon-start {
  margin-right: var(--icon-start-margin-right);
}
.bui-input-icon-end {
  margin-left: var(--icon-end-margin-left);
}
.bui-input-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  height: 100%;
  color: var(--bui-color-fg-default);
  border: none;
  outline: none;
  background-color: var(--background-color);
  font-size: var(--bui-text-size-2);
}
.bui-input-input::placeholder {
  color: var(--bui-color-fg-subtle);
}
.bui-input-disabled {
  background-color: var(--disabled-background-color);
}
.bui-input-disabled .bui-input-input {
  color: var(--bui-color-fg-disabled);
}
.bui-input-disabled .bui-input-input::placeholder {
  color: var(--bui-color-fg-disabled);
}
.bui-input-clear {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--bui-color-fg-disabled);
  height: 100%;
  font-size: var(--bui-title-size-3);
}
.bui-input .bui-mini-placeholder {
  width: auto;
}