:host {
  --lu-input-border-color: #686A6F;
  display: block;
  position: relative;
}
:host lu-icon {
  top: 50%;
  margin-top: -13px;
  font-size: 24px;
  line-height: 26px;
}

:host(.lu-color) {
  color: var(--lu-color-base);
}

.native-input {
  padding: 9px 10px;
  width: 100%;
  border: 1px solid var(--lu-global-form-input-outline, var(--lu-input-border-color));
  outline: none;
  background-color: #FFFFFF;
  font-size: var(--lu-global-form-input-font-size, 16px);
  line-height: 26px;
  box-sizing: border-box;
}

:host([is-valid]) .native-input {
  border: 2px solid #00854E;
}

:host([is-invalid]) .native-input {
  border: 2px solid #E4002B;
}

:host([has-prefix]) .prefix-icon {
  left: 13px;
  position: absolute;
}
:host([has-prefix]) .native-input {
  padding-left: 50px;
}

:host([has-suffix]) .suffix-icon {
  right: 13px;
  position: absolute;
}
:host([has-suffix]) .native-input {
  padding-right: 50px;
}

:host([suffix-clickable]) .suffix-icon {
  cursor: pointer;
}

:host([prefix-clickable]) .prefix-icon {
  cursor: pointer;
}

:host(.has-focus) .native-input {
  border: 2px solid #1B2C56;
}

:host(.no-border) .native-input {
  border: none;
}