:host {
  /*@doc Define o raio do padding interno para cima e para baixo.*/
  --ez-alert-alert-container--padding-up-down: var(--space--small, 6px); 
  /*@doc Define o raio do padding interno para a esquerda e para a direita.*/
  --ez-alert-alert-container--padding-right-left: var(--space--medium, 12px);
  /*@doc Define o espaçamento entre os elementos internos*/
  --ez-alert-alert-container--gap: var(--space--medium, 12px);
  /*@doc Define o raio da borda do corpo do Alert.*/
  --ez-alert-alert-container--border-radius: var(--border--radius-medium, 12px);

  /*@doc Define a cor da fonte no estilo Warn.*/
  --ez-alert-alert-container--font-color-warn: var(--color--alert-warning-900, #8C6B00);
  /*@doc Define a cor do ícone no estilo Warn.*/
  --ez-alert-alert-container--icon-warn: var(--color--alert-warning-900, #8C6B00); 
  /*@doc Define a cor do background no estilo Warn.*/
  --ez-alert-alert-container--background-color-warn: var(--color--alert-warning-200, #FFF7D5); 

  /*@doc Define a cor da fonte no estilo Critical.*/
  --ez-alert-alert-container--font-color-critical: var(--color--alert-error, #BD0025);
  /*@doc Define a cor do ícone no estilo Critical.*/
  --ez-alert-alert-container--icon-critical: var(--color--alert-error, #BD0025);
  /*@doc Define a cor do background no estilo Critical.*/
  --ez-alert-alert-container--background-color-critical: var(--color--alert-error-200, #F7E0E5);

  /*@doc Define a cor da fonte no estilo Success.*/
  --ez-alert-alert-container--font-color-success: var(--color--alert-success, #157A00);
  /*@doc Define a cor do ícone no estilo Success.*/
  --ez-alert-alert-container--icon-success: var(--color--alert-success, #157A00);
  /*@doc Define a cor do background no estilo Success.*/
  --ez-alert-alert-container--background-color-success: var(--color--alert-success-200, #E7F6E0); 

  font-size: var(--text--small, 12px);
  font-family: var(--font-pattern, "Roboto"); 
  width: 100%;
  hyphens: auto;
  display: block;
}

.alert-container {
  display: flex;
  align-items: center;
  gap: var(--ez-alert-alert-container--gap);
  padding: var(--ez-alert-alert-container--padding-up-down) var(--ez-alert-alert-container--padding-right-left);
  border-radius: var(--ez-alert-alert-container--border-radius);
}

.warn{ 
  background-color: var(--ez-alert-alert-container--background-color-warn);
  color: var(--ez-alert-alert-container--font-color-warn);
}

.critical{
  background-color: var(--ez-alert-alert-container--background-color-critical);
  color: var(--ez-alert-alert-container--font-color-critical);
}

.success{
  background-color: var(--ez-alert-alert-container--background-color-success);
  color: var(--ez-alert-alert-container--font-color-success);
}

ez-icon {
  --ez-icon--color: inherit;
}

.alert-container__icon-warn{
  --ez-icon--color: var(--ez-alert-alert-container--icon-warn);
}

.alert-container__icon-critical{
  --ez-icon--color: var(--ez-alert-alert-container--icon-critical);
}

.alert-container__icon-success{
  --ez-icon--color: var(--ez-alert-alert-container--icon-success);
}