:host {
  --background-size: 0% 100%;
  --background: var(--bp-layer-background-300);
  --color: var(--bp-text-color-500);
  --placeholder-color: var(--bp-text-color-400);
  --icon-color: var(--bp-text-color-400);
  --border: var(--bp-object-border-width-100) solid var(--bp-layer-background-300);
  --border-radius: var(--bp-object-border-width-200);
  --outline: var(--bp-interaction-outline);
  --outline-offset: var(--bp-interaction-outline-offset);
  --padding: 0 var(--bp-size-400);
  --font-size: var(--bp-text-size-300);
  --line-height: calc(var(--bp-size-800) + var(--bp-size-200));
  --height: calc(var(--bp-size-800) + var(--bp-size-200));
  --min-width: 100px;
  --width: 100%;
  --transition: background-size 200ms ease;
  --text-align: inherit;
  --cursor: text;
  --field-sizing: initial;
  display: block;
  width: var(--width);
}

:host([size]) {
  --min-width: initial;
}

[input]:not([multiple]) {
  text-transform: var(--text-transform) !important;
  font-size: var(--font-size) !important;
  color: var(--color) !important;
  line-height: var(--line-height) !important;
  height: var(--height) !important;
  min-width: var(--min-width) !important;
  border-radius: var(--border-radius) !important;
  width: var(--width) !important;
  appearance: none !important;
  background: var(--background) !important;
  box-shadow: none !important;
  text-align: var(--text-align) !important;
  font-family: inherit !important;
  field-sizing: var(--field-sizing);
  border: 0 !important;
  margin: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
}

[input]::placeholder {
  color: var(--placeholder-color);
}

[part='internal']:focus-within {
  outline: var(--bp-interaction-outline); /* stylelint-disable-line declaration-block-no-duplicate-properties */
  outline: var(--bp-interaction-outline-webkit); /* stylelint-disable-line declaration-block-no-duplicate-properties */
  outline-offset: var(--bp-interaction-outline-offset);
}

:host(:focus-within) :has([input]:not(:focus)) {
  outline: 0;
}

:host([control-width='shrink']) {
  --field-sizing: content;
  --width: fit-content;
}

[bp-button-icon],
::slotted([bp-button-icon]) {
  --color: var(--icon-color);
}

.input-slot {
  display: flex;
  align-items: center;
}

[part='internal'] {
  display: flex;
  padding: var(--padding);
  transition: var(--transition);
  background: var(--background);
  background-size: var(--background-size);
  border: var(--border);
  border-radius: var(--border-radius) !important;
  gap: var(--bp-space-xs);
  align-items: center;
}

[part='internal'] bp-button-icon {
  align-self: center;
}

:host(:state(readonly)) {
  --background: var(--bp-object-opacity-0);
}

:host(:state(success)) {
  --border: var(--bp-object-border-width-100) solid var(--bp-status-success-background-200);
}

:host(:state(error)),
:host(:state(invalid):state(touched)) {
  --border: var(--bp-object-border-width-100) solid var(--bp-status-danger-background-200);
}

:host(:state(disabled)) {
  --border: var(--bp-object-border-width-100) solid transparent;
  --color: var(--bp-status-disabled-background-200);
}
