import { style, styleVariants } from "@vanilla-extract/css";
import { theme } from "../../style/theme";
export let typographyVariants = {
    large: "",
    size: "",
    small: "",
};
export let displayBase = style({
    lineHeight: "1.55",
    letterSpacing: "0.02em",
    fontWeight: "800",
    margin: 0,
});
export let display = styleVariants({
    large: [
        displayBase,
        {
            fontSize: `calc(${theme.typography.display} * 1.2)`,
        },
    ],
    size: [
        displayBase,
        {
            fontSize: theme.typography.display,
        },
    ],
    small: [
        displayBase,
        {
            fontSize: `calc(${theme.typography.display} * 0.9)`,
        },
    ],
});
let titleBase = style({
    lineHeight: "1.6",
    fontWeight: "600",
    letterSpacing: "0.025em",
    margin: 0,
});
export let title = styleVariants({
    large: [
        titleBase,
        {
            fontSize: `calc(${theme.typography.title} * 1.2)`,
            fontWeight: "700",
            letterSpacing: "0.02em",
            lineHeight: "1.55",
        },
    ],
    size: [
        {
            fontSize: theme.typography.title,
        },
    ],
    small: [
        {
            fontSize: `calc(${theme.typography.title} * 0.9)`,
            letterSpacing: "0.03em",
        },
    ],
});
export let subtitleBase = style({
    fontWeight: "500",
    lineHeight: "1.6",
    letterSpacing: "0.03em",
    margin: 0,
});
export let subtitle = styleVariants({
    large: [
        subtitleBase,
        {
            fontSize: `calc(${theme.typography.subtitle} * 1.2)`,
        },
    ],
    size: [
        subtitleBase,
        {
            fontSize: theme.typography.subtitle,
        },
    ],
    small: [
        subtitleBase,
        {
            fontSize: `calc(${theme.typography.subtitle} - 0.9)`,
            lineHeight: "1.65em",
        },
    ],
});
export let bodyBase = style({
    fontWeight: "400",
    lineHeight: "1.65",
    letterSpacing: "0.03em",
});
export let body = styleVariants({
    large: [
        bodyBase,
        {
            fontSize: `calc(${theme.typography.body} * 1.2)`,
        },
    ],
    size: [
        bodyBase,
        {
            fontSize: theme.typography.body,
        },
    ],
    small: [
        bodyBase,
        {
            fontSize: `calc(${theme.typography.body} - 0.9)`,
        },
    ],
});
export let caption = styleVariants({
    large: [
        bodyBase,
        {
            fontSize: `calc(${theme.typography.caption} * 1.2)`,
        },
    ],
    size: [
        bodyBase,
        {
            fontSize: `max(13px, ${theme.typography.caption})`,
        },
    ],
    small: [
        bodyBase,
        {
            fontSize: `max(12px, calc(${theme.typography.caption} * 0.9))`,
            fontWeight: "300",
        },
    ],
});
export let overline = style({
    fontSize: theme.typography.overline,
    fontWeight: "500",
    lineHeight: "1.65",
    letterSpacing: "0.03em",
});