/**
 * Component: breadcrumb (ports SingleBreadcrumb.scss).
 */

.ssr-breadcrumb {
  margin: 26px 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ssr-breadcrumb__container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssr-breadcrumb__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ssr-breadcrumb__item:not(:first-child)::before {
  margin: 0 8px;
  color: var(--ssr-color-neutral-500);
  content: ">";
}

.ssr-breadcrumb__link {
  font-size: 14px;
  line-height: 20px;
  color: var(--ssr-color-neutral-500);
  text-decoration: none;
  white-space: nowrap;
}

.ssr-breadcrumb__item--active .ssr-breadcrumb__link {
  font-weight: 700;
  color: var(--ssr-color-neutral-800);
}

@media (max-width: 768px) {
  .ssr-breadcrumb {
    margin: 13px 0 26px;
  }

  /* Padding + negative margin hide the scrollbar. */
  .ssr-breadcrumb__container {
    overflow: auto;
    padding-bottom: 12px;
    margin-bottom: -12px;
    -webkit-overflow-scrolling: touch;
  }
}