:host {
  display: block;
  box-sizing: border-box;
  font-family: var(--font--pattern, 'Roboto', Arial, sans-serif);
  font-size: var(--font-size--default, 14px);
  color: var(--color--gray-500, #494A4E);

  /* public */
  /*@doc Define a cor da seleção do item. */
  --ez-classic-combo-box-highlighted-bg-color: var(--color--gray-90, #EAEAEA);

  /*@doc Define a altura máxima do container da lista de opções.*/
  --ez-classic-combo-box-max-height: 180px;

  /*@doc Define a cor de fundo da lista de opções.*/
  --ez-classic-combo-box-list-bg-color: var(--color--gray-70, #FFFFFF);

  /*@doc Define a cor de fundo do item em hover.*/
  --ez-classic-combo-box-item-hover-bg-color: var(--color--gray-100, #DEDEDE);

  /*@doc Define a cor de fundo do item selecionado.*/
  --ez-classic-combo-box-selected-bg-color: var(--color--ocean-green-90, #E6F3EF);

  /*@doc Define a cor do texto do item selecionado.*/
  --ez-classic-combo-box-selected-text-color: var(--color--ocean-green-600, #008561);

  /*@doc Define o peso da fonte do item selecionado.*/
  --ez-classic-combo-box-selected-font-weight: var(--font-weight--medium, 500);

  /*@doc Define o padding interno dos itens da lista.*/
  --ez-classic-combo-box-item-padding: var(--space--8, 8px) var(--space--4, 4px);

  /*@doc Define o border-radius dos itens da lista.*/
  --ez-classic-combo-box-item-border-radius: var(--border--radius-8, 8px);

  /*@doc Define a margem da lista de opções.*/
  --ez-classic-combo-box-list-margin: var(--space--6, 6px);

  /*@doc Define a duração da transição dos itens.*/
  --ez-classic-combo-box-transition-duration: 150ms;

  /*@doc Define a cor da scrollbar.*/
  --ez-classic-combo-box-scrollbar-color: var(--color--gray-300, #C4C4C4);

  /*@doc Define a margem do texto "sem resultados".*/
  --ez-classic-combo-box-no-results-margin: var(--space--52, 52px) 0;

  /*@doc Define a cor do texto dos itens.*/
  --ez-classic-combo-box-item-text-color: inherit;

  /*@doc Define a altura mínima dos itens da lista.*/
  --ez-classic-combo-box-item-min-height: auto;
}

ul {
  list-style: none;
  padding: 0;
  margin: var(--ez-classic-combo-box-list-margin);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ez-classic-combo-box-scrollbar-color) transparent;
  max-height: var(--ez-classic-combo-box-max-height);
  scroll-behavior: smooth;
  background-color: var(--ez-classic-combo-box-list-bg-color);
}

li {
  cursor: pointer;
  border-radius: var(--ez-classic-combo-box-item-border-radius);
  padding: var(--ez-classic-combo-box-item-padding);
  transition: var(--ez-classic-combo-box-transition-duration) background-color linear;
  color: var(--ez-classic-combo-box-item-text-color);
  min-height: var(--ez-classic-combo-box-item-min-height);
}

li:hover {
  background-color: var(--ez-classic-combo-box-item-hover-bg-color);
}

li.highlighted {
  background-color: var(--ez-classic-combo-box-highlighted-bg-color);
}

li.selected {
  background-color: var(--ez-classic-combo-box-selected-bg-color);
  color: var(--ez-classic-combo-box-selected-text-color);
  font-weight: var(--ez-classic-combo-box-selected-font-weight);
}

span.no-results {
  margin: var(--ez-classic-combo-box-no-results-margin);
  cursor: default;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}