/* ==========================================================================
   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-color: var(--color-bg-secondary);
}