:root {
  /* Breadcrumb */
  --breadcrumb--text_colour: var(--dark_3, #002147);
  --breadcrumb--border_size: 0;
  --breadcrumb--border_style: solid;
  --breadcrumb--border_colour: var(--dark_2, #61615f);
  --breadcrumb--margin: 0;
  --breadcrumb--padding: 10px 20px;
  --breadcrumb--font_family: 'Roboto';
  --breadcrumb--font_size: 1.125rem;
  --breadcrumb--font_weight: 500;
  --breadcrumb--font_style: normal;
  --breadcrumb--line_height: 120%;
  /* Breadcrumb - Icon */
  --breadcrumb--icon--font_size: .75rem;
}
/* Main styling */
.paragraph--type--oxfcms-breadcrumb {
  width: 100%;
  nav {
    &.breadcrumb {
      color: var(--breadcrumb--text_colour);
      margin: var(--breadcrumb--margin);
      padding: var(--breadcrumb--padding);
      font-family: var(--breadcrumb--font_family);
      font-size: var(--breadcrumb--font_size);
      font-weight: var(--breadcrumb--font_weight);
      font-style: var(--breadcrumb--font_style);
      line-height: var(--breadcrumb--line_height);
      border-top-width: var(--breadcrumb--border_size);
      border-top-style: var(--breadcrumb--border_style);
      border-top-color: var(--breadcrumb--border_colour);
      border-bottom-width: var(--breadcrumb--border_size);
      border-bottom-style: var(--breadcrumb--border_style);
      border-bottom-color: var(--breadcrumb--border_colour);
      background-color: transparent;
      ol, ul {
        display: flex;
        margin: 0;
        padding: 0;
        li {
          display: flex;
          list-style-type: none;
          .home-link {
            background-color: var(--breadcrumb--home-item--background-color);
            color: var(--breadcrumb--home-item--color);
            font-size: var(--breadcrumb--home-item--font_size);
            margin: var(--breadcrumb--home-item--margin);
            padding: var(--breadcrumb--home-item--padding);
          }
          &:not(:first-of-type)::before {
            font-size: var(--breadcrumb--icon--font_size);
            content: "\f054";
            font-family: "Font Awesome 6 Free";
            font-weight: 600;
            margin: 0 15px;
          }
          a {
            color: var(--breadcrumb--text_colour);
            font-family: var(--breadcrumb--font_family);
            font-size: var(--breadcrumb--font_size);
            font-weight: var(--breadcrumb--font_weight);
            font-style: var(--breadcrumb--font_style);
            line-height: var(--breadcrumb--line_height);
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-thickness: 1px;
          }
          &:last-of-type {
            font-family: var(--breadcrumb--font_family);
            font-size: var(--breadcrumb--font_size);
            font-weight: var(--breadcrumb--font_weight);
            font-style: var(--breadcrumb--font_style);
            line-height: var(--breadcrumb--line_height);
          }
        }
        li, .home-link, li::before {
          background-color: inherit;
          color: inherit;
        }
      }
    }
  }
}
/* Right to Left styling */
[dir="rtl"] .breadcrumb ol {
  /* This is required to win over specificity of [dir="rtl"] ol */
  margin-right: 0;
}