/*
 * Breadcrumbs
 *
 * BEM classes for the breadcrumbs nav in app/components/ui/breadcrumbs/.
 */

.breadcrumbs {
  display: flex;
  min-inline-size: 0;
  overflow: hidden;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  overflow: hidden;
}

.breadcrumbs__list > * + * {
  margin-inline-start: 0.25rem;
}

.breadcrumbs__home-icon,
.breadcrumbs__chevron {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex-shrink: 0;
}

.breadcrumbs__home-link {
  color: rgb(var(--palette-hq-indigo-600));
}

.breadcrumbs__home-link:hover {
  color: rgb(var(--palette-hq-indigo-600));
}

.breadcrumbs__item-row {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.breadcrumbs__chevron {
  color: rgb(var(--palette-hq-indigo-600));
}

.breadcrumbs__chevron:hover {
  color: rgb(var(--palette-hq-blue-700));
}

.breadcrumbs__link {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-inline-start: 0.25rem;
  font-weight: 500;
  color: rgb(var(--palette-hq-indigo-600));
}

.breadcrumbs__link:hover {
  color: rgb(var(--palette-hq-blue-700));
}

@media (max-width: 639px) {
  .breadcrumbs__list > li:not(:last-child) {
    display: none;
  }
}