// vf-breadcrumbs

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-breadcrumbs.variables.scss';

.vf-breadcrumbs {
  grid-column: main;
  margin-left: auto;
  margin-right: auto;
  margin-top: $vf-breadcrumbs__margin--top;
  max-width: $vf-layout--comfortable;
  width: 100%;

  @media (min-width: $vf-breakpoint--lg) {
    display: flex;
  }
}
@media (max-width: $vf-breakpoint--lg - 1) {
  .vf-breadcrumbs__list:not(.vf-breadcrumbs__list--related) {
    display: block;
  }
}

.vf-breadcrumbs__item {
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  color: $vf-breadcrumbs__item-text--color;
  margin-right: 3px;
  position: relative;

  &:not([aria-current]) {
    &::after {
      color: $vf-breadcrumbs__item-chevron--color;
      content: '>';
      display: inline-block;
      margin-left: 3px;
    }
  }
  &:last-of-type {
    &::after {
      content: '';
    }
  }
  &[aria-current] {
    text-shadow: 1px 0 0;
  }
}

.vf-breadcrumbs__heading {
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  display: inline;

  @media (min-width: $vf-breakpoint--lg) {
    .vf-breadcrumbs__list + & {
      margin-left: 32px;
    }
  }
}

.vf-breadcrumbs__link {
  color: currentColor;
}