import styled, { css } from "styled-components";
const typographyTages = [
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "p",
    "span",
];
export const T = styled.span.attrs(({ as, variant }) => {
    const asFromVariant = typographyTages.find((e) => e === variant?.split("-")[0]);
    return {
        as: as ?? asFromVariant ?? "span",
    };
}) `
  ${({ theme: oldTheme, bold, gray, error, variant = "p-md" }) => {
    const theme = oldTheme.new;
    const COMMON_STYLES = css `
      margin: 0;
      font-family: ${theme?.typography.fontFamily};
      color: ${theme?.typography.baseColor};
    `;
    const BOLD_STYLES = css `
      font-weight: ${theme?.typography.bold};
    `;
    const GRAY_STYLES = css `
      color: ${theme?.typography.lightColor};
    `;
    const ERROR_STYLES = css `
      color: ${theme?.typography.warningColor};
    `;
    return css `
      ${COMMON_STYLES};

      font-weight: ${theme?.typography[variant]?.fontWeight ?? "500"};
      font-size: ${theme?.typography[variant]?.fontSize ?? "22px"};
      line-height: ${theme?.typography[variant]?.lineHeight ?? "26px"};
      text-decoration-line: ${theme?.typography[variant]?.textDecorationLine ??
        "unset"};

      ${() => theme?.breakpoints?.down?.("sm")} {
        font-weight: ${theme?.typography[variant]?.mobileFontWeight};
        font-size: ${theme?.typography[variant]?.mobileFontSize};
        line-height: ${theme?.typography[variant]?.mobileLineHeigth};
        text-decoration-line: ${theme?.typography[variant]
        ?.textDecorationLine ?? "unset"};
      }

      ${() => (bold ? BOLD_STYLES : "")}
      ${() => (gray ? GRAY_STYLES : "")}
      ${() => (error ? ERROR_STYLES : "")}
    `;
}}
`;
export const F26 = styled(T) `
  font-size: 26px;
`;
export const H1 = styled(T).attrs(() => ({ as: "h1" })) `
  font-weight: ${({ theme }) => theme.new?.typography?.h1?.fontWeight ?? 900};
  font-size: ${({ theme }) => theme.new?.typography?.h1?.fontSize ?? "28px"};
  line-height: ${({ theme }) => theme.new?.typography?.h1?.lineHeight ?? "34px"};
  ${({ theme }) => theme.new?.breakpoints?.down?.("sm")} {
    font-weight: ${({ theme }) => theme.new?.typography?.h1?.mobileFontWeight};
    font-size: ${({ theme }) => theme.new?.typography?.h1?.mobileFontSize};
    line-height: ${({ theme }) => theme.new?.typography?.h1?.mobileLineHeigth};
  }
`;
export const H2 = styled(T).attrs(() => ({ as: "h2" })) `
  font-weight: ${({ theme }) => theme.new?.typography?.h2?.fontWeight ?? 900};
  font-size: ${({ theme }) => theme.new?.typography?.h2?.fontSize ?? "24px"};
  line-height: ${({ theme }) => theme.new?.typography?.h2?.lineHeight ?? "30px"};
  ${({ theme }) => theme.new?.breakpoints?.down?.("sm")} {
    font-weight: ${({ theme }) => theme.new?.typography?.h2?.mobileFontWeight};
    font-size: ${({ theme }) => theme.new?.typography?.h2?.mobileFontSize};
    line-height: ${({ theme }) => theme.new?.typography?.h2?.mobileLineHeigth};
  }
`;
export const H3 = styled(T).attrs(() => ({ as: "h3" })) `
  font-weight: ${({ theme }) => theme.new?.typography?.h3?.fontWeight ?? 700};
  font-size: ${({ theme }) => theme.new?.typography?.h3?.fontSize ?? "20px"};
  line-height: ${({ theme }) => theme.new?.typography?.h3?.lineHeight ?? "26px"};
  ${({ theme }) => theme.new?.breakpoints?.down?.("sm")} {
    font-weight: ${({ theme }) => theme.new?.typography?.h3?.mobileFontWeight};
    font-size: ${({ theme }) => theme.new?.typography?.h3?.mobileFontSize};
    line-height: ${({ theme }) => theme.new?.typography?.h3?.mobileLineHeigth};
  }
`;
export const H4 = styled(T).attrs(() => ({ as: "h4" })) `
  font-weight: ${({ theme }) => theme.new?.typography?.h4?.fontWeight ?? 700};
  font-size: ${({ theme }) => theme.new?.typography?.h4?.fontSize ?? "16px"};
  line-height: ${({ theme }) => theme.new?.typography?.h4?.lineHeight ?? "22px"};
  ${({ theme }) => theme.new?.breakpoints?.down?.("sm")} {
    font-weight: ${({ theme }) => theme.new?.typography?.h4?.mobileFontWeight};
    font-size: ${({ theme }) => theme.new?.typography?.h4?.mobileFontSize};
    line-height: ${({ theme }) => theme.new?.typography?.h4?.mobileLineHeigth};
  }
`;
export const T14 = T;
/**
 * @deprecated use the T comp instead
 */
