alfresco-ng2-components/lib/content-services/breadcrumb/breadcrumb.component.scss

@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);
        width: 0;

        &-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;
                }
    
                &-arrow {
                    font-size: 17px;
                    position: relative;
                    left: -28px;
                    top: -2px;
                    color: white;
                    z-index: 2;
                }
    
                &-arrow.isRoot {
                    visibility: hidden;
                }
    
                &-arrow.focus {
                    border: none;
                }
            }

            &-trigger.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;

            &:hover,
            &.active {
                opacity: 1;
            }

            &.active {
                flex: 1 0 auto;
                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 {
                color: inherit;
                text-decoration: none;
                display: block;
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &.active {
                display: block;
            }

            &-current {
                text-overflow: ellipsis;
                overflow: hidden;
                max-width: 300px;
            }
        }

        &-path-option {
            &.mat-option {
                background-color: mat-color($background, card);
            }
        }
    }
}