:root {
  /* Metadata - Icon */
  --metadata--icon--background_colour: transparent;
  --metadata--icon--font_size: 1.125rem;
  --metadata--icon--padding: 0 11px 0 0;
  /* Metadata - Prefix */
  --metadata--prefix--background_colour: transparent;
  --metadata--prefix--font_family: 'Roboto';
  --metadata--prefix--font_size: 1.375rem;
  --metadata--prefix--font_style: normal;
  --metadata--prefix--font_weight: 500;
  --metadata--prefix--line_height: 120%;
  --metadata--prefix--padding: 0 11px 0 0;
  --metadata--prefix--border_size: 0;
  --metadata--prefix--border_style: solid;
  --metadata--prefix--border_colour: transparent;
  /* Metadata - Data */
  --metadata--data--background_colour: transparent;
  --metadata--data--font_family: 'Roboto';
  --metadata--data--font_size: 1.375rem;
  --metadata--data--font_style: normal;
  --metadata--data--font_weight: 500;
  --metadata--data--line_height: 120%;
  --metadata--data--padding: 0;
  /* Metadata - Data - Social Link */
  --metadata--data--social-link--background_colour: blue;
  --metadata--data--social-link--text_colour: #ffffff;
  --metadata--data--social-link--font_family: 'Roboto';
  --metadata--data--social-link--font_size: 1.375rem;
  --metadata--data--social-link--font_style: normal;
  --metadata--data--social-link--font_weight: 500;
  --metadata--data--social-link--line_height: 120%;
  --metadata--data--social-link--padding: 5px;
  --metadata--data--social-link--border_size: 0;
  --metadata--data--social-link--border_style: solid;
  --metadata--data--social-link--border_colour: transparent;
  /* Metadata - Data - Taxonomy Term */
  --metadata--data--taxonomy-term--background_colour: blue;
  --metadata--data--taxonomy-term--text_colour: #ffffff;
  --metadata--data--taxonomy-term--font_family: 'Roboto';
  --metadata--data--taxonomy-term--font_size: 1.375rem;
  --metadata--data--taxonomy-term--font_style: normal;
  --metadata--data--taxonomy-term--font_weight: 500;
  --metadata--data--taxonomy-term--line_height: 120%;
  --metadata--data--taxonomy-term--padding: 150%;
  --metadata--data--taxonomy-term--border_size: 0;
  --metadata--data--taxonomy-term--border_style: solid;
  --metadata--data--taxonomy-term--border_colour: transparent;
  /* Metadata - Style 1 */
  --metadata--style1--color: #61615F;
  --metadata--style1--line_height: 160%;
  --metadata--style1--font_family: 'Roboto';
  --metadata--style1--font_weight: 400;
  --metadata--style1--font_size: 1.75rem; /* 28px - Desktop (1280px and above) */
  /* Metadata - Style 2 */
  --metadata--style2--color: #61615F;
  --metadata--style2--line_height: 160%;
  --metadata--style2--font_family: 'Roboto';
  --metadata--style2--font_weight: 400;
  --metadata--style2--font_size: 1.375rem; /* 22px - Desktop (1280px and above) */
}
/* Main styling */
.oxfcms-metadata {
  text-decoration: none;
  display: inline-block;
  .fontawesome-icon {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    i {
      background-color: var(--metadata--icon--background_colour);
      color: var(--metadata--icon--text_colour, #1D42A6);
      font-size: var(--metadata--icon--font_size);
      padding: var(--metadata--icon--padding);
    }
  }
  .metadata-field-prefix {
    background-color: var(--metadata--prefix--background_colour);
    color: var(--metadata--prefix--text_colour, #1D42A6);
    font-family: var(--metadata--prefix--font_family);
    font-size: var(--metadata--prefix--font_size);
    font-style: var(--metadata--prefix--font_style);
    font-weight: var(--metadata--prefix--font_weight);
    line-height: var(--metadata--prefix--line_height);
    padding: var(--metadata--prefix--padding);
    border-width: var(--metadata--prefix--border_size);
    border-style: var(--metadata--prefix--border_style);
    border-color: var(--metadata--prefix--border_colour);
  }
  .metadata-field-content {
    background-color: var(--metadata--data--background_colour);
    color: var(--metadata--data--text_colour, #1D42A6);
    font-family: var(--metadata--data--font_family);
    font-size: var(--metadata--data--font_size);
    font-style: var(--metadata--data--font_style);
    font-weight: var(--metadata--data--font_weight);
    line-height: var(--metadata--data--line_height);
    padding: var(--metadata--data--padding);
    > * {
      font-family: var(--metadata--data--font_family);
      font-size: var(--metadata--data--font_size);
      font-style: var(--metadata--data--font_style);
      font-weight: var(--metadata--data--font_weight);
      line-height: var(--metadata--data--line_height);
      display: inline-block;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .address {
      line-height: 1rem;
      display: inline;
      > span::after {
        content: ",";
      }
      > span:last-of-type::after {
        content: "";
      }
    }
    .social-link-field li {
      padding: var(--metadata--data--social-link--padding);
    }
    .taxonomy_terms {
      .group_label {
        display: none;
      }
      span {
        margin: 0 5px 0 0;
        background-color: var(--metadata--data--taxonomy-term--background_colour);
        color: var(--metadata--data--taxonomy-term--text_colour);
        font-family: var(--metadata--data--taxonomy-term--font_family);
        font-size: var(--metadata--data--taxonomy-term--font_size);
        font-style: var(--metadata--data--taxonomy-term--font_style);
        font-weight: var(--metadata--data--taxonomy-term--font_weight);
        line-height: var(--metadata--data--taxonomy-term--line_height);
        padding: var(--metadata--data--taxonomy-term--padding);
        border-width: var(--metadata--data--taxonomy-term--border_size);
        border-style: var(--metadata--data--taxonomy-term--border_style);
        border-color: var(--metadata--data--taxonomy-term--border_colour);
      }
    }
  }
}
/* Padding */
.l__main > .l__region > .paragraph.paragraph--type--oxfcms-metadata:has(.oxfcms-metadata) {
  padding: 0;
}

/* 'Style 1' from ticket #113244 */
/* Person fields: Job title, Affiliation, Role, Phone Number, Email */
/* Article fields: Author, Publication Date */
/* Event fields: Event Start Date, Location */

/* Font-size, line-height, and color for all elements including icons */
.node--type-person {
  .paragraph--type--oxfcms-metadata {
    &[data-metadata-field="field_job_title"],
    &[data-metadata-field="field_affiliation"],
    &[data-metadata-field="field_role"],
    &[data-metadata-field="field_phone_number"],
    &[data-metadata-field="field_email_address"] {
      .fontawesome-icon,
      .fontawesome-icon > *,
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        line-height: var(--metadata--style1--line_height);
        color: var(--metadata--style1--color);
        font-size: var(--metadata--style1--font_size);
      }
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        font-family: var(--metadata--style1--font_family);
        font-weight: var(--metadata--style1--font_weight);
      }
    }
  }
}

.node--type-article {
  .paragraph--type--oxfcms-metadata {
    &[data-metadata-field="field_publication_date"],
    &[data-metadata-field="field_author"] {
      .fontawesome-icon,
      .fontawesome-icon > *,
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        line-height: var(--metadata--style1--line_height);
        color: var(--metadata--style1--color);
        font-size: var(--metadata--style1--font_size);
      }
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        font-family: var(--metadata--style1--font_family);
        font-weight: var(--metadata--style1--font_weight);
      }
    }
  }
}

