/* use variables when about:config variable userChrome.system-accent-colors is true */
@media -moz-pref("userChrome.theme-system-accent") {
  /* use variables when dark mode */
  @media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor);
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        var(--md-grey-900) 85%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-900-white-4-percent) 85%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-grey-900-white-5-percent) 85%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-text-on-accent: var(--md-white);
      --md-secondary-button-text: var(--md-white);
      --md-content-separator-color: color-mix(
        in srgb,
        #606164 90%,
        var(--md-accent-color)
      );
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }

  /* use variables when light mode */
  @media (prefers-color-scheme: light) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(
        in srgb,
        var(--md-grey-900) 15%,
        AccentColor
      );
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        #dee1e6 90%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-100) 90%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-white) 90%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-content-separator-color: color-mix(
        in srgb,
        #dbdcdd 90%,
        var(--md-accent-color)
      );
      --md-secondary-button-text: var(--md-accent-color);
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }
}