@use "../../breakpoint" as *;
@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/skeleton" as *;

@mixin breadcrumb {
  .#{$prefix}--breadcrumb {
    @include type-style("label-02");
    @include font-family("sans");
    display: none;

    @include breakpoint("sm") {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .#{$prefix}--breadcrumb-home {
    position: relative;
    top: 1px;
  }

  .#{$prefix}--breadcrumb-item {
    margin-right: $spacing-03;
    display: flex;
    align-items: center;
  }

  .#{$prefix}--breadcrumb-item::after {
    content: "›";
    font-weight: 200;
    font-size: 1.2em;
    margin-top: calcRem(-4px);
    margin-left: $spacing-03;
    color: $brand-wfp-blue-wfp-blue10; //$icon-secondary

    @include rtl {
      margin-left: 0;
      margin-right: $spacing-03;
    }
  }

  .#{$prefix}--breadcrumb--no-trailing-slash
    .#{$prefix}--breadcrumb-item:last-child::after {
    content: "";
  }

  .#{$prefix}--breadcrumb-item:last-child {
    @include ltr {
      margin-right: 0;
      &::after {
        margin-right: 0;
      }
    }
    @include rtl {
      margin-left: 0;
      &::after {
        margin-left: 0;
      }
    }
  }

  .#{$prefix}--breadcrumb .#{$prefix}--link {
    white-space: nowrap;
    // font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-bottom: 1px solid transparent;

    &:hover,
    &:focus {
      outline: none;
      color: $action-default-fill-primary-default;
      // border-bottom: 1px solid $action-default-fill-primary-default;
    }

    // Applies to Firefox only
    @-moz-document url-prefix() {
      & {
        border-bottom: none;
      }
    }
  }
}