import { createThemeContract, globalStyle, style } from "@vanilla-extract/css";
import { Hover, MinWidth } from "../media.ts";

export const richTextTheme = createThemeContract({
  headingFont: null,
  bodyFont: null,
  emphasisFont: null,
});

export const content = style({
  fontFamily: richTextTheme.bodyFont,
});

globalStyle(`${content} > :last-child`, {
  marginBlockEnd: "0",
});

globalStyle(`${content} > :first-child`, {
  marginBlockStart: "0",
});

globalStyle(`${content} em`, {
  fontFamily: richTextTheme.emphasisFont,
});

globalStyle(`${content} :is(h1, h2, h3, h4, h5, h6)`, {
  fontFamily: richTextTheme.headingFont,
  lineHeight: 1.25,
  fontWeight: 600,
});

globalStyle(`${content} h2`, {
  fontSize: "1.75rem",
  marginBlockStart: "1lh",
  marginBlockEnd: "0.5lh",
});

globalStyle(`${content} h3`, {
  fontSize: "1.5rem",
  marginBlockStart: "1lh",
  marginBlockEnd: "0.5lh",
});

globalStyle(`${content} h4`, {
  fontSize: "1.125rem",
  marginBlockStart: "1lh",
  marginBlockEnd: "0.5lh",
});

globalStyle(`${content} h5`, {
  fontSize: "1rem",
  marginBlockStart: "1lh",
  marginBlockEnd: "0.5lh",
});

globalStyle(`${content} :is(p, li)`, {
  fontSize: "1rem",
  lineHeight: 1.5,
});

globalStyle(`${content} :is(ul, ol, p)`, {
  marginBlock: "0.5lh",
});

globalStyle(`${content} :is(ul, ol)`, {
  paddingInlineStart: "1.25em",
});

globalStyle(`${content} ul`, {
  listStyle: "disc",
});

globalStyle(`${content} ol`, {
  listStyle: "decimal",
});

globalStyle(`${content} hr`, {
  marginBlock: "2.5lh",
  borderBlockStart: `1px dashed currentcolor`,
});

globalStyle(`${content} blockquote`, {
  marginInlineStart: "0",
  paddingInlineStart: "1lh",
  borderInlineStart: `1px dashed currentcolor`,
});

globalStyle(`${content} a`, {
  display: "inline",
  textDecoration: "underline",
  textDecorationThickness: "1px",
  textUnderlineOffset: "0.125em",
  textDecorationColor: "hsl(from currentcolor h s calc(l + 50))",
  transition: "text-decoration-color 200ms",
});

globalStyle(`${content} a:hover`, {
  "@media": {
    [Hover.HOVER]: {
      transition: "text-decoration-color 100ms",
      textDecorationColor: "currentcolor",
    },
  },
});

globalStyle(`${content} img`, {
  display: "block",
  maxInlineSize: "100%",
  marginBlock: "1lh",
});

globalStyle(`${content} img[src *= "rounded"]`, {
  borderRadius: "0.25rem",
});

globalStyle(`${content} img[src*="float"]`, {
  "@media": {
    [MinWidth.MEDIUM]: {
      margin: "0 0 1lh 1lh",
      float: "inline-end",
      maxInlineSize: "50%",
    },
  },
});

globalStyle(`${content} img[src*="rotate"]`, {
  "@media": {
    [MinWidth.MEDIUM]: {
      rotate: "3deg",
    },
  },
});

globalStyle(`${content} code`, {
  wordBreak: "break-word",
});

globalStyle(`${content} [src $= "?icon"]`, {
  position: "relative",
  display: "inline-block",
  backgroundColor: "white",
  width: "1.25em",
  borderRadius: "0.15em",
  border: "1px solid #e2e2e2",
  marginBlock: "-0.25em",
});