libs/barista-components/breadcrumbs/src/breadcrumbs.scss
@import '../../core/src/style/variables';
@import '../../core/src/style/interactive-common';
@import '../../core/src/style/overlay';
@import '../../style/font-mixins';
@import './breadcrumbs-theme';

$height: 32px;
$dt-breadcrumb-max-width: 250px;
$dt-breadcrumbs-panel-max-height: 256px;
$dt-breadcrumbs-panel-max-width: 400px !default;
$dt-breadcrumbs-panel-min-width: 112px !default;

:host {
  display: flex;
}

:host ::ng-deep a.dt-breadcrumbs-item,
:host .dt-breadcrumb-collapsed-trigger {
  &,
  &:visited {
    @include dt-main-font($height);
    display: block;
    position: relative;
    height: $height;
    margin-top: 0;
    padding: 0 10px;
    color: $white;
    white-space: nowrap;
    text-decoration: none;
  }

  &.dt-breadcrumbs-item-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &:focus {
    outline: none;
  }

  &:not(:first-child) {
    margin-left: 0;
    padding-left: 16px;
  }

  &:last-child {
    &::before,
    &::after {
      display: none;
    }
  }

  &::after {
    content: '';
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -9px;
    display: block;
    background: #fff;
    clip-path: polygon(0 0, 20% 0, 100% 50%, 20% 100%, 0 100%);
    z-index: 3;
  }

  &::before {
    content: '';
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -7px;
    display: block;
    background-color: var(--dt-breadcrumbs-item-default-color);
    clip-path: polygon(0 0, 20% 0, 100% 50%, 20% 100%, 0 100%);
    z-index: 5;
  }

  &:hover::before {
    background-color: var(--dt-breadcrumbs-item-hover-color);
  }
  &:focus::before {
    background-color: var(--dt-breadcrumbs-item-active-color);
  }
}

.dt-breadcrumb-collapsed-trigger {
  padding: 0 8px;
  line-height: $height;
  @include dt-interactive-reset();

  &:focus {
    outline: none;
  }
}

::ng-deep .dt-breadcrumbs-overlay {
  background: $white;
  box-sizing: border-box;
  border: 1px solid $disabledcolor;
  border-radius: 0 0 3px 3px;
  max-height: $dt-breadcrumbs-panel-max-height;
  min-width: $dt-breadcrumbs-panel-min-width;
  max-width: $dt-breadcrumbs-panel-max-width;
  will-change: transform;

  // Prevents the content from repainting on scroll.
  backface-visibility: hidden;

  // Makes sure the opening scale animation starts from the top
  transform-origin: left top;
  overflow: auto;
  -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
}

::ng-deep .dt-breadcrumb-collapsed-container {
  display: none;
}

::ng-deep .cdk-overlay-pane .dt-breadcrumb-collapsed-container {
  display: block;
  width: 100%;
}

::ng-deep .cdk-overlay-pane .dt-breadcrumbs-item {
  @include dt-main-font();
  display: block;
  max-width: $dt-breadcrumb-max-width;
  padding: 0 12px;
  font-size: 14px;
  line-height: 28px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-variant: tabular-nums;
  text-decoration: none;

  &:hover,
  &:focus {
    background-color: $turquoise-100;
    outline: none;
  }

  &:not([href]) {
    color: $disabledcolor;
    background-color: inherit;
    cursor: default;
  }
}
