UNPKG

74.3 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-floating-label {
9 -moz-osx-font-smoothing: grayscale;
10 -webkit-font-smoothing: antialiased;
11 font-family: Roboto, sans-serif;
12 /* @alternate */
13 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
14 font-size: 1rem;
15 /* @alternate */
16 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
17 font-weight: 400;
18 /* @alternate */
19 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
20 letter-spacing: 0.009375em;
21 /* @alternate */
22 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
23 text-decoration: inherit;
24 /* @alternate */
25 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
26 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
27 text-transform: inherit;
28 /* @alternate */
29 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
30 position: absolute;
31 /* @noflip */
32 /*rtl:ignore*/
33 left: 0;
34 /* @noflip */
35 /*rtl:ignore*/
36 -webkit-transform-origin: left top;
37 /* @noflip */
38 /*rtl:ignore*/
39 transform-origin: left top;
40 line-height: 1.15rem;
41 text-align: left;
42 text-overflow: ellipsis;
43 white-space: nowrap;
44 cursor: text;
45 overflow: hidden;
46 /* @alternate */
47 will-change: transform;
48 transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
49 transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
50 transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
51}
52[dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {
53 /*rtl:begin:ignore*/
54 /* @noflip */
55 /*rtl:ignore*/
56 right: 0;
57 /* @noflip */
58 /*rtl:ignore*/
59 left: auto;
60 /* @noflip */
61 /*rtl:ignore*/
62 -webkit-transform-origin: right top;
63 /* @noflip */
64 /*rtl:ignore*/
65 transform-origin: right top;
66 /* @noflip */
67 /*rtl:ignore*/
68 text-align: right;
69 /*rtl:end:ignore*/
70}
71
72.mdc-floating-label--float-above {
73 cursor: auto;
74}
75
76.mdc-floating-label--required::after {
77 /* @noflip */
78 /*rtl:ignore*/
79 margin-left: 1px;
80 /* @noflip */
81 /*rtl:ignore*/
82 margin-right: 0px;
83 content: "*";
84}
85[dir=rtl] .mdc-floating-label--required, .mdc-floating-label--required[dir=rtl] {
86 /*rtl:begin:ignore*/
87 /*rtl:end:ignore*/
88}
89[dir=rtl] .mdc-floating-label--required::after, .mdc-floating-label--required[dir=rtl]::after {
90 /* @noflip */
91 /*rtl:ignore*/
92 margin-left: 0;
93 /* @noflip */
94 /*rtl:ignore*/
95 margin-right: 1px;
96}
97
98.mdc-floating-label--float-above {
99 -webkit-transform: translateY(-106%) scale(0.75);
100 transform: translateY(-106%) scale(0.75);
101}
102
103.mdc-floating-label--shake {
104 -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
105 animation: mdc-floating-label-shake-float-above-standard 250ms 1;
106}
107
108@-webkit-keyframes mdc-floating-label-shake-float-above-standard {
109 0% {
110 /* @noflip */
111 /*rtl:ignore*/
112 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
113 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
114 }
115 33% {
116 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
117 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
118 /* @noflip */
119 /*rtl:ignore*/
120 -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
121 transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
122 }
123 66% {
124 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
125 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
126 /* @noflip */
127 /*rtl:ignore*/
128 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
129 transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
130 }
131 100% {
132 /* @noflip */
133 /*rtl:ignore*/
134 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
135 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
136 }
137}
138
139@keyframes mdc-floating-label-shake-float-above-standard {
140 0% {
141 /* @noflip */
142 /*rtl:ignore*/
143 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
144 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
145 }
146 33% {
147 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
148 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
149 /* @noflip */
150 /*rtl:ignore*/
151 -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
152 transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
153 }
154 66% {
155 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
156 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
157 /* @noflip */
158 /*rtl:ignore*/
159 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
160 transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
161 }
162 100% {
163 /* @noflip */
164 /*rtl:ignore*/
165 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
166 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
167 }
168}
169.mdc-line-ripple::before, .mdc-line-ripple::after {
170 position: absolute;
171 bottom: 0;
172 left: 0;
173 width: 100%;
174 border-bottom-style: solid;
175 content: "";
176}
177.mdc-line-ripple::before {
178 border-bottom-width: 1px;
179 z-index: 1;
180}
181.mdc-line-ripple::after {
182 -webkit-transform: scaleX(0);
183 transform: scaleX(0);
184 border-bottom-width: 2px;
185 opacity: 0;
186 z-index: 2;
187}
188.mdc-line-ripple::after {
189 transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
190 transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
191 transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
192}
193
194.mdc-line-ripple--active::after {
195 -webkit-transform: scaleX(1);
196 transform: scaleX(1);
197 opacity: 1;
198}
199
200.mdc-line-ripple--deactivating::after {
201 opacity: 0;
202}
203
204.mdc-notched-outline {
205 display: flex;
206 position: absolute;
207 top: 0;
208 right: 0;
209 left: 0;
210 box-sizing: border-box;
211 width: 100%;
212 max-width: 100%;
213 height: 100%;
214 /* @noflip */
215 /*rtl:ignore*/
216 text-align: left;
217 pointer-events: none;
218}
219[dir=rtl] .mdc-notched-outline, .mdc-notched-outline[dir=rtl] {
220 /*rtl:begin:ignore*/
221 /* @noflip */
222 /*rtl:ignore*/
223 text-align: right;
224 /*rtl:end:ignore*/
225}
226
227.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
228 box-sizing: border-box;
229 height: 100%;
230 border-top: 1px solid;
231 border-bottom: 1px solid;
232 pointer-events: none;
233}
234.mdc-notched-outline__leading {
235 /* @noflip */
236 /*rtl:ignore*/
237 border-left: 1px solid;
238 /* @noflip */
239 /*rtl:ignore*/
240 border-right: none;
241 width: 12px;
242}
243[dir=rtl] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir=rtl] {
244 /*rtl:begin:ignore*/
245 /* @noflip */
246 /*rtl:ignore*/
247 border-left: none;
248 /* @noflip */
249 /*rtl:ignore*/
250 border-right: 1px solid;
251 /*rtl:end:ignore*/
252}
253
254.mdc-notched-outline__trailing {
255 /* @noflip */
256 /*rtl:ignore*/
257 border-left: none;
258 /* @noflip */
259 /*rtl:ignore*/
260 border-right: 1px solid;
261 flex-grow: 1;
262}
263[dir=rtl] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir=rtl] {
264 /*rtl:begin:ignore*/
265 /* @noflip */
266 /*rtl:ignore*/
267 border-left: 1px solid;
268 /* @noflip */
269 /*rtl:ignore*/
270 border-right: none;
271 /*rtl:end:ignore*/
272}
273
274.mdc-notched-outline__notch {
275 flex: 0 0 auto;
276 width: auto;
277 max-width: calc(100% - 12px * 2);
278}
279.mdc-notched-outline .mdc-floating-label {
280 display: inline-block;
281 position: relative;
282 max-width: 100%;
283}
284.mdc-notched-outline .mdc-floating-label--float-above {
285 text-overflow: clip;
286}
287.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
288 max-width: 133.3333333333%;
289}
290
291.mdc-notched-outline--notched .mdc-notched-outline__notch {
292 /* @noflip */
293 /*rtl:ignore*/
294 padding-left: 0;
295 /* @noflip */
296 /*rtl:ignore*/
297 padding-right: 8px;
298 border-top: none;
299}
300[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {
301 /*rtl:begin:ignore*/
302 /* @noflip */
303 /*rtl:ignore*/
304 padding-left: 8px;
305 /* @noflip */
306 /*rtl:ignore*/
307 padding-right: 0;
308 /*rtl:end:ignore*/
309}
310
311.mdc-notched-outline--no-label .mdc-notched-outline__notch {
312 display: none;
313}
314
315@-webkit-keyframes mdc-ripple-fg-radius-in {
316 from {
317 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
318 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
319 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
320 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
321 }
322 to {
323 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
324 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
325 }
326}
327
328@keyframes mdc-ripple-fg-radius-in {
329 from {
330 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
331 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
332 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
333 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
334 }
335 to {
336 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
337 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
338 }
339}
340@-webkit-keyframes mdc-ripple-fg-opacity-in {
341 from {
342 -webkit-animation-timing-function: linear;
343 animation-timing-function: linear;
344 opacity: 0;
345 }
346 to {
347 opacity: var(--mdc-ripple-fg-opacity, 0);
348 }
349}
350@keyframes mdc-ripple-fg-opacity-in {
351 from {
352 -webkit-animation-timing-function: linear;
353 animation-timing-function: linear;
354 opacity: 0;
355 }
356 to {
357 opacity: var(--mdc-ripple-fg-opacity, 0);
358 }
359}
360@-webkit-keyframes mdc-ripple-fg-opacity-out {
361 from {
362 -webkit-animation-timing-function: linear;
363 animation-timing-function: linear;
364 opacity: var(--mdc-ripple-fg-opacity, 0);
365 }
366 to {
367 opacity: 0;
368 }
369}
370@keyframes mdc-ripple-fg-opacity-out {
371 from {
372 -webkit-animation-timing-function: linear;
373 animation-timing-function: linear;
374 opacity: var(--mdc-ripple-fg-opacity, 0);
375 }
376 to {
377 opacity: 0;
378 }
379}
380.mdc-text-field--filled {
381 --mdc-ripple-fg-size: 0;
382 --mdc-ripple-left: 0;
383 --mdc-ripple-top: 0;
384 --mdc-ripple-fg-scale: 1;
385 --mdc-ripple-fg-translate-end: 0;
386 --mdc-ripple-fg-translate-start: 0;
387 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
388 will-change: transform, opacity;
389}
390.mdc-text-field--filled .mdc-text-field__ripple::before,
391.mdc-text-field--filled .mdc-text-field__ripple::after {
392 position: absolute;
393 border-radius: 50%;
394 opacity: 0;
395 pointer-events: none;
396 content: "";
397}
398.mdc-text-field--filled .mdc-text-field__ripple::before {
399 transition: opacity 15ms linear, background-color 15ms linear;
400 z-index: 1;
401 /* @alternate */
402 z-index: var(--mdc-ripple-z-index, 1);
403}
404.mdc-text-field--filled .mdc-text-field__ripple::after {
405 z-index: 0;
406 /* @alternate */
407 z-index: var(--mdc-ripple-z-index, 0);
408}
409.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {
410 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
411 transform: scale(var(--mdc-ripple-fg-scale, 1));
412}
413.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
414 top: 0;
415 /* @noflip */
416 /*rtl:ignore*/
417 left: 0;
418 -webkit-transform: scale(0);
419 transform: scale(0);
420 -webkit-transform-origin: center center;
421 transform-origin: center center;
422}
423.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {
424 top: var(--mdc-ripple-top, 0);
425 /* @noflip */
426 /*rtl:ignore*/
427 left: var(--mdc-ripple-left, 0);
428}
429.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {
430 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
431 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
432}
433.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {
434 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
435 animation: mdc-ripple-fg-opacity-out 150ms;
436 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
437 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
438}
439.mdc-text-field--filled .mdc-text-field__ripple::before,
440.mdc-text-field--filled .mdc-text-field__ripple::after {
441 top: calc(50% - 100%);
442 /* @noflip */
443 /*rtl:ignore*/
444 left: calc(50% - 100%);
445 width: 200%;
446 height: 200%;
447}
448.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
449 width: var(--mdc-ripple-fg-size, 100%);
450 height: var(--mdc-ripple-fg-size, 100%);
451}
452
453.mdc-text-field__ripple {
454 position: absolute;
455 top: 0;
456 left: 0;
457 width: 100%;
458 height: 100%;
459 pointer-events: none;
460}
461
462.mdc-text-field {
463 border-top-left-radius: 4px;
464 /* @alternate */
465 border-top-left-radius: var(--mdc-shape-small, 4px);
466 border-top-right-radius: 4px;
467 /* @alternate */
468 border-top-right-radius: var(--mdc-shape-small, 4px);
469 border-bottom-right-radius: 0;
470 border-bottom-left-radius: 0;
471 display: inline-flex;
472 align-items: baseline;
473 padding: 0 16px;
474 position: relative;
475 box-sizing: border-box;
476 overflow: hidden;
477 /* @alternate */
478 will-change: opacity, transform, color;
479}
480.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
481 color: rgba(0, 0, 0, 0.6);
482}
483.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
484 color: rgba(0, 0, 0, 0.87);
485}
486@media all {
487 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder {
488 color: rgba(0, 0, 0, 0.54);
489 }
490 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
491 color: rgba(0, 0, 0, 0.54);
492 }
493 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-ms-input-placeholder {
494 color: rgba(0, 0, 0, 0.54);
495 }
496 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
497 color: rgba(0, 0, 0, 0.54);
498 }
499}
500@media all {
501 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
502 color: rgba(0, 0, 0, 0.54);
503 }
504}
505.mdc-text-field .mdc-text-field__input {
506 caret-color: #6200ee;
507 /* @alternate */
508 caret-color: var(--mdc-theme-primary, #6200ee);
509}
510.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
511 color: rgba(0, 0, 0, 0.6);
512}
513.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
514.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {
515 color: rgba(0, 0, 0, 0.6);
516}
517.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
518 color: rgba(0, 0, 0, 0.54);
519}
520.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
521 color: rgba(0, 0, 0, 0.54);
522}
523.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
524 color: rgba(0, 0, 0, 0.6);
525}
526.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
527 color: rgba(0, 0, 0, 0.6);
528}
529.mdc-text-field .mdc-floating-label {
530 top: 50%;
531 -webkit-transform: translateY(-50%);
532 transform: translateY(-50%);
533 pointer-events: none;
534}
535
536.mdc-text-field__input {
537 -moz-osx-font-smoothing: grayscale;
538 -webkit-font-smoothing: antialiased;
539 font-family: Roboto, sans-serif;
540 /* @alternate */
541 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
542 font-size: 1rem;
543 /* @alternate */
544 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
545 font-weight: 400;
546 /* @alternate */
547 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
548 letter-spacing: 0.009375em;
549 /* @alternate */
550 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
551 text-decoration: inherit;
552 /* @alternate */
553 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
554 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
555 text-transform: inherit;
556 /* @alternate */
557 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
558 height: 28px;
559 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
560 width: 100%;
561 min-width: 0;
562 border: none;
563 border-radius: 0;
564 background: none;
565 -webkit-appearance: none;
566 -moz-appearance: none;
567 appearance: none;
568 padding: 0;
569}
570.mdc-text-field__input::-ms-clear {
571 display: none;
572}
573.mdc-text-field__input::-webkit-calendar-picker-indicator {
574 display: none;
575}
576.mdc-text-field__input:focus {
577 outline: none;
578}
579.mdc-text-field__input:invalid {
580 box-shadow: none;
581}
582@media all {
583 .mdc-text-field__input::-webkit-input-placeholder {
584 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
585 opacity: 0;
586 }
587 .mdc-text-field__input:-ms-input-placeholder {
588 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
589 opacity: 0;
590 }
591 .mdc-text-field__input::-ms-input-placeholder {
592 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
593 opacity: 0;
594 }
595 .mdc-text-field__input::placeholder {
596 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
597 opacity: 0;
598 }
599}
600@media all {
601 .mdc-text-field__input:-ms-input-placeholder {
602 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
603 opacity: 0;
604 }
605}
606@media all {
607 .mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder {
608 transition-delay: 40ms;
609 transition-duration: 110ms;
610 opacity: 1;
611 }
612 .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
613 transition-delay: 40ms;
614 transition-duration: 110ms;
615 opacity: 1;
616 }
617 .mdc-text-field--no-label .mdc-text-field__input::-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-ms-input-placeholder {
618 transition-delay: 40ms;
619 transition-duration: 110ms;
620 opacity: 1;
621 }
622 .mdc-text-field--no-label .mdc-text-field__input::placeholder, .mdc-text-field--focused .mdc-text-field__input::placeholder {
623 transition-delay: 40ms;
624 transition-duration: 110ms;
625 opacity: 1;
626 }
627}
628@media all {
629 .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
630 transition-delay: 40ms;
631 transition-duration: 110ms;
632 opacity: 1;
633 }
634}
635
636.mdc-text-field__affix {
637 -moz-osx-font-smoothing: grayscale;
638 -webkit-font-smoothing: antialiased;
639 font-family: Roboto, sans-serif;
640 /* @alternate */
641 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
642 font-size: 1rem;
643 /* @alternate */
644 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
645 font-weight: 400;
646 /* @alternate */
647 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
648 letter-spacing: 0.009375em;
649 /* @alternate */
650 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
651 text-decoration: inherit;
652 /* @alternate */
653 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
654 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
655 text-transform: inherit;
656 /* @alternate */
657 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
658 height: 28px;
659 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
660 opacity: 0;
661 white-space: nowrap;
662}
663.mdc-text-field--label-floating .mdc-text-field__affix, .mdc-text-field--no-label .mdc-text-field__affix {
664 opacity: 1;
665}
666@supports (-webkit-hyphens: none) {
667 .mdc-text-field--outlined .mdc-text-field__affix {
668 align-items: center;
669 align-self: center;
670 display: inline-flex;
671 height: 100%;
672 }
673}
674
675.mdc-text-field__affix--prefix {
676 /* @noflip */
677 /*rtl:ignore*/
678 padding-left: 0;
679 /* @noflip */
680 /*rtl:ignore*/
681 padding-right: 2px;
682}
683[dir=rtl] .mdc-text-field__affix--prefix, .mdc-text-field__affix--prefix[dir=rtl] {
684 /*rtl:begin:ignore*/
685 /* @noflip */
686 /*rtl:ignore*/
687 padding-left: 2px;
688 /* @noflip */
689 /*rtl:ignore*/
690 padding-right: 0;
691 /*rtl:end:ignore*/
692}
693
694.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
695 /* @noflip */
696 /*rtl:ignore*/
697 padding-left: 0;
698 /* @noflip */
699 /*rtl:ignore*/
700 padding-right: 12px;
701}
702[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl] {
703 /*rtl:begin:ignore*/
704 /* @noflip */
705 /*rtl:ignore*/
706 padding-left: 12px;
707 /* @noflip */
708 /*rtl:ignore*/
709 padding-right: 0;
710 /*rtl:end:ignore*/
711}
712
713.mdc-text-field__affix--suffix {
714 /* @noflip */
715 /*rtl:ignore*/
716 padding-left: 12px;
717 /* @noflip */
718 /*rtl:ignore*/
719 padding-right: 0;
720}
721[dir=rtl] .mdc-text-field__affix--suffix, .mdc-text-field__affix--suffix[dir=rtl] {
722 /*rtl:begin:ignore*/
723 /* @noflip */
724 /*rtl:ignore*/
725 padding-left: 0;
726 /* @noflip */
727 /*rtl:ignore*/
728 padding-right: 12px;
729 /*rtl:end:ignore*/
730}
731
732.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
733 /* @noflip */
734 /*rtl:ignore*/
735 padding-left: 2px;
736 /* @noflip */
737 /*rtl:ignore*/
738 padding-right: 0;
739}
740[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl] {
741 /*rtl:begin:ignore*/
742 /* @noflip */
743 /*rtl:ignore*/
744 padding-left: 0;
745 /* @noflip */
746 /*rtl:ignore*/
747 padding-right: 2px;
748 /*rtl:end:ignore*/
749}
750
751.mdc-text-field--filled {
752 height: 56px;
753}
754.mdc-text-field--filled .mdc-text-field__ripple::before,
755.mdc-text-field--filled .mdc-text-field__ripple::after {
756 background-color: rgba(0, 0, 0, 0.87);
757 /* @alternate */
758 background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));
759}
760.mdc-text-field--filled:hover .mdc-text-field__ripple::before, .mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before {
761 opacity: 0.04;
762 /* @alternate */
763 opacity: var(--mdc-ripple-hover-opacity, 0.04);
764}
765.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before, .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before {
766 transition-duration: 75ms;
767 opacity: 0.12;
768 /* @alternate */
769 opacity: var(--mdc-ripple-focus-opacity, 0.12);
770}
771.mdc-text-field--filled::before {
772 display: inline-block;
773 width: 0;
774 height: 40px;
775 content: "";
776 vertical-align: 0;
777}
778.mdc-text-field--filled:not(.mdc-text-field--disabled) {
779 background-color: whitesmoke;
780}
781.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
782 border-bottom-color: rgba(0, 0, 0, 0.42);
783}
784.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
785 border-bottom-color: rgba(0, 0, 0, 0.87);
786}
787.mdc-text-field--filled .mdc-line-ripple::after {
788 border-bottom-color: #6200ee;
789 /* @alternate */
790 border-bottom-color: var(--mdc-theme-primary, #6200ee);
791}
792.mdc-text-field--filled .mdc-floating-label {
793 /* @noflip */
794 /*rtl:ignore*/
795 left: 16px;
796 /* @noflip */
797 /*rtl:ignore*/
798 right: initial;
799}
800[dir=rtl] .mdc-text-field--filled .mdc-floating-label, .mdc-text-field--filled .mdc-floating-label[dir=rtl] {
801 /*rtl:begin:ignore*/
802 /* @noflip */
803 /*rtl:ignore*/
804 left: initial;
805 /* @noflip */
806 /*rtl:ignore*/
807 right: 16px;
808 /*rtl:end:ignore*/
809}
810
811.mdc-text-field--filled .mdc-floating-label--float-above {
812 -webkit-transform: translateY(-106%) scale(0.75);
813 transform: translateY(-106%) scale(0.75);
814}
815.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
816 height: 100%;
817}
818.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
819 display: none;
820}
821.mdc-text-field--filled.mdc-text-field--no-label::before {
822 display: none;
823}
824@supports (-webkit-hyphens: none) {
825 .mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
826 align-items: center;
827 align-self: center;
828 display: inline-flex;
829 height: 100%;
830 }
831}
832
833.mdc-text-field--outlined {
834 height: 56px;
835 overflow: visible;
836}
837.mdc-text-field--outlined .mdc-floating-label--float-above {
838 -webkit-transform: translateY(-37.25px) scale(1);
839 transform: translateY(-37.25px) scale(1);
840}
841.mdc-text-field--outlined .mdc-floating-label--float-above {
842 font-size: 0.75rem;
843}
844.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
845.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
846 -webkit-transform: translateY(-34.75px) scale(0.75);
847 transform: translateY(-34.75px) scale(0.75);
848}
849.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
850.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
851 font-size: 1rem;
852}
853.mdc-text-field--outlined .mdc-floating-label--shake {
854 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;
855 animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;
856}
857@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined {
858 0% {
859 /* @noflip */
860 /*rtl:ignore*/
861 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
862 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
863 }
864 33% {
865 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
866 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
867 /* @noflip */
868 /*rtl:ignore*/
869 -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
870 transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
871 }
872 66% {
873 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
874 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
875 /* @noflip */
876 /*rtl:ignore*/
877 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
878 transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
879 }
880 100% {
881 /* @noflip */
882 /*rtl:ignore*/
883 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
884 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
885 }
886}
887@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
888 0% {
889 /* @noflip */
890 /*rtl:ignore*/
891 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
892 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
893 }
894 33% {
895 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
896 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
897 /* @noflip */
898 /*rtl:ignore*/
899 -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
900 transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
901 }
902 66% {
903 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
904 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
905 /* @noflip */
906 /*rtl:ignore*/
907 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
908 transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
909 }
910 100% {
911 /* @noflip */
912 /*rtl:ignore*/
913 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
914 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
915 }
916}
917.mdc-text-field--outlined .mdc-text-field__input {
918 height: 100%;
919}
920.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
921.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
922.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
923 border-color: rgba(0, 0, 0, 0.38);
924}
925.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
926.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
927.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
928 border-color: rgba(0, 0, 0, 0.87);
929}
930.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
931.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
932.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
933 border-color: #6200ee;
934 /* @alternate */
935 border-color: var(--mdc-theme-primary, #6200ee);
936}
937.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
938 /* @noflip */
939 /*rtl:ignore*/
940 border-top-left-radius: 4px;
941 /* @alternate */
942 /* @noflip */
943 /*rtl:ignore*/
944 border-top-left-radius: var(--mdc-shape-small, 4px);
945 /* @noflip */
946 /*rtl:ignore*/
947 border-top-right-radius: 0;
948 /* @noflip */
949 /*rtl:ignore*/
950 border-bottom-right-radius: 0;
951 /* @noflip */
952 /*rtl:ignore*/
953 border-bottom-left-radius: 4px;
954 /* @alternate */
955 /* @noflip */
956 /*rtl:ignore*/
957 border-bottom-left-radius: var(--mdc-shape-small, 4px);
958}
959[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl] {
960 /*rtl:begin:ignore*/
961 /* @noflip */
962 /*rtl:ignore*/
963 border-top-left-radius: 0;
964 /* @noflip */
965 /*rtl:ignore*/
966 border-top-right-radius: 4px;
967 /* @alternate */
968 /* @noflip */
969 /*rtl:ignore*/
970 border-top-right-radius: var(--mdc-shape-small, 4px);
971 /* @noflip */
972 /*rtl:ignore*/
973 border-bottom-right-radius: 4px;
974 /* @alternate */
975 /* @noflip */
976 /*rtl:ignore*/
977 border-bottom-right-radius: var(--mdc-shape-small, 4px);
978 /* @noflip */
979 /*rtl:ignore*/
980 border-bottom-left-radius: 0;
981 /*rtl:end:ignore*/
982}
983
984@supports (top: max(0%)) {
985 .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
986 width: max(12px, var(--mdc-shape-small, 4px));
987 }
988}
989@supports (top: max(0%)) {
990 .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
991 max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
992 }
993}
994.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
995 /* @noflip */
996 /*rtl:ignore*/
997 border-top-left-radius: 0;
998 /* @noflip */
999 /*rtl:ignore*/
1000 border-top-right-radius: 4px;
1001 /* @alternate */
1002 /* @noflip */
1003 /*rtl:ignore*/
1004 border-top-right-radius: var(--mdc-shape-small, 4px);
1005 /* @noflip */
1006 /*rtl:ignore*/
1007 border-bottom-right-radius: 4px;
1008 /* @alternate */
1009 /* @noflip */
1010 /*rtl:ignore*/
1011 border-bottom-right-radius: var(--mdc-shape-small, 4px);
1012 /* @noflip */
1013 /*rtl:ignore*/
1014 border-bottom-left-radius: 0;
1015}
1016[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl] {
1017 /*rtl:begin:ignore*/
1018 /* @noflip */
1019 /*rtl:ignore*/
1020 border-top-left-radius: 4px;
1021 /* @alternate */
1022 /* @noflip */
1023 /*rtl:ignore*/
1024 border-top-left-radius: var(--mdc-shape-small, 4px);
1025 /* @noflip */
1026 /*rtl:ignore*/
1027 border-top-right-radius: 0;
1028 /* @noflip */
1029 /*rtl:ignore*/
1030 border-bottom-right-radius: 0;
1031 /* @noflip */
1032 /*rtl:ignore*/
1033 border-bottom-left-radius: 4px;
1034 /* @alternate */
1035 /* @noflip */
1036 /*rtl:ignore*/
1037 border-bottom-left-radius: var(--mdc-shape-small, 4px);
1038 /*rtl:end:ignore*/
1039}
1040
1041@supports (top: max(0%)) {
1042 .mdc-text-field--outlined {
1043 /* @noflip */
1044 /*rtl:ignore*/
1045 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1046 }
1047}
1048@supports (top: max(0%)) {
1049 .mdc-text-field--outlined {
1050 /* @noflip */
1051 /*rtl:ignore*/
1052 padding-right: max(16px, var(--mdc-shape-small, 4px));
1053 }
1054}
1055@supports (top: max(0%)) {
1056 .mdc-text-field--outlined + .mdc-text-field-helper-line {
1057 /* @noflip */
1058 /*rtl:ignore*/
1059 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1060 }
1061}
1062@supports (top: max(0%)) {
1063 .mdc-text-field--outlined + .mdc-text-field-helper-line {
1064 /* @noflip */
1065 /*rtl:ignore*/
1066 padding-right: max(16px, var(--mdc-shape-small, 4px));
1067 }
1068}
1069.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
1070 /* @noflip */
1071 /*rtl:ignore*/
1072 padding-left: 0;
1073}
1074@supports (top: max(0%)) {
1075 .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
1076 /* @noflip */
1077 /*rtl:ignore*/
1078 padding-right: max(16px, var(--mdc-shape-small, 4px));
1079 }
1080}
1081[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
1082 /*rtl:begin:ignore*/
1083 /* @noflip */
1084 /*rtl:ignore*/
1085 padding-right: 0;
1086 /*rtl:end:ignore*/
1087}
1088@supports (top: max(0%)) {
1089 [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
1090 /* @noflip */
1091 /*rtl:ignore*/
1092 padding-left: max(16px, var(--mdc-shape-small, 4px));
1093 }
1094}
1095
1096.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
1097 /* @noflip */
1098 /*rtl:ignore*/
1099 padding-right: 0;
1100}
1101@supports (top: max(0%)) {
1102 .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
1103 /* @noflip */
1104 /*rtl:ignore*/
1105 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1106 }
1107}
1108[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
1109 /*rtl:begin:ignore*/
1110 /* @noflip */
1111 /*rtl:ignore*/
1112 padding-left: 0;
1113 /*rtl:end:ignore*/
1114}
1115@supports (top: max(0%)) {
1116 [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
1117 /* @noflip */
1118 /*rtl:ignore*/
1119 padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1120 }
1121}
1122
1123.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
1124 /* @noflip */
1125 /*rtl:ignore*/
1126 padding-left: 0;
1127 /* @noflip */
1128 /*rtl:ignore*/
1129 padding-right: 0;
1130}
1131.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1132 padding-top: 1px;
1133}
1134.mdc-text-field--outlined .mdc-text-field__ripple::before,
1135.mdc-text-field--outlined .mdc-text-field__ripple::after {
1136 content: none;
1137}
1138.mdc-text-field--outlined .mdc-floating-label {
1139 /* @noflip */
1140 /*rtl:ignore*/
1141 left: 4px;
1142 /* @noflip */
1143 /*rtl:ignore*/
1144 right: initial;
1145}
1146[dir=rtl] .mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
1147 /*rtl:begin:ignore*/
1148 /* @noflip */
1149 /*rtl:ignore*/
1150 left: initial;
1151 /* @noflip */
1152 /*rtl:ignore*/
1153 right: 4px;
1154 /*rtl:end:ignore*/
1155}
1156
1157.mdc-text-field--outlined .mdc-text-field__input {
1158 display: flex;
1159 border: none !important;
1160 background-color: transparent;
1161}
1162.mdc-text-field--outlined .mdc-notched-outline {
1163 z-index: 1;
1164}
1165
1166.mdc-text-field--textarea {
1167 flex-direction: column;
1168 align-items: center;
1169 width: auto;
1170 height: auto;
1171 padding: 0;
1172 transition: none;
1173}
1174.mdc-text-field--textarea .mdc-floating-label {
1175 top: 19px;
1176}
1177.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
1178 -webkit-transform: none;
1179 transform: none;
1180}
1181.mdc-text-field--textarea .mdc-text-field__input {
1182 flex-grow: 1;
1183 height: auto;
1184 min-height: 1.5rem;
1185 overflow-x: hidden;
1186 overflow-y: auto;
1187 box-sizing: border-box;
1188 resize: none;
1189 padding: 0 16px;
1190 line-height: 1.5rem;
1191}
1192.mdc-text-field--textarea.mdc-text-field--filled::before {
1193 display: none;
1194}
1195.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
1196 -webkit-transform: translateY(-10.25px) scale(0.75);
1197 transform: translateY(-10.25px) scale(0.75);
1198}
1199.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
1200 -webkit-animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
1201 animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
1202}
1203@-webkit-keyframes mdc-floating-label-shake-float-above-textarea-filled {
1204 0% {
1205 /* @noflip */
1206 /*rtl:ignore*/
1207 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1208 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1209 }
1210 33% {
1211 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1212 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1213 /* @noflip */
1214 /*rtl:ignore*/
1215 -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1216 transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1217 }
1218 66% {
1219 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1220 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1221 /* @noflip */
1222 /*rtl:ignore*/
1223 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1224 transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1225 }
1226 100% {
1227 /* @noflip */
1228 /*rtl:ignore*/
1229 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1230 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1231 }
1232}
1233@keyframes mdc-floating-label-shake-float-above-textarea-filled {
1234 0% {
1235 /* @noflip */
1236 /*rtl:ignore*/
1237 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1238 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1239 }
1240 33% {
1241 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1242 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1243 /* @noflip */
1244 /*rtl:ignore*/
1245 -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1246 transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1247 }
1248 66% {
1249 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1250 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1251 /* @noflip */
1252 /*rtl:ignore*/
1253 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1254 transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1255 }
1256 100% {
1257 /* @noflip */
1258 /*rtl:ignore*/
1259 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1260 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1261 }
1262}
1263.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
1264 margin-top: 23px;
1265 margin-bottom: 9px;
1266}
1267.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
1268 margin-top: 16px;
1269 margin-bottom: 16px;
1270}
1271.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1272 padding-top: 0;
1273}
1274.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
1275 -webkit-transform: translateY(-27.25px) scale(1);
1276 transform: translateY(-27.25px) scale(1);
1277}
1278.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
1279 font-size: 0.75rem;
1280}
1281.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1282.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1283 -webkit-transform: translateY(-24.75px) scale(0.75);
1284 transform: translateY(-24.75px) scale(0.75);
1285}
1286.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1287.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1288 font-size: 1rem;
1289}
1290.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
1291 -webkit-animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;
1292 animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;
1293}
1294@-webkit-keyframes mdc-floating-label-shake-float-above-textarea-outlined {
1295 0% {
1296 /* @noflip */
1297 /*rtl:ignore*/
1298 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1299 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1300 }
1301 33% {
1302 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1303 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1304 /* @noflip */
1305 /*rtl:ignore*/
1306 -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1307 transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1308 }
1309 66% {
1310 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1311 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1312 /* @noflip */
1313 /*rtl:ignore*/
1314 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1315 transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1316 }
1317 100% {
1318 /* @noflip */
1319 /*rtl:ignore*/
1320 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1321 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1322 }
1323}
1324@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
1325 0% {
1326 /* @noflip */
1327 /*rtl:ignore*/
1328 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1329 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1330 }
1331 33% {
1332 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1333 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1334 /* @noflip */
1335 /*rtl:ignore*/
1336 -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1337 transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1338 }
1339 66% {
1340 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1341 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1342 /* @noflip */
1343 /*rtl:ignore*/
1344 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1345 transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1346 }
1347 100% {
1348 /* @noflip */
1349 /*rtl:ignore*/
1350 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1351 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1352 }
1353}
1354.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
1355 margin-top: 16px;
1356 margin-bottom: 16px;
1357}
1358.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
1359 top: 18px;
1360}
1361.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
1362 margin-bottom: 2px;
1363}
1364.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
1365 align-self: flex-end;
1366 padding: 0 16px;
1367}
1368.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
1369 display: inline-block;
1370 width: 0;
1371 height: 16px;
1372 content: "";
1373 vertical-align: -16px;
1374}
1375.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
1376 display: none;
1377}
1378
1379.mdc-text-field__resizer {
1380 align-self: stretch;
1381 display: inline-flex;
1382 flex-direction: column;
1383 flex-grow: 1;
1384 max-height: 100%;
1385 max-width: 100%;
1386 min-height: 56px;
1387 min-width: -webkit-fit-content;
1388 min-width: -moz-fit-content;
1389 min-width: fit-content;
1390 /* @alternate */
1391 min-width: -moz-available;
1392 /* @alternate */
1393 min-width: -webkit-fill-available;
1394 overflow: hidden;
1395 resize: both;
1396}
1397.mdc-text-field--filled .mdc-text-field__resizer {
1398 -webkit-transform: translateY(-1px);
1399 transform: translateY(-1px);
1400}
1401.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,
1402.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {
1403 -webkit-transform: translateY(1px);
1404 transform: translateY(1px);
1405}
1406.mdc-text-field--outlined .mdc-text-field__resizer {
1407 /* @noflip */
1408 /*rtl:ignore*/
1409 -webkit-transform: translateX(-1px) translateY(-1px);
1410 transform: translateX(-1px) translateY(-1px);
1411}
1412[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer, .mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {
1413 /*rtl:begin:ignore*/
1414 /* @noflip */
1415 /*rtl:ignore*/
1416 -webkit-transform: translateX(1px) translateY(-1px);
1417 transform: translateX(1px) translateY(-1px);
1418 /*rtl:end:ignore*/
1419}
1420
1421.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,
1422.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {
1423 /* @noflip */
1424 /*rtl:ignore*/
1425 -webkit-transform: translateX(1px) translateY(1px);
1426 transform: translateX(1px) translateY(1px);
1427}
1428[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input, [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter, .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl], .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl] {
1429 /*rtl:begin:ignore*/
1430 /* @noflip */
1431 /*rtl:ignore*/
1432 -webkit-transform: translateX(-1px) translateY(1px);
1433 transform: translateX(-1px) translateY(1px);
1434 /*rtl:end:ignore*/
1435}
1436
1437.mdc-text-field--with-leading-icon {
1438 /* @noflip */
1439 /*rtl:ignore*/
1440 padding-left: 0;
1441 /* @noflip */
1442 /*rtl:ignore*/
1443 padding-right: 16px;
1444}
1445[dir=rtl] .mdc-text-field--with-leading-icon, .mdc-text-field--with-leading-icon[dir=rtl] {
1446 /*rtl:begin:ignore*/
1447 /* @noflip */
1448 /*rtl:ignore*/
1449 padding-left: 16px;
1450 /* @noflip */
1451 /*rtl:ignore*/
1452 padding-right: 0;
1453 /*rtl:end:ignore*/
1454}
1455
1456.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
1457 max-width: calc(100% - 48px);
1458 /* @noflip */
1459 /*rtl:ignore*/
1460 left: 48px;
1461 /* @noflip */
1462 /*rtl:ignore*/
1463 right: initial;
1464}
1465[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl] {
1466 /*rtl:begin:ignore*/
1467 /* @noflip */
1468 /*rtl:ignore*/
1469 left: initial;
1470 /* @noflip */
1471 /*rtl:ignore*/
1472 right: 48px;
1473 /*rtl:end:ignore*/
1474}
1475
1476.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1477 max-width: calc(100% / 0.75 - 64px / 0.75);
1478}
1479.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
1480 /* @noflip */
1481 /*rtl:ignore*/
1482 left: 36px;
1483 /* @noflip */
1484 /*rtl:ignore*/
1485 right: initial;
1486}
1487[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
1488 /*rtl:begin:ignore*/
1489 /* @noflip */
1490 /*rtl:ignore*/
1491 left: initial;
1492 /* @noflip */
1493 /*rtl:ignore*/
1494 right: 36px;
1495 /*rtl:end:ignore*/
1496}
1497
1498.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
1499 max-width: calc(100% - 60px);
1500}
1501.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
1502 /* @noflip */
1503 /*rtl:ignore*/
1504 -webkit-transform: translateY(-37.25px) translateX(-32px) scale(1);
1505 transform: translateY(-37.25px) translateX(-32px) scale(1);
1506}
1507[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl] {
1508 /*rtl:begin:ignore*/
1509 /* @noflip */
1510 /*rtl:ignore*/
1511 -webkit-transform: translateY(-37.25px) translateX(32px) scale(1);
1512 transform: translateY(-37.25px) translateX(32px) scale(1);
1513 /*rtl:end:ignore*/
1514}
1515
1516.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
1517 font-size: 0.75rem;
1518}
1519.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1520.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1521 /* @noflip */
1522 /*rtl:ignore*/
1523 -webkit-transform: translateY(-34.75px) translateX(-32px) scale(0.75);
1524 transform: translateY(-34.75px) translateX(-32px) scale(0.75);
1525}
1526[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl], .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
1527 /*rtl:begin:ignore*/
1528 /* @noflip */
1529 /*rtl:ignore*/
1530 -webkit-transform: translateY(-34.75px) translateX(32px) scale(0.75);
1531 transform: translateY(-34.75px) translateX(32px) scale(0.75);
1532 /*rtl:end:ignore*/
1533}
1534
1535.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1536.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1537 font-size: 1rem;
1538}
1539.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
1540 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1541 animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1542}
1543@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
1544 0% {
1545 /* @noflip */
1546 /*rtl:ignore*/
1547 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1548 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1549 }
1550 33% {
1551 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1552 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1553 /* @noflip */
1554 /*rtl:ignore*/
1555 -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1556 transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1557 }
1558 66% {
1559 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1560 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1561 /* @noflip */
1562 /*rtl:ignore*/
1563 -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1564 transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1565 }
1566 100% {
1567 /* @noflip */
1568 /*rtl:ignore*/
1569 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1570 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1571 }
1572}
1573@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
1574 0% {
1575 /* @noflip */
1576 /*rtl:ignore*/
1577 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1578 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1579 }
1580 33% {
1581 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1582 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1583 /* @noflip */
1584 /*rtl:ignore*/
1585 -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1586 transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1587 }
1588 66% {
1589 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1590 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1591 /* @noflip */
1592 /*rtl:ignore*/
1593 -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1594 transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1595 }
1596 100% {
1597 /* @noflip */
1598 /*rtl:ignore*/
1599 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1600 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1601 }
1602}
1603[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] {
1604 /*rtl:begin:ignore*/
1605 /*rtl:end:ignore*/
1606}
1607[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake {
1608 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1609 animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1610}
1611
1612@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
1613 0% {
1614 /* @noflip */
1615 /*rtl:ignore*/
1616 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1617 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1618 }
1619 33% {
1620 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1621 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1622 /* @noflip */
1623 /*rtl:ignore*/
1624 -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1625 transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1626 }
1627 66% {
1628 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1629 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1630 /* @noflip */
1631 /*rtl:ignore*/
1632 -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1633 transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1634 }
1635 100% {
1636 /* @noflip */
1637 /*rtl:ignore*/
1638 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1639 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1640 }
1641}
1642
1643@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
1644 0% {
1645 /* @noflip */
1646 /*rtl:ignore*/
1647 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1648 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1649 }
1650 33% {
1651 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1652 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1653 /* @noflip */
1654 /*rtl:ignore*/
1655 -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1656 transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1657 }
1658 66% {
1659 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1660 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1661 /* @noflip */
1662 /*rtl:ignore*/
1663 -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1664 transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1665 }
1666 100% {
1667 /* @noflip */
1668 /*rtl:ignore*/
1669 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1670 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1671 }
1672}
1673
1674.mdc-text-field--with-trailing-icon {
1675 /* @noflip */
1676 /*rtl:ignore*/
1677 padding-left: 16px;
1678 /* @noflip */
1679 /*rtl:ignore*/
1680 padding-right: 0;
1681}
1682[dir=rtl] .mdc-text-field--with-trailing-icon, .mdc-text-field--with-trailing-icon[dir=rtl] {
1683 /*rtl:begin:ignore*/
1684 /* @noflip */
1685 /*rtl:ignore*/
1686 padding-left: 0;
1687 /* @noflip */
1688 /*rtl:ignore*/
1689 padding-right: 16px;
1690 /*rtl:end:ignore*/
1691}
1692
1693.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
1694 max-width: calc(100% - 64px);
1695}
1696.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1697 max-width: calc(100% / 0.75 - 64px / 0.75);
1698}
1699.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
1700 max-width: calc(100% - 60px);
1701}
1702
1703.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
1704 /* @noflip */
1705 /*rtl:ignore*/
1706 padding-left: 0;
1707 /* @noflip */
1708 /*rtl:ignore*/
1709 padding-right: 0;
1710}
1711.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
1712 max-width: calc(100% - 96px);
1713}
1714.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1715 max-width: calc(100% / 0.75 - 96px / 0.75);
1716}
1717
1718.mdc-text-field-helper-line {
1719 display: flex;
1720 justify-content: space-between;
1721 box-sizing: border-box;
1722}
1723.mdc-text-field + .mdc-text-field-helper-line {
1724 padding-right: 16px;
1725 padding-left: 16px;
1726}
1727
1728.mdc-form-field > .mdc-text-field + label {
1729 align-self: flex-start;
1730}
1731
1732.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
1733 color: rgba(98, 0, 238, 0.87);
1734}
1735.mdc-text-field--focused .mdc-notched-outline__leading,
1736.mdc-text-field--focused .mdc-notched-outline__notch,
1737.mdc-text-field--focused .mdc-notched-outline__trailing {
1738 border-width: 2px;
1739}
1740.mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
1741 opacity: 1;
1742}
1743.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1744 padding-top: 2px;
1745}
1746.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
1747 padding-top: 0;
1748}
1749
1750.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
1751 border-bottom-color: #b00020;
1752 /* @alternate */
1753 border-bottom-color: var(--mdc-theme-error, #b00020);
1754}
1755.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
1756 border-bottom-color: #b00020;
1757 /* @alternate */
1758 border-bottom-color: var(--mdc-theme-error, #b00020);
1759}
1760.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
1761 color: #b00020;
1762 /* @alternate */
1763 color: var(--mdc-theme-error, #b00020);
1764}
1765.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
1766 color: #b00020;
1767 /* @alternate */
1768 color: var(--mdc-theme-error, #b00020);
1769}
1770.mdc-text-field--invalid .mdc-text-field__input {
1771 caret-color: #b00020;
1772 /* @alternate */
1773 caret-color: var(--mdc-theme-error, #b00020);
1774}
1775.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
1776 color: #b00020;
1777 /* @alternate */
1778 color: var(--mdc-theme-error, #b00020);
1779}
1780.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
1781 border-bottom-color: #b00020;
1782 /* @alternate */
1783 border-bottom-color: var(--mdc-theme-error, #b00020);
1784}
1785.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
1786.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
1787.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
1788 border-color: #b00020;
1789 /* @alternate */
1790 border-color: var(--mdc-theme-error, #b00020);
1791}
1792.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
1793.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
1794.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
1795 border-color: #b00020;
1796 /* @alternate */
1797 border-color: var(--mdc-theme-error, #b00020);
1798}
1799.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
1800.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
1801.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
1802 border-color: #b00020;
1803 /* @alternate */
1804 border-color: var(--mdc-theme-error, #b00020);
1805}
1806.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
1807 opacity: 1;
1808}
1809
1810.mdc-text-field--disabled {
1811 pointer-events: none;
1812}
1813.mdc-text-field--disabled .mdc-text-field__input {
1814 color: rgba(0, 0, 0, 0.38);
1815}
1816@media all {
1817 .mdc-text-field--disabled .mdc-text-field__input::-webkit-input-placeholder {
1818 color: rgba(0, 0, 0, 0.38);
1819 }
1820 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1821 color: rgba(0, 0, 0, 0.38);
1822 }
1823 .mdc-text-field--disabled .mdc-text-field__input::-ms-input-placeholder {
1824 color: rgba(0, 0, 0, 0.38);
1825 }
1826 .mdc-text-field--disabled .mdc-text-field__input::placeholder {
1827 color: rgba(0, 0, 0, 0.38);
1828 }
1829}
1830@media all {
1831 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1832 color: rgba(0, 0, 0, 0.38);
1833 }
1834}
1835.mdc-text-field--disabled .mdc-floating-label {
1836 color: rgba(0, 0, 0, 0.38);
1837}
1838.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
1839 color: rgba(0, 0, 0, 0.38);
1840}
1841.mdc-text-field--disabled .mdc-text-field-character-counter,
1842.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
1843 color: rgba(0, 0, 0, 0.38);
1844}
1845.mdc-text-field--disabled .mdc-text-field__icon--leading {
1846 color: rgba(0, 0, 0, 0.3);
1847}
1848.mdc-text-field--disabled .mdc-text-field__icon--trailing {
1849 color: rgba(0, 0, 0, 0.3);
1850}
1851.mdc-text-field--disabled .mdc-text-field__affix--prefix {
1852 color: rgba(0, 0, 0, 0.38);
1853}
1854.mdc-text-field--disabled .mdc-text-field__affix--suffix {
1855 color: rgba(0, 0, 0, 0.38);
1856}
1857.mdc-text-field--disabled .mdc-line-ripple::before {
1858 border-bottom-color: rgba(0, 0, 0, 0.06);
1859}
1860.mdc-text-field--disabled .mdc-notched-outline__leading,
1861.mdc-text-field--disabled .mdc-notched-outline__notch,
1862.mdc-text-field--disabled .mdc-notched-outline__trailing {
1863 border-color: rgba(0, 0, 0, 0.06);
1864}
1865@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1866 .mdc-text-field--disabled .mdc-text-field__input::-webkit-input-placeholder {
1867 color: GrayText;
1868 }
1869 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1870 color: GrayText;
1871 }
1872 .mdc-text-field--disabled .mdc-text-field__input::-ms-input-placeholder {
1873 color: GrayText;
1874 }
1875 .mdc-text-field--disabled .mdc-text-field__input::placeholder {
1876 color: GrayText;
1877 }
1878}
1879@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1880 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1881 color: GrayText;
1882 }
1883}
1884@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1885 .mdc-text-field--disabled .mdc-floating-label {
1886 color: GrayText;
1887 }
1888}
1889@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1890 .mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
1891 color: GrayText;
1892 }
1893}
1894@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1895 .mdc-text-field--disabled .mdc-text-field-character-counter,
1896.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
1897 color: GrayText;
1898 }
1899}
1900@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1901 .mdc-text-field--disabled .mdc-text-field__icon--leading {
1902 color: GrayText;
1903 }
1904}
1905@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1906 .mdc-text-field--disabled .mdc-text-field__icon--trailing {
1907 color: GrayText;
1908 }
1909}
1910@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1911 .mdc-text-field--disabled .mdc-text-field__affix--prefix {
1912 color: GrayText;
1913 }
1914}
1915@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1916 .mdc-text-field--disabled .mdc-text-field__affix--suffix {
1917 color: GrayText;
1918 }
1919}
1920@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1921 .mdc-text-field--disabled .mdc-line-ripple::before {
1922 border-bottom-color: GrayText;
1923 }
1924}
1925@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1926 .mdc-text-field--disabled .mdc-notched-outline__leading,
1927.mdc-text-field--disabled .mdc-notched-outline__notch,
1928.mdc-text-field--disabled .mdc-notched-outline__trailing {
1929 border-color: GrayText;
1930 }
1931}
1932@media screen and (forced-colors: active) {
1933 .mdc-text-field--disabled .mdc-text-field__input {
1934 background-color: Window;
1935 }
1936 .mdc-text-field--disabled .mdc-floating-label {
1937 z-index: 1;
1938 }
1939}
1940.mdc-text-field--disabled .mdc-floating-label {
1941 cursor: default;
1942}
1943.mdc-text-field--disabled.mdc-text-field--filled {
1944 background-color: #fafafa;
1945}
1946.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {
1947 display: none;
1948}
1949.mdc-text-field--disabled .mdc-text-field__input {
1950 pointer-events: auto;
1951}
1952
1953.mdc-text-field--end-aligned .mdc-text-field__input {
1954 /* @noflip */
1955 /*rtl:ignore*/
1956 text-align: right;
1957}
1958[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input, .mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl] {
1959 /*rtl:begin:ignore*/
1960 /* @noflip */
1961 /*rtl:ignore*/
1962 text-align: left;
1963 /*rtl:end:ignore*/
1964}
1965
1966[dir=rtl] .mdc-text-field--ltr-text, .mdc-text-field--ltr-text[dir=rtl] {
1967 /*rtl:begin:ignore*/
1968 /*rtl:end:ignore*/
1969}
1970[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,
1971[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
1972.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix {
1973 /* @noflip */
1974 /*rtl:ignore*/
1975 direction: ltr;
1976}
1977[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
1978 /* @noflip */
1979 /*rtl:ignore*/
1980 padding-left: 0;
1981 /* @noflip */
1982 /*rtl:ignore*/
1983 padding-right: 2px;
1984}
1985[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
1986 /* @noflip */
1987 /*rtl:ignore*/
1988 padding-left: 12px;
1989 /* @noflip */
1990 /*rtl:ignore*/
1991 padding-right: 0;
1992}
1993[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading {
1994 order: 1;
1995}
1996[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
1997 order: 2;
1998}
1999[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input {
2000 order: 3;
2001}
2002[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
2003 order: 4;
2004}
2005[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing {
2006 order: 5;
2007}
2008
2009[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] {
2010 /*rtl:begin:ignore*/
2011 /*rtl:end:ignore*/
2012}
2013[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input {
2014 /* @noflip */
2015 /*rtl:ignore*/
2016 text-align: right;
2017}
2018[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix {
2019 /* @noflip */
2020 /*rtl:ignore*/
2021 padding-right: 12px;
2022}
2023[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix {
2024 /* @noflip */
2025 /*rtl:ignore*/
2026 padding-left: 2px;
2027}
2028
2029.mdc-text-field-helper-text {
2030 -moz-osx-font-smoothing: grayscale;
2031 -webkit-font-smoothing: antialiased;
2032 font-family: Roboto, sans-serif;
2033 /* @alternate */
2034 font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
2035 font-size: 0.75rem;
2036 /* @alternate */
2037 font-size: var(--mdc-typography-caption-font-size, 0.75rem);
2038 line-height: 1.25rem;
2039 /* @alternate */
2040 line-height: var(--mdc-typography-caption-line-height, 1.25rem);
2041 font-weight: 400;
2042 /* @alternate */
2043 font-weight: var(--mdc-typography-caption-font-weight, 400);
2044 letter-spacing: 0.0333333333em;
2045 /* @alternate */
2046 letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
2047 text-decoration: inherit;
2048 /* @alternate */
2049 -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2050 text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2051 text-transform: inherit;
2052 /* @alternate */
2053 text-transform: var(--mdc-typography-caption-text-transform, inherit);
2054 display: block;
2055 margin-top: 0;
2056 /* @alternate */
2057 line-height: normal;
2058 margin: 0;
2059 opacity: 0;
2060 will-change: opacity;
2061 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
2062}
2063.mdc-text-field-helper-text::before {
2064 display: inline-block;
2065 width: 0;
2066 height: 16px;
2067 content: "";
2068 vertical-align: 0;
2069}
2070
2071.mdc-text-field-helper-text--persistent {
2072 transition: none;
2073 opacity: 1;
2074 will-change: initial;
2075}
2076
2077.mdc-text-field-character-counter {
2078 -moz-osx-font-smoothing: grayscale;
2079 -webkit-font-smoothing: antialiased;
2080 font-family: Roboto, sans-serif;
2081 /* @alternate */
2082 font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
2083 font-size: 0.75rem;
2084 /* @alternate */
2085 font-size: var(--mdc-typography-caption-font-size, 0.75rem);
2086 line-height: 1.25rem;
2087 /* @alternate */
2088 line-height: var(--mdc-typography-caption-line-height, 1.25rem);
2089 font-weight: 400;
2090 /* @alternate */
2091 font-weight: var(--mdc-typography-caption-font-weight, 400);
2092 letter-spacing: 0.0333333333em;
2093 /* @alternate */
2094 letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
2095 text-decoration: inherit;
2096 /* @alternate */
2097 -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2098 text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2099 text-transform: inherit;
2100 /* @alternate */
2101 text-transform: var(--mdc-typography-caption-text-transform, inherit);
2102 display: block;
2103 margin-top: 0;
2104 /* @alternate */
2105 line-height: normal;
2106 /* @noflip */
2107 /*rtl:ignore*/
2108 margin-left: auto;
2109 /* @noflip */
2110 /*rtl:ignore*/
2111 margin-right: 0;
2112 /* @noflip */
2113 /*rtl:ignore*/
2114 padding-left: 16px;
2115 /* @noflip */
2116 /*rtl:ignore*/
2117 padding-right: 0;
2118 white-space: nowrap;
2119}
2120.mdc-text-field-character-counter::before {
2121 display: inline-block;
2122 width: 0;
2123 height: 16px;
2124 content: "";
2125 vertical-align: 0;
2126}
2127[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {
2128 /*rtl:begin:ignore*/
2129 /* @noflip */
2130 /*rtl:ignore*/
2131 margin-left: 0;
2132 /* @noflip */
2133 /*rtl:ignore*/
2134 margin-right: auto;
2135 /*rtl:end:ignore*/
2136}
2137
2138[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {
2139 /*rtl:begin:ignore*/
2140 /* @noflip */
2141 /*rtl:ignore*/
2142 padding-left: 0;
2143 /* @noflip */
2144 /*rtl:ignore*/
2145 padding-right: 16px;
2146 /*rtl:end:ignore*/
2147}
2148
2149.mdc-text-field__icon {
2150 align-self: center;
2151 cursor: pointer;
2152}
2153.mdc-text-field__icon:not([tabindex]), .mdc-text-field__icon[tabindex="-1"] {
2154 cursor: default;
2155 pointer-events: none;
2156}
2157.mdc-text-field__icon svg {
2158 display: block;
2159}
2160
2161.mdc-text-field__icon--leading {
2162 /* @noflip */
2163 /*rtl:ignore*/
2164 margin-left: 16px;
2165 /* @noflip */
2166 /*rtl:ignore*/
2167 margin-right: 8px;
2168}
2169[dir=rtl] .mdc-text-field__icon--leading, .mdc-text-field__icon--leading[dir=rtl] {
2170 /*rtl:begin:ignore*/
2171 /* @noflip */
2172 /*rtl:ignore*/
2173 margin-left: 8px;
2174 /* @noflip */
2175 /*rtl:ignore*/
2176 margin-right: 16px;
2177 /*rtl:end:ignore*/
2178}
2179
2180.mdc-text-field__icon--trailing {
2181 padding: 12px;
2182 /* @noflip */
2183 /*rtl:ignore*/
2184 margin-left: 0px;
2185 /* @noflip */
2186 /*rtl:ignore*/
2187 margin-right: 0px;
2188}
2189[dir=rtl] .mdc-text-field__icon--trailing, .mdc-text-field__icon--trailing[dir=rtl] {
2190 /*rtl:begin:ignore*/
2191 /* @noflip */
2192 /*rtl:ignore*/
2193 margin-left: 0px;
2194 /* @noflip */
2195 /*rtl:ignore*/
2196 margin-right: 0px;
2197 /*rtl:end:ignore*/
2198}
2199
2200/*# sourceMappingURL=mdc.textfield.css.map*/
\No newline at end of file