/*
* Input theme
*
*/
/*
 * Utilities
 */
.dnb-input__border--tokens {
  --input-border-color: var(--sb-color-gray-dark-2);
  --input-border-color--hover: var(--sb-color-violet);
  --input-border-color--active: var(--sb-color-violet);
  --input-border-color--focus: var(--focus-ring-color);
  --input-border-color--disabled: var(--sb-color-gray);
  --input-border-color__error: var(--sb-color-red);
  --input-border-color__error--focus: var(--sb-color-red);
  --input-border-width: 0.0625rem;
  --input-border-width--hover: 0.125rem;
  --input-border-width--active: 0.0625rem;
  --input-border-width--disabled: 0.0625rem;
  --input-border-width--focus: var(--focus-ring-width);
  --input-border-width__error: 0.0625rem;
  --input-border-width__error--hover: 0.125rem;
  --input-border-width__error--active: 0.0625rem;
  --input-border-inset: inset;
  --input-border-inset--hover: inset;
  --input-border-inset--active: inset;
  --input-border-inset--focus: inset;
  --input-border-inset--disabled: inset;
  --input-border-radius: 0.5rem;
  --input-border-radius--active: 1.5rem;
  --input-border-radius--focus: 1.5rem;
}

.dnb-input {
  --input-height: 2.5rem;
  --input-color: var(--input-color--default);
  --input-color--default: var(--sb-color-text);
  --input-color--active: var(--sb-color-text);
  --input-button-border-color: var(--input-border-color);
  --input-button-border-width: var(--input-border-width);
  --input-button-border-radius: var(--input-border-radius);
}
.dnb-input__shell {
  background-color: var(--input-background-color);
  transition: border-radius 0.25s ease-out;
  border: none;
  color: var(--input-color);
}
.dnb-input__submit-button__button {
  --button-secondary-color: var(--sb-color-violet);
  --button-secondary-color--active: var(--sb-color-violet);
}
.dnb-input__placeholder {
  color: var(--sb-color-gray-dark-3);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell,
.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,
.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder {
  color: var(--sb-color-gray-dark-2);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell {
  -webkit-text-fill-color: currentcolor;
  background-color: var(--sb-color-gray-light);
}
.dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
  --input-color: var(--input-color--active);
  --input-button-border-color: var(--input-border-color--active);
  --input-button-border-radius: var(--input-border-radius--active);
}
html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
  --input-button-border-color: var(--input-border-color--focus);
  --input-button-border-width: var(--input-border-width--focus);
}
html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus].dnb-input__status--error {
  --input-button-border-color: var(
    --input-border-color__error--focus
  );
}
.dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
  --input-color--default: var(--sb-color-red);
  --input-color--active: var(--sb-color-text);
  --input-button-border-color: var(--sb-color-red);
}
.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button {
  --button-secondary-background--hover: var(--sb-color-red);
  --button-secondary-color--hover: var(--sb-color-white);
  --button-secondary-color--active: var(--sb-color-red);
}
.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0 var(--input-button-border-radius) var(--input-button-border-radius) 0;
}
.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active {
  border: var(--input-button-border-width) solid var(--input-button-border-color);
  border-left: none;
  padding-left: var(--input-button-border-width);
}