[class*="themed-section"] {
  /* If you see this colour you gotta add a theme */
  --theme-base--primary: #3a18b1;
  --theme-base--secondary: #fd4659;

  /* Typically, Primary and Secondary are inverted for button styling.
  ** Background and border share a colour in most cases; so by default, border piggy backs off background colour. */
  --theme-btn--bg-colour: var(--theme-base--secondary);
  --theme-btn--border-colour: var(--theme-btn--bg-colour);
  --theme-btn--text-colour: var(--theme-base--primary);

  background: var(--theme-base--primary);

  :focus-visible {
    outline-color: var(--theme-btn--border-colour);
  }

  section& {
    padding: var(--spacing-300, 24px) 0;
  }

  :is(h1, h2, h3, h4, h5, p, ol, ul, li, a, .hover) {
    color: var(--theme-base--secondary);
  }

  :is(.hyperlink, .hyperlink:hover) {
    color: var(--theme-base--secondary) !important;
  }

  a[target="_blank"].hyperlink::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z' fill='%23001080'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23001080'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z' fill='%23001080'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23001080'/%3E%3C/svg%3E") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    background-image: unset;
    background-color: var(--theme-base--secondary);
    mask-size: cover;
  }

  .content-grid .content-grid__item:not(a) {
    border-color: var(--theme-base--secondary);
  }

  .content-grid a.content-grid__item:hover,
  .content-grid.content-grid--borderless a.content-grid__item:hover,
  .banner-link:hover {
    border-color: var(--theme-base--secondary);
  }

  .btn.btn-primary.btn-themed {
    border-color: var(--theme-btn--border-colour) !important;
    background: var(--theme-btn--bg-colour) !important;
    color: var(--theme-btn--text-colour) !important;

    &:hover {
      border-color: hsl(from var(--theme-btn--border-colour) h s calc(l - 5)) !important;
      background: hsl(from var(--theme-btn--bg-colour) h s calc(l - 5)) !important;
    }
  }

  .btn.btn-secondary.btn-themed {
    --theme-btn--bg-colour: var(--theme-base--primary);
    --theme-btn--text-colour: var(--theme-base--secondary);

    border-color: var(--theme-btn--border-colour) !important;
    background: var(--theme-btn--bg-colour) !important;
    color: var(--theme-btn--text-colour) !important;

    &:hover {
      --theme-btn--bg-colour: var(--theme-base--secondary);
      --theme-btn--text-colour: var(--theme-base--primary);

      background: var(--theme-btn--bg-colour) !important;
      color: var(--theme-btn--text-colour) !important;
    }
  }

  /*
  ** THEMES **
  */

  &[class*="--officeworks"] {
    --theme-base--primary: var(--brand-primary-500, #001080);
    --theme-base--secondary: #fff;
  }

  &[class*="--bts"] {
    --theme-base--primary: var(--secondary-yellow-subdued, #fff9e0);
    --theme-base--secondary: var(--greyscale-900, #252525);

    --theme-btn--bg-colour: var(--secondary-yellow, #ffd731);
    --theme-btn--text-colour: var(--theme-base--secondary);

    .btn.btn-secondary.btn-themed {
      --theme-btn--border-colour: var(--theme-base--secondary);
    }
  }

  &[class*="--blackfriday"] {
    --theme-base--primary: var(--greyscale-900, #252525);
    --theme-base--secondary: #fff;
  }

  &[class*="--christmas"] {
    --theme-base--primary: #dbedd9;
    --theme-base--secondary: var(--greyscale-900, #252525);
  }

  &[class*="--light"] {
    --theme-base--primary: var(--greyscale-200, #f7f7f7);
    --theme-base--secondary: var(--greyscale-900, #252525);
  }

  &[class*="--onepass"] {
    --theme-base--primary: #9900f1;
    --theme-base--secondary: #fff;
  }
}