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

.gl-breadcrumbs {
  @apply gl-flex;
}

.gl-breadcrumb-list {
  @apply gl-bg-transparent;
  @apply gl-p-0;
  @apply gl-items-center;
  @apply gl-leading-normal;
  @apply gl-m-0;
  @apply gl-flex-nowrap;
  @apply gl-max-w-full;
}

// bootstrap overrides
.gl-breadcrumb-item {
  @apply gl-leading-normal;
  @apply gl-shrink-0;

  &:not(:last-child)::after {
    color: var(--gl-breadcrumb-separator-color);
    @apply gl-px-3;
    content: '/';
  }

  > a {
    @apply gl-inline-block;
    border-radius: $gl-border-radius-base;
    @apply gl-text-subtle;
    text-decoration-thickness: auto;
    text-decoration-style: solid;
    text-decoration-color: transparent;
    transition:
      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
      text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
    @include gl-prefers-reduced-motion-transition;

    &:hover {
      text-decoration-color: currentColor;
    }

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

  @if $feature-button-border {
    .gl-new-dropdown-icon-only.gl-button.btn-icon {
      min-height: auto;
    }
  }
}

.gl-breadcrumb-item:last-child > a {
  @apply gl-text-default;
  @apply gl-font-bold;
}

.gl-breadcrumb-item-sm {
  @apply gl-text-sm;
}

.gl-breadcrumb-item-md {
  @apply gl-text-base;

  /**
   * If the last/only item, which is always visible, has a very long title,
   * it could overflow the breadcrumb component. This CSS makes sure it
   * shows an ellipsis instead.
   * But this CSS cannot be active while we do the size calculation, as that
   * would then not take the real unshrunk width of that item into account.
   */
  &.gl-breadcrumb-only-item {
    @apply gl-max-w-full gl-shrink;

    a {
      @apply gl-max-w-full gl-overflow-hidden gl-text-ellipsis gl-text-nowrap;
    }
  }
}