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

.gl-breadcrumbs {
  @include gl-display-flex;
}

.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 gl-flex-nowrap;
  @include gl-max-w-full;
}

// bootstrap overrides
.gl-breadcrumb-item {
  @include gl-font-sm;
  @include gl-line-height-normal;
  @include gl-flex-shrink-0;

  &:not(:last-child)::after {
    @include gl-text-gray-200;
    @include gl-px-3;
    content: '/';
  }

  > a {
    @include gl-text-gray-700;

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus($outline: true);
    }
  }
}

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