/*----------------------------------------------------------------*/
/*  breadcrumbs
/*----------------------------------------------------------------*/

@import "angular-material-variables";
@import "variables";

$breadcrumbs-divider-icon-color: rgba(255, 255, 255, 0.35);
$breadcrumbs-breadcrumb-max-width: 320px;
$breadcrumbs-primary-text-color: $primary-white-text;

#breadcrumbs {
    padding: 0 16px;

    md-icon {
        color: $breadcrumbs-divider-icon-color;
        margin-left: 4px;
        margin-right: 4px;
        min-width: 15px;
        min-height: 15px;
        font-size: 15px;
        height: 15px;
        width: 15px;
    }

    .breadcrumb {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &:not(:last-child) {
            cursor: pointer;
        }

        &:last-child {
            .breadcrumb-primary-text {
                h1 {
                    font-weight: 500;
                }
            }
        }

        .breadcrumb-primary-text {
            > h1 {
                color: $breadcrumbs-primary-text-color;
                font-weight: 300;
                font-size: 0.75em;
                max-width: $breadcrumbs-breadcrumb-max-width;
            }
        }
    }
}

@media screen and (max-width: $layout-breakpoint-xs) {
    #breadcrumbs {
        padding: 8px 16px;
    }
}