:host {

  /* dimensions */
  /*@doc Define a largura do componente.*/
  --ez-tile--width: 120px;
  /*@doc Define a altura do componente.*/
  --ez-tile--height: 80px;
  /*@doc Define a margem do componente.*/
  --ez-tile--padding: var(--space--12, 12px);
  /*@doc Define o espaçamento entre o ícone e o title.*/
  --ez-tile--icon--margin-bottom: var(--space--8);
  /*@doc Define o raio da borda do componente.*/
  --ez-tile--border-radius: var(--border--radius-16, 16px);

  /*general colors*/
  /*@doc Define a cor de fundo do componente.*/
  --ez-tile--background-color: var(--color--gray-70, #ffffff);
  /*@doc Define a cor do title.*/
  --ez-tile--color: var(--color--ocean-green-900, #003D2D);
  /*@doc Define a cor do ícone.*/
  --ez-tile--icon-color: var(--color--ocean-green-400, #42A58A);

  /*action colors*/
  /*@doc Define a cor de fundo do componente no hover.*/
  --ez-tile--hover-background-color: var(--color--gray-80, #F9F9F9);
  /*@doc Define a cor do title no hover.*/
  --ez-tile--hover-color: var(--color--ocean-green-900, #003D2D);
  /*@doc Define a cor do ícone no hover.*/
  --ez-tile--hover-icon-color: var(--color--ocean-green-400, #42A58A);
  /*@doc Define a cor do ícone no hover.*/
  --ez-tile--focus-visible-border: 2px solid var(--color--petroleum-400, #626D80);

  /*typography*/
  /*@doc Define a família da fonte do title.*/
  --ez-tile--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do title.*/
  --ez-tile--font-weight: var(--font-weight--regular, 400);
  /*@doc Define o tamanho do title.*/
  --ez-tile--font-size: var(--font-size--default, 14px);
  /*@doc Define a altura da linha do title.*/
  --ez-tile--title-line-height: var(--line-height--20, 20px);
  /*@doc Define a altura da linha do ícone.*/
  --ez-tile--icon-line-height: var(--line-height--24, 24px);
}



button {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  width: var(--ez-tile--custom-width, var(--ez-tile--width));
  height: var(--ez-tile--custom-height, var(--ez-tile--height));
  border-radius: var(--ez-tile--border-radius);
  background-color: var(--ez-tile--background-color);
  color: var(--ez-tile--color);

  box-sizing: border-box;
  padding: var(--ez-tile--padding);
  border: 2px solid var(--ez-tile--background-color);
}
button:focus-visible {
  border: var(--ez-tile--focus-visible-border);
}

.medium {
  --ez-tile--width: var(--ez-tile--custom-width, 120px);
  --ez-tile--height: var(--ez-tile--custom-height, 170px);
}

.isInteractive:hover,
.isInteractive:focus {
  --ez-icon--color: var(--ez-tile--hover-icon-color);
  --ez-tile--background-color: var(--ez-tile--hover-background-color);
  --ez-tile--color: var(--ez-tile--hover-color);
  cursor: pointer;
}


span {
  /*public*/
  -webkit-line-clamp: var(--ez-tile--custom-maximum-lines, 1);
  line-clamp: var(--ez-tile--custom-maximum-lines,1);
  font-family: var(--ez-tile--font-family);
  font-weight: var(--ez-tile--font-weight);
  font-size: var(--ez-tile--font-size);
  line-height: var(--ez-tile--title-line-height);

  /*private*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: pre-wrap;
}

ez-icon {
  --ez-icon--color: var(--ez-tile--icon-color);
  margin-bottom: var(--ez-tile--icon--margin-bottom);
  line-height: var(--ez-tile--icon-line-height);
}
.isInteractive:hover,
.isInteractive:focus {
  outline: none;
}

.green{
  --ez-tile--background-color: var(--color--ocean-green-90);
  --ez-tile--icon-color: var(--color--ocean-green-500);
}
.isInteractive.green:hover,
.isInteractive.green:focus {
  --ez-tile--hover-background-color: var(--color--ocean-green-100);
  --ez-tile--icon-color: var(--color--ocean-green-500);
  outline: none;
}

.gray{
  --ez-tile--background-color: var(--color--gray-80);
  --ez-tile--icon-color: var(--color--ocean-green-400);
}
.isInteractive.gray:hover,
.isInteractive.gray:focus {
  --ez-tile--hover-background-color: var(--color--gray-90);
  --ez-tile--hover-icon-color: var(--color--ocean-green-400);
}

.red{
  --ez-tile--background-color: var(--color--red-100);
  --ez-tile--icon-color: var(--color--red-300);
} 
.isInteractive.red:hover,
.isInteractive.red:focus {
  --ez-tile--hover-background-color: var(--color--red-200);
  --ez-tile--hover-icon-color: var(--color--red-300);
}

.yellow{
  --ez-tile--background-color: var(--color--yellow-100);
  --ez-tile--icon-color: var(--color--yellow-400);
} 
.isInteractive.yellow:hover,
.isInteractive.yellow:focus {
  --ez-tile--hover-background-color: var(--color--yellow-200);
  --ez-tile--hover-icon-color: var(--color--yellow-400);
}