/**
 * @file
 * Styles for breadcrumbs.
 *
 * Markup from templates/navigation/breadcrumb.html.twig:
 *   <nav class="breadcrumb"><ol><li><a>…</a></li>…<li>current</li></ol></nav>
 * The current page is the last <li> and is not a link.
 */
@layer components {

  .breadcrumb {
    padding-bottom: 0.5em;
    font-size: 0.875em;
    color: var(--text-2);
  }
  .breadcrumb ol {
    margin: 0;
    padding: 0;
  }
  [dir="rtl"] .breadcrumb ol {
    /* Wins over specificity of [dir="rtl"] ol. */
    margin-right: 0;
  }
  .breadcrumb li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .breadcrumb li::before {
    margin-inline: var(--size-2);
    content: "\BB";
    color: var(--text-2);
  }
  .breadcrumb li:first-child::before {
    content: none;
  }
  .breadcrumb a {
    color: var(--text-2);
    text-decoration: none;
  }
  .breadcrumb a:hover {
    color: var(--upei-red);
    text-decoration: underline;
  }
  .breadcrumb li:last-child {
    color: var(--text-1);
  }

}