/*! purgecss start ignore */
/*********************************************************
 *                Mobius Theme Utility
 *
 * - with css    houdini: none,
 * - with global control: [data-theme]
 * - use  global params : %var-color,
 * - set  global params : none,
 * - use  ...    props  : none,
 * - release     props  : %theme-light-vars, %theme-dark-vars,
 *
 * - usage: [--fg-color-normal](use)(base),
 *          [--bg-color-normal](use)(base),
 *
 * - classes: .mobius-theme--dark(hover), .mobius-theme--light(hover)
 *
 * - TODO: high-contrast theme,
 *
 *********************************************************/

%theme-light-vars {
  --bg-color-darker: var(--light-color-darker);
  --bg-color-darker-m: var(--light-color-darker-m);
  --bg-color-normal: var(--light-color-normal);
  --bg-color-lighter-m: var(--light-color-lighter-m);
  --bg-color-lighter: var(--light-color-lighter);

  --fg-color-darker: var(--dark-color-darker);
  --fg-color-darker-m: var(--dark-color-darker-m);
  --fg-color-normal: var(--dark-color-normal);
  --fg-color-lighter-m: var(--dark-color-lighter-m);
  --fg-color-lighter: var(--dark-color-lighter);

  --bg-color-base: var(--light-color-normal);
  --bg-color-primary: var(--cigaret-color-lighter-m);
  --bg-color-second: var(--mobius-color-lighter-m);
  --bg-color-third: var(--light-color-lighter-m);

  --fg-color-base: var(--dark-color-normal);
  --fg-color-primary: var(--cigaret-color-darker-m);
  --fg-color-second: var(--mobius-color-darker-m);
  --fg-color-third: var(--light-color-darker-m);

  --bg-color-red: var(--red-color-lighter-m);
  --bg-color-ry: var(--ry-color-lighter-m);
  --bg-color-yellow: var(--yellow-color-lighter-m);
  --bg-color-yg: var(--yg-color-lighter-m);
  --bg-color-green: var(--green-color-lighter-m);
  --bg-color-gc: var(--gc-color-lighter-m);
  --bg-color-cyan: var(--cyan-color-lighter-m);
  --bg-color-cb: var(--cb-color-lighter-m);
  --bg-color-blue: var(--blue-color-lighter-m);
  --bg-color-bm: var(--bm-color-lighter-m);
  --bg-color-magenta: var(--magenta-color-lighter-m);
  --bg-color-mr: var(--mr-color-lighter-m);

  --fg-color-red: var(--red-color-darker-m);
  --fg-color-ry: var(--ry-color-darker-m);
  --fg-color-yellow: var(--yellow-color-darker-m);
  --fg-color-yg: var(--yg-color-darker-m);
  --fg-color-green: var(--green-color-darker-m);
  --fg-color-gc: var(--gc-color-darker-m);
  --fg-color-cyan: var(--cyan-color-darker-m);
  --fg-color-cb: var(--cb-color-darker-m);
  --fg-color-blue: var(--blue-color-darker-m);
  --fg-color-bm: var(--bm-color-darker-m);
  --fg-color-magenta: var(--magenta-color-darker-m);
  --fg-color-mr: var(--mr-color-darker-m);
}
%theme-dark-vars {
  --bg-color-darker: var(--dark-color-darker);
  --bg-color-darker-m: var(--dark-color-darker-m);
  --bg-color-normal: var(--dark-color-normal);
  --bg-color-lighter-m: var(--dark-color-lighter-m);
  --bg-color-lighter: var(--dark-color-lighter);

  --fg-color-darker: var(--light-color-darker);
  --fg-color-darker-m: var(--light-color-darker-m);
  --fg-color-normal: var(--light-color-normal);
  --fg-color-lighter-m: var(--light-color-lighter-m);
  --fg-color-lighter: var(--light-color-lighter);

  --bg-color-base: var(--dark-color-normal);
  --bg-color-primary: var(--cigaret-color-darker-m);
  --bg-color-second: var(--mobius-color-darker-m);
  --bg-color-third: var(--dark-color-darker-m);

  --fg-color-base: var(--light-color-normal);
  --fg-color-primary: var(--cigaret-color-lighter-m);
  --fg-color-second: var(--cigaret-color-lighter-m);
  --fg-color-third: var(--dark-color-lighter-m);

  --bg-color-red: var(--red-color-darker-m);
  --bg-color-ry: var(--ry-color-darker-m);
  --bg-color-yellow: var(--yellow-color-darker-m);
  --bg-color-yg: var(--yg-color-darker-m);
  --bg-color-green: var(--green-color-darker-m);
  --bg-color-gc: var(--gc-color-darker-m);
  --bg-color-cyan: var(--cyan-color-darker-m);
  --bg-color-cb: var(--cb-color-darker-m);
  --bg-color-blue: var(--blue-color-darker-m);
  --bg-color-bm: var(--bm-color-darker-m);
  --bg-color-magenta: var(--magenta-color-darker-m);
  --bg-color-mr: var(--mr-color-darker-m);

  --fg-color-red: var(--red-color-lighter-m);
  --fg-color-ry: var(--ry-color-lighter-m);
  --fg-color-yellow: var(--yellow-color-lighter-m);
  --fg-color-yg: var(--yg-color-lighter-m);
  --fg-color-green: var(--green-color-lighter-m);
  --fg-color-gc: var(--gc-color-lighter-m);
  --fg-color-cyan: var(--cyan-color-lighter-m);
  --fg-color-cb: var(--cb-color-lighter-m);
  --fg-color-blue: var(--blue-color-lighter-m);
  --fg-color-bm: var(--bm-color-lighter-m);
  --fg-color-magenta: var(--magenta-color-lighter-m);
  --fg-color-mr: var(--mr-color-lighter-m);
}
%mobius-theme {
  color: var(--fg-color-base);
  background-color: var(--bg-color-base);
}
.mobius-theme--light,
.hover_mobius-theme--light:hover {
  @extend %mobius-theme, %theme-light-vars;
}
.mobius-theme--dark,
.hover_mobius-theme--dark:hover {
  @extend %mobius-theme, %theme-dark-vars;
}

:root.mobius-base,
html.mobius-base,
page.mobius-base,
page,
.mobius-base {
  /* default use light mode */
  @extend %theme-light-vars;
  /* global control */
  &[data-theme="light"] {
    @extend %theme-light-vars;
  }
  &[data-theme="dark"] {
    @extend %theme-dark-vars;

    & img:not([src*=".svg"]) {
      filter: brightness(0.8) contrast(1.2) invert(100%) hue-rotate(180deg);
      mix-blend-mode: screen;
    }
  }
  /* TODO: high-contrast theme */
  &[data-theme="high-contrast"] {
    --bg-color-normal: black;
    --bg-color-lighter: black;
    --bg-color-darker: black;
    --fg-color-normal: white;
    --fg-color-hover: white;

    & img:not([src*=".svg"]) {
      filter: brightness(0.8) contrast(1.2) invert(100%) hue-rotate(180deg);
      mix-blend-mode: screen;
    }
  }
}
/*! purgecss end ignore */