:host {

  /* dimensions */
  /*@doc Define a largura do componente.*/
  --ez-tile-medium--width: 446px;
  /*@doc Define a altura do componente.*/
  --ez-tile-medium--height: 257px;
  /*@doc Define a margem do componente.*/
  --ez-tile-medium--padding: var(--space--24, 24px);
  /*@doc Define o raio da borda do componente.*/
  --ez-tile-medium--border-radius: var(--border--radius-16, 16px);

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

  /*typography*/
  /*@doc Define a família da fonte do title.*/
  --ez-tile-medium--font-family: var(--font-pattern, Arial);

  /*header*/
  /*@doc Define o gap entre a seção de imagem e tags.*/
  --ez-tile-medium--header-gap: var(--space--16, 16px);
  /*@doc Define a altura da linha do ícone.*/
  --ez-tile-medium--icon-line-height: var(--line-height--30, 30px);

  /*tag-group*/
  /*@doc Define o gap entre uma tag e outra.*/
  --ez-tile-medium--tag-group-gap: var(--space--4, 4px);

  /*button*/
  /*@doc Define a cor de fundo do botão.*/
  --ez-tile-medium_button--background-color: var(--color--ocean-green-600, #1A9171);
  /*@doc Define a cor do label do botão.*/
  --ez-tile-medium_button--color: var(--color--gray-70, #ffffff);
  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
  --ez-tile-medium_button--hover--background-color: var(--color--ocean-green-700, #00684C);
  /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
  --ez-tile-medium_button--hover-color: var(--color--gray-70, #ffffff);
  /*@doc Define a cor do fundo ao ativar o botão.*/
  --ez-tile-medium_button--active--background-color: var(--color--ocean-green-500, #1A9171);;
   /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
  --ez-tile-medium_button--active-color: var(--color--gray-70, #ffffff);

}



.tile-medium_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  width: var(--ez-tile-medium--custom-width, var(--ez-tile-medium--width));
  height: var(--ez-tile-medium--custom-height, var(--ez-tile-medium--height));
  border-radius: var(--ez-tile-medium--border-radius);
  background-color: var(--ez-tile-medium--background-color);
  color: var(--ez-tile-medium--color);

  box-sizing: border-box;
  padding: var(--ez-tile-medium--padding);
}

.tile-medium_header{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  gap: var(--ez-tile-medium--header-gap);
}

.tile-medium_header-image{
  display: flex;
  align-items: flex-start;
  gap: var(--space--10, 10px);
  flex: 1 0 0;
}

.tag_group{
  display: flex;
  flex-direction: row;
  gap: var(--ez-tile-medium--tag-group-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tile-medium_content{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space--14, 14px);
  align-self: stretch;
}

span {
  /*public*/
  font-family: var(--ez-tile-medium--font-family);

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

.small_title{
  color: var(--color--gray-400, #77777A);
  font-size: var(--font-size--default, 14px);
  font-weight: var(--font-weight--regular);
  line-height: var(--line-height--20, 20px);

  -webkit-line-clamp: var(--ez-tile-medium--small-title--maximum-lines, 1);
  line-clamp: var(--ez-tile-medium--small-title--maximum-lines,1);
}

.main_title{
  color: var(--color--ocean-green-900, #003D2D);
  font-size: var(--font-size--xxlarge, 22px);
  font-weight: var(--font-weight--bold);
  line-height: var(--line-height--32, 32px);

  -webkit-line-clamp: var(--ez-tile-medium--title--maximum-lines, 1);
  line-clamp: var(--ez-tile-medium--title--maximum-lines,1);
}

.description{
  color: var(--color--ocean-green-900, #003D2D);
  font-size: var(--font-size--default, 14px);
  font-weight: var(--font-weight--regular);
  line-height: var(--line-height--24, 24px);

  -webkit-line-clamp: var(--ez-tile-medium--description--maximum-lines, 3);
  line-clamp: var(--ez-tile-medium--description--maximum-lines, 3);
}

.tile-medium_button{
  --ez-button--background-color: var(--ez-tile-medium_button--background-color);
  --ez-button--color: var(--ez-tile-medium_button--color);
  --ez-button--hover--background-color: var(--ez-tile-medium_button--hover--background-color);
  --ez-button--hover-color: var(--ez-tile-medium_button--hover-color);
  --ez-button--active--background-color: var(--ez-tile-medium_button--active--background-color);
  --ez-button--active-color: var(--ez-tile-medium_button--active-color);
  
}

ez-icon {
  --ez-icon--color: var(--ez-tile-medium--custom-icon-color, var(--ez-tile-medium--icon-color));
  line-height: var(--ez-tile-medium--icon-line-height);
}

.green{
  --ez-tile-medium--background-color: var(--color--ocean-green-90);
  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-500));
}

.gray{
  --ez-tile-medium--background-color: var(--color--gray-80);
  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-400));
}

.red{
  --ez-tile-medium--background-color: var(--color--red-100);
  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--red-300));
} 

.yellow{
  --ez-tile-medium--background-color: var(--color--yellow-100);
  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--yellow-400));
}