/* ==========================================================================
   Color primary.
   ========================================================================== */
.cke_dialog_ui_html .icon.theme-primary,
.theme-primary {
  & {
    color: var(--color-fg-primary);
  }
  .icon:before {
    background-color: var(--color-fg-primary)
  }
}
path.theme-primary {
  fill: var(--color-fg-primary);
}

/* ==========================================================================
   Background primary.
   ========================================================================== */
.spinner--overlay.l-spinner .spinner-wrapper-inner,
.spinner--inline.l-spinner .spinner-wrapper-inner,
.theme-bg-primary {
  background-color: var(--color-fg-primary);

  &,
  a {
    color: var(--color-white);
  }
}
.nav--children .theme-bg-primary {
  background-color: var(--color-fg-primary);
  border-color: var(--color-fg-primary);

  &,
  .item-title,
  a {
    color: var(--color-white);

    &:hover,
    &:focus {
      color: var(--color-white);
    }
  }
  .item-title:after {
    background-color: var(--color-white);
  }
}

/* ==========================================================================
   Background secondary.
   ========================================================================== */
.theme-bg-secondary {
  background-color: var(--color-bg-secondary);

  &,
  a {
    color: var(--color-fg-primary);
  }
}
.nav--children .theme-bg-secondary {
  .item-keyfacts {
    b,
    strong {
      color: var(--color-fg-primary);
    }
  }
}

/* Background gray.
   ========================================================================== */
.theme-bg-muted {
  background: var(--color-bg-secondary) no-repeat url("/themes/custom/frontend_tertiary/images/pattern-white.svg") right bottom;
}

/* ==========================================================================
   Background dark.
   ========================================================================== */
.theme-bg-tertiary {
  background-color: var(--color-bg-tertiary);

  h2,
  h3,
  h4,
  p {
    color: var(--color-white);
  }

  .list--primary {
    .item-title {
      color: var(--color-white);
    }
  }
  .btn,
  .button {
    color: var(--color-white);
  }
}
.theme-dark,
.main-footer {
  .btn,
  .button {
    color: var(--color-white);
  }
}