/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--form-input--height--small: var(--digi--input-height--small);
  --digi--form-input--height--medium: var(--digi--input-height--medium);
  --digi--form-input--height--large: var(--digi--input-height--large);
  --digi--form-input--border-radius: var(--digi--border-radius--input);
  --digi--form-input--padding: 0 var(--digi--gutter--medium);
  --digi--form-input--background--empty: var(--digi--color--background--interactive--default--input-elements);
  --digi--form-input--background--neutral: var(--digi--color--background--interactive--default--input-elements);
  --digi--form-input--background--success: var(--digi--color--background--interactive--validation--success);
  --digi--form-input--background--warning: var(--digi--color--background--interactive--validation--warning);
  --digi--form-input--background--error: var(--digi--color--background--interactive--validation--error);
  --digi--form-input--border--neutral: var(--digi--border-width--input-regular) solid;
  --digi--form-input--border--error: var(--digi--border-width--input-validation) solid;
  --digi--form-input--border--success: var(--digi--border-width--input-validation) solid;
  --digi--form-input--border--warning: var(--digi--border-width--input-validation) solid;
  --digi--form-input--border-color--neutral: var(--digi--color--border--interactive--default--on-input);
  --digi--form-input--border-color--success: var(--digi--color--border--interactive--validation--success);
  --digi--form-input--border-color--warning: var(--digi--color--border--interactive--validation--warning);
  --digi--form-input--border-color--error: var(--digi--color--border--interactive--validation--error);
}
:host .digi-form-input {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
:host .digi-form-input--small {
  --HEIGHT: var(--digi--form-input--height--small);
}
:host .digi-form-input--medium {
  --HEIGHT: var(--digi--form-input--height--medium);
}
:host .digi-form-input--large {
  --HEIGHT: var(--digi--form-input--height--large);
}
:host .digi-form-input--neutral {
  --BORDER: var(--digi--form-input--border--neutral);
  --BORDER-COLOR: var(--digi--form-input--border-color--neutral);
  --BACKGROUND: var(--digi--form-input--background--neutral);
}
:host .digi-form-input--empty:not(:focus-within) {
  --BACKGROUND: var(--digi--form-input--background--empty);
}
:host .digi-form-input--success {
  --BORDER: var(--digi--form-input--border--success);
  --BORDER-COLOR: var(--digi--form-input--border-color--success);
  --BACKGROUND: var(--digi--form-input--background--success);
}
:host .digi-form-input--warning {
  --BORDER: var(--digi--form-input--border--warning);
  --BORDER-COLOR: var(--digi--form-input--border-color--warning);
  --BACKGROUND: var(--digi--form-input--background--warning);
}
:host .digi-form-input--error {
  --BORDER: var(--digi--form-input--border--error);
  --BORDER-COLOR: var(--digi--form-input--border-color--error);
  --BACKGROUND: var(--digi--form-input--background--error);
}

.digi-form-input__input-wrapper {
  position: relative;
  display: flex;
}
.digi-form-input__input-wrapper ::slotted([slot^=button]) button {
  --MIN-HEIGHT: 100%;
}
.digi-form-input--button-variation-primary .digi-form-input__input-wrapper ::slotted([slot^=button]) button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.digi-form-input--button-variation-secondary.digi-form-input--has-button-true .digi-form-input__input-wrapper {
  gap: var(--digi--gutter--medium);
  flex-wrap: wrap;
}

.digi-form-input__input {
  flex: 1;
  height: var(--HEIGHT);
  font-family: var(--digi--global--typography--font-family--default);
  font-size: var(--digi--typography--body--font-size--desktop);
  padding: var(--digi--form-input--padding);
  color: var(--digi--color--text--primary);
  background: var(--BACKGROUND);
  border: var(--BORDER);
  border-color: var(--BORDER-COLOR);
  border-radius: var(--digi--form-input--border-radius);
  box-sizing: border-box;
}
.digi-form-input__input:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
  box-shadow: 0px 0px 0px 5px white;
}
.digi-form-input--button-variation-primary.digi-form-input--has-button-true .digi-form-input__input {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}