$breadcrumb-font-size: var(--size-normal, #{$size-normal}) !default

$breadcrumb-item-color: var(--link, #{$link}) !default
$breadcrumb-item-hover-color: var(--link-hover, #{$link-hover}) !default
$breadcrumb-item-active-color: var(--text-strong, #{$text-strong}) !default

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

$breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default

.breadcrumb
  --breadcrumb-font-size: #{$content-font-size}
  --breadcrumb-item-color: #{$breadcrumb-item-color}
  --breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}
  --breadcrumb-item-active-color: #{$breadcrumb-item-active-color}
  --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
  --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
  --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}

  @extend %block
  @extend %unselectable
  font-size: var(--breadcrumb-font-size)
  white-space: nowrap
  a
    align-items: center
    color: var(--breadcrumb-item-color)
    display: flex
    justify-content: center
    padding: var(--breadcrumb-item-padding-vertical) var(--breadcrumb-item-padding-horizontal)
    &:hover
      color: var(--breadcrumb-item-hover-color)
  li
    align-items: center
    display: flex
    &:first-child a
      +ltr-property("padding", 0, false)
    &.is-active
      a
        color: var(--breadcrumb-item-active-color)
        cursor: default
        pointer-events: none
    & + li::before
      color: var(--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", 0.5em)
    &:last-child
      +ltr-property("margin", 0.5em, false)
  // Alignment
  &.is-centered
    ol,
    ul
      justify-content: center
  &.is-right
    ol,
    ul
      justify-content: flex-end
  // Sizes
  &.is-small
    --breadcrumb-font-size: var(--size-small, #{$size-small})
  &.is-medium
    --breadcrumb-font-size: var(--size-medium, #{$size-medium})
  &.is-large
    --breadcrumb-font-size: var(--size-large, #{$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"