.breadcrumbs {
  padding: 8px 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--grey-300);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  color: var(--grey-800);
  position: relative;
  height: 100%;
  min-height: 21px;
  padding-right: 4px;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '/';
  color: var(--grey-500);
  font-weight: var(--font-weight-regular);
  pointer-events: none;
  user-select: none;
}

.breadcrumbs__item::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--secondary-500);
}

.breadcrumbs__link {
  color: var(--grey-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__link:hover {
  color: var(--primary-500);
  text-decoration: underline;
}

.breadcrumbs__link--home {
  display: flex;
  align-items: center;
  font-size: 1em;
}

.breadcrumbs__link--home .ti {
  font-size: 1.1em;
  line-height: 1;
}

.breadcrumbs__current,
.breadcrumbs__ellipsis {
  color: var(--grey-600);
}

.breadcrumbs__current {
  font-weight: var(--font-weight-semibold);
  color: var(--grey-900);
}