.breadcrumb-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    border-bottom: $layoutBorder;
    background: transparent;
    padding: 10px;

    ul.breadcrumb {
        background: $gscale2;
        padding: 6px 4px 5px 4px;
        box-shadow: 1px 1px .5px .5px inset rgba($gscale0, 0.2);
        border: 1px solid $gscale2;
        border-radius: $baseRadius;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        margin: 0;
        overflow-x: auto;
        max-width: 65vw;
        white-space: nowrap;

        li {
            display: inline-block;

            &.divider {
                margin: 0 5px;

                i {
                    color: $gscaleA;
                }
            }

            span,
            a {
                border-radius: $baseRadius;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                color: $gscaleF;
                text-align: center;
                padding: 0 3px;

                i {
                    margin-right: 5px;
                }
            }

            &:hover {
                a {
                    color: $gscaleF;
                    background: $seaBlue;
                }
            }

            &:last-child a {
                margin-right: 0;
            }
        }
    }
}