@mixin adf-breadcrumb-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $foreground: map-get($theme, foreground); $background: map-get($theme, background); $breadcrumb-chevron-spacer: 2px; .adf-breadcrumb { display: flex; flex: 1; line-height: 24px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: mat-color($foreground, text, 0.54); overflow: hidden; &-container { margin: 0; padding: 0; list-style-type: none; cursor: default; display: flex; overflow: hidden; } &-dropdown { &-path { width: 0; height: 0; overflow: hidden; margin-top: 35px; &.mat-select { width: 0; } } &-trigger { cursor: pointer; padding: 0; border: none; background: transparent; width: 30px; margin-top: 2px; margin-right: 5px; &:focus { color: mat-color($primary); outline: none; } &-icon { position: relative; } &-arrow { font-size: 17px; position: absolute; left: 4px; top: 4px; color: white; z-index: 2; } &-arrow.adf-isRoot { visibility: hidden; } &-arrow.adf-focus { border: none; } } &-trigger.adf-isRoot { cursor: not-allowed; } } &-item { padding-right: $breadcrumb-chevron-spacer; overflow: hidden; display: flex; line-height: 33px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; text-align: left; opacity: 0.6; flex: 0 1 auto; min-width: 35px; margin-top: auto; text-overflow: ellipsis; &:hover, &.adf-active { opacity: 1; } &.adf-active { color: mat-color($foreground, text, 0.87); } &-chevron { opacity: 1; margin-top: 9px; font-size: 17px; } &.mat-primary { color: mat-color($primary); } &.mat-accent { color: mat-color($accent); } &.mat-warn { color: mat-color($warn); } &-anchor { box-sizing: border-box; color: inherit; text-decoration: none; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: 0 1 auto; } &-current { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } &-path-option { &.mat-option { background-color: mat-color($background, card); } } } }