$breadcrumb-color: var(--color-link) !default;
$breadcrumb-disabled-color: var(--color-muted) !default;
$breadcrumb-active-color: var(--color-black) !default;
$breadcrumb-hover-color: var(--color-black) !default;
$breadcrumb-separator-color: var(--color-black) !default;
$breadcrumb-separator-padding: 0 0.625rem !default;
$breadcrumb-separator: '/' !default;

.breadcrumb {
  --font-color: #{$breadcrumb-color};
  --separator-color: #{$breadcrumb-separator-color};
  --separator-padding: #{$breadcrumb-separator-padding};

  --hover-font-color: #{$breadcrumb-hover-color};
  --disabled-font-color: #{$breadcrumb-disabled-color};
  --active-font-color: #{$breadcrumb-active-color};

  display: flex;
  flex-flow: column wrap;

  ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;

    li {
      color: var(--font-color);

      a {
        color: inherit;
      }

      &:hover {
        --font-color: var(--hover-font-color);
      }

      &.is-disabled {
        --font-color: var(--disabled-font-color);
      }

      &.is-active {
        --font-color: var(--active-font-color);
      }
    }

    li + li::before {
      color: var(--separator-color);
      content: $breadcrumb-separator;
      padding: var(--separator-padding);
    }
  }
}