.node--type-event {
  .paragraph--type--oxfcms-metadata {
    &[data-metadata-field="field_event_start_date"],
    &[data-metadata-field="field_location"] {
      .fontawesome-icon,
      .fontawesome-icon > *,
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        line-height: var(--metadata--style1--line_height);
        color: var(--metadata--style1--color);
        font-size: var(--metadata--style1--font_size);
      }
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        font-family: var(--metadata--style1--font_family);
        font-weight: var(--metadata--style1--font_weight);
      }
    }
  }
}

/* 'Style 2' from ticket #113244 */
/* Person fields: Bio */
/* Event fields: Event Presenter */

/* Font-size, line-height, and color for all elements including icons */
.node--type-person {
  .paragraph--type--oxfcms-metadata {
    &[data-metadata-field="field_bio"] {
      .fontawesome-icon,
      .fontawesome-icon > *,
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        line-height: var(--metadata--style2--line_height);
        color: var(--metadata--style2--color);
        font-size: var(--metadata--style2--font_size);
      }
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        font-family: var(--metadata--style2--font_family);
        font-weight: var(--metadata--style2--font_weight);
      }
    }
  }
}

.node--type-event {
  .paragraph--type--oxfcms-metadata {
    &[data-metadata-field="field_event_presenter"] {
      .fontawesome-icon,
      .fontawesome-icon > *,
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        line-height: var(--metadata--style2--line_height);
        color: var(--metadata--style2--color);
        font-size: var(--metadata--style2--font_size);
      }
      .metadata-field-prefix,
      .metadata-field-content,
      .metadata-field-content > * {
        font-family: var(--metadata--style2--font_family);
        font-weight: var(--metadata--style2--font_weight);
      }
    }
  }
}

/* Breakpoint - Tablet (768px-1279px) */
@media (max-width: 1279px) {
  .paragraph--type--oxfcms-metadata {
    --metadata--style1--font_size: 1.5rem; /* 24px */
    --metadata--style2--font_size: 1.25rem; /* 20px */
  }
}
/* Breakpoint - Mobile (767px and below) */
@media (max-width: 767px) {
  .paragraph--type--oxfcms-metadata {
    --metadata--style1--font_size: 1.25rem; /* 20px */
    --metadata--style2--font_size: 1.125rem; /* 18px */
  }
}