@c8y/style/styles/components/navigation-and-layout/navigation/_breadcrumbs.less

Styles for Cumulocity IoT applications

@import "../../../mixins/_shadows-helper.less";

/**
 * Breadcrumbs - Navigation breadcrumb trail component
 *
 * Note: Uses @size-* tokens where applicable and @breadcrumb-* variables for colors.
 *
 * Intentionally hardcoded values:
 * - Percentages (100%): Layout
 * - Opacity values: Visual effects
 */

.breadcrumbs-container {
  display: block;
  overflow: visible;
  color: @breadcrumb-text-color;
  font-size: @breadcrumbs-font-size;
  
  .breadcrumbs.text-muted {
    color: inherit;
  }
  .text-muted {
    opacity: 1 !important;
  }
}

.breadcrumbs {
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  font-size: @breadcrumbs-font-size;
  display: flex;
  align-items: center;
  > li {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis ;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;

    > a, > span {
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      min-width: @font-size-base;
      vertical-align: top;
      text-align: center;
    }
    > a{
      color: @breadcrumb-text-color;
      &:hover {
        color: @breadcrumb-text-color-hover;
        text-decoration: underline;
      }
    }
  }
}