:host {
  /* dimensions */
  /*@doc Define a altura do componente.*/
  --ez-text-input--height: 42px;
  /*@doc Define a largura do componente.*/
  --ez-text-input--width: 100%;
  /*@doc Define a largura do slot que contém o ícone.*/
  --ez-text-input__icon--width: 30px;
  /*@doc Define a altura do componente em modo "slim".*/
  --ez-text-input--height--slim: 32px;
  /*@doc Define a largura maxima do componente.*/
  --ez-text-input__min-width: 0px;
  /*@doc Define a largura minima do componente.*/
  --ez-text-input__max-width: 100%;

  /* general */
  /*@doc Define o raio da borda do input do componente.*/
  --ez-text-input--border-radius: var(--border--radius-medium, 12px);

  /*@doc Define o raio da borda no top esquerdo do componente.*/
  --ez-text-input--border-top-left-radius: var(--ez-text-input--border-radius);
  /*@doc Define o raio da borda inferior esquerda do componente.*/
  --ez-text-input--border-bottom-left-radius: var(--ez-text-input--border-radius);
  /*@doc Define o raio da borda no top direito do componente.*/
  --ez-text-input--border-top-right-radius: var(--ez-text-input--border-radius);
  /*@doc Define o raio da borda inferior direita do componente.*/
  --ez-text-input--border-bottom-right-radius: var(--ez-text-input--border-radius);

  /*@doc Define o tamanho da fonte do input e label do componente.*/
  --ez-text-input--font-size: var(--text--medium, 14px);
  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
  --ez-text-input--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do label do componente.*/
  --ez-text-input--font-weight: var(--text-weight--medium, 400);
  /*@doc Define a cor da fonte do input e label do componente.*/
  --ez-text-input--color: var(--title--primary, #2B3A54);
  /*@doc Define a margem abaixo do componente.*/
  --ez-text-input__margin-bottom: var(--space--small);

  /* input */
  /*@doc Define a cor de fundo do input.*/
  --ez-text-input__input--background-color: var(--background--light, #ffffff);
  /*@doc Define o estilo da borda do input.*/
  --ez-text-input__input--border: var(--border--small, 1px solid);
  /*@doc Define a cor da borda do input.*/
  --ez-text-input__input--border-color: var(--color--strokes,#DCE0E8);
  /*@doc Define a cor da borda do input quando focado.*/
  --ez-text-input__input--focus--border-color: var(--color--primary, #008561);

  /* input disabled */
  /*@doc Define a cor de fundo do input quando desabilitado.*/
  --ez-text-input__input--disabled--background-color: var(--background--medium, #F0F3F7);
  /*@doc Define a cor do texto do input.*/
  --ez-text-input__input--disabled--color: var(--text--primary, #626E82);

  /* input error */
  /*@doc Define a cor da borda do input quando com erro.*/
  --ez-text-input__input--error--border-color: var(--color-alert--error-800,#BD0025);

  
  /*@doc Define a cor do input quando não possuir borda*/
  --ez-text-input__input--noborder-color: white;
  /*@doc Define o padding do input*/
  --ez-text-input__input--padding: var(--space--medium, 6px);
  /*@doc Define a cor do placeholder do input.*/
  --ez-text-input__placeholder--color: var(--text--secondary, #a2abb9);


  /* tooltip icon */
  /*@doc Define a cor da fonte da mensagem quando erro.*/
  --ez-text-input__tooltip_icon--error--color: var(--color-alert--error-800,#BD0025);

  /* label */
  /*@doc Define o posicionamento do label.*/
  --ez-text-input__label--floating--top: 6px;
  /*@doc Define o posicionamento do label.*/
  --ez-text-input__label--padding-top: 12px;
  /*@doc Define o espaçamento esquerdo do label.*/
  --ez-text-input__label--padding-left: 14px;
  /*@doc Define o espaçamento direito do label.*/
  --ez-text-input__label--padding-right: 12px;

  /*@doc Define a cor do ícone do slot.*/
  --ez-text-input__input--focus--icon-color: var(--title--primary, #2B3A54);
  /*@doc Define a cor do ícone do slot quando disabled.*/
  --ez-text-input__input--disabled--focus--icon-color: var(--text--primary, #626E82);

  /*Error icon*/
  /*@doc Define o espaçamento lateral do icone de erro.*/
  --ez-text-input__tooltip-icon--spacing: var(--space--large);
  /*@doc Define a largura do icone de erro.*/
  --ez-text-input__tooltip-icon---width: var(--space--large);
  /*@doc Define a margem horizontal do icone de erro.*/
  --ez-text-input__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
  /*@doc Define a margem vertical do icone de erro.*/
  --ez-text-input__tooltip-icon---vertical-margin: 10px;
  


  /***************
  host style
  ***************/
  /*private*/
  display: flex;
  flex-wrap: wrap;
  position: relative;
  /*public*/
  width: var(--ez-text-input--width);
  min-width: var(--ez-text-input__min-width);
  max-width: var(--ez-text-input__max-width);
}

:host(.grid_editor){
  --ez-text-input--height--slim: 25px;
}

input {
  /*private*/
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  /*public*/
  height: var(--ez-text-input--height);
  border-top-left-radius: var(--ez-text-input--border-top-left-radius);
  border-bottom-left-radius: var(--ez-text-input--border-bottom-left-radius);
  border-top-right-radius: var(--ez-text-input--border-top-right-radius);
  border-bottom-right-radius: var(--ez-text-input--border-bottom-right-radius);
  font-family: var(--ez-text-input--font-family);
  font-size: var(--ez-text-input--font-size);
  border: var(--ez-text-input__input--border);
  border-color: var(--ez-text-input__input--border-color);
  background-color: var(--ez-text-input__input--background-color);
  color: var(--ez-text-input--color);
  font-weight: var(--ez-text-input--font-weight);
  padding: var(--ez-text-input__input--padding);
  margin-bottom: var(--ez-text-input__margin-bottom);
}

input.no--margin {
  --ez-text-input__margin-bottom: 0;
}

input:disabled {
  /*public*/
  background-color: var(--ez-text-input__input--disabled--background-color);
  color: var(--ez-text-input__input--disabled--color);
  cursor: not-allowed;
}

input:focus {
  /*private*/
  outline: none;
  border: var(--border--medium, 2px solid);
  /*public*/
  border-color: var(--ez-text-input__input--focus--border-color);
}

input.focused{
  /*private*/
  border: var(--border--medium, 2px solid);
  /*public*/
  border-color: var(--ez-text-input__input--focus--border-color);
}

input.icon--left {
  padding-left: var(--ez-text-input__icon--width);
}
input.icon--left.hasError {
  padding-right: var(--ez-text-input__icon--width);
}

input.icon--right { 
  padding-right: var(--ez-text-input__icon--width);
}
input.icon--right.hasError {
  padding-right: calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing));
}

input.hasError {
  color: var(--ez-text-input--color);
  border: var(--border--medium, 2px solid);
  border-color: var(--ez-text-input__input--error--border-color);
  padding-right: calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)));
}

input:disabled.hasError {
  color: var(--ez-text-input__input--disabled--color);
}

input.text--right {
  text-align: right;
}

input:disabled,
input:read-only {
  cursor: not-allowed;
}

.hasError {
  /*public*/
  color: var(--ez-text-input__tooltip_icon--error--color);
}

.input__label {
  /*private*/
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: font-size .05s, top .05s;
  transition: font-size .05s, top .05s;
  width: calc(100% - (var(--ez-text-input__label--padding-right) + var(--ez-text-input__label--padding-left)));
  left: var(--ez-text-input--space--medium);

  /*public*/
  font-family: var(--ez-text-input--font-family);
  font-size: var(--ez-text-input--font-size);
  font-weight: var(--ez-text-input--font-weight);
  color: var(--ez-text-input--color);
  top: var(--ez-text-input__label--padding-top);
  left: var(--ez-text-input__label--padding-left);
  padding-right: var(--ez-text-input__label--padding-right);
}
.input__label.hasError {
  width: calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)));
}
.input__label--floated {
  font-family: var(--ez-text-input--font-family);
  font-size: var(--text--extra-small);
  color: var(--text--primary);
  top: var(--ez-text-input__label--floating--top);
}

.input__label--disabled {
  color: var(--ez-text-input__input--disabled--color);
  cursor: not-allowed;
}

.input__label--left {
  /*public*/
  text-align: left;
  left: calc(var(--ez-text-input__icon--width) + 2px);
  /*borda*/
  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-right)));
}

