@import 'variables'

@import "compass/css3/box-shadow"
@import "compass/css3/border-radius"

.breadcrumb
  width: 100%
  margin-bottom: 0px
  padding: 0
  +border-radius(0)
  overflow: hidden
  border: none
  border-bottom: 1px solid $gray-light
  li + li:before
    display: none
  li
    a
      font-size: 1em
      color: $breadcrumb-color
      text-decoration: none
      display: block
      position: relative
      background-color: $breadcrumb-bg
      padding: 11px 10px 11px 30px
      &:hover
        color: #000
        background-color: $gray-light
        &:after
          border-left-color: $gray-light

      &:after
        content: " "
        display: block
        width: 0
        height: 0
        border-top: 30px solid transparent
        border-bottom: 30px solid transparent
        border-left: 15px solid $breadcrumb-bg
        position: absolute
        top: 50%
        margin-top: -30px
        left: 100%
        z-index: 2
      &:before
        content: " "
        display: block
        width: 0
        height: 0
        border-top: 30px solid transparent
        border-bottom: 30px solid transparent
        border-left: 15px solid $brand-primary
        position: absolute
        top: 50%
        margin-top: -30px
        margin-left: 2px
        left: 100%
        z-index: 1

    &:hover, &:last-child
      a
        color: $breadcrumb-active-color

    &:first-child
      a
        padding-left: 20px

    &:last-child
      a
        &:after,
        &:before
          content: none
          border: none
        &:hover
          background-color: transparent