.breadcrumb {
  position: relative;
  height: $component-size;
  display: block;
  padding: 0;
  .list {
    background-color: transparent;
    font-size: $font-size;
    color: #333;
    border-radius: 0;
    padding: 0;
    margin:0;
    li {
      display: inline-block;
      a {
        display: block;
        color: $title-color;
        height: $component-size;
        line-height: $component-size;
        border-bottom: $border-width solid #ccc;
        position: relative;
        background-color: #fff;
        font-weight:bold;
        text-decoration: none;
        padding: 0 $component-size/2 0 $component-size;
        &:before {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 1.7rem solid transparent;
          border-bottom: 1.7rem solid transparent;
          border-left: 1rem solid #000;
          position: absolute;
          top: 50%;
          margin-top: -1.7rem;
          margin-left: 0;
          left: 100%;
          z-index: 3;
        }
        &:after {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 1.7rem solid transparent;
          border-bottom: 1.7rem solid transparent;
          border-left: 1rem solid #FFF;
          position: absolute;
          top: 50%;
          margin-top: -1.7rem;
          left: 100%;
          z-index: 3;
        }
      }
    }
  }
}