@use "core/functions" as *;
@use "core/mixins" as *;

.breadcrumb-container {
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  background-color: fi-var(global-background-color);
  display: flex;
  @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: 0px;
    transition: top 0.5s ease;

    @include media('sm', 'up') {
      [data-header-desktop='sticky'] &,
      [data-header-desktop='auto'] & {
        top: fi-var(header-height);
      }
      [data-header-desktop='auto']:has(#header-desktop.header__fadeOutUp) & {
        top: 0px;
      }
    }

    @include media('xs') {
      [data-header-mobile='sticky'] &,
      [data-header-mobile='auto'] & {
        top: fi-var(header-height);
      }
      [data-header-mobile='auto']:has(#header-mobile.header__fadeOutUp) & {
        top: 0px;
      }
    }

    @include media('reduce-motion') {
      transition: none;
    }
  }

  .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    padding: 0.5rem;
    margin: 0 auto;
    list-style: none;
    box-shadow: inset 0 -1px 0 fi-var(global-border-color);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;

    .breadcrumb-item {
      display: flex;
      flex-shrink: 0;

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

      &.active {
        color: fi-var(global-font-secondary-color);
      }
    }
  }

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