/* Breadcrumb layout — standalone file (not Tailwind-built) so it never depends on output.css rebuilds */

.ui-breadcrumb {
  display: flex;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  background-color: rgb(249 250 251);
  color: rgb(55 65 81);
}

.dark .ui-breadcrumb {
  border-color: rgb(55 65 81);
  background-color: rgb(31 41 55);
}

.ui-breadcrumb__list {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .ui-breadcrumb__list {
    column-gap: 0.5rem;
  }
}

.ui-breadcrumb__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.ui-breadcrumb__home,
.ui-breadcrumb__segment {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.ui-breadcrumb__icon {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.ui-breadcrumb__icon--home {
  margin-inline-end: 0.625rem;
}

.ui-breadcrumb__icon--separator {
  margin-inline: 0.25rem;
  color: rgb(156 163 175);
}

[dir="rtl"] .ui-breadcrumb__icon--separator {
  transform: rotate(180deg);
}

.ui-breadcrumb__link {
  margin-inline-start: 0.25rem;
}

@media (min-width: 48rem) {
  .ui-breadcrumb__link {
    margin-inline-start: 0.5rem;
  }
}

.ui-breadcrumb__current {
  margin-inline-start: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(107 114 128);
}

@media (min-width: 48rem) {
  .ui-breadcrumb__current {
    margin-inline-start: 0.5rem;
  }
}

.dark .ui-breadcrumb__current {
  color: rgb(156 163 175);
}