.breadcrumb{
  $breadcrumb-color-background: $color-background; //mix($color-foreground,$color-background);
  $breadcrumb-color-foreground: mix($color-foreground,$color-background);
  border: 1px solid $color-background;
  border-bottom-color: $color-border;
  background: $breadcrumb-color-foreground;
  //padding-top: $gap;
  @include small;
  text-align: center;
  & > a,& > span{
    padding: 0.25*$box-padding 0.5*$box-padding 0.25*$box-padding $box-padding ;
    display: inline-block;
    line-height: 0.75*$box-padding;
    background: $breadcrumb-color-foreground;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    margin: -1px;
    @extend %border-radius-small;
    &:first-child{
      //border-left: 1px solid $color-border;
      padding-left:  0.75*$box-padding;
    }
    &:last-child{
      //border-right: 1px solid $color-border;
      padding-right:  0.75*$box-padding;
    }
  }
  & > .separator{
    font-size: 0;
    position: relative;
    padding: 0%;
    width: 0;
    display: inline-block;
    margin-left: -4px;
    border: none;
    background: none;
    @include triangle-right(0.666*$box-padding, $breadcrumb-color-foreground, $color-border, -0.5*$box-padding - 1, 0.75);
    &:before,&:after{
      @extend %border-radius-small;
    }
    & + .separator{
      display: none;
    }
  }
  & + .easy-content-page{
    margin-top: -$gap - 1;
  }
  .easy-content-page > &{
    margin: -1px (-$box-padding - 1) $box-padding;
    display: none;
  }
  //@extend %clearfix;
}