:host {

  /* dimensions */
  /*@doc Define a largura do componente.*/
  --ez-empty-card--width: 335px;
  /*@doc Define a altura do componente.*/
  --ez-empty-card--height: 155px;
  /*@doc Define a margem do componente.*/
  --ez-empty-card--padding: var(--space--24, 24px);
  /*@doc Define o raio da borda do componente.*/
  --ez-empty-card--border-radius: var(--border--radius-24, 24px);

  /*general colors*/
  /*@doc Define a cor de fundo do componente.*/
  --ez-empty-card--background-color: var(--color--gray-70, #ffffff);
}



div {
  /*public*/
  width: var(--ez-empty-card--custom-width, var(--ez-empty-card--width));
  height: var(--ez-empty-card--custom-height, var(--ez-empty-card--height));
  border-radius: var(--ez-empty-card--border-radius);
  background-color: var(--ez-empty-card--background-color);
  padding: var(--ez-empty-card--padding);

  /*private*/
  display: block;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
}

.gray{
  --ez-empty-card--background-color: var(--color--gray-80);
}

.green{
  --ez-empty-card--background-color: var(--color--ocean-green-90);
}

.yellow{
  --ez-empty-card--background-color: var(--color--yellow-100);
} 

.red{
  --ez-empty-card--background-color: var(--color--red-100);
} 

.petroleum{
  --ez-empty-card--background-color: var(--color--petroleum-90);
}