/* BREADCRUMBS
   This handles the breadcrumbs list that appears at the top of the page
   It uses the BreadcrumbsViewComponent which uses the Components/_LinkList structure

*/
.breadcrumbs { /* This is the nav container that surrounds the breadcrumbs list */
    grid-area: breadcrumbs;
    font-size: 15px;
    line-height: 1.4em;
    margin: 0;

    margin-bottom: 20px;
}

.breadcrumbsList {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;

    flex-direction: row;
    flex-wrap: wrap;
}


.breadcrumbsList li:not(:last-child):after {
    content: '>';
}

/* On Mobile have the breadcrumbs stack with pointing down instead of right */
.breadcrumbsList.useMobile {
    flex-direction: column;
}
.breadcrumbsList.useMobile li:not(:last-child):after {
    content: '';
}
.breadcrumbsList.useMobile li:not(:last-child):before {
    content: 'v';
}
.breadcrumbsList.useMobile li:last-child {
    margin-left: 0.8em;
}

.breadcrumbs :is(a, a:visited, a:active) {
    text-decoration: none;
    color: black;
    margin-left: 5px;
    margin-right: 5px;
}
.breadcrumbs li:first-child :is(a, a:visited, a:active),
.breadcrumbs .breadcrumbsList.useMobile :is(a, a:visited, a:active) {
    margin-left: 0;
}
.breadcrumbs a[href]:not([href=""]):hover {
    color: #30567d;
    text-decoration: underline;
}