@import 'variables'

.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
    &:first-child
      padding-left: 27px
      a
        padding: 0
    &:last-child
      background-color: transparent !important
      pointer-events: none
      cursor: default
      padding: 11px 10px 11px 30px
    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
      color: $breadcrumb-active-color