/* Ninja Neumorph - Breadcrumbs
   Integrated with Themesberg/Neumorphism variants. */

/* Prevent numbered list rendering in any breadcrumb context. */
nav[aria-label] ol.breadcrumb,
nav[aria-label] ul.breadcrumb,
ol.breadcrumb,
ul.breadcrumb,
.breadcrumb {
  list-style: none !important;
  margin: 0;
  padding-left: 10px !important;
}

ol.breadcrumb > li,
ul.breadcrumb > li,
.breadcrumb > li,
.breadcrumb .breadcrumb-item {
  list-style: none !important;
}

.breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.45rem 0.75rem;
  padding-left: 0 !important;
  background: var(--nm-surface-raised);
  border: 1px solid var(--nm-border-strong);
  border-radius: 0.75rem;
  box-shadow: var(--nm-shadow-raised-sm);
  font-size: 0.9rem;
  gap: 0;
}

.breadcrumb-item,
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--nm-text-muted);
  font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  padding: 0 0.45rem;
  color: var(--nm-text-muted);
  line-height: 1;
  transform: none;
}

.breadcrumb-item a,
.breadcrumb__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--nm-transition-fast);
}

.breadcrumb-item a:hover,
.breadcrumb__item a:hover {
  color: #7c3aed;
}

.breadcrumb-item.active,
.breadcrumb__item.active {
  color: var(--nm-text);
  font-weight: 600;
}

nav[aria-label="breadcrumb"] {
  display: block;
  margin-bottom: var(--nm-space-sm);
}

/* Transparent breadcrumb variant */
.breadcrumb.breadcrumb-transparent {
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Themesberg-like contextual variants */
.breadcrumb-primary {
  background: color-mix(in srgb, var(--nm-accent) 18%, var(--nm-surface));
}
.breadcrumb-secondary {
  background: color-mix(in srgb, #6c757d 22%, var(--nm-surface));
}
.breadcrumb-success {
  background: color-mix(in srgb, var(--nm-success) 22%, var(--nm-surface));
}
.breadcrumb-info {
  background: color-mix(in srgb, var(--nm-info) 22%, var(--nm-surface));
}
.breadcrumb-warning {
  background: color-mix(in srgb, var(--nm-warning) 22%, var(--nm-surface));
}
.breadcrumb-danger {
  background: color-mix(in srgb, var(--nm-danger) 22%, var(--nm-surface));
}
.breadcrumb-dark {
  background: color-mix(in srgb, #0b0d10 70%, var(--nm-surface));
}
.breadcrumb-gray {
  background: color-mix(in srgb, #5f6672 24%, var(--nm-surface));
}

/* Reference-like visual polish for color variants. */
.breadcrumb-gray,
.breadcrumb-dark,
.breadcrumb-success,
.breadcrumb-info,
.breadcrumb-danger {
  border: 1px solid var(--nm-border-strong);
  box-shadow: var(--nm-shadow-raised-sm);
}

.breadcrumb-primary .breadcrumb-item,
.breadcrumb-secondary .breadcrumb-item,
.breadcrumb-success .breadcrumb-item,
.breadcrumb-info .breadcrumb-item,
.breadcrumb-warning .breadcrumb-item,
.breadcrumb-danger .breadcrumb-item,
.breadcrumb-dark .breadcrumb-item,
.breadcrumb-gray .breadcrumb-item {
  color: var(--nm-text);
}

.breadcrumb-primary .breadcrumb-item::before,
.breadcrumb-secondary .breadcrumb-item::before,
.breadcrumb-success .breadcrumb-item::before,
.breadcrumb-info .breadcrumb-item::before,
.breadcrumb-warning .breadcrumb-item::before,
.breadcrumb-danger .breadcrumb-item::before,
.breadcrumb-dark .breadcrumb-item::before,
.breadcrumb-gray .breadcrumb-item::before {
  color: var(--nm-text-secondary);
}

.breadcrumb-primary.breadcrumb-transparent,
.breadcrumb-secondary.breadcrumb-transparent,
.breadcrumb-success.breadcrumb-transparent,
.breadcrumb-info.breadcrumb-transparent,
.breadcrumb-warning.breadcrumb-transparent,
.breadcrumb-danger.breadcrumb-transparent,
.breadcrumb-dark.breadcrumb-transparent,
.breadcrumb-gray.breadcrumb-transparent {
  background: transparent;
  box-shadow: none;
}

.breadcrumb-primary.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-accent);
}
.breadcrumb-secondary.breadcrumb-transparent .breadcrumb-item.active {
  color: #6c757d;
}
.breadcrumb-success.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-success);
}
.breadcrumb-info.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-info);
}
.breadcrumb-warning.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-warning);
}
.breadcrumb-danger.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-danger);
}
.breadcrumb-dark.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-text);
}
.breadcrumb-gray.breadcrumb-transparent .breadcrumb-item.active {
  color: var(--nm-text-secondary);
}

/* Light text helper from Themesberg docs */
.breadcrumb-text-light .breadcrumb-item,
.breadcrumb-text-light .breadcrumb-item a {
  color: #f8f9fa;
}
.breadcrumb-text-light .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(248, 249, 250, 0.8);
}