.breadcrumb-container {
  padding-inline: 1rem;
  font-size: 0.75rem;
  background-color: fixit-var(global-background-color);
  display: flex;
  gap: 0.5rem;
  @include z-index(sticky);

  &:has(~ main[data-reverse]) {
    flex-direction: row-reverse;
  }

  &::before,
  &::after {
    content: '';
    flex: 1;
    padding-inline: 0.5rem;

    @include media('sm', 'down') {
      display: none;
    }
  }

  &.sticky {
    position: sticky;
    top: fixit-var(header-height);

    @include media('sm', 'up') {
      body:not([data-header-desktop='sticky']) & {
        top: 0;
      }
      // adjust the scroll margin top of the content anchors on the page
      body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
      }
    }

    @include media('xs') {
      body:not([data-header-mobile='sticky']) & {
        top: 0;
      }
      // adjust the scroll margin top of the content anchors on the page
      body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
      }
    }
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    margin: 0 auto;
    list-style: none;
    border-bottom: 1px inset fixit-var(global-border-color);
    @extend %page-style;

    .breadcrumb-item {
      display: flex;

      + .breadcrumb-item::before {
        content: attr(data-separator);
        display: inline-block;
        padding-inline: 0.5rem;
        color: fixit-var(global-placeholder-color);
      }

      &.active {
        color: fixit-var(secondary);
      }
    }
  }

  @include media('print') {
    display: none !important;
  }
}
