/**
 * 1. Add vertical space between breadcrumbs,
 *    but make sure the whole breadcrumb set doesn't add space below itself
 */

.euiBreadcrumbs {
  @include euiFontSizeS;
  margin-bottom: -$euiSizeXS; /* 1 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.euiBreadcrumb {
  display: inline-block;
  margin-bottom: $euiSizeXS; /* 1 */

  &:not(.euiBreadcrumb--last) {
    margin-right: $euiBreadcrumbSpacing;
    color: $euiTextSubduedColor;
  }
}

.euiBreadcrumb--last {
  font-weight: $euiFontWeightMedium;
}

.euiBreadcrumb--collapsed {
  flex-shrink: 0;
}

.euiBreadcrumbSeparator {
  flex-shrink: 0;
  display: inline-block;
  margin-right: $euiBreadcrumbSpacing;
  width: 1px;
  height: $euiSize;
  transform: translateY(-1px) rotate(15deg);
  background: $euiColorLightShade;
}

.euiBreadcrumbs__inPopover .euiBreadcrumb--last {
  font-weight: $euiFontWeightRegular;
  color: $euiColorDarkShade !important; // sass-lint:disable-line no-important
}

.euiBreadcrumbs--truncate {
  white-space: nowrap;
  flex-wrap: nowrap;

  .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
    max-width: $euiBreadcrumbTruncateWidth;
    overflow: hidden;
    text-overflow: ellipsis;

    &.euiBreadcrumb--last {
      max-width: none;
    }
  }
}

.euiBreadcrumb--truncate {
  @include euiTextTruncate;
  max-width: $euiBreadcrumbTruncateWidth;
  text-align: center;
  vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
}