//
// Breadcrumbs
// --------------------------------------------------

.breadcrumb {
  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
  margin-bottom: @line-height-computed;
  list-style: none;
  color: @breadcrumb-color;
  background-color: @breadcrumb-bg;
  border-radius: @border-radius-base;
  & > .active {
    color: @breadcrumb-color;
  }
  & a {
    color: @breadcrumb-color;
  }
}

.breadcrumb-arrow {
  padding: 0;
  list-style: none;
  background-color: @breadcrumb-bg;
  height: 36px;
  line-height: 36px;
  overflow: hidden;

  > li:first-child a {
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }
  > li,
  > li a,
  > li span{
    display: inline-block;
    vertical-align: top;
  }
  > li:not(:first-child) {
    margin-left: -5px;
  }
  > li:before {
    padding: 0;
    content: "";
  }
  > li span {
    padding: 0 10px;
  }
  > li a,
  > li:not(:first-child) span {
    padding: 0 10px 0 25px;
    height: 36px;
    line-height: 36px;
  }
  > li:first-child a {
    padding: 0 10px;
  }
  > li a {
    position: relative;
    border: 1px solid @breadcrumb-arrow-background-color;
    color: @breadcrumb-arrow-font-color;
    background-color: @breadcrumb-arrow-background-color;
    text-decoration: none;
  }
  > li:first-child a {
    padding-left: 10px;
  }
  > li a:before,
  > li a:after {
    position: absolute;
    top: -1px;
    content: '';
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
  }
  > li a:before {
    right: -10px;
    border-left-width: 11px;
    border-left-style: solid;
    border-left-color: @breadcrumb-arrow-background-color;
    z-index: 3;
  }
  > li a:after{
    right: -11px;
    border-left: 11px solid darken(@breadcrumb-arrow-background-color, 10%);
    z-index: 2;
  }
  > li a:hover,
  > li a:focus {
    background-color: @breadcrumb-arrow-background-color-hover;
    border: 1px solid @breadcrumb-arrow-background-color-hover;
  }
  > li a:hover:before,
  > li a:focus:before {
    border-left-color: @breadcrumb-arrow-background-color-hover;
  }
  > li a:active {
    background-color: darken(@breadcrumb-arrow-background-color, 10%);
    border: 1px solid darken(@breadcrumb-arrow-background-color, 10%);
  }
  > li a:active:before,
  > li a:active:after {
    border-left-color: darken(@breadcrumb-arrow-background-color, 10%);
  }
  > li span {
    color: @breadcrumb-active-color;
  }

}