25. lib / css / typography.css

content_copy

1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	/* This file is generated */
18
19	/* DO NOT EDIT */
20
21	:root {
22	/* Label Small */
23	--md-sys-typescale-label-small-text-transform: unset;
24	--md-sys-typescale-label-small-axis-value: unset;
25	--md-sys-typescale-label-small-font-style: unset;
26	--md-sys-typescale-label-small-text-decoration: unset;
27	/* Label Small line height */
28	--md-sys-typescale-label-small-line-height-value: 16px;
29	--md-sys-typescale-label-small-line-height-unit: 2px;
30	--md-sys-typescale-label-small-line-height: 16px;
31	/* Label Small font tracking */
32	--md-sys-typescale-label-small-tracking-value: 0.5px;
33	--md-sys-typescale-label-small-tracking-unit: 2px;
34	--md-sys-typescale-label-small-tracking: 0.5px;
35	/* Label Small font size */
36	--md-sys-typescale-label-small-size-value: 11px;
37	--md-sys-typescale-label-small-size-unit: 2px;
38	--md-sys-typescale-label-small-size: 11px;
39	/* Label Small font weight */
40	--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
41	/* Label Small font name */
42	--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
43	/* Label Medium */
44	--md-sys-typescale-label-medium-axis-value: unset;
45	--md-sys-typescale-label-medium-font-style: unset;
46	--md-sys-typescale-label-medium-text-decoration: unset;
47	/* Label Medium text transform */
48	--md-sys-typescale-label-medium-text-transform: 1;
49	/* Label Medium line height */
50	--md-sys-typescale-label-medium-line-height-value: 16px;
51	--md-sys-typescale-label-medium-line-height-unit: 2px;
52	--md-sys-typescale-label-medium-line-height: 16px;
53	/* Label Medium font tracking */
54	--md-sys-typescale-label-medium-tracking-value: 0.5px;
55	--md-sys-typescale-label-medium-tracking-unit: 2px;
56	--md-sys-typescale-label-medium-tracking: 0.5px;
57	/* Label Medium font size */
58	--md-sys-typescale-label-medium-size-value: 12px;
59	--md-sys-typescale-label-medium-size-unit: 2px;
60	--md-sys-typescale-label-medium-size: 12px;
61	/* Label Medium font weight */
62	--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
63	/* Label Medium font name */
64	--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
65	/* Label Large */
66	--md-sys-typescale-label-large-text-transform: unset;
67	--md-sys-typescale-label-large-axis-value: unset;
68	--md-sys-typescale-label-large-font-style: unset;
69	--md-sys-typescale-label-large-text-decoration: unset;
70	/* Label Large line height */
71	--md-sys-typescale-label-large-line-height-value: 20px;
72	--md-sys-typescale-label-large-line-height-unit: 2px;
73	--md-sys-typescale-label-large-line-height: 20px;
74	/* Label Large font tracking */
75	--md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
76	--md-sys-typescale-label-large-tracking-unit: 2px;
77	--md-sys-typescale-label-large-tracking: 0.10000000149011612px;
78	/* Label Large font size */
79	--md-sys-typescale-label-large-size-value: 14px;
80	--md-sys-typescale-label-large-size-unit: 2px;
81	--md-sys-typescale-label-large-size: 14px;
82	/* Label Large font weight */
83	--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
84	/* Label Large font name */
85	--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
86	/* Body Small */
87	--md-sys-typescale-body-small-text-transform: unset;
88	--md-sys-typescale-body-small-axis-value: unset;
89	--md-sys-typescale-body-small-font-style: unset;
90	--md-sys-typescale-body-small-text-decoration: unset;
91	/* Body Small line height */
92	--md-sys-typescale-body-small-line-height-value: 16px;
93	--md-sys-typescale-body-small-line-height-unit: 2px;
94	--md-sys-typescale-body-small-line-height: 16px;
95	/* Body Small font tracking */
96	--md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
97	--md-sys-typescale-body-small-tracking-unit: 2px;
98	--md-sys-typescale-body-small-tracking: 0.4000000059604645px;
99	/* Body Small font size */
100	--md-sys-typescale-body-small-size-value: 12px;
101	--md-sys-typescale-body-small-size-unit: 2px;
102	--md-sys-typescale-body-small-size: 12px;
103	/* Body Small font weight */
104	--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
105	/* Body Small font name */
106	--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
107	/* Body Medium */
108	--md-sys-typescale-body-medium-text-transform: unset;
109	--md-sys-typescale-body-medium-axis-value: unset;
110	--md-sys-typescale-body-medium-font-style: unset;
111	--md-sys-typescale-body-medium-text-decoration: unset;
112	/* Body Medium line height */
113	--md-sys-typescale-body-medium-line-height-value: 20px;
114	--md-sys-typescale-body-medium-line-height-unit: 2px;
115	--md-sys-typescale-body-medium-line-height: 20px;
116	/* Body Medium font tracking */
117	--md-sys-typescale-body-medium-tracking-value: 0.25px;
118	--md-sys-typescale-body-medium-tracking-unit: 2px;
119	--md-sys-typescale-body-medium-tracking: 0.25px;
120	/* Body Medium font size */
121	--md-sys-typescale-body-medium-size-value: 14px;
122	--md-sys-typescale-body-medium-size-unit: 2px;
123	--md-sys-typescale-body-medium-size: 14px;
124	/* Body Medium font weight */
125	--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
126	/* Body Medium font name */
127	--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
128	/* Body Large */
129	--md-sys-typescale-body-large-text-transform: unset;
130	--md-sys-typescale-body-large-axis-value: unset;
131	--md-sys-typescale-body-large-font-style: unset;
132	--md-sys-typescale-body-large-text-decoration: unset;
133	/* Body Large line height */
134	--md-sys-typescale-body-large-line-height-value: 24px;
135	--md-sys-typescale-body-large-line-height-unit: 2px;
136	--md-sys-typescale-body-large-line-height: 24px;
137	/* Body Large font tracking */
138	--md-sys-typescale-body-large-tracking-value: 0.5px;
139	--md-sys-typescale-body-large-tracking-unit: 2px;
140	--md-sys-typescale-body-large-tracking: 0.5px;
141	/* Body Large font size */
142	--md-sys-typescale-body-large-size-value: 16px;
143	--md-sys-typescale-body-large-size-unit: 2px;
144	--md-sys-typescale-body-large-size: 16px;
145	/* Body Large font weight */
146	--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
147	/* Body Large font name */
148	--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
149	/* Title Small */
150	--md-sys-typescale-title-small-text-transform: unset;
151	--md-sys-typescale-title-small-axis-value: unset;
152	--md-sys-typescale-title-small-font-style: unset;
153	--md-sys-typescale-title-small-text-decoration: unset;
154	/* Title Small line height */
155	--md-sys-typescale-title-small-line-height-value: 20px;
156	--md-sys-typescale-title-small-line-height-unit: 2px;
157	--md-sys-typescale-title-small-line-height: 20px;
158	/* Title Small font tracking */
159	--md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
160	--md-sys-typescale-title-small-tracking-unit: 2px;
161	--md-sys-typescale-title-small-tracking: 0.10000000149011612px;
162	/* Title Small font size */
163	--md-sys-typescale-title-small-size-value: 14px;
164	--md-sys-typescale-title-small-size-unit: 2px;
165	--md-sys-typescale-title-small-size: 14px;
166	/* Title Small font weight */
167	--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
168	/* Title Small font name */
169	--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
170	/* Title Medium */
171	--md-sys-typescale-title-medium-text-transform: unset;
172	--md-sys-typescale-title-medium-axis-value: unset;
173	--md-sys-typescale-title-medium-font-style: unset;
174	--md-sys-typescale-title-medium-text-decoration: unset;
175	/* Title Medium line height */
176	--md-sys-typescale-title-medium-line-height-value: 24px;
177	--md-sys-typescale-title-medium-line-height-unit: 2px;
178	--md-sys-typescale-title-medium-line-height: 24px;
179	/* Title Medium font tracking */
180	--md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
181	--md-sys-typescale-title-medium-tracking-unit: 2px;
182	--md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
183	/* Title Medium font size */
184	--md-sys-typescale-title-medium-size-value: 16px;
185	--md-sys-typescale-title-medium-size-unit: 2px;
186	--md-sys-typescale-title-medium-size: 16px;
187	/* Title Medium font weight */
188	--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
189	/* Title Medium font name */
190	--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
191	/* Title Large */
192	--md-sys-typescale-title-large-text-transform: unset;
193	--md-sys-typescale-title-large-axis-value: unset;
194	--md-sys-typescale-title-large-font-style: unset;
195	--md-sys-typescale-title-large-text-decoration: unset;
196	/* Title Large line height */
197	--md-sys-typescale-title-large-line-height-value: 28px;
198	--md-sys-typescale-title-large-line-height-unit: 2px;
199	--md-sys-typescale-title-large-line-height: 28px;
200	/* Title Large font tracking */
201	--md-sys-typescale-title-large-tracking-value: 0px;
202	--md-sys-typescale-title-large-tracking-unit: 2px;
203	--md-sys-typescale-title-large-tracking: 0px;
204	/* Title Large font size */
205	--md-sys-typescale-title-large-size-value: 22px;
206	--md-sys-typescale-title-large-size-unit: 2px;
207	--md-sys-typescale-title-large-size: 22px;
208	/* Title Large font weight */
209	--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
210	/* Title Large font name */
211	--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
212	/* Headline Small */
213	--md-sys-typescale-headline-small-text-transform: unset;
214	--md-sys-typescale-headline-small-axis-value: unset;
215	--md-sys-typescale-headline-small-font-style: unset;
216	--md-sys-typescale-headline-small-text-decoration: unset;
217	/* Headline Small line height */
218	--md-sys-typescale-headline-small-line-height-value: 32px;
219	--md-sys-typescale-headline-small-line-height-unit: 2px;
220	--md-sys-typescale-headline-small-line-height: 32px;
221	/* Headline Small font tracking */
222	--md-sys-typescale-headline-small-tracking-value: 0px;
223	--md-sys-typescale-headline-small-tracking-unit: 2px;
224	--md-sys-typescale-headline-small-tracking: 0px;
225	/* Headline Small font size */
226	--md-sys-typescale-headline-small-size-value: 24px;
227	--md-sys-typescale-headline-small-size-unit: 2px;
228	--md-sys-typescale-headline-small-size: 24px;
229	/* Headline Small font weight */
230	--md-sys-typescale-headline-small-weight: var(
231	--md-ref-typeface-weight-regular
232	);
233	/* Headline Small font name */
234	--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
235	/* Headline Medium */
236	--md-sys-typescale-headline-medium-text-transform: unset;
237	--md-sys-typescale-headline-medium-axis-value: unset;
238	--md-sys-typescale-headline-medium-font-style: unset;
239	--md-sys-typescale-headline-medium-text-decoration: unset;
240	/* Headline Medium line height */
241	--md-sys-typescale-headline-medium-line-height-value: 36px;
242	--md-sys-typescale-headline-medium-line-height-unit: 2px;
243	--md-sys-typescale-headline-medium-line-height: 36px;
244	/* Headline Medium font tracking */
245	--md-sys-typescale-headline-medium-tracking-value: 0px;
246	--md-sys-typescale-headline-medium-tracking-unit: 2px;
247	--md-sys-typescale-headline-medium-tracking: 0px;
248	/* Headline Medium font size */
249	--md-sys-typescale-headline-medium-size-value: 28px;
250	--md-sys-typescale-headline-medium-size-unit: 2px;
251	--md-sys-typescale-headline-medium-size: 28px;
252	/* Headline Medium font weight */
253	--md-sys-typescale-headline-medium-weight: var(
254	--md-ref-typeface-weight-regular
255	);
256	/* Headline Medium font name */
257	--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
258	/* Headline Large */
259	--md-sys-typescale-headline-large-text-transform: unset;
260	--md-sys-typescale-headline-large-axis-value: unset;
261	--md-sys-typescale-headline-large-font-style: unset;
262	--md-sys-typescale-headline-large-text-decoration: unset;
263	/* Headline Large line height */
264	--md-sys-typescale-headline-large-line-height-value: 40px;
265	--md-sys-typescale-headline-large-line-height-unit: 2px;
266	--md-sys-typescale-headline-large-line-height: 40px;
267	/* Headline Large font tracking */
268	--md-sys-typescale-headline-large-tracking-value: 0px;
269	--md-sys-typescale-headline-large-tracking-unit: 2px;
270	--md-sys-typescale-headline-large-tracking: 0px;
271	/* Headline Large font size */
272	--md-sys-typescale-headline-large-size-value: 32px;
273	--md-sys-typescale-headline-large-size-unit: 2px;
274	--md-sys-typescale-headline-large-size: 32px;
275	/* Headline Large font name */
276	--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
277	/* Headline Large font weight */
278	--md-sys-typescale-headline-large-weight: var(
279	--md-ref-typeface-weight-regular
280	);
281	/* Display Small */
282	--md-sys-typescale-display-small-text-transform: unset;
283	--md-sys-typescale-display-small-axis-value: unset;
284	--md-sys-typescale-display-small-font-style: unset;
285	--md-sys-typescale-display-small-text-decoration: unset;
286	/* Display Small line height */
287	--md-sys-typescale-display-small-line-height-value: 44px;
288	--md-sys-typescale-display-small-line-height-unit: 2px;
289	--md-sys-typescale-display-small-line-height: 44px;
290	/* Display Small font tracking */
291	--md-sys-typescale-display-small-tracking-value: 0px;
292	--md-sys-typescale-display-small-tracking-unit: 2px;
293	--md-sys-typescale-display-small-tracking: 0px;
294	/* Display Small font size */
295	--md-sys-typescale-display-small-size-value: 36px;
296	--md-sys-typescale-display-small-size-unit: 2px;
297	--md-sys-typescale-display-small-size: 36px;
298	/* Display Small font weight */
299	--md-sys-typescale-display-small-weight: var(
300	--md-ref-typeface-weight-regular
301	);
302	/* Display Small font name */
303	--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
304	/* Display Medium */
305	--md-sys-typescale-display-medium-text-transform: unset;
306	--md-sys-typescale-display-medium-axis-value: unset;
307	--md-sys-typescale-display-medium-font-style: unset;
308	--md-sys-typescale-display-medium-text-decoration: unset;
309	/* Display Medium line height */
310	--md-sys-typescale-display-medium-line-height-value: 52px;
311	--md-sys-typescale-display-medium-line-height-unit: 2px;
312	--md-sys-typescale-display-medium-line-height: 52px;
313	/* Display Medium font tracking */
314	--md-sys-typescale-display-medium-tracking-value: 0px;
315	--md-sys-typescale-display-medium-tracking-unit: 2px;
316	--md-sys-typescale-display-medium-tracking: 0px;
317	/* Display Medium font size */
318	--md-sys-typescale-display-medium-size-value: 45px;
319	--md-sys-typescale-display-medium-size-unit: 2px;
320	--md-sys-typescale-display-medium-size: 45px;
321	/* Display Medium font weight */
322	--md-sys-typescale-display-medium-weight: var(
323	--md-ref-typeface-weight-regular
324	);
325	/* Display Medium font name */
326	--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
327	/* Display Large */
328	--md-sys-typescale-display-large-text-transform: unset;
329	--md-sys-typescale-display-large-axis-value: unset;
330	--md-sys-typescale-display-large-font-style: unset;
331	--md-sys-typescale-display-large-text-decoration: unset;
332	/* Display Large line height */
333	--md-sys-typescale-display-large-line-height-value: 64px;
334	--md-sys-typescale-display-large-line-height-unit: 2px;
335	--md-sys-typescale-display-large-line-height: 64px;
336	/* Display Large font tracking */
337	--md-sys-typescale-display-large-tracking-value: -0.25px;
338	--md-sys-typescale-display-large-tracking-unit: 2px;
339	--md-sys-typescale-display-large-tracking: -0.25px;
340	/* Display Large font size */
341	--md-sys-typescale-display-large-size-value: 57px;
342	--md-sys-typescale-display-large-size-unit: 2px;
343	--md-sys-typescale-display-large-size: 57px;
344	/* Display Large font weight */
345	--md-sys-typescale-display-large-weight: var(
346	--md-ref-typeface-weight-regular
347	);
348	/* Display Large font name */
349	--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
350	/* Plain typeface */
351	--md-ref-typeface-plain: var(--Font);
352	/* Brand typeface */
353	--md-ref-typeface-brand: var(--Font);
354	/* Bold weight */
355	--md-ref-typeface-weight-bold: 700;
356	/* Medium weight */
357	--md-ref-typeface-weight-medium: 500;
358	/* Regular weight */
359	--md-ref-typeface-weight-regular: 400;
360	}
361
362	/* Label Small */
363	.label-small {
364	font-family: var(--md-sys-typescale-label-small-font);
365	font-weight: var(--md-sys-typescale-label-small-weight);
366	font-size: var(--md-sys-typescale-label-small-size);
367	font-style: var(--md-sys-typescale-label-small-font-style);
368	letter-spacing: var(--md-sys-typescale-label-small-tracking);
369	line-height: var(--md-sys-typescale-label-small-line-height);
370	text-transform: var(--md-sys-typescale-label-small-text-transform);
371	text-decoration: var(--md-sys-typescale-label-small-text-decoration);
372	}
373	/* Label Medium */
374	.label-medium {
375	font-family: var(--md-sys-typescale-label-medium-font);
376	font-weight: var(--md-sys-typescale-label-medium-weight);
377	font-size: var(--md-sys-typescale-label-medium-size);
378	font-style: var(--md-sys-typescale-label-medium-font-style);
379	letter-spacing: var(--md-sys-typescale-label-medium-tracking);
380	line-height: var(--md-sys-typescale-label-medium-line-height);
381	text-transform: var(--md-sys-typescale-label-medium-text-transform);
382	text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
383	}
384	/* Label Large */
385	.label-large {
386	font-family: var(--md-sys-typescale-label-large-font);
387	font-weight: var(--md-sys-typescale-label-large-weight);
388	font-size: var(--md-sys-typescale-label-large-size);
389	font-style: var(--md-sys-typescale-label-large-font-style);
390	letter-spacing: var(--md-sys-typescale-label-large-tracking);
391	line-height: var(--md-sys-typescale-label-large-line-height);
392	text-transform: var(--md-sys-typescale-label-large-text-transform);
393	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
394	}
395	/* Body Small */
396	.body-small {
397	font-family: var(--md-sys-typescale-body-small-font);
398	font-weight: var(--md-sys-typescale-body-small-weight);
399	font-size: var(--md-sys-typescale-body-small-size);
400	font-style: var(--md-sys-typescale-body-small-font-style);
401	letter-spacing: var(--md-sys-typescale-body-small-tracking);
402	line-height: var(--md-sys-typescale-body-small-line-height);
403	text-transform: var(--md-sys-typescale-body-small-text-transform);
404	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
405	}
406	/* Body Medium */
407	.body-medium {
408	font-family: var(--md-sys-typescale-body-medium-font);
409	font-weight: var(--md-sys-typescale-body-medium-weight);
410	font-size: var(--md-sys-typescale-body-medium-size);
411	font-style: var(--md-sys-typescale-body-medium-font-style);
412	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
413	line-height: var(--md-sys-typescale-body-medium-line-height);
414	text-transform: var(--md-sys-typescale-body-medium-text-transform);
415	text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
416	}
417	/* Body Large */
418	.body-large {
419	font-family: var(--md-sys-typescale-body-large-font);
420	font-weight: var(--md-sys-typescale-body-large-weight);
421	font-size: var(--md-sys-typescale-body-large-size);
422	font-style: var(--md-sys-typescale-body-large-font-style);
423	letter-spacing: var(--md-sys-typescale-body-large-tracking);
424	line-height: var(--md-sys-typescale-body-large-line-height);
425	text-transform: var(--md-sys-typescale-body-large-text-transform);
426	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
427	}
428	/* Title Small */
429	.title-small {
430	font-family: var(--md-sys-typescale-title-small-font);
431	font-weight: var(--md-sys-typescale-title-small-weight);
432	font-size: var(--md-sys-typescale-title-small-size);
433	font-style: var(--md-sys-typescale-title-small-font-style);
434	letter-spacing: var(--md-sys-typescale-title-small-tracking);
435	line-height: var(--md-sys-typescale-title-small-line-height);
436	text-transform: var(--md-sys-typescale-title-small-text-transform);
437	text-decoration: var(--md-sys-typescale-title-small-text-decoration);
438	}
439	/* Title Medium */
440	.title-medium {
441	font-family: var(--md-sys-typescale-title-medium-font);
442	font-weight: var(--md-sys-typescale-title-medium-weight);
443	font-size: var(--md-sys-typescale-title-medium-size);
444	font-style: var(--md-sys-typescale-title-medium-font-style);
445	letter-spacing: var(--md-sys-typescale-title-medium-tracking);
446	line-height: var(--md-sys-typescale-title-medium-line-height);
447	text-transform: var(--md-sys-typescale-title-medium-text-transform);
448	text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
449	}
450	/* Title Large */
451	.title-large {
452	font-family: var(--md-sys-typescale-title-large-font);
453	font-weight: var(--md-sys-typescale-title-large-weight);
454	font-size: var(--md-sys-typescale-title-large-size);
455	font-style: var(--md-sys-typescale-title-large-font-style);
456	letter-spacing: var(--md-sys-typescale-title-large-tracking);
457	line-height: var(--md-sys-typescale-title-large-line-height);
458	text-transform: var(--md-sys-typescale-title-large-text-transform);
459	text-decoration: var(--md-sys-typescale-title-large-text-decoration);
460	}
461	/* Headline Small */
462	.headline-small {
463	font-family: var(--md-sys-typescale-headline-small-font);
464	font-weight: var(--md-sys-typescale-headline-small-weight);
465	font-size: var(--md-sys-typescale-headline-small-size);
466	font-style: var(--md-sys-typescale-headline-small-font-style);
467	letter-spacing: var(--md-sys-typescale-headline-small-tracking);
468	line-height: var(--md-sys-typescale-headline-small-line-height);
469	text-transform: var(--md-sys-typescale-headline-small-text-transform);
470	text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
471	}
472	/* Headline Medium */
473	.headline-medium {
474	font-family: var(--md-sys-typescale-headline-medium-font);
475	font-weight: var(--md-sys-typescale-headline-medium-weight);
476	font-size: var(--md-sys-typescale-headline-medium-size);
477	font-style: var(--md-sys-typescale-headline-medium-font-style);
478	letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
479	line-height: var(--md-sys-typescale-headline-medium-line-height);
480	text-transform: var(--md-sys-typescale-headline-medium-text-transform);
481	text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
482	}
483	/* Headline Large */
484	.headline-large {
485	font-family: var(--md-sys-typescale-headline-large-font);
486	font-weight: var(--md-sys-typescale-headline-large-weight);
487	font-size: var(--md-sys-typescale-headline-large-size);
488	font-style: var(--md-sys-typescale-headline-large-font-style);
489	letter-spacing: var(--md-sys-typescale-headline-large-tracking);
490	line-height: var(--md-sys-typescale-headline-large-line-height);
491	text-transform: var(--md-sys-typescale-headline-large-text-transform);
492	text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
493	}
494	/* Display Small */
495	.display-small {
496	font-family: var(--md-sys-typescale-display-small-font);
497	font-weight: var(--md-sys-typescale-display-small-weight);
498	font-size: var(--md-sys-typescale-display-small-size);
499	font-style: var(--md-sys-typescale-display-small-font-style);
500	letter-spacing: var(--md-sys-typescale-display-small-tracking);
501	line-height: var(--md-sys-typescale-display-small-line-height);
502	text-transform: var(--md-sys-typescale-display-small-text-transform);
503	text-decoration: var(--md-sys-typescale-display-small-text-decoration);
504	}
505	/* Display Medium */
506	.display-medium {
507	font-family: var(--md-sys-typescale-display-medium-font);
508	font-weight: var(--md-sys-typescale-display-medium-weight);
509	font-size: var(--md-sys-typescale-display-medium-size);
510	font-style: var(--md-sys-typescale-display-medium-font-style);
511	letter-spacing: var(--md-sys-typescale-display-medium-tracking);
512	line-height: var(--md-sys-typescale-display-medium-line-height);
513	text-transform: var(--md-sys-typescale-display-medium-text-transform);
514	text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
515	}
516	/* Display Large */
517	.display-large {
518	font-family: var(--md-sys-typescale-display-large-font);
519	font-weight: var(--md-sys-typescale-display-large-weight);
520	font-size: var(--md-sys-typescale-display-large-size);
521	font-style: var(--md-sys-typescale-display-large-font-style);
522	letter-spacing: var(--md-sys-typescale-display-large-tracking);
523	line-height: var(--md-sys-typescale-display-large-line-height);
524	text-transform: var(--md-sys-typescale-display-large-text-transform);
525	text-decoration: var(--md-sys-typescale-display-large-text-decoration);
526	}
527

menu skip_previous skip_next