@if $css-variable-enabled {
  $breadcrumb-font-size: var(--breadcrumb-font-size);
}

.#{$prefix}breadcrumb {
  display: block;
  cursor: default;

  > ul {
    display: block;
    padding: 0;

    > li {
      display: inline-block;
      margin-left: 8px;
      color: var(--breadcrumb-item-color);
      cursor: pointer;
      font-size: $breadcrumb-font-size;

      &:not(:last-child):after {
        content: '/';
        margin-left: 8px;
        color: var(--breadcrumb-separator-color);
        cursor: default;
      }

      > a {
        color: var(--breadcrumb-item-color);
        border-style: none;
        font-size: $breadcrumb-font-size;
      }

      &[active], &.#{$prefix}active {
        color: var(--breadcrumb-item-active-color);
        cursor: default;

        > a {
          color: var(--breadcrumb-item-active-color);
          cursor: default;
        }
      }

      &:hover:not(.#{$prefix}active):not([active]), &.#{$prefix}hovered:not(.#{$prefix}active):not([active]) {
        color: var(--breadcrumb-item-hovered-color);

        > a {
          color: var(--breadcrumb-item-hovered-color);
        }
      }
    }
  }

  &.#{$prefix}dot-separator > ul > li:not(:last-child):after {
    content: '•';
  }

  &.#{$prefix}pipe-separator > ul > li:not(:last-child):after {
    content: '|';
  }

  &.#{$prefix}angle-separator > ul > li:not(:last-child):after {
    content: '›';
  }

  &.#{$prefix}dash-separator > ul > li:not(:last-child):after {
    content: '—';
  }
}