:host {
  display: flex;

  /* Alert List */
  
  /*@doc Define a largura da lista minimizado */
  --ez-alert-list__container--width: 680px;
  /*@doc Define a altura da lista minimizado */
  --ez-alert-list__container--height: 220px;
  
  /*@doc Define a largura da lista maximizada */
  --ez-alert-list__container--width--expanded: 920px;
  /*@doc Define a altura da lista maximizada */
  --ez-alert-list__container--height--expanded: 540px;

  /* Title */
  /*@doc Define a fonte do título do componente */
  --ez-alert-list__title--font-family: var(--font-pattern, "Roboto");
  /*@doc Define o tamanho da fonte do título do popup.*/
  --ez-alert-list__title--font-size: var(--title--large, 20px);
  /*@doc Define a cor da fonte do título do popup.*/
  --ez-alert-list__title--color: var(--title--primary, #2b3a54);
  /*@doc Define o peso da fonte do título do popup.*/
  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);

  /* @doc Define a borda inferior do item da lista. */
  --ez-list__item--border-bottom: var(--border--small, 1px solid);

  /* @doc Define a cor da borda inferior do item da lista. */
  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);

  /* @doc Define o tipo da quebra de linha do item da lista. */
  --ez-list__item--white-space: break-space;
}

.alert-list__content {
  display: flex;
  flex-direction: column;
  
  gap: var(--space--xs);
  margin: var(--space--large, 24px);
  width: 100%;
}

.alert-list__container {
  z-index: var(--ez-elevation--8, 8);
  display: flex;
  height: var(--ez-alert-list__container--height);
  width: var(--ez-alert-list__container--width);
  border-radius: var(--border--radius-medium);
  background-color: var(--background--xlight);
  box-shadow: var(--shadow--medium);

  &.expanded {
    height: var(--ez-alert-list__container--height--expanded);
    width: var(--ez-alert-list__container--width--expanded);
  }

  @media (max-height: 640px) {
    max-height: calc(100vh - var(--space--3xl));
  }  
}

.alert-list__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-list__title {
  font-family: var(--ez-alert-list__title--font-family);
  font-size: var(--ez-alert-list__title--font-size);
  font-weight: var(--ez-alert-list__title--font-weight);
  color: var(--ez-alert-list__title--color);
}

.alert-list__header__buttons {
  display: flex;
  gap: var(--space--xs);
}

.alert-list__expandable-content {
  overflow-y: auto;
  scrollbar-width: thin;
}