$breadcrumb-item-color: v("link") !default
$breadcrumb-item-hover-color: v("link-hover") !default
$breadcrumb-item-active-color: v("text-strong") !default

$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default

$breadcrumb-item-separator-color: v("border-hover") !default

+register(breadcrumb-item-color,$breadcrumb-item-color, true)
+register(breadcrumb-item-padding-vertical,$breadcrumb-item-padding-vertical, true)
+register(breadcrumb-item-padding-horizontal,$breadcrumb-item-padding-horizontal, true)
+register(breadcrumb-item-hover-color,$breadcrumb-item-hover-color, true)
+register(breadcrumb-item-active-color,$breadcrumb-item-active-color, true)
+register(breadcrumb-item-separator-color,$breadcrumb-item-separator-color, true)

.breadcrumb
  @extend %block
  @extend %unselectable
  font-size: v("size-normal")
  white-space: nowrap
  a
    align-items: center
    color: v("breadcrumb-item-color")
    display: flex
    justify-content: center
    padding: v("breadcrumb-item-padding-vertical") v("breadcrumb-item-padding-horizontal")
    &:hover
      color: v("breadcrumb-item-hover-color")
  li
    align-items: center
    display: flex
    &:first-child a
      +ltr-property("padding-left", 0)
    &.is-active
      a
        color: v("breadcrumb-item-active-color")
        cursor: default
        pointer-events: none
    & + li::before
      color: v("breadcrumb-item-separator-color")
      content: "\0002f"
  ul,
  ol
    align-items: flex-start
    display: flex
    flex-wrap: wrap
    justify-content: flex-start
  .icon
    &:first-child
      +ltr-property("margin-right", 0.5em)
    &:last-child
      +ltr-property("margin-left", 0.5em)
  // Alignment
  &.is-centered
    ol,
    ul
      justify-content: center
  &.is-right
    ol,
    ul
      justify-content: flex-end
  // Sizes
  &.is-small
    font-size: v("size-small")
  &.is-medium
    font-size: v("size-medium")
  &.is-large
    font-size: v("size-large")
  // Styles
  &.has-arrow-separator
    li + li::before
      content: "\02192"
  &.has-bullet-separator
    li + li::before
      content: "\02022"
  &.has-dot-separator
    li + li::before
      content: "\000b7"
  &.has-succeeds-separator
    li + li::before
      content: "\0227B"