@import "../../themes/liberty.globals";
:host {
  --lu-text-area-border-color:  #686A6F;
  position: relative;
  lu-icon {
    top: 50%;

    margin-top: -13px;

    font-size: 24px;

    line-height: 26px;
  }
}


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

.native-textarea {
  @include padding(9px, 10px, 9px, 10px);
  width: 100%;

  border: 1px solid var(--lu-global-form-input-outline, var(--lu-text-area-border-color));

  outline: none;

  background-color: #FFFFFF;

  font-size: var(--lu-global-form-text-area-font-size, 14px);

  line-height: 26px;
  box-sizing: border-box;
}

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

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

:host(.has-focus) {
  .native-textarea {
    border: 2px solid  $primary;
  }
}