$breadcrumb-link-color: $text-dark !default;
$breadcrumb-separator: "/" !default;
$breadcrumb-separator-color: $text-dark !default;
$breadcrumb-fonticon: false !default;
$breadcrumb-active-color: null !default;
$breadcrumb-font-size: null !default;
$breadcrumb-font-family: null !default;
$breadcrumbs-margin: 0 0 $spacer-xl !default;
$breadcrumbs-mobile-reduced: true !default;

.breadcrumbs {
   @include list-unstyled;

   display: flex;
   flex-wrap: wrap;
   font-size: $breadcrumb-font-size;
   font-family: $breadcrumb-font-family;
   margin: $breadcrumbs-margin;

   a {
      @include underline-default;

      color: $breadcrumb-link-color;
   }

   .active {
      color: $breadcrumb-active-color;
   }

   @if $breadcrumbs-mobile-reduced {
      @media (min-width: $md) {
         li:not(:last-child)::after {
            @if $breadcrumb-fonticon {
               @include fonticon;
            }

            color: $breadcrumb-separator-color;
            content: $breadcrumb-separator;
            font-size: $font-size-smaller;
            margin: 0 1ch;
            vertical-align: middle;
         }
      }

      @media (max-width: $md - 1) {
         li {
            display: none;

            &:nth-last-child(2),
            &:only-child {
               display: flex;
               align-items: center;
               font-size: 0;
            }

            &::before {
               @include fonticon;

               color: $breadcrumb-separator-color;
               content: $lightbox_left;
               font-size: 10px;
               margin-right: 8px;
               position: relative;
            }
         }

         a::before {
            content: attr(title);
            font-size: $font-size-base;
         }
      }
   } @else {
      li:not(:first-child)::before {
         @if $breadcrumb-fonticon {
            @include fonticon;
         }

         color: $breadcrumb-separator-color;
         content: $breadcrumb-separator;
         font-size: $font-size-smaller;
         margin: 0 1ch;
         vertical-align: middle;
      }

      @media screen and (max-width: $md - 1) {
         .active {
            display: none;
         }
      }
   }
}