.input__label--left.hasError {
  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
}

.input__label--right {
  /*public*/
  right: var(--ez-text-input__icon--width);
  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-left)));
}
.input__label--right.hasError {
  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
}

/* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
.input__label--left.input__label--right {
  left: calc(var(--ez-text-input__icon--width) + 2px);
  /*borda*/
  width: calc(100% - var(--ez-text-input__icon--width) * 2);

}

.input--with--label {
  /*public*/
  padding-bottom: 0;
}

.input--slim {
  /*public*/
  padding-top: var(--space--small, 3px);
  padding-bottom: var(--space--small, 3px);
  height: var(--ez-text-input--height--slim);
}

.input__slim--title{
  font-size: 16px;
  font-weight: bold;
}

.input--slim::-webkit-input-placeholder,  /* Edge */
  .input--slim:-moz-placeholder,            /* Firefox 4-18 */
  .input--slim::-moz-placeholder,           /* Firefox 19+ */
  .input--slim:-ms-input-placeholder,       /* IE 10-11 */
  .input--slim::placeholder {               /* Modern browsers */
    /*public*/
    font-family: var(--ez-text-input--font-family);
    font-size: var(--ez-text-input--font-size);
    font-weight: var(--ez-text-input--font-weight);
    color: var(--ez-text-input__placeholder--color);
  }


.input--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
.input--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
.input--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
.input--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
.input--slim:disabled::placeholder {
  /*public*/
  color: var(--ez-text-input__input--disabled--color);
}

input.input__slim--noborder {
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
  background: var(--ez-text-input__input--noborder-color);
}

ez-icon.tooltip-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: var(--ez-text-input__tooltip-icon---width);
  height: 22px;
  margin: var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);
  top: 0;
  right: 0;
  border-radius: var(--ez-text-input--border-radius);
}
ez-icon.tooltip-icon.rightIconSlot{
  right: var(--ez-text-input__tooltip-icon--spacing);
}

ez-icon.tooltip-icon.hasError{
  --ez-icon--color: var(--ez-text-input__tooltip_icon--error--color);
}