:host {
  /* Geral */
  /*@doc Define o arredondamento dos retangulos.*/
  --ez-tree--border-radius: var(--border--radius-small, 8px);
  /*@doc Define a largura da identação de cada nível.*/
  --ez-tree--padding-inline-start: 20px;
  /*@doc Define a margem do componente.*/
  --ez-tree--margin: var(--space--extra-small, 3px);
  /*@doc Define a margem da direita do componente.*/
  --ez-tree--margin-right: 0px;

  /*@doc Define se o texto dos itens pode ser selecionado pelo usuário.*/
  --ez-tree--user-select: auto;
  
  /* Fontes e cor de ícones*/
  /*@doc Define a família da fonte.*/
  --ez-tree--font-family: var(--font-pattern, Arial);
  /*@doc Define o tamanho da fonte.*/
  --ez-tree--font-size: var(--text--medium, 14px);
  /*@doc Define o peso da fonte.*/
  --ez-tree--selected--font-weight: var(--text-weight--large, 600);
  /*@doc Define o peso da fonte.*/
  --ez-tree--font-weight: var(--text-weight--small, 400);
  /*@doc Define a cor da fonte e do ícone.*/
  --ez-tree--color: var(--title--primary, #2B3A54);
  /*@doc Define a cor da fonte e do ícone quando selecionado.*/
  --ez-tree--selected--color: var(--color--primary, #008561);
  /*@doc Define a cor da fonte e do ícone quando desabilitado.*/
  --ez-tree--disabled--color: var(--text--disable, #AFB6C0);
  /*@doc Usado em fontes com peso maior (bold)*/
  --ez-tree--font-weight--bold: var(--text-weight--large, 600);

  /* Item */
  /*@doc Define a altura de cada item.*/
  --ez-tree__tree-item--height: var(--size-medium, 18px);
  /*@doc Define o espaçamento interno do item.*/
  --ez-tree__tree-item--padding: var(--space--small, 6px);
  /*@doc Define a cor de background.*/
  --ez-tree__tree-item--background-color: var(--background--xlight, #FFFFFF);
  /*@doc Define a cor de background quando selecionado.*/
  --ez-tree__tree-item--selected--background-color: var(--color--primary-300, #E2F4EF);
  /*@doc Define a cor de background com o mouse sobre o item.*/
  --ez-tree__tree-item--hover--background-color: var(--background--medium, #F0F3F7);
  /*@doc Define a cor de background quando deabilitado.*/
  --ez-tree__tree-item--disabled--background-color: var(--ez-tree__tree-Item--background-color);
  
  /* Box do ícone */
  /*@doc Define a altura do box do ícone.*/
  --ez-tree__item-icon-box--height: var(--ez-tree__tree-item--height);
  /*@doc Define a largura do box do ícone.*/
  --ez-tree__item-icon-box--width: var(--size-medium, 18px);
  /*@doc Define o espaçamento interno do ícone.*/
  --ez-tree__item-icon-box--padding: var(--ez-tree__tree-item--padding);

  /* Badge ícone - Cores */
  /*@doc Cor de ícone de badge padrão.*/
  --ez-tree__badge--icon-color--default: var(--title--primary, #2B3A54);
  /*@doc Cor de ícone de badge de erro.*/
  --ez-tree__badge--icon-color--error: var(--color--error, #da4453);
  /*@doc Cor de ícone de badge sucesso.*/
  --ez-tree__badge--icon-color--success: var(--color-alert--success-800, #157a00);
  /*@doc Cor de ícone de badge de aviso.*/
  --ez-tree__badge--icon-color--warning: var(--color--warning, #f2d410);
  /*@doc Cor de ícone de badge desabilitado.*/
  --ez-tree__badge--icon-color--disabled: var(--text--disable, #AFB6C0);  
 
  /*private*/
  display: flex;
  flex-direction: column;

  /*public*/
  margin: 0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);
  outline: none;
}

ul {
  /*private*/
  list-style-type: none;
  margin: 0;
  cursor: default;

  /*public*/
  padding-inline-start: var(--ez-tree--padding-inline-start);
}

ul.first-level {
  /*private*/
  padding-inline-start: 0;
}

.tree-item-badge {
  width: 16px;
  height: 16px;
  background: transparent;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-item-badge-error-icon{
  --ez-icon--color: white;
}

.tree-item-badge-text{
  /*public*/
  font-family: var(--ez-tree--font-family);
  font-size: var(--ez-tree--font-size);
  font-weight: var(--ez-tree--font-weight);
  color: var(--ez-tree--color);
}

.tree-item-badge.error{
  background: var(--color--error);
}

.tree-item-badge.warning{
  background: var(--color--warning);
}

.tree-item-badge.success{
  background: var(--color--success);
}

.item-label-container {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tree-item {
  /*private*/
  display: flex;
  align-items: center;
  cursor: pointer;
  
  /*public*/
  margin-top: var(--ez-tree--margin);
  margin-right: var(--ez-tree--margin-right);
  border-radius: var(--ez-tree--border-radius);
  height: var(--ez-tree__tree-item--height);
  padding: var(--ez-tree__tree-item--padding);
  justify-content: space-between;
}

.tree-item[selected] {
  /*public*/
  background-color: var(--ez-tree__tree-item--selected--background-color);
}

.tree-item:hover {
  /*public*/
  background-color: var(--ez-tree__tree-item--hover--background-color);
}

.tree-item[disabled], .tree-item[disabled]:hover {
  /*public*/
  background-color: var(--ez-tree__tree-item--disabled--background-color);
}

.item-icon-box {
  /*private*/
  display: flex;
  align-items: center;
  justify-content: center;

  /*public*/
  width: var(--ez-tree__item-icon-box--width);
  height: var(--ez-tree__item-icon-box--height);
  padding: var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0;
}

.item-icon {
  /*public*/
  --ez-icon--color: var(--ez-tree--color);
}

.item-icon:hover {
  /*private*/
  cursor: pointer;
}

.tree-item[selected] .item-icon {
  /*public*/
  --ez-icon--color: var(--ez-tree--selected--color);
}

.tree-item[disabled] .item-icon {
  /*private*/
  cursor: unset;

  /*public*/
  --ez-icon--color: var(--ez-tree--disabled--color);
}

.item-label {
  /*private*/
  cursor: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  user-select: var(--ez-tree--user-select);
  
  /*public*/
  font-family: var(--ez-tree--font-family);
  font-size: var(--ez-tree--font-size);
  font-weight: var(--ez-tree--font-weight);
  color: var(--ez-tree--color);
}

.item-label--bold {
  font-weight: var(--ez-tree--font-weight--bold);
}

.tree-item[selected] .item-label {
  /*public*/
  color: var(--ez-tree--selected--color);
  font-weight: var(--ez-tree--selected--font-weight);
}

.tree-item[disabled] .item-label {
  /*public*/
  color: var(--ez-tree--disabled--color);
}