@import "../../helpers";
.sf-breadcrumbs {
  &__list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  &__list-item {
    &:not(:last-child) {
      &::after {
        padding: var(
          --breadcrumbs-list-item-before-padding,
          0 var(--spacer-sm)
        );
        content: var(--breadcrumbs-list-item-seperator, "|");
        color: var(--breadcrumbs-list-item-before-color, var(--c-text-muted));
      }
    }
  }
  &__breadcrumb {
    @include font(
      --breadcrumbs-font,
      var(--font-weight--normal),
      var(--font-size--xs),
      1.6,
      var(--font-family--secondary)
    );
    --link-color: var(--c-text-muted);
    --link-text-decoration: none;
    &:hover {
      --link-color: var(--c-text);
    }
    &.current {
      --link-color: var(--c-text);
      cursor: default;
    }
  }
  @include for-desktop {
    --breadcrumbs-font-size: var(--font-size--sm);
  }
}