export const P = ["xxl", "xl", "lg", "md", "sm", "xs"].reduce((acc, cur) => {
    return {
        ...acc,
        [cur.toUpperCase()]: styled(T).attrs(() => ({ as: "p" })) `
      ${({ theme: t, bold }) => {
            const theme = t.new;
            const BOLD_STYLES = css `
          font-weight: ${theme?.typography?.bold ?? "700"};
        `;
            // TODO: other the mobile theme declaration for easy use
            return css `
          font-weight: ${theme?.typography?.[`p-${cur}`]?.fontWeight ?? "500"};
          font-size: ${theme?.typography?.[`p-${cur}`]?.fontSize ?? "22px"};
          line-height: ${theme?.typography?.[`p-${cur}`]?.lineHeight ?? "26px"};

          ${() => theme?.breakpoints?.down?.("sm")} {
            font-weight: ${theme?.typography?.[`p-${cur}`]?.mobileFontWeight};
            font-size: ${theme?.typography?.[`p-${cur}`]?.mobileFontSize};
            line-height: ${theme?.typography?.[`p-${cur}`]?.mobileLineHeigth};
          }

          ${() => (bold ? BOLD_STYLES : "")}
        `;
        }}
      }
    `,
    };
}, {});
export const T26 = styled(T) `
  font-size: 26px;
  line-height: 22px;
`;
export const T20 = styled(T) `
  font-size: 20px;
  line-height: 22px;
`;
export const T18 = styled(T) `
  font-size: 18px;
  line-height: 22px;
`;
export const T16 = styled(T) `
  font-size: 16px;
  line-height: 20px;
`;
export const T12 = styled(T) `
  font-size: 12px;
  line-height: 16px;
`;
export const T10 = styled(T) `
  font-size: 10px;
  line-height: 14px;
`;
export const T24 = styled(T) `
  font-size: 24px;
  line-height: 28px;
`;
export const T28 = styled(T) `
  font-size: 28px;
  line-height: 32px;
`;
export const E10 = styled(T10) `
  color: ${({ theme }) => theme.new?.typography?.warningColor};
`;
export const E12 = styled(T12) `
  color: ${({ theme }) => theme.new?.typography?.warningColor};
`;
export const G10 = styled(T10) `
  color: ${({ theme }) => theme.new?.typography?.lightColor};
`;
export const G12 = styled(T12) `
  color: ${({ theme }) => theme.new?.typography?.lightColor};
`;
export const G14 = styled(T14) `
  color: ${({ theme }) => theme.new?.typography?.lightColor};
`;
export const B18 = styled(T18) `
  font-family: "Bold";
  font-weight: 700;
`;
export const B16 = styled(T16) `
  font-family: "Bold";
  font-weight: 700;
`;
export const B14 = styled(T14) `
  font-family: "Bold";
  font-weight: 700;
`;
export const B12 = styled(T12) `
  font-family: "Bold";
  font-weight: 700;
`;
export const B24 = styled(T24) `
  font-family: "Bold";
  font-weight: 700;
`;
export const B28 = styled(T28) `
  font-family: "Bold";
  font-weight: 700;
`;
export default Object.assign(T, 
/**
 * @deprecated use the T comp like: <T variant={"h1"}>text</T>
 */
{
    H1,
    H2,
    H3,
    H4,
    T10,
    T12,
    T14,
    T16,
    T18,
    T20,
    T24,
    T26,
    T28,
    F26,
    E10,
    E12,
    G10,
    G12,
    G14,
    B18,
    B16,
    B14,
    B12,
    B24,
    B28,
});
//# sourceMappingURL=typography.js.map