@use '../variables' as variables;
@use '../mixins' as mixins;
.breadcrumb {
  --breadcrumb-font-family: #{variables.$font-family-sans-serif};
  --breadcrumb-font-size: #{variables.$breadcrumb-font-size};
  --breadcrumb-font-weight: #{variables.$breadcrumb-font-weight};
  --breadcrumb-letter-spacing: #{variables.$breadcrumb-letter-spacing};
  --breadcrumb-margin-bottom: #{variables.$breadcrumb-margin-bottom};
  --breadcrumb-text-transform: #{variables.$breadcrumb-text-transform};
  --breadcrumb-item-padding-x: #{variables.$breadcrumb-item-padding-x};
  --breadcrumb-divider-icon: '#{variables.$breadcrumb-divider-icon}';
  --breadcrumb-divider-weight: #{variables.$breadcrumb-divider-weight};
  --breadcrumb-divider-font-family: #{variables.$breadcrumb-divider-font-family};

  display: flex;
  flex-wrap: wrap;
  font-family: var(--breadcrumb-font-family);
  font-size: var(--breadcrumb-font-size);
  margin-bottom: var(--breadcrumb-margin-bottom);
}

.breadcrumb-item {
  display: inline-flex;
  font-size: var(--breadcrumb-font-size);
  font-weight: var(--breadcrumb-font-weight);
  letter-spacing: var(--breadcrumb-letter-spacing);
  text-transform: var(--breadcrumb-text-transform);

  & > * {
    margin-left: 0.25em;
    margin-right: 0.25em;
  }

  + .breadcrumb-item {
    padding-left: var(--breadcrumb-item-padding-x);

    &::before {
      box-sizing: content-box;
      display: inline-flex;
      padding-right: var(--breadcrumb-item-padding-x);
      content: var(--breadcrumb-divider-icon);
      font-weight: var(--breadcrumb-divider-weight);
      font-family: var(--breadcrumb-divider-font-family);
      height: 1em;
      justify-content: center;
      text-decoration: none;
      text-transform: none;
      width: 1em;
    }

    @include mixins.hover {
      &::before {
        text-decoration: none;
      }
    }
  }
}