:root {
  --breadcrumb-gap: var(--space-xs);
  --breadcrumb-padding-block: var(--space-md);
  --breadcrumb-padding-block-mobile: 10px;
  --breadcrumb-font-size: var(--font-size-xs);
  --breadcrumb-line-height: var(--line-height-small);
  --breadcrumb-color: var(--color-text-secondary);
  --breadcrumb-link-color: var(--color-text-secondary);
  --breadcrumb-active-color: var(--color-primary);
  --breadcrumb-separator-color: var(--color-text-secondary);
}

.c-breadcrumb {
  background-color: var(--color-white);
}

.c-breadcrumb__list {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  padding-block: var(--breadcrumb-padding-block);
  list-style: none;
  font-size: var(--breadcrumb-font-size);
  line-height: var(--breadcrumb-line-height);
  color: var(--breadcrumb-color);
}

.c-breadcrumb__item {
  display: inline;
  white-space: nowrap;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline: var(--breadcrumb-gap);
  border-top: 1.5px solid var(--breadcrumb-separator-color);
  border-right: 1.5px solid var(--breadcrumb-separator-color);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}

.c-breadcrumb__link {
  color: var(--breadcrumb-link-color);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

.c-breadcrumb__link:hover,
.c-breadcrumb__link:focus-visible {
  color: var(--breadcrumb-active-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-breadcrumb__text {
  color: var(--breadcrumb-color);
}

.c-breadcrumb__current {
  color: var(--breadcrumb-color);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

@media (min-width: 768px) {
  .c-breadcrumb__list {
    flex-wrap: nowrap;
  }

  .c-breadcrumb__item--current {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-width: 767px) {
  .c-breadcrumb__list {
    padding-block: var(--breadcrumb-padding-block-mobile);
    overflow: hidden;
    max-height: calc(var(--breadcrumb-line-height) * 2 + var(--breadcrumb-padding-block-mobile) * 2);
  }

  .c-breadcrumb__item {
    white-space: nowrap;
  }

  .c-breadcrumb__item:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
}