/* GPLv3 license
FAS - Headings Color
Author: ElsaTam (Kapirklaa in Discord)
*/
@supports (color: hsl(from white h s l)) {
  .theme-dark {
    --middle-color: color-mix(
        in srgb-linear,
        hsl(from var(--color-base-00) h 100% 55%),
        hsl(from var(--color-base-100) h 100% 55%) 50%
    );
    --middle-color-complement: color-mix(
        in srgb-linear,
        hsl(from var(--color-base-00) calc(h - 90) 100% 55%),
        hsl(from var(--color-base-100) calc(h + 90) 100% 55%) 50%
    );
  }
  .theme-light {
    --middle-color: color-mix(
        in srgb-linear,
        hsl(from var(--color-base-00) h 100% 40%),
        hsl(from var(--color-base-100) h 100% 40%) 50%
    );
    --middle-color-complement: color-mix(
        in srgb-linear,
        hsl(from var(--color-base-00) calc(h - 90) 100% 40%),
        hsl(from var(--color-base-100) calc(h + 90) 100% 40%) 50%
    );
  }
}
@supports not (color: hsln(from white h s l)) {
  .style-settings-container .setting-item[data-id=header-color] .setting-item-info::after {
    content: '"Hue" and "Complementary hue" not supported on your device.';
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    padding-top: var(--size-4-1);
    line-height: var(--line-height-tight);
  }
}
.headings-hue {
  --header-gradient-base-color: var(--middle-color);
}

.headings-complement {
  --header-gradient-base-color: var(--middle-color-complement);
}

.headings-accent {
  --header-gradient-base-color: var(--text-accent);
}

.headings-hue,
.headings-complement,
.headings-accent {
  --h1-color: var(--header-gradient-base-color);
  --h2-color: color-mix(in srgb, var(--header-gradient-base-color), var(--text-normal) 10%);
  --h3-color: color-mix(in srgb, var(--header-gradient-base-color), var(--text-normal) 20%);
  --h4-color: color-mix(in srgb, var(--header-gradient-base-color), var(--text-normal) 40%);
  --h5-color: color-mix(in srgb, var(--header-gradient-base-color), var(--text-normal) 60%);
  --h6-color: color-mix(in srgb, var(--header-gradient-base-color), var(--text-normal) 80%);
}

.headings-rainbow {
  --h1-color: var(--color-rainbow-1);
  --h2-color: var(--color-rainbow-2);
  --h3-color: var(--color-rainbow-3);
  --h4-color: var(--color-rainbow-4);
  --h5-color: var(--color-rainbow-5);
  --h6-color: var(--color-rainbow-6);
}
