:root {
  --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--font_size: .75rem;
}

.paragraph--type--oxfcms-breadcrumb {
  width: 100%;
  nav.breadcrumb {
    background-color: transparent;
    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);
    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 {
          content: "\f054";
          font-family: "Font Awesome 6 Free";
          font-size: var(--breadcrumb-icon--font_size);
          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;
      }
    }
  }
}

[dir="rtl"] .breadcrumb ol {
  /* This is required to win over specificity of [dir="rtl"] ol */
  margin-right: 0;
}