:host {

  /* dimensions */
  /*@doc Define a largura do componente.*/
  --ez-underface--width: 693px;
  /*@doc Define a altura do componente.*/
  --ez-underface--height: 247px;
  /*@doc Define o padding do componente.*/
  --ez-underface--padding: var(--space--24, 24px);
  /*@doc Define o raio da borda do componente.*/
  --ez-underface--border-radius: var(--border--radius-26, 26px);
}



div {
  /*public*/
  width: var(--ez-underface--custom-width, var(--ez-underface--width));
  height: var(--ez-underface--custom-height, var(--ez-underface--height));
  border-radius: var(--ez-underface--border-radius);
  padding: var(--ez-underface--padding);

  /*private*/
  display: block;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
  background-color: var(--ez-underface--custom-background-color, var(--color--petroleum-700, #222D42));
}

.light-green{
  background-color: var(--ez-underface--custom-background-color, var(--color--ocean-green-90));
}

.green{
  background-color: var(--ez-underface--custom-background-color, var(--color--green-600));
}

.light-gray{
  background-color: var(--ez-underface--custom-background-color, var(--color--gray-80));
}

.dark-petroleum{
  background-color: var(--ez-underface--custom-background-color, var(--color--petroleum-900));
}

.ocean-green{
  background-color: var(--ez-underface--custom-background-color, var(--color--ocean-green-600));
}