import styled, { css } from "styled-components";
export const heading01 = css `
	font-size: var(--cds-heading-01-font-size);
	font-weight: var(--cds-heading-01-font-weight);
	letter-spacing: var(--cds-heading-01-letter-spacing);
	line-height: var(--cds-heading-01-line-height);
`;
export const heading02 = css `
	font-size: var(--cds-heading-02-font-size);
	font-weight: var(--cds-heading-02-font-weight);
	letter-spacing: var(--cds-heading-02-letter-spacing);
	line-height: var(--cds-heading-02-line-height);
`;
export const heading03 = css `
	font-size: var(--cds-heading-03-font-size);
	font-weight: var(--cds-heading-03-font-weight);
	letter-spacing: var(--cds-heading-03-letter-spacing);
	line-height: var(--cds-heading-03-line-height);
`;
export const heading04 = css `
	font-size: var(--cds-heading-04-font-size);
	font-weight: var(--cds-heading-04-font-weight);
	letter-spacing: var(--cds-heading-04-letter-spacing);
	line-height: var(--cds-heading-04-line-height);
`;
export const heading05 = css `
	font-size: var(--cds-heading-05-font-size);
	font-weight: var(--cds-heading-05-font-weight);
	letter-spacing: var(--cds-heading-05-letter-spacing);
	line-height: var(--cds-heading-05-line-height);
`;
export const heading06 = css `
	font-size: var(--cds-heading-06-font-size);
	font-weight: var(--cds-heading-06-font-weight);
	letter-spacing: var(--cds-heading-06-letter-spacing);
	line-height: var(--cds-heading-06-line-height);
`;
export const body02 = css `
	font-size: var(--cds-body-02-font-size);
	font-weight: var(--cds-body-02-font-weight);
	letter-spacing: var(--cds-body-02-letter-spacing);
	line-height: var(--cds-body-02-line-height);
`;
export const Body02 = styled.p `
	${body02}
`;
export const body01 = css `
	font-size: var(--cds-body-01-font-size);
	font-weight: var(--cds-body-01-font-weight);
	letter-spacing: var(--cds-body-01-letter-spacing);
	line-height: var(--cds-body-01-line-height);
`;
export const Body01 = styled.p `
	${body01}
`;
export const fontMapping = css `
	h1 {
		${heading04}
	}

	h2 {
		${heading03}
	}

	h3 {
		${heading02}
	}

	h4 {
		${heading01}
	}

	p {
		${body01}
	}
`;
export const DefaultStyleWrapper = styled.div `
	${fontMapping}
`;
