// Breadcrumb navigation included in the header.

@import '../../link/mixins';

.euiHeaderBreadcrumbs {
  display: flex;
}

.euiHeaderBreadcrumb {
  display: inline-block;
  height: $euiHeaderChildSize;
  line-height: $euiHeaderChildSize;
  padding: 0 $euiSize;
  position: relative;
  color: $euiHeaderBreadcrumbColor;

  // Slanted separator. Shows on all but last item.
  &:not(:last-child):after {
    position: absolute;
    top: $euiSizeL;
    right: -3px; // Half the transformed width.
    content: "";
    width: 1px;
    height: $euiSize;
    transform: rotate(15deg);
    background: $euiColorLightShade;
  }

  &:not(.euiHeaderBreadcrumb--collapsed) {
    @include euiLink;
  }

  &.euiHeaderBreadcrumb-isActive {
    color: $euiColorMediumShade;
  }
}

  .euiHeaderBreadcrumb__text {
    white-space: nowrap;
    max-width: 150px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }

.euiHeaderBreadcrumb--collapsed {
  color: $euiColorLightShade;
}

// Laptop
@include screenMedium {
  .euiHeaderBreadcrumb {
    display: none;

    // Only show last 4 breadcrumbs
    &:nth-last-child(-n+4) {
      display: inline-block;
    }
  }
}

// Tablets
@include screenSmall {
  .euiHeaderBreadcrumb {
    display: none;

    // Only show last 2 breadcrumbs
    &:nth-last-child(-n+2) {
      display: inline-block;
    }
  }
}

// Mobile
@include screenXSmall {
  .euiHeaderBreadcrumb {
    display: none;
  }
}
