:host {
  /*@doc Define a cor da fonte do link, com exceção do último.*/
  --breadcrumb__item--label--color--title-primary: var(--color--title-primary, #2B3A54);
  /*@doc Define a cor da fonte do último link*/
  --breadcrumb__item--label--color--active: var(--color--primary, '#008561');
  /*@doc Define o peso da fonte.*/
  --breadcrumb__item--label--font-weight: var(--text-weight--large, 600);

  display: block;
  font-size: var(--text--medium, 14px);
  font-family: var(--font-pattern, "Roboto"); 
  font-weight: var(--text-weight--medium, 400);
}

.breadcrumb {
  display: flex;
}

.breadcrumb__group{
  display: flex;
}

.breadcrumb__list {
  list-style-type: none; 
  display: inline-block; 
  margin: 0; 
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.breadcrumb__item--label{
  color: var(--breadcrumb__item--label--color--title-primary);
  margin: 0px;
}

.breadcrumb__item--icon {
  padding-right: 3px;
  color: var(--breadcrumb__item--label--color--title-primary);
}

.breadcrumb__item--chevron{
  padding: 0px 6px;
  cursor: default;
}

.active{
  color: var(--breadcrumb__item--label--color--active);
  font-weight: var(--breadcrumb__item--label--font-weight);
  cursor: default;
}

.active-icon{
  --icon--color: var(--breadcrumb__item--label--color--active);
  cursor: default;
}

.breadcrumb__items{
  display: flex;
}