@layer component {
  .miz-breadcrumbs {
    --breadcrumbs-background-color: var(--component-mode-background-color, transparent);
    --breadcrumbs-text-color: var(--component-mode-text-color, rgb(0, 0, 0));
    --breadcrumbs-text-color-selection: var(--component-mode-text-color-selection, rgb(0, 0, 0));
    --breadcrumbs-text-background-color-selection: var(--component-mode-text-background-color-selection, rgb(255, 209, 125));
    --breadcrumbs-font-size: var(--component-mode-font-size, 0.833rem);
    --breadcrumbs-font-weight: var(--component-mode-font-weight, 400);
    --breadcrumbs-text-decoration: var(--component-mode-text-decoration, underline);
    --breadcrumbs-text-decoration-hover: var(--component-mode-text-decoration-hover, none);
    --breadcrumbs-link-space-padding: var(--component-mode-breadcrumbs-link-space-padding, 0.5rem 0.5rem);
    --nav-background-color: var(--breadcrumbs-background-color);
    --nav-text-color: var(--breadcrumbs-text-color);
    --nav-font-size: var(--breadcrumbs-font-size);
    --nav-list-display: flex;
    --nav-link-text-color: var(--breadcrumbs-text-color);
    --nav-list-background-color: transparent;
    --nav-link-space-padding: var(--breadcrumbs-link-space-padding);
    --nav-link-font-size: var(--breadcrumbs-font-size);
    --nav-link-background-color: var(--breadcrumbs-background-color);
    --nav-link-background-color-hover: transparent;
    --nav-link-text-decoration: var(--breadcrumbs-text-decoration);
    --nav-link-text-decoration-hover: var(--breadcrumbs-text-decoration-hover);
    container: breadcrumbs/inline-size;
    display: block;
  }
}
@layer component {
  .miz-breadcrumbs__list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .miz-breadcrumbs__list > * {
    flex: 0 1 auto;
  }
}
@layer component {
  @media (max-width: 767.98px) {
    .miz-breadcrumbs--is-responsive .miz-breadcrumbs__list-item:not(:nth-last-child(2)) {
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .miz-breadcrumbs--is-responsive .miz-breadcrumbs__list-item:not(:nth-last-child(2)):not(caption) {
      position: absolute;
    }
  }
}
@layer component {}
@layer component {
  .miz-breadcrumbs__current {
    font-weight: 600;
  }
}
@layer modifier {
  .miz-breadcrumbs--light {
    --nav-text-color: rgb(0, 0, 0);
    --nav-background-color: rgb(255, 255, 255);
    --nav-list-background-color: rgb(255, 255, 255);
    --nav-link-text-color: rgb(0, 0, 0);
    --nav-link-background-color: rgb(255, 255, 255);
    --nav-link-background-color-hover: rgb(255, 255, 255);
  }
}
@layer modifier {
  .miz-breadcrumbs--dark {
    --nav-text-color: rgb(255, 255, 255);
    --nav-background-color: rgb(0, 0, 0);
    --nav-list-background-color: rgb(0, 0, 0);
    --nav-link-text-color: rgb(255, 255, 255);
    --nav-link-background-color: rgb(0, 0, 0);
    --nav-link-background-color-hover: rgb(0, 0, 0);
  }
}
@layer modifier {
  .miz-breadcrumbs--on-light {
    --nav-text-color: rgb(0, 0, 0);
    --nav-link-text-color: rgb(0, 0, 0);
  }
}
@layer modifier {
  .miz-breadcrumbs--on-dark {
    --nav-text-color: rgb(255, 255, 255);
    --nav-link-text-color: rgb(255, 255, 255);
  }
}
@layer modifier {
  .miz-breadcrumbs--on-gold {
    --nav-text-color: rgb(0, 0, 0);
    --nav-link-text-color: rgb(0, 0, 0);
  }
}