// Breadcrumb max width 128px
$breadcrumb-max-width: $grid-size * 16;

.gl-breadcrumbs {
  @include gl-display-flex;
  @include gl-border-0;
  @include gl-inset-border-b-1-gray-200;
  @include gl-py-5;
}

.gl-breadcrumb-list {
  @include gl-bg-transparent;
  @include gl-p-0;
  @include gl-align-items-center;
  @include gl-line-height-normal;
  @include gl-m-0;
  @include media-breakpoint-down(xs) {
    @include gl-flex-wrap;
  }
}

.gl-breadcrumb-separator {
  @include gl-display-inline-flex;
  @include gl-absolute;
  right: 0;

  > svg {
    @include gl-my-auto;
    @include gl-mx-2;
    @include gl-w-3;
    @include gl-text-gray-500;
    @include gl-fill-current-color;
  }
}

.gl-breadcrumb-avatar-tile {
  @include gl-mr-3;
  @include gl-border-1;
  @include gl-border-solid;
  @include gl-border-gray-200;
  @include gl-rounded-full;
}

// bootstrap overrides
.gl-breadcrumb-item {
  @include gl-font-sm;
  @include gl-line-height-normal;
  @include gl-relative;
  @include gl-pr-6;

  + .gl-breadcrumb-item {
    @include gl-pl-0;

    &::before {
      content: '';
      @include gl-display-none;
    }
  }

  > a {
    @include gl-display-flex;
    @include gl-align-items-center;
    @include gl-text-gray-500;
    @include media-breakpoint-down(xs) {
      @include str-truncated($breadcrumb-max-width);
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus;
    }
  }
}

.gl-breadcrumb-item:last-child > a {
  @include gl-text-gray-950;
  @include gl-font-weight-bold;
}