:host {
  /* dropdown */
  /*@doc Define a posição do componente.*/
  --ez-dropdown--z-index: var(--more-visible, 2);
  /*@doc Define o espaçamento interno do componente.*/
  --ez-dropdown--padding: var(--space--small, 6px);
  /*@doc Define a sombra externa do componente.*/
  --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
  /*@doc Define o raio da borda do componente.*/
  --ez-dropdown--border-radius: var(--border--radius-medium, 12px);
  /*@doc Define cor de fundo do componente.*/
  --ez-dropdown--background-color: var(--background--xlight, #fff);
  /*@doc Define a fonte do componente.*/
  --ez-dropdown--font-family: var(--font-pattern, 'Roboto');
  /*@doc Define a altura máxima do componente.*/
  --ez-dropdown--max-height: 415px;

  /* item*/
  /*@doc Define o espaçamento interno de cada item do componente.*/
  --ez-dropdown__item--padding: var(--space--small, 6px);
  /*@doc Define o espaçamento entre os elementos internos do item do componente.*/
  --ez-dropdown__item--gap: var(--space--small, 6px);
  /*@doc Define o raio da borda de cada item do componente.*/
  --ez-dropdown__item--border-radius: var(--border--radius-small, 6px);
  /*@doc Define a cor do texto de cada item do componente.*/
  --ez-dropdown__item--color: var(--title--primary, #2b3a54);
  /*@doc Define o peso do texto de cada item do componente.*/
  --ez-dropdown__item--font-weight: var(--text-weight--medium, 400);
  /*@doc Define o tamanho da fonte de cada item do componente.*/
  --ez-dropdown__item--font-size: var(--text--medium, 14px);
  /*@doc Define a altura do texto de cada item do componente.*/
  --ez-dropdown__item--line-height: calc(var(--ez-dropdown__item--font-size) + 4px);
  /*@doc Define a cor de fundo no hover de cada item do componente.*/
  --ez-dropdown__item--background-color: var(--background--medium, #f0f3f7);
  /*@doc Define o efeito de transição do hover de cada item do componente.*/
  --ez-dropdown__item--transition: var(--transition, .2s linear);

  /* item-label */
  /*@doc Define o espaçamento direito externo de cada label do componente.*/
  --ez-dropdown__item-label--margin-right: var(--space--medium, 12px);

  /* icon */
  /*@doc Define o tamanho da área de cada ícone do componente.*/
  --ez-dropdown__icon--size: var(--icon--medium, 18px);

  /* divider */
  /*@doc Define a cor de fundo do divider do componente.*/
  --ez-dropdown__divider--background-color: var(--color--disable-secondary, #f2f5f8);
  /*@doc Define o espaçamento externo do divider do componente.*/
  --ez-dropdown__divider--margin: var(--space--extra-small, 3px) 0;

  /* group-label */
  /*@doc Define a cor do título de cada grupo do componente.*/
  --ez-dropdown__group-label--color: var(--text--secondary, #A2ABB9);
  /*@doc Define o peso do texto do título de cada grupo do componente.*/
  --ez-dropdown__group-label--font-weight: var(--text-weight--large, 600);
  /*@doc Define o tamanho da fonte do título de cada grupo do componente.*/
  --ez-dropdown__group-label--font-size: var(--text--small, 12px);
  /*@doc Define a altura do texto do título de cada grupo do componente.*/
  --ez-dropdown__group-label--line-height: var(--text--medium, 14px);
  /*@doc Define o espaçamento interno do título de cada grupo do componente.*/
  --ez-dropdown__group-label--padding: var(--space--small, 6px);

  /* submenu */
  /*@doc Define a posição do submenu do componente.*/
  --ez-dropdown__submenu--z-index: var(--most-visible, 3);

  /* link (subAction) */
  /*@doc Define o peso do texto de cada link do componente.*/
  --ez-dropdown__link--font-weight: var(--text-weight--large, 600);
  /*@doc Define a cor utilizada como padrão para ações secundárias.*/
  --ez-dropdown__link--primary--color: var(--color--primary, #008561);
  /*@doc Define a cor utilizada para ações destrutivas como um excluir.*/
  --ez-dropdown__link--critical--color: var(--color-alert--error-800, #BD0025);

  /* scrollbar */
  /*@doc Define a cor da barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--color-default: var(--scrollbar--default, #626e82);
  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
  /*@doc Define a cor do hover na barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
  /*@doc Define a cor do active na barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
  /*@doc Define o raio da borda da barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--border-radius: var(--border--radius-small, 6px);
  /*@doc Define a largura da barra de rolagem do componente.*/
  --ez-dropdown__scrollbar--width: var(--space--small, 6px);
  /*@doc Define o espaçamento interno direito quando houver barra de rolagem.*/
  --ez-dropdown__scrollbar--padding-right: var(--space--extra-small, 3px);

  /***************
     host style  
  ***************/
  /*private*/
  display: flex;
  flex-direction: column;
  height: fit-content;
  user-select: none;
  box-sizing: border-box;
  position: fixed;

  /*public*/
  z-index: var(--ez-dropdown--z-index);
}

:host * {
  box-sizing: border-box;
}

.ez-dropdown {
  /*private*/
  display: flex;

  /*public*/
  padding: var(--ez-dropdown--padding);
  box-shadow: var(--ez-dropdown--box-shadow);
  border-radius: var(--ez-dropdown--border-radius);
  background-color: var(--ez-dropdown--background-color);
  max-width: var(--ez-dropdown--max-width);
}

.ez-dropdown__max-height {
  max-height: var(--ez-dropdown--max-height);
}

.ez-dropdown * {
  /*public*/
  font-family: var(--ez-dropdown--font-family);
}

.ez-dropdown__container {
  /*private*/
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: auto;

  /*public*/
  scrollbar-color: var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background);
}

.ez-dropdown__container::-webkit-scrollbar {
  /*public*/
  background-color: var(--ez-dropdown__scrollbar--color-background);
  width: var(--ez-dropdown__scrollbar--width);
  max-width: var(--ez-dropdown__scrollbar--width);
  min-width: var(--ez-dropdown__scrollbar--width);
}

.ez-dropdown__container::-webkit-scrollbar-track {
  /*public*/
  background-color: var(--ez-dropdown__scrollbar--color-background);
  border-radius: var(--ez-dropdown__scrollbar--border-radius);
}

.ez-dropdown__container::-webkit-scrollbar-thumb {
  /*public*/
  background-color: var(--ez-dropdown__scrollbar--color-default);
  border-radius: var(--ez-dropdown__scrollbar--border-radius);
}

.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,
.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover {
  /*public*/
  background-color: var(--ez-dropdown__scrollbar--color-hover);
}

.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,
.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active {
  /*public*/
  background-color: var(--ez-dropdown__scrollbar--color-clicked);
}

.ez-dropdown__container--spacer {
  /*public*/
  padding-right: var(--ez-dropdown__scrollbar--padding-right);
}

.ez-dropdown__item {
  /*private*/
  display: flex;
  align-items: center;
  background-color: transparent;

  /*public*/
  border-radius: var(--ez-dropdown__item--border-radius);
  transition: var(--ez-dropdown__item--transition);
}

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

.ez-dropdown__item-wrapper {
  /*private*/
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 100%;
  margin: 0;
  white-space: nowrap;

  /*public*/
  gap: var(--ez-dropdown__item--gap);
  color: var(--ez-dropdown__item--color);
  font-weight: var(--ez-dropdown__item--font-weight);
  font-size: var(--ez-dropdown__item--font-size);
  line-height: var(--ez-dropdown__item--line-height);
  padding: var(--ez-dropdown__item--padding);
}

.ez-dropdown__item-wrapper ez-icon {
  /*private*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*public*/
  width: var(--ez-dropdown__icon--size);
  height: var(--ez-dropdown__icon--size);
  min-width: var(--ez-dropdown__icon--size);
  min-height: var(--ez-dropdown__icon--size);
}

.ez-dropdown__item-content {
  /*private*/
  display: flex;
  align-items: center;
  flex: auto;
  overflow: hidden;

  /*public*/
  gap: var(--ez-dropdown__item--gap);
}

.ez-dropdown__item-label {
  /* private */
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: auto;
}

.ez-dropdown__item-label:not(:last-child) {
  /*public*/
  margin-right: var(--ez-dropdown__item-label--margin-right);
}

.ez-dropdown__item-content + .ez-dropdown__link {
  /*public*/
  margin-left: var(--ez-dropdown__item-label--margin-right);
  margin-right: var(--ez-dropdown__item--padding);
}

.ez-dropdown__item-builder {
  /* private */
  flex: auto;
}

.ez-dropdown__divider {
  /*private*/
  width: 100%;
  height: 2px;
  border-radius: 1px;
  border: none;
  display: block;

  /*public*/
  background-color: var(--ez-dropdown__divider--background-color);
  margin: var(--ez-dropdown__divider--margin);
}

.ez-dropdown__hidden {
  /*private*/
  visibility: hidden;
}

.ez-dropdown__group {
  /*private*/
  display: flex;
  flex-direction: column;
}

.ez-dropdown__group-label {
  /*private*/
  display: block;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /*public*/
  color: var(--ez-dropdown__group-label--color);
  font-weight: var(--ez-dropdown__group-label--font-weight);
  font-size: var(--ez-dropdown__group-label--font-size);
  line-height: var(--ez-dropdown__group-label--line-height);
  padding: var(--ez-dropdown__group-label--padding);
}

.ez-dropdown__icon-right {
  /*private*/
  margin-left: auto;
}

.ez-dropdown__submenu {
  /*private*/
  position: fixed;

  /*public*/
  z-index: var(--ez-dropdown__submenu--z-index);
  margin-top: calc(var(--ez-dropdown__item--padding) * -1);
}

.ez-dropdown__submenu--hide {
  /*private*/
  display: none;
}

.ez-dropdown__link {
  /*private*/
  display: block;
  margin-left: auto;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;

  /*public*/
  font-weight: var(--ez-dropdown__link--font-weight);
  max-width: calc(var(--ez-dropdown--max-width) * 0.43);
}

.ez-dropdown__link--primary {
  /*public*/
  color: var(--ez-dropdown__link--primary--color);
}

.ez-dropdown__link--critical {
  /*public*/
  color: var(--ez-dropdown__link--critical--color);
}

.ez-dropdown__link:hover {
  /*private*/
  text-decoration: underline;
}