{"version":3,"sources":["webpack:///./packages/mdc-textfield/mdc-text-field.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///mdc-text-field.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/floating-label/_floating-label-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/line-ripple/_line-ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/line-ripple/_line-ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_notched-outline.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_notched-outline-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/mdc-textfield/_text-field.scss","webpack:///./packages/mdc-textfield/helper-text/_mixins.scss","webpack:///./packages/mdc-textfield/character-counter/_mixins.scss","webpack:///./packages/mdc-textfield/icon/_mixins.scss","webpack:///./packages/mdc-textfield/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss"],"names":[],"mappings":";;;;;;;AAsCE;EAEI;ECmBF;EAAc;EDjBZ;ECiBF;EAAc;EDfZ;ECeF;EAAc;EDbZ;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;AEtCN;AC6DM;EACE;EFtBJ;EAAc;EDEV;ECFJ;EAAc;EDIV;ECJJ;EAAc;EDMV;ECNJ;EAAc;EDQV;ECRJ;EAAc;EDUV;EGcA;AD7CR;;AFoCE;EAEI;AElCN;;AFuCI;ECtBA;EAAc;EDyBV;ECzBJ;EAAc;ED2BV;EACA;AEnCR;AC4BM;EACE;EAEA;AD3BR;AFoCM;ECjCF;EAAc;EDsCR;ECtCN;EAAc;EDwCR;AEnCV;;AElBE;EC2RE;EACA;ECxQE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;UAAA;EAZE;ELZF;EKwBA;EFxBE;EAAA;EAAA;AFkCN;;AEwDE;EAcM;UAAA;AFlER;;AE2EE;EAEI;UAAA;AFzEN;;AEAI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFIN;EEAI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFGN;EECI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EFHN;EEOI;IH/DF;IAAc;IGiEV;YAAA;EFJN;AACF;;AEzBI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFIN;EEAI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFGN;EECI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EFHN;EEOI;IH/DF;IAAc;IGiEV;YAAA;EFJN;AACF;AK9EM;EAEE;EACA;EACA;EACA;EACA;EACA;AL+ER;AK5EM;EACE;AL8ER;AK3EM;EACE;UAAA;EACA;EACA;AL6ER;;AKxEE;EAEI;UAAA;EACA;AL0EN;;AKtEE;EAEI;ALwEN;;AMhGE;EF4BE;AJwEJ;AM9FE;EFsBE;AJ2EJ;AMhHM;EACE;EAAA;EAAA;ANkHR;;AOvHE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ERYF;EAAc;EQVZ;EACA;AP0HN;AC5FM;EACE;EFtBJ;EAAc;EQLV;EN6BA;ADgGR;;AOzHI;EAII;EACA;EACA;APyHR;AOrHI;EAEI;APsHR;AOlHI;EAEI;EACA;APmHR;AO/GI;EAEI;EACA;EACA;APgHR;AO5GI;EAEI;AP6GR;AOzGI;EAEI;AP0GR;;AOpGI;ER5CA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EG6BI;AP0GR;ACrIM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD4IR;;AO9GI;EAEI;APgHR;;AQ3KI;EAII;EACA;AR2KR;AQvKI;ETNA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EITI,WA5BQ;ARwMhB;ACjKM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADwKR;;AQlLI;ETdA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJsLJ;ACpLM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD2LR;;AQ/LI;EAEI;ARiMR;;AS+BE;EACE;IACE,+DC5R2B;YD4R3B,uDC5R2B;IXoC7B;IAAc;IU8PZ;YAAA;ET/BJ;ESkCE;IVjQA;IAAc;IUmQZ;YAAA;ET/BJ;AACF;;ASiBE;EACE;IACE,+DC5R2B;YD4R3B,uDC5R2B;IXoC7B;IAAc;IU8PZ;YAAA;ET/BJ;ESkCE;IVjQA;IAAc;IUmQZ;YAAA;ET/BJ;AACF;ASmCE;EACE;IACE;YAAA;IACA;ETjCJ;ESoCE;IACE;ETlCJ;AACF;AS0BE;EACE;IACE;YAAA;IACA;ETjCJ;ESoCE;IACE;ETlCJ;AACF;ASqCE;EACE;IACE;YAAA;IACA;ETnCJ;ESsCE;IACE;ETpCJ;AACF;AS4BE;EACE;IACE;YAAA;IACA;ETnCJ;ESsCE;IACE;ETpCJ;AACF;AWmBE;EFnNE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;ATgMN;AS5LE;;EAGI;EACA;EACA;EACA;EACA;AT6LN;ASzLE;EAGI;EL5EA;ELZF;EKwBA;AJ4PJ;AS/KE;ELzFI;ELZF;EKwBA;AJiQJ;ASxKI;EAEI;UAAA;ATyKR;ASrKI;EAEI;EVpHJ;EAAc;EUsHV;EACA;UAAA;EACA;UAAA;ATuKR;ASjKI;EAEI;EVhIJ;EAAc;EUkIV;ATmKR;AS7JI;EAEI;UAAA;AT8JR;AStJI;EAEI;UAAA;EVpJJ;EAAc;EU0JV;UAAA;AToJR;AStIE;;EAGI;EV3KF;EAAc;EU6KZ;EACA;EACA;ATwIN;ASnII;EAEI;EACA;AToIR;;AWtCE;EF3CE;EACA;EACA;EACA;EACA;EAGA;ATmFJ;;AWjTE;EPZI;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAAA;EAAA;EOw1CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AX3hCJ;AWmpEE;EPv9EE;AJuUJ;AW2kEE;EPl5EE;AJ0UJ;AW+qEE;EAGE;IP5/EA;EJ8UF;EW8qEE;IP5/EA;EJ8UF;EW8qEE;IP5/EA;EJ8UF;EW8qEE;IP5/EA;EJ8UF;AACF;AWkrEE;EAGE;IPpgFA;EJmVF;AACF;AWsnBE;EPt9BI;ELZF;EKwBA;AJyVJ;AYpUE;ERrBE;AJ4VJ;AavUE;;ETrBE;AJgWJ;AclQE;EV9FE;AJmWJ;Ac3PE;EVxGE;AJsWJ;AW0nEI;EPh+EA;AJyWJ;AWioEI;EP1+EA;AJ4WJ;AW2jCE;EAEI;EACA;UAAA;EACA;AX1jCN;;AW7WE;ERuPE;EACA;ECxQE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;UAAA;EAZE;ELZF;EKwBA;EO0pEA,YI7lEW;EJimEX;EASA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;EACA;AX5xDJ;AWgyDI;EACE;AX9xDN;AWkyDI;EACE;AXhyDN;AWmyDI;EACE;AXjyDN;AWqyDI;EACE;AXnyDN;AW4lEE;EAGE;IAlTA;IAIA;EX5yDF;EW0lEE;IAlTA;IAIA;EX5yDF;EW0lEE;IAlTA;IAIA;EX5yDF;EW0lEE;IAlTA;IAIA;EX5yDF;AACF;AW8lEE;EAGE;IA1TA;IAIA;EXtyDF;AACF;AWglEE;EAGE;IArSA;IACA;IAIA;EX7yDF;EW6kEE;IArSA;IACA;IAIA;EX7yDF;EW6kEE;IArSA;IACA;IAIA;EX7yDF;EW6kEE;IArSA;IACA;IAIA;EX7yDF;AACF;AWilEE;EAGE;IA7SA;IACA;IAIA;EXtyDF;AACF;;AWlaE;ERsOE;EACA;ECxQE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;UAAA;EAZE;ELZF;EKwBA;EO0pEA,YI7lEW;EJimEX;EAuEA;EACA;AXpxDJ;AW1bI;EAmuEA;AXtyDJ;AWvbI;EACE;IAitEF;IACA;IACA;IACA;EXvxDF;AACF;;AWxbE;EZxDE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJseJ;ACpeM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD2eR;;AWxcI;EZ3DA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJyfJ;ACvfM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD8fR;;AWtdE;EZhEE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ4gBJ;AC1gBM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADihBR;;AWteI;EZnEA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ+hBJ;AC7hBM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADoiBR;;AWlfE;EPvDE;AJ6iBJ;AgBjeI;;EZxFE;ELZF;EKwBA;AJmjBJ;AgB/FE;EZheI;ELZF;EKwBA;AJwjBJ;AgBpGE;EA9QI;EZlNA;ELZF;EKwBA;AJ8jBJ;AGrME;EAyCA;EACA;EACA,YYxWoB;EZyWpB;EAxCI;AHwMN;AW48DE;EPjhFE;AJwkBJ;AM3kBI;EFGA;AJ2kBJ;AM9kBI;EFGA;AJ8kBJ;AM3lBI;EFCE;ELZF;EKwBA;AJmlBJ;AWm4BE;EZz+CE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ2lBJ;ACzlBM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADgmBR;;AEniBE;EAcM;UAAA;AFyhBR;AW0xBI;EACE;AXxxBN;AW83BI;EACE;AX53BN;AW+3BI;EAEE;AX93BN;AWm4BE;EACE;IA0vBA;IACA;IACA;IACA;EX1nDF;AACF;;AW3jBE;EA2jBE,YIvlBK;EJu/CL;AX35BJ;AE7jBE;EAcM;UAAA;AFkjBR;AQ/aE;EAEI;ARgbN;AEnkBE;;EAcM;UAAA;AFyjBR;AQtaI;;EAEI;ARwaR;AEpjBE;EAEI;UAAA;AFqjBN;AE9nBI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFioBN;EE7nBI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFgoBN;EE5nBI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF0nBN;EEtnBI;IH/DF;IAAc;IGiEV;YAAA;EFynBN;AACF;AEtpBI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFioBN;EE7nBI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFgoBN;EE5nBI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF0nBN;EEtnBI;IH/DF;IAAc;IGiEV;YAAA;EFynBN;AACF;AW2tBI;EACE;AXztBN;AQ/pBE;;;EJZE;AJgrBJ;AQpqBE;;;EJZE;AJqrBJ;AQzqBE;;;EJxBI;ELZF;EKwBA;AJ4rBJ;AQhnBE;ET/FE;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;AJktBJ;AChtBM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADquBR;;AQnoBQ;EA3BN;IA4BQ;ERuoBR;AACF;AQpnBQ;EAZN;IAaQ;ERunBR;AACF;AQlnBE;ETtJE;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ2wBJ;ACzwBM;EACE;EFtBJ;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKOZ;ELZF;EAKA;EAAc;EKmBd;EHKI;AD8xBR;;AW8cM;EAlrCJ;IZlFE;IAAc;IYywCV;EX5cN;AACF;AWscM;EAlrCJ;IZlFE;IAAc;IYywCV;EXrcN;AACF;AW+bM;EA3LF;IZzkCA;IAAc;IYywCV;EX9bN;AACF;AWwbM;EA3LF;IZzkCA;IAAc;IYywCV;EXvbN;AACF;AWsQI;EZzlCA;EAAc;EY6lCR;AXrQV;AW4aM;EA3KF;IZzlCA;IAAc;IYywCV;EX3aN;AACF;AC10BM;EACE;EFtBJ;EAAc;EY6mCN;EVrlCJ;AD80BR;AW8ZM;EV/uCA;IFrBF;IAAc;IYywCV;EX7ZN;AACF;;AWwQI;EZrnCA;EAAc;EYmoCR;AXhRV;AWiZM;EA/IF;IZrnCA;IAAc;IYywCV;EXhZN;AACF;ACr2BM;EACE;EFtBJ;EAAc;EYyoCN;EVjnCJ;ADy2BR;AWmYM;EV/uCA;IFrBF;IAAc;IYywCV;EXlYN;AACF;;AW+QI;EZvpCA;EAAc;EYi7Cd;EZj7CA;EAAc;EYm7Cd;AXliBJ;AQr1BE;EAEI,gBAjFS;ARu6Bf;AgBrzBI;;EZxFE;ELZF;EKwBA;AJu4BJ;AWqqBE;EZ/jDE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ+4BJ;AC74BM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADo5BR;;AWooBE;EAGI;EAGA;EACA;AXroBN;AW71BI;EAy/CA;AXzpBJ;;AWz1BE;EAyzDE;EACA;EACA;EACA;EACA;EAIA;AX/9BJ;AWskCE;EAEI,SIr7De;Afg3BrB;AWykCI;EAEI;UAAA;AXxkCR;AWr2BI;EAw7DA;EACA;EACA,kBIr8DmB;EJs8DnB;EACA;EACA;EACA;EAGA;EAIA,mBIh9DmB;Af23BvB;AWwnCI;EAGE;AXxnCN;AE73BE;EAcM;UAAA;AFk3BR;AEz2BE;EAEI;UAAA;AF02BN;AEn7BI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFs7BN;EEl7BI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFq7BN;EEj7BI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF+6BN;EE36BI;IH/DF;IAAc;IGiEV;YAAA;EF86BN;AACF;AE38BI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFs7BN;EEl7BI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFq7BN;EEj7BI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF+6BN;EE36BI;IH/DF;IAAc;IGiEV;YAAA;EF86BN;AACF;AW14BM;EAigEF,gBIt/D+B;EJu/D/B,kBIt/DkC;Afk4BtC;AWz4BQ;EAqgEJ,gBI/+DwC;EJg/DxC,mBI/+D2C;Afs3B/C;AQ57BE;EAEI,cGwjEyC;AX3nC/C;AEt6BE;EAcM;UAAA;AF25BR;AQxxBE;EAEI;ARyxBN;AE56BE;;EAcM;UAAA;AFk6BR;AQ/wBI;;EAEI;ARixBR;AE75BE;EAEI;UAAA;AF85BN;AEv+BI;EACE;IHtCF;IAAc;IGwCV;YAAA;EF0+BN;EEt+BI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFy+BN;EEr+BI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EFm+BN;EE/9BI;IH/DF;IAAc;IGiEV;YAAA;EFk+BN;AACF;AE//BI;EACE;IHtCF;IAAc;IGwCV;YAAA;EF0+BN;EEt+BI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFy+BN;EEr+BI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EFm+BN;EE/9BI;IH/DF;IAAc;IGiEV;YAAA;EFk+BN;AACF;AWh7BM;EAqiEF,gBI7jEiC;EJ8jEjC,mBI7jEoC;Af28BxC;AWh7BM;EAyhEF,SI/jE0B;Afy9B9B;AW76BM;EAi8DF,kBIh7D4C;Af+5BhD;AW56BM;EA86DF;EAEA;AXhgCJ;AGrpBE;EAwBA;EACA;EACA,YYvS0C;EZwS1C;EAvBI;AHwpBN;AW2/BI;EAEE;AX1/BN;;AWl7BE;EA2xDE;EACA;EACA;EACA;EACA;EACA;EACA,gBIr3DK;EJ83DL;EAAA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;AX72BJ;AWh8BI;EA2zDA;UAAA;AXx3BJ;AWh8BM;;EAm0DF;UAAA;AX/3BJ;AW97BI;EZtJA;EAAc;EYm+Dd;UAAA;AX14BJ;ACpkCM;EACE;EFtBJ;EAAc;EYw+DZ;UAAA;EVh9DE;ADwkCR;;AWv8BM;;EZzJF;EAAc;EYs/Dd;UAAA;AX/4BJ;ACllCM;EACE;EFtBJ;EAAc;EY2/DZ;UAAA;EVn+DE;ADslCR;;AW98BE;EZhKE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJomCJ;AClmCM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADymCR;;AW2nBE;ETroDE,4BSgwDA;EZv3DA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJwnCJ;ACtnCM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD6nCR;;AWgnBE;ET9oDE,0CSgxDA;AX9uBJ;AWgqBE;EZzzDE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJ8oCJ;AC5oCM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADmpCR;;AQr6BE;EAEI,4BGgmDF;AXzrBJ;AE1lCE;EHrFE;EAAc;EGyFV;UAAA;AF2lCR;AC/pCM;EACE;EFtBJ;EAAc;EG+FR;UAAA;EDvEF;ADmqCR;;AQr9BE;EAEI;ARu9BN;AE1mCE;;EHrFE;EAAc;EGyFV;UAAA;AF4mCR;AChrCM;EACE;EFtBJ;EAAc;EG+FR;UAAA;EDvEF;ADorCR;;AQt9BI;;EAEI;ARy9BR;AErmCE;EAEI;UAAA;AFsmCN;AE/qCI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFkrCN;EE9qCI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFirCN;EE7qCI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF2qCN;EEvqCI;IH/DF;IAAc;IGiEV;YAAA;EF0qCN;AACF;AEvsCI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFkrCN;EE9qCI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFirCN;EE7qCI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF2qCN;EEvqCI;IH/DF;IAAc;IGiEV;YAAA;EF0qCN;AACF;ACvtCM;EACE;EAEA;ADwtCR;AEpoCE;EAEI;UAAA;AFqoCN;;AE9sCI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFktCN;EE9sCI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFitCN;EE7sCI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF2sCN;EEvsCI;IH/DF;IAAc;IGiEV;YAAA;EF0sCN;AACF;;AEvuCI;EACE;IHtCF;IAAc;IGwCV;YAAA;EFktCN;EE9sCI;IACE;YAAA;IH7CJ;IAAc;IG+CV;YAAA;EFitCN;EE7sCI;IACE;YAAA;IHpDJ;IAAc;IG2DV;YAAA;EF2sCN;EEvsCI;IH/DF;IAAc;IGiEV;YAAA;EF0sCN;AACF;;AWhmCE;EZ5KE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJkwCJ;AChwCM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADuwCR;;AWmfE;ET3pDE,4BSgwDA;AXplBJ;AWmfE;ET/pDE,0CSgxDA;AXjmBJ;AQhiCE;EAEI,4BGgmDF;AX/jBJ;;AWjnCE;EZxLE;EAAc;EYi7Cd;EZj7CA;EAAc;EYm7Cd;AXjIJ;AWmfE;ET9qDE,4BSgwDA;AXlkBJ;AWofE;ETlrDE,0CSgxDA;AX/kBJ;;AWvnCE;EAEI;EACA;EACA;AXynCN;AWtnCI;EAEI,mBI5Hc;EJ6Hd,kBI7Hc;AfovCtB;;AW9mCE;EAEI;AXgnCN;;AWoqCE;EPv9EE;AJuzCJ;AQ/xCE;;;EJxBE;AJ4zCJ;AWgZE;EAKI;AXlZN;AQtxCE;EAEI,gBOTkB;AfgyCxB;AQzxCE;EAEI,cGmrDyC;AXzZ/C;;AMx0CI;EFTE;ELZF;EKwBA;AJ20CJ;AMx1CI;EFCE;ELZF;EKwBA;AJg1CJ;AWuoCE;EPn+EI;ELZF;EKwBA;AJq1CJ;AYtzCE;ER3CI;ELZF;EKwBA;AJ01CJ;AWhZE;EPt9BI;ELZF;EKwBA;AJ+1CJ;AcvvCE;EVpHI;ELZF;EKwBA;AJo2CJ;AMv2CI;EFTE;ELZF;EKwBA;AJy2CJ;AQ71CE;;;EJxBI;ELZF;EKwBA;AJg3CJ;AQp2CE;;;EJxBI;ELZF;EKwBA;AJu3CJ;AQ32CE;;;EJxBI;ELZF;EKwBA;AJ83CJ;AW4TE;EAEI;AX3TN;;AWxqCE;EA46CE;AXhQJ;AW6gCE;EPl5EE;AJw4CJ;AWinCE;EAGE;IP5/EA;EJ44CF;EWgnCE;IP5/EA;EJ44CF;EWgnCE;IP5/EA;EJ44CF;EWgnCE;IP5/EA;EJ44CF;AACF;AWonCE;EAGE;IPpgFA;EJi5CF;AACF;AWqkCE;EPv9EE;AJq5CJ;AYh4CE;ERrBE;AJw5CJ;Aan4CE;;ETrBE;AJ45CJ;Ac9zCE;EV9FE;AJ+5CJ;AcvzCE;EVxGE;AJk6CJ;AW8jCI;EPh+EA;AJq6CJ;AWqkCI;EP1+EA;AJw6CJ;AM36CI;EFGA;AJ26CJ;AQ/5CE;;;EJZE;AJg7CJ;AWykCE;EAGE;IP5/EA;EJo7CF;EWwkCE;IP5/EA;EJo7CF;EWwkCE;IP5/EA;EJo7CF;EWwkCE;IP5/EA;EJo7CF;AACF;AW4kCE;EAGE;IPpgFA;EJy7CF;AACF;AiBn6CI;ENg8EF;IPv9EE;EJ87CF;AACF;AiBx6CI;ELFF;IRrBE;EJm8CF;AACF;AiB76CI;EJFF;;ITrBE;EJy8CF;AACF;AiBn7CI;EHuEF;IV9FE;EJ88CF;AACF;AiBx7CI;EHiFF;IVxGE;EJm9CF;AACF;AiB77CI;ENy8EA;IPh+EA;EJw9CF;AACF;AiBl8CI;ENm9EA;IP1+EA;EJ69CF;AACF;AiBv8CI;EX1BA;IFGA;EJk+CF;AACF;AiB58CI;ETXF;;;IJZE;EJy+CF;AACF;AiBv9CI;ENomDA;IAEI;EX3IN;EW+IE;IAEI;EX9IN;AACF;AWsJE;EAEI;AXrJN;AWzxCI;EP5NA;AJw/CJ;AWsKE;EAII;AXvKN;AW3xCI;EAq7CA;AXvJJ;;AW6yBE;EZ9zEE;EAAc;EYk0EZ;AX3yBN;AClgDM;EACE;EFtBJ;EAAc;EYw0EV;EVhzEA;ADsgDR;;ACzgDM;EACE;EAEA;AD2gDR;AWkzBM;;;EZr1EF;EAAc;EYw1EV;AX9yBR;AWizBM;EZ31EF;EAAc;EY61EV;EZ71EJ;EAAc;EY+1EV,kBI5sES;Af+5CjB;AWgzBM;EZl2EF;EAAc;EYo2EV,kBI/sES;EhBrJb;EAAc;EYs2EV;AX5yBR;AWizBM;EACE;AX/yBR;AWkzBM;EACE;AXhzBR;AWmzBM;EACE;AXjzBR;AWozBM;EACE;AXlzBR;AWqzBM;EACE;AXnzBR;;ACpjDM;EACE;EAEA;ADsjDR;AW4zBM;EZ14EF;EAAc;EY84EV;AX3zBR;AW8zBM;EZj5EF;EAAc;EYo5EV,mBIhwEqB;Afo8C7B;AW+zBM;EZv5EF;EAAc;EYy5EV,iBInwEqB;Afu8C7B;;AYjnDE;ETkSE;EACA;ECxQE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;UAAA;EAZE;ELZF;EKwBA;EDuSA,cA2CQ;EAoBN;EACA;EACA;ES1YA;EACA;EACA;EAIA;AZwoDN;AGnvCE;EAyCA;EACA;EACA,YSzc0C;ET0c1C;EAxCI;AHsvCN;;AY3oDE;EAEI;EAIA;EACA;AZ0oDN;;AalqDE;EVoSE;EACA;ECxQE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;EAZE;ELZF;EKwBA;UAAA;EAZE;ELZF;EKwBA;EDuSA,cA2CQ;EAoBN;EACA;EACA;EJ3XF;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EShCE;AbosDN;AG3yCE;EAyCA;EACA;EACA,YU3c0C;EV4c1C;EAxCI;AH8yCN;ACzqDM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;ADgrDR;;ACnrDM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD2rDR;;Ac5uDE;EAsFE;EACA;Ad0pDJ;AcvpDE;EAGI;EACA;AdupDN;AclvDI;EAuGA;Ad8oDJ;;AchvDE;EfiBE;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJqtDJ;ACntDM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD0tDR;;Ac/vDE;EAsHE,aAJU;EfrGV;EAAc;EKmBd;ELnBA;EAAc;EKmBd;AJyuDJ;ACvuDM;EACE;EFtBJ;EAAc;EKmBd;ELnBA;EAAc;EKmBd;EHKI;AD8uDR,C","file":"mdc.textfield.css","sourcesContent":["//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './floating-label-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include floating-label-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define floating-label\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      @include rtl.ignore-next-line();\n      left: 0;\n      @include rtl.ignore-next-line();\n      -webkit-transform-origin: left top;\n      @include rtl.ignore-next-line();\n      transform-origin: left top;\n      line-height: 1.15rem;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: text;\n      overflow: hidden;\n\n      /* @alternate */\n      // Force the label into its own layer to prevent visible layer promotion adjustments\n      // when the ripple is activated behind it.\n      will-change: transform;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        right: 0;\n        @include rtl.ignore-next-line();\n        left: auto;\n        @include rtl.ignore-next-line();\n        -webkit-transform-origin: right top;\n        @include rtl.ignore-next-line();\n        transform-origin: right top;\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: auto;\n    }\n  }\n\n  .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker) {\n    &::after {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        margin-left: 1px;\n        @include rtl.ignore-next-line();\n        margin-right: 0px;\n        content: '*';\n      }\n    }\n\n    @include rtl.rtl {\n      &::after {\n        // Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]\n        // selector and that breaks some browsers\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          margin-left: 0;\n          @include rtl.ignore-next-line();\n          margin-right: 1px;\n        }\n      }\n    }\n  }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n///   @include annotate((noflip: true));\n///   left: 0;\n///\n/// @example - scss\n///   @include annotate($noflip: true);\n///   left: 0;\n///\n/// @example - css\n///   /* @noflip */ /*rtl:ignore*/\n///   left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n///     for an annotation to be added.\n@mixin annotate($annotations...) {\n  $keywords: meta.keywords($annotations);\n  @if list.length($annotations) > 0 {\n    $annotations: list.nth($annotations, 1);\n  } @else {\n    $annotations: $keywords;\n  }\n\n  @if (map.get($annotations, alternate) == true) {\n    /* @alternate */\n  }\n\n  // noflip must be the last tag right before the property\n  @if (map.get($annotations, noflip) == true) {\n    /* @noflip */ /*rtl:ignore*/\n  }\n}\n",".mdc-floating-label {\n  position: absolute;\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  -webkit-transform-origin: left top;\n  /* @noflip */\n  /*rtl:ignore*/\n  transform-origin: left top;\n  line-height: 1.15rem;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: text;\n  overflow: hidden;\n  /* @alternate */\n  will-change: transform;\n}\n[dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  right: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  left: auto;\n  /* @noflip */\n  /*rtl:ignore*/\n  -webkit-transform-origin: right top;\n  /* @noflip */\n  /*rtl:ignore*/\n  transform-origin: right top;\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: right;\n  /*rtl:end:ignore*/\n}\n\n.mdc-floating-label--float-above {\n  cursor: auto;\n}\n\n.mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 1px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 0px;\n  content: \"*\";\n}\n[dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker), .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /*rtl:end:ignore*/\n}\n[dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after, .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)[dir=rtl]::after {\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 1px;\n}\n\n.mdc-floating-label {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n  font-size: 1rem;\n  /* @alternate */\n  font-size: var(--mdc-typography-subtitle1-font-size, 1rem);\n  font-weight: 400;\n  /* @alternate */\n  font-weight: var(--mdc-typography-subtitle1-font-weight, 400);\n  letter-spacing: 0.009375em;\n  /* @alternate */\n  letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n  text-decoration: inherit;\n  /* @alternate */\n  text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);\n  text-transform: inherit;\n  /* @alternate */\n  text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);\n  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mdc-floating-label--float-above {\n  transform: translateY(-106%) scale(0.75);\n}\n\n.mdc-floating-label--shake {\n  animation: mdc-floating-label-shake-float-above-standard 250ms 1;\n}\n\n@keyframes mdc-floating-label-shake-float-above-standard {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);\n  }\n}\n.mdc-line-ripple::before, .mdc-line-ripple::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  border-bottom-style: solid;\n  content: \"\";\n}\n.mdc-line-ripple::before {\n  z-index: 1;\n}\n.mdc-line-ripple::after {\n  transform: scaleX(0);\n  opacity: 0;\n  z-index: 2;\n}\n\n.mdc-line-ripple--active::after {\n  transform: scaleX(1);\n  opacity: 1;\n}\n\n.mdc-line-ripple--deactivating::after {\n  opacity: 0;\n}\n\n.mdc-line-ripple::before {\n  border-bottom-width: 1px;\n}\n.mdc-line-ripple::after {\n  border-bottom-width: 2px;\n}\n.mdc-line-ripple::after {\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mdc-notched-outline {\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: left;\n  pointer-events: none;\n}\n[dir=rtl] .mdc-notched-outline, .mdc-notched-outline[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: right;\n  /*rtl:end:ignore*/\n}\n\n.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {\n  box-sizing: border-box;\n  height: 100%;\n  pointer-events: none;\n}\n.mdc-notched-outline__trailing {\n  flex-grow: 1;\n}\n.mdc-notched-outline__notch {\n  flex: 0 0 auto;\n  width: auto;\n}\n.mdc-notched-outline .mdc-floating-label {\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n}\n.mdc-notched-outline .mdc-floating-label--float-above {\n  text-overflow: clip;\n}\n.mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  max-width: 133.3333333333%;\n}\n\n.mdc-notched-outline--notched .mdc-notched-outline__notch {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 8px;\n  border-top: none;\n}\n[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 8px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  /*rtl:end:ignore*/\n}\n\n.mdc-notched-outline--no-label .mdc-notched-outline__notch {\n  display: none;\n}\n\n.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {\n  border-top: 1px solid;\n  border-bottom: 1px solid;\n}\n.mdc-notched-outline__leading {\n  /* @noflip */\n  /*rtl:ignore*/\n  border-left: 1px solid;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-right: none;\n  width: 12px;\n}\n[dir=rtl] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  border-left: none;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-right: 1px solid;\n  /*rtl:end:ignore*/\n}\n\n.mdc-notched-outline__trailing {\n  /* @noflip */\n  /*rtl:ignore*/\n  border-left: none;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-right: 1px solid;\n}\n[dir=rtl] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  border-left: 1px solid;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-right: none;\n  /*rtl:end:ignore*/\n}\n\n.mdc-notched-outline__notch {\n  max-width: calc(100% - 12px * 2);\n}\n\n@keyframes mdc-ripple-fg-radius-in {\n  from {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n  }\n  to {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n  }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n  from {\n    animation-timing-function: linear;\n    opacity: 0;\n  }\n  to {\n    opacity: var(--mdc-ripple-fg-opacity, 0);\n  }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n  from {\n    animation-timing-function: linear;\n    opacity: var(--mdc-ripple-fg-opacity, 0);\n  }\n  to {\n    opacity: 0;\n  }\n}\n.mdc-text-field--filled {\n  --mdc-ripple-fg-size: 0;\n  --mdc-ripple-left: 0;\n  --mdc-ripple-top: 0;\n  --mdc-ripple-fg-scale: 1;\n  --mdc-ripple-fg-translate-end: 0;\n  --mdc-ripple-fg-translate-start: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  will-change: transform, opacity;\n}\n.mdc-text-field--filled .mdc-text-field__ripple::before,\n.mdc-text-field--filled .mdc-text-field__ripple::after {\n  position: absolute;\n  border-radius: 50%;\n  opacity: 0;\n  pointer-events: none;\n  content: \"\";\n}\n.mdc-text-field--filled .mdc-text-field__ripple::before {\n  transition: opacity 15ms linear, background-color 15ms linear;\n  z-index: 1;\n  /* @alternate */\n  z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-text-field--filled .mdc-text-field__ripple::after {\n  z-index: 0;\n  /* @alternate */\n  z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {\n  transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {\n  top: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 0;\n  transform: scale(0);\n  transform-origin: center center;\n}\n.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {\n  top: var(--mdc-ripple-top, 0);\n  /* @noflip */\n  /*rtl:ignore*/\n  left: var(--mdc-ripple-left, 0);\n}\n.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {\n  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {\n  animation: mdc-ripple-fg-opacity-out 150ms;\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-text-field--filled .mdc-text-field__ripple::before,\n.mdc-text-field--filled .mdc-text-field__ripple::after {\n  top: calc(50% - 100%);\n  /* @noflip */\n  /*rtl:ignore*/\n  left: calc(50% - 100%);\n  width: 200%;\n  height: 200%;\n}\n.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {\n  width: var(--mdc-ripple-fg-size, 100%);\n  height: var(--mdc-ripple-fg-size, 100%);\n}\n\n.mdc-text-field__ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.mdc-text-field {\n  border-top-left-radius: 4px;\n  /* @alternate */\n  border-top-left-radius: var(--mdc-shape-small, 4px);\n  border-top-right-radius: 4px;\n  /* @alternate */\n  border-top-right-radius: var(--mdc-shape-small, 4px);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n  display: inline-flex;\n  align-items: baseline;\n  padding: 0 16px;\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  /* @alternate */\n  will-change: opacity, transform, color;\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {\n  color: rgba(0, 0, 0, 0.6);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {\n  color: rgba(0, 0, 0, 0.87);\n}\n@media all {\n  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {\n    color: rgba(0, 0, 0, 0.54);\n  }\n}\n@media all {\n  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {\n    color: rgba(0, 0, 0, 0.54);\n  }\n}\n.mdc-text-field .mdc-text-field__input {\n  caret-color: #6200ee;\n  /* @alternate */\n  caret-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {\n  color: rgba(0, 0, 0, 0.6);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,\n.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n  color: rgba(0, 0, 0, 0.6);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {\n  color: rgba(0, 0, 0, 0.6);\n}\n.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {\n  color: rgba(0, 0, 0, 0.6);\n}\n.mdc-text-field .mdc-floating-label {\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.mdc-text-field__input {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n  font-size: 1rem;\n  /* @alternate */\n  font-size: var(--mdc-typography-subtitle1-font-size, 1rem);\n  font-weight: 400;\n  /* @alternate */\n  font-weight: var(--mdc-typography-subtitle1-font-weight, 400);\n  letter-spacing: 0.009375em;\n  /* @alternate */\n  letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n  text-decoration: inherit;\n  /* @alternate */\n  text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);\n  text-transform: inherit;\n  /* @alternate */\n  text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);\n  height: 28px;\n  transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n  width: 100%;\n  min-width: 0;\n  border: none;\n  border-radius: 0;\n  background: none;\n  appearance: none;\n  padding: 0;\n}\n.mdc-text-field__input::-ms-clear {\n  display: none;\n}\n.mdc-text-field__input::-webkit-calendar-picker-indicator {\n  display: none;\n}\n.mdc-text-field__input:focus {\n  outline: none;\n}\n.mdc-text-field__input:invalid {\n  box-shadow: none;\n}\n@media all {\n  .mdc-text-field__input::placeholder {\n    transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n    opacity: 0;\n  }\n}\n@media all {\n  .mdc-text-field__input:-ms-input-placeholder {\n    transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n    opacity: 0;\n  }\n}\n@media all {\n  .mdc-text-field--no-label .mdc-text-field__input::placeholder, .mdc-text-field--focused .mdc-text-field__input::placeholder {\n    transition-delay: 40ms;\n    transition-duration: 110ms;\n    opacity: 1;\n  }\n}\n@media all {\n  .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {\n    transition-delay: 40ms;\n    transition-duration: 110ms;\n    opacity: 1;\n  }\n}\n\n.mdc-text-field__affix {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n  font-size: 1rem;\n  /* @alternate */\n  font-size: var(--mdc-typography-subtitle1-font-size, 1rem);\n  font-weight: 400;\n  /* @alternate */\n  font-weight: var(--mdc-typography-subtitle1-font-weight, 400);\n  letter-spacing: 0.009375em;\n  /* @alternate */\n  letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n  text-decoration: inherit;\n  /* @alternate */\n  text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);\n  text-transform: inherit;\n  /* @alternate */\n  text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);\n  height: 28px;\n  transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n  opacity: 0;\n  white-space: nowrap;\n}\n.mdc-text-field--label-floating .mdc-text-field__affix, .mdc-text-field--no-label .mdc-text-field__affix {\n  opacity: 1;\n}\n@supports (-webkit-hyphens: none) {\n  .mdc-text-field--outlined .mdc-text-field__affix {\n    align-items: center;\n    align-self: center;\n    display: inline-flex;\n    height: 100%;\n  }\n}\n\n.mdc-text-field__affix--prefix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 2px;\n}\n[dir=rtl] .mdc-text-field__affix--prefix, .mdc-text-field__affix--prefix[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 2px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 12px;\n}\n[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 12px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field__affix--suffix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 12px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n[dir=rtl] .mdc-text-field__affix--suffix, .mdc-text-field__affix--suffix[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 12px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 2px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 2px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--filled {\n  height: 56px;\n}\n.mdc-text-field--filled .mdc-text-field__ripple::before,\n.mdc-text-field--filled .mdc-text-field__ripple::after {\n  background-color: rgba(0, 0, 0, 0.87);\n  /* @alternate */\n  background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));\n}\n.mdc-text-field--filled:hover .mdc-text-field__ripple::before, .mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before {\n  opacity: 0.04;\n  /* @alternate */\n  opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.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 {\n  transition-duration: 75ms;\n  opacity: 0.12;\n  /* @alternate */\n  opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-text-field--filled::before {\n  display: inline-block;\n  width: 0;\n  height: 40px;\n  content: \"\";\n  vertical-align: 0;\n}\n.mdc-text-field--filled:not(.mdc-text-field--disabled) {\n  background-color: whitesmoke;\n}\n.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {\n  border-bottom-color: rgba(0, 0, 0, 0.42);\n}\n.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {\n  border-bottom-color: rgba(0, 0, 0, 0.87);\n}\n.mdc-text-field--filled .mdc-line-ripple::after {\n  border-bottom-color: #6200ee;\n  /* @alternate */\n  border-bottom-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-text-field--filled .mdc-floating-label {\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 16px;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: initial;\n}\n[dir=rtl] .mdc-text-field--filled .mdc-floating-label, .mdc-text-field--filled .mdc-floating-label[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  left: initial;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: 16px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--filled .mdc-floating-label--float-above {\n  transform: translateY(-106%) scale(0.75);\n}\n.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {\n  height: 100%;\n}\n.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {\n  display: none;\n}\n.mdc-text-field--filled.mdc-text-field--no-label::before {\n  display: none;\n}\n@supports (-webkit-hyphens: none) {\n  .mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {\n    align-items: center;\n    align-self: center;\n    display: inline-flex;\n    height: 100%;\n  }\n}\n\n.mdc-text-field--outlined {\n  height: 56px;\n  overflow: visible;\n}\n.mdc-text-field--outlined .mdc-floating-label--float-above {\n  transform: translateY(-37.25px) scale(1);\n}\n.mdc-text-field--outlined .mdc-floating-label--float-above {\n  font-size: 0.75rem;\n}\n.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  transform: translateY(-34.75px) scale(0.75);\n}\n.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  font-size: 1rem;\n}\n.mdc-text-field--outlined .mdc-floating-label--shake {\n  animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;\n}\n@keyframes mdc-floating-label-shake-float-above-text-field-outlined {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n}\n.mdc-text-field--outlined .mdc-text-field__input {\n  height: 100%;\n}\n.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {\n  border-color: rgba(0, 0, 0, 0.87);\n}\n.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,\n.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {\n  border-color: #6200ee;\n  /* @alternate */\n  border-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: var(--mdc-shape-small, 4px);\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: 0;\n  /*rtl:end:ignore*/\n}\n\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {\n    width: max(12px, var(--mdc-shape-small, 4px));\n  }\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n    max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  }\n}\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: 0;\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-left-radius: var(--mdc-shape-small, 4px);\n  /* @noflip */\n  /*rtl:ignore*/\n  border-top-right-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-right-radius: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: 4px;\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\n  border-bottom-left-radius: var(--mdc-shape-small, 4px);\n  /*rtl:end:ignore*/\n}\n\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));\n  }\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-right: max(16px, var(--mdc-shape-small, 4px));\n  }\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined + .mdc-text-field-helper-line {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));\n  }\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined + .mdc-text-field-helper-line {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-right: max(16px, var(--mdc-shape-small, 4px));\n  }\n}\n.mdc-text-field--outlined.mdc-text-field--with-leading-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined.mdc-text-field--with-leading-icon {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-right: max(16px, var(--mdc-shape-small, 4px));\n  }\n}\n[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  /*rtl:end:ignore*/\n}\n@supports (top: max(0%)) {\n  [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-left: max(16px, var(--mdc-shape-small, 4px));\n  }\n}\n\n.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n@supports (top: max(0%)) {\n  .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));\n  }\n}\n[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /*rtl:end:ignore*/\n}\n@supports (top: max(0%)) {\n  [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {\n    /* @noflip */\n    /*rtl:ignore*/\n    padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));\n  }\n}\n\n.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {\n  padding-top: 1px;\n}\n.mdc-text-field--outlined .mdc-text-field__ripple::before,\n.mdc-text-field--outlined .mdc-text-field__ripple::after {\n  background-color: transparent;\n  /* @alternate */\n  background-color: var(--mdc-ripple-color, transparent);\n}\n.mdc-text-field--outlined .mdc-floating-label {\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 4px;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: initial;\n}\n[dir=rtl] .mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--outlined .mdc-floating-label[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  left: initial;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: 4px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--outlined .mdc-text-field__input {\n  display: flex;\n  border: none !important;\n  background-color: transparent;\n}\n.mdc-text-field--outlined .mdc-notched-outline {\n  z-index: 1;\n}\n\n.mdc-text-field--textarea {\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n  height: auto;\n  padding: 0;\n  transition: none;\n}\n.mdc-text-field--textarea .mdc-floating-label {\n  top: 19px;\n}\n.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {\n  transform: none;\n}\n.mdc-text-field--textarea .mdc-text-field__input {\n  flex-grow: 1;\n  height: auto;\n  min-height: 1.5rem;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  resize: none;\n  padding: 0 16px;\n  line-height: 1.5rem;\n}\n.mdc-text-field--textarea.mdc-text-field--filled::before {\n  display: none;\n}\n.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {\n  transform: translateY(-10.25px) scale(0.75);\n}\n.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {\n  animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;\n}\n@keyframes mdc-floating-label-shake-float-above-textarea-filled {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75);\n  }\n}\n.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {\n  margin-top: 23px;\n  margin-bottom: 9px;\n}\n.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {\n  padding-top: 0;\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {\n  transform: translateY(-27.25px) scale(1);\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {\n  font-size: 0.75rem;\n}\n.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  transform: translateY(-24.75px) scale(0.75);\n}\n.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  font-size: 1rem;\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {\n  animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;\n}\n@keyframes mdc-floating-label-shake-float-above-textarea-outlined {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75);\n  }\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {\n  top: 18px;\n}\n.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {\n  margin-bottom: 2px;\n}\n.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {\n  align-self: flex-end;\n  padding: 0 16px;\n}\n.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {\n  display: inline-block;\n  width: 0;\n  height: 16px;\n  content: \"\";\n  vertical-align: -16px;\n}\n.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {\n  display: none;\n}\n\n.mdc-text-field__resizer {\n  align-self: stretch;\n  display: inline-flex;\n  flex-direction: column;\n  flex-grow: 1;\n  max-height: 100%;\n  max-width: 100%;\n  min-height: 56px;\n  min-width: fit-content;\n  /* @alternate */\n  min-width: -moz-available;\n  /* @alternate */\n  min-width: -webkit-fill-available;\n  overflow: hidden;\n  resize: both;\n}\n.mdc-text-field--filled .mdc-text-field__resizer {\n  transform: translateY(-1px);\n}\n.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,\n.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {\n  transform: translateY(1px);\n}\n.mdc-text-field--outlined .mdc-text-field__resizer {\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(-1px) translateY(-1px);\n}\n[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer, .mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(1px) translateY(-1px);\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,\n.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(1px) translateY(1px);\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(-1px) translateY(1px);\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 16px;\n}\n[dir=rtl] .mdc-text-field--with-leading-icon, .mdc-text-field--with-leading-icon[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 16px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {\n  max-width: calc(100% - 48px);\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 48px;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: initial;\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  left: initial;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: 48px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {\n  max-width: calc(100% / 0.75 - 64px / 0.75);\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 36px;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: initial;\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  left: initial;\n  /* @noflip */\n  /*rtl:ignore*/\n  right: 36px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n  max-width: calc(100% - 60px);\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateY(-37.25px) translateX(-32px) scale(1);\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateY(-37.25px) translateX(32px) scale(1);\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {\n  font-size: 0.75rem;\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateY(-34.75px) translateX(-32px) scale(0.75);\n}\n[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] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateY(-34.75px) translateX(32px) scale(0.75);\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {\n  font-size: 1rem;\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {\n  animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;\n}\n@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n}\n[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /*rtl:end:ignore*/\n}\n[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 {\n  animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;\n}\n\n@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {\n  0% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  33% {\n    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(4% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  66% {\n    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(-4% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n  100% {\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translateX(calc(0% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75);\n  }\n}\n\n.mdc-text-field--with-trailing-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 16px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n[dir=rtl] .mdc-text-field--with-trailing-icon, .mdc-text-field--with-trailing-icon[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 16px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {\n  max-width: calc(100% - 64px);\n}\n.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {\n  max-width: calc(100% / 0.75 - 64px / 0.75);\n}\n.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n  max-width: calc(100% - 60px);\n}\n\n.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {\n  max-width: calc(100% - 96px);\n}\n.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {\n  max-width: calc(100% / 0.75 - 96px / 0.75);\n}\n\n.mdc-text-field-helper-line {\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n}\n.mdc-text-field + .mdc-text-field-helper-line {\n  padding-right: 16px;\n  padding-left: 16px;\n}\n\n.mdc-form-field > .mdc-text-field + label {\n  align-self: flex-start;\n}\n\n.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {\n  color: rgba(98, 0, 238, 0.87);\n}\n.mdc-text-field--focused .mdc-notched-outline__leading,\n.mdc-text-field--focused .mdc-notched-outline__notch,\n.mdc-text-field--focused .mdc-notched-outline__trailing {\n  border-width: 2px;\n}\n.mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {\n  opacity: 1;\n}\n.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {\n  padding-top: 2px;\n}\n.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {\n  padding-top: 0;\n}\n\n.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {\n  border-bottom-color: #b00020;\n  /* @alternate */\n  border-bottom-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {\n  border-bottom-color: #b00020;\n  /* @alternate */\n  border-bottom-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {\n  color: #b00020;\n  /* @alternate */\n  color: var(--mdc-theme-error, #b00020);\n}\n.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 {\n  color: #b00020;\n  /* @alternate */\n  color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid .mdc-text-field__input {\n  caret-color: #b00020;\n  /* @alternate */\n  caret-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {\n  color: #b00020;\n  /* @alternate */\n  color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {\n  border-bottom-color: #b00020;\n  /* @alternate */\n  border-bottom-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {\n  border-color: #b00020;\n  /* @alternate */\n  border-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {\n  border-color: #b00020;\n  /* @alternate */\n  border-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,\n.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {\n  border-color: #b00020;\n  /* @alternate */\n  border-color: var(--mdc-theme-error, #b00020);\n}\n.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {\n  opacity: 1;\n}\n\n.mdc-text-field--disabled {\n  pointer-events: none;\n}\n.mdc-text-field--disabled .mdc-text-field__input {\n  color: rgba(0, 0, 0, 0.38);\n}\n@media all {\n  .mdc-text-field--disabled .mdc-text-field__input::placeholder {\n    color: rgba(0, 0, 0, 0.38);\n  }\n}\n@media all {\n  .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {\n    color: rgba(0, 0, 0, 0.38);\n  }\n}\n.mdc-text-field--disabled .mdc-floating-label {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--disabled .mdc-text-field-character-counter,\n.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--disabled .mdc-text-field__icon--leading {\n  color: rgba(0, 0, 0, 0.3);\n}\n.mdc-text-field--disabled .mdc-text-field__icon--trailing {\n  color: rgba(0, 0, 0, 0.3);\n}\n.mdc-text-field--disabled .mdc-text-field__affix--prefix {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--disabled .mdc-text-field__affix--suffix {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mdc-text-field--disabled .mdc-line-ripple::before {\n  border-bottom-color: rgba(0, 0, 0, 0.06);\n}\n.mdc-text-field--disabled .mdc-notched-outline__leading,\n.mdc-text-field--disabled .mdc-notched-outline__notch,\n.mdc-text-field--disabled .mdc-notched-outline__trailing {\n  border-color: rgba(0, 0, 0, 0.06);\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__input::placeholder {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-floating-label {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field-character-counter,\n.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__icon--leading {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__icon--trailing {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__affix--prefix {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-text-field__affix--suffix {\n    color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-line-ripple::before {\n    border-bottom-color: GrayText;\n  }\n}\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n  .mdc-text-field--disabled .mdc-notched-outline__leading,\n.mdc-text-field--disabled .mdc-notched-outline__notch,\n.mdc-text-field--disabled .mdc-notched-outline__trailing {\n    border-color: GrayText;\n  }\n}\n@media screen and (forced-colors: active) {\n  .mdc-text-field--disabled .mdc-text-field__input {\n    background-color: Window;\n  }\n  .mdc-text-field--disabled .mdc-floating-label {\n    z-index: 1;\n  }\n}\n.mdc-text-field--disabled .mdc-floating-label {\n  cursor: default;\n}\n.mdc-text-field--disabled.mdc-text-field--filled {\n  background-color: #fafafa;\n}\n.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {\n  display: none;\n}\n.mdc-text-field--disabled .mdc-text-field__input {\n  pointer-events: auto;\n}\n\n.mdc-text-field--end-aligned .mdc-text-field__input {\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: right;\n}\n[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input, .mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: left;\n  /*rtl:end:ignore*/\n}\n\n[dir=rtl] .mdc-text-field--ltr-text, .mdc-text-field--ltr-text[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /*rtl:end:ignore*/\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,\n.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix {\n  /* @noflip */\n  /*rtl:ignore*/\n  direction: ltr;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 2px;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 12px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading {\n  order: 1;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {\n  order: 2;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input {\n  order: 3;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {\n  order: 4;\n}\n[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing {\n  order: 5;\n}\n\n[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /*rtl:end:ignore*/\n}\n[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 {\n  /* @noflip */\n  /*rtl:ignore*/\n  text-align: right;\n}\n[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 {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 12px;\n}\n[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 {\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 2px;\n}\n\n.mdc-text-field-helper-text {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n  font-size: 0.75rem;\n  /* @alternate */\n  font-size: var(--mdc-typography-caption-font-size, 0.75rem);\n  line-height: 1.25rem;\n  /* @alternate */\n  line-height: var(--mdc-typography-caption-line-height, 1.25rem);\n  font-weight: 400;\n  /* @alternate */\n  font-weight: var(--mdc-typography-caption-font-weight, 400);\n  letter-spacing: 0.0333333333em;\n  /* @alternate */\n  letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);\n  text-decoration: inherit;\n  /* @alternate */\n  text-decoration: var(--mdc-typography-caption-text-decoration, inherit);\n  text-transform: inherit;\n  /* @alternate */\n  text-transform: var(--mdc-typography-caption-text-transform, inherit);\n  display: block;\n  margin-top: 0;\n  /* @alternate */\n  line-height: normal;\n  margin: 0;\n  opacity: 0;\n  will-change: opacity;\n  transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mdc-text-field-helper-text::before {\n  display: inline-block;\n  width: 0;\n  height: 16px;\n  content: \"\";\n  vertical-align: 0;\n}\n\n.mdc-text-field-helper-text--persistent {\n  transition: none;\n  opacity: 1;\n  will-change: initial;\n}\n\n.mdc-text-field-character-counter {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n  font-size: 0.75rem;\n  /* @alternate */\n  font-size: var(--mdc-typography-caption-font-size, 0.75rem);\n  line-height: 1.25rem;\n  /* @alternate */\n  line-height: var(--mdc-typography-caption-line-height, 1.25rem);\n  font-weight: 400;\n  /* @alternate */\n  font-weight: var(--mdc-typography-caption-font-weight, 400);\n  letter-spacing: 0.0333333333em;\n  /* @alternate */\n  letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);\n  text-decoration: inherit;\n  /* @alternate */\n  text-decoration: var(--mdc-typography-caption-text-decoration, inherit);\n  text-transform: inherit;\n  /* @alternate */\n  text-transform: var(--mdc-typography-caption-text-transform, inherit);\n  display: block;\n  margin-top: 0;\n  /* @alternate */\n  line-height: normal;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: auto;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 16px;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 0;\n  white-space: nowrap;\n}\n.mdc-text-field-character-counter::before {\n  display: inline-block;\n  width: 0;\n  height: 16px;\n  content: \"\";\n  vertical-align: 0;\n}\n[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: auto;\n  /*rtl:end:ignore*/\n}\n\n[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-left: 0;\n  /* @noflip */\n  /*rtl:ignore*/\n  padding-right: 16px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field__icon {\n  align-self: center;\n  cursor: pointer;\n}\n.mdc-text-field__icon:not([tabindex]), .mdc-text-field__icon[tabindex=\"-1\"] {\n  cursor: default;\n  pointer-events: none;\n}\n.mdc-text-field__icon svg {\n  display: block;\n}\n\n.mdc-text-field__icon--leading {\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 16px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 8px;\n}\n[dir=rtl] .mdc-text-field__icon--leading, .mdc-text-field__icon--leading[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 8px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 16px;\n  /*rtl:end:ignore*/\n}\n\n.mdc-text-field__icon--trailing {\n  padding: 12px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 0px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 0px;\n}\n[dir=rtl] .mdc-text-field__icon--trailing, .mdc-text-field__icon--trailing[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-left: 0px;\n  /* @noflip */\n  /*rtl:ignore*/\n  margin-right: 0px;\n  /*rtl:end:ignore*/\n}","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n///   padding-left: 4px;\n///\n///   @include rtl {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n/// }\n///\n/// @example - css\n///   .mdc-foo {\n///     padding-left: 4px;\n///   }\n///\n///   [dir=\"rtl\"] .mdc-foo,\n///   .mdc-foo[dir=\"rtl\"] {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n///   <!-- ... -->\n///   <div dir=\"ltr\">\n///     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n///   </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n  @if ($include) {\n    $dir-rtl: '[dir=rtl]';\n\n    $rtl-selectors: list.join(\n      selector.nest($dir-rtl, &),\n      selector-ext.append-strict(&, $dir-rtl)\n    );\n\n    @at-root {\n      #{$rtl-selectors} {\n        /*rtl:begin:ignore*/\n        @content;\n        /*rtl:end:ignore*/\n      }\n    }\n  }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 8px;\n//   margin-right: 0;\n//\n//   @include rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 0;\n//   margin-right: 8px;\n//\n//   @include rtl {\n//     margin-left: 8px;\n//     margin-right: 0;\n//   }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n  $base-property,\n  $default-direction,\n  $value,\n  $replace: null\n) {\n  @if (list.index((right, left), $default-direction) == null) {\n    @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n  }\n\n  $left-value: $value;\n  $right-value: 0;\n\n  @if ($default-direction == right) {\n    $left-value: 0;\n    $right-value: $value;\n  }\n\n  @include reflexive-property(\n    $base-property,\n    $left-value,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: auto;\n//   margin-right: 12px;\n//\n//   @include rtl {\n//     margin-left: 12px;\n//     margin-right: auto;\n//   }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n  $base-property,\n  $left-value,\n  $right-value,\n  $replace: null\n) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include reflexive(\n    $prop-left,\n    $left-value,\n    $prop-right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 0;\n//   right: initial;\n//\n//   @include rtl {\n//     left: initial;\n//     right: 0;\n//   }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n  @if (list.index((right, left), $position-property) == null) {\n    @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n  }\n\n  // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n  $left-value: $value;\n  $right-value: initial;\n\n  @if ($position-property == right) {\n    $right-value: $value;\n    $left-value: initial;\n  }\n\n  @include reflexive(\n    left,\n    $left-value,\n    right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 2px;\n//   right: 5px;\n//\n//   @include rtl {\n//     right: 2px;\n//     left: 5px;\n//   }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $replace: null\n) {\n  $left-replace: null;\n  $right-replace: null;\n  @if $replace {\n    @if meta.type-of($left-value) == 'string' {\n      $left-replace: $replace;\n    }\n\n    @if meta.type-of($right-value) == 'string' {\n      $right-replace: $replace;\n    }\n\n    @if $left-replace == null and $right-replace == null {\n      @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n    }\n\n    // If any replacements are null, treat the entire value as null (do not\n    // emit anything).\n    @each $name, $replacement in $replace {\n      @if $replacement == null {\n        $left-value: null;\n        $right-value: null;\n      }\n    }\n  }\n\n  // Do not emit if either value are null\n  @if $left-value and $right-value {\n    @include _property($left-property, $left-value, $replace: $left-replace);\n    @include _property($right-property, $right-value, $replace: $right-replace);\n\n    @include rtl {\n      @include _property(\n        $left-property,\n        $right-value,\n        $replace: $right-replace\n      );\n      @include _property($right-property, $left-value, $replace: $left-replace);\n    }\n  }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n  @include gss.annotate(\n    (\n      noflip: $include,\n    )\n  );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n  @include theme.property(\n    $property,\n    $value,\n    $replace: $replace,\n    $gss: (noflip: $include)\n  );\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n\n///\n/// Y-axis position of label when it is afloat.\n/// 100% of the length of label and additional 6% for scaledown.\n///\n$position-y: 106% !default;\n$transition-duration: 150ms !default;\n$float-scale: 0.75 !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define floating-label\n  .mdc-floating-label {\n    @include typography.typography(\n      subtitle1,\n      $exclude-props: (line-height),\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: transform $transition-duration\n          animation-variables.$standard-curve-timing-function,\n        color $transition-duration\n          animation-variables.$standard-curve-timing-function;\n    }\n  }\n\n  @at-root {\n    @include float-position($position-y, $query: $query);\n    @include shake-animation(standard, $query: $query);\n  }\n\n  @include shake-keyframes(standard, $position-y, $query: $query);\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n}\n\n// Used for textarea in case of scrolling\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin shake-keyframes(\n  $modifier,\n  $positionY,\n  $positionX: 0%,\n  $scale: $float-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-floating-label-shake-float-above-#{$modifier} {\n      0% {\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(0% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      33% {\n        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(4% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      66% {\n        animation-timing-function: cubic-bezier(\n          0.302435,\n          0.381352,\n          0.55,\n          0.956352\n        );\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(-4% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      100% {\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(0% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n    }\n  }\n}\n\n@mixin float-position(\n  $positionY,\n  $positionX: 0%,\n  $scale: $float-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $translateY: if(\n    meta.type-of($positionY) == 'calculation',\n    calc(-1 * $positionY),\n    -1 * $positionY\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      @if $positionX > 0 or $positionX < 0 {\n        @include rtl.ignore-next-line();\n        transform: translateY($translateY)\n          translateX(-1 * $positionX)\n          scale($scale);\n\n        @include rtl.rtl {\n          @include rtl.ignore-next-line();\n          transform: translateY($translateY) translateX($positionX)\n            scale($scale);\n        }\n      } @else {\n        transform: translateY($translateY) scale($scale);\n      }\n    }\n  }\n}\n\n@mixin shake-animation($modifier, $query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-floating-label--shake {\n    @include feature-targeting.targets($feat-animation) {\n      animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;\n    }\n  }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    max-width: $max-width;\n  }\n}\n\n///\n/// Sets the CSS transition for the floating animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin float-transition(\n  $duration-ms,\n  $timing-function: animation-variables.$standard-curve-timing-function,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: color $duration-ms $timing-function,\n      transform $duration-ms $timing-function;\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n  $options: (\n    custom-property-prefix: typography,\n  );\n\n  $base-styles: keys.set-values($base-styles, $options: $options);\n\n  @each $style, $style-props in $scale-styles {\n    @each $base-key in map.keys($base-styles) {\n      // Ignore the return result, it's not needed\n      $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n    }\n\n    // Merge base properties for all styles.\n    $style-props: map.merge($base-styles, $style-props);\n\n    // Merge overrides onto each style.\n    $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n    // Register keys for this style\n    @each $property, $value in $style-props {\n      $unused: keys.set-value(\n        keys.combine($style, $property),\n        $value,\n        $options: $options\n      );\n    }\n\n    // Override original styles with new styles.\n    $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n  }\n\n  @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n  @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n  @if custom-properties.is-custom-prop($px) {\n    @return custom-properties.set-fallback(\n      $px,\n      _px-to-rem(custom-properties.get-fallback($px))\n    );\n  }\n  @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n  @if $px == null {\n    @return null;\n  }\n  @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n  font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n  thin: 100,\n  light: 300,\n  regular: 400,\n  medium: 500,\n  bold: 700,\n  black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n  $base,\n  (\n    headline1: (\n      font-size: px-to-rem(96px),\n      line-height: px-to-rem(96px),\n      font-weight: map.get($font-weight-values, light),\n      letter-spacing: get-letter-spacing_(-1.5, 6),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline2: (\n      font-size: px-to-rem(60px),\n      line-height: px-to-rem(60px),\n      font-weight: map.get($font-weight-values, light),\n      letter-spacing: get-letter-spacing_(-0.5, 3.75),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline3: (\n      font-size: px-to-rem(48px),\n      line-height: px-to-rem(50px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: normal,\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline4: (\n      font-size: px-to-rem(34px),\n      line-height: px-to-rem(40px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.25, 2.125),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline5: (\n      font-size: px-to-rem(24px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: normal,\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline6: (\n      font-size: px-to-rem(20px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(0.25, 1.25),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    subtitle1: (\n      font-size: px-to-rem(16px),\n      line-height: px-to-rem(28px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.15, 1),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    subtitle2: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(22px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(0.1, 0.875),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    body1: (\n      font-size: px-to-rem(16px),\n      line-height: px-to-rem(24px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.5, 1),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    body2: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(20px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.25, 0.875),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    caption: (\n      font-size: px-to-rem(12px),\n      line-height: px-to-rem(20px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.4, 0.75),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    button: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(36px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(1.25, 0.875),\n      text-decoration: none,\n      text-transform: uppercase,\n    ),\n    overline: (\n      font-size: px-to-rem(12px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(2, 0.75),\n      text-decoration: none,\n      text-transform: uppercase,\n    ),\n  ),\n  (\n    headline1: $styles-headline1,\n    headline2: $styles-headline2,\n    headline3: $styles-headline3,\n    headline4: $styles-headline4,\n    headline5: $styles-headline5,\n    headline6: $styles-headline6,\n    subtitle1: $styles-subtitle1,\n    subtitle2: $styles-subtitle2,\n    body1: $styles-body1,\n    body2: $styles-body2,\n    caption: $styles-caption,\n    button: $styles-button,\n    overline: $styles-overline,\n  )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n  @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n  @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-typography {\n    @include base($query: $query);\n  }\n\n  @each $style in get-typography-styles() {\n    .mdc-typography--#{$style} {\n      @include typography($style, $query: $query);\n    }\n  }\n}\n\n@mixin base($query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include smooth-font($query: $query);\n  @include feature-targeting.targets($feat-typography) {\n    @include theme.property(font-family, font-family);\n  }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @if not is-typography-style($style) {\n    @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n  }\n\n  @include smooth-font($query: $query);\n  @include feature-targeting.targets($feat-typography) {\n    @each $key in keys.get-keys($style) {\n      // <style>-<property>: headline1-font-size\n      // Slice the string past the first key separator to retrieve the\n      // property name\n      $property: string.slice($key, string.index($key, '-') + 1);\n      @if list.index($exclude-props, $property) == null {\n        $current-global-value: map.get($styles, $style, $property);\n        $configured-global-value: map.get($_styles-copy, $style, $property);\n        @if $current-global-value != $configured-global-value {\n          // A compile time change was made to $mdc-typography-styles. To\n          // support Angular, use this value instead of the key's value.\n          @if $current-global-value {\n            // Only emit if the overridden value exists\n            $custom-prop: keys.create-custom-property($key);\n            $custom-prop: custom-properties.set-fallback(\n              $custom-prop,\n              $current-global-value\n            );\n            @include theme.property($property, $custom-prop);\n          }\n        } @else {\n          // Otherwise, use the key, which may be different from the original\n          // configured global value.\n          @include theme.property($property, $key);\n        }\n      }\n    }\n  }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include feature-targeting.targets($feat-typography) {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n///     text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n///     bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n///     `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n  $top: 0,\n  $bottom: 0,\n  $display: block,\n  $query: feature-targeting.all()\n) {\n  $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n  @if list.index($validDisplayTypes, $display) == null {\n    @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n  }\n\n  $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: $display;\n\n    @if $isFlexbox {\n      align-items: baseline;\n    }\n  }\n\n  @if $top > 0 {\n    @include baseline-top($top, $query: $query);\n  }\n\n  @if $bottom > 0 {\n    @if $isFlexbox {\n      @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n    }\n\n    @include baseline-bottom($bottom, $query: $query);\n  }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n///     text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n///     bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n///     is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n///     or `inline-block`.\n@mixin text-baseline(\n  $top: 0,\n  $bottom: 0,\n  $display: block,\n  $lineHeight: normal,\n  $query: feature-targeting.all()\n) {\n  $validDisplayTypes: (block, inline-block);\n\n  @if list.index($validDisplayTypes, $display) == null {\n    @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n  }\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include baseline(\n    $display: $display,\n    $top: $top,\n    $bottom: $bottom,\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    @if $top > 0 {\n      margin-top: 0;\n      /* @alternate */\n      line-height: #{$lineHeight};\n    }\n\n    @if $bottom > 0 {\n      margin-bottom: -1 * $bottom;\n    }\n  }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n///     the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::before {\n    @include feature-targeting.targets($feat-structure) {\n      @include baseline-strut_($distance);\n\n      vertical-align: 0;\n    }\n  }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n///     bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include baseline-strut_($distance);\n\n      vertical-align: -1 * $distance;\n    }\n  }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::before {\n    @include feature-targeting.targets($feat-structure) {\n      content: '\\200b';\n    }\n  }\n}\n\n@mixin baseline-strut_($distance) {\n  display: inline-block;\n  width: 0;\n  height: $distance;\n  content: '';\n}\n\n@function get-font($typography) {\n  @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n  @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n  @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n  @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n  @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n  font: null,\n  line-height: null,\n  size: null,\n  weight: null,\n  tracking: null,\n);\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($_typography-theme, $theme);\n\n  @include theme.property(font-family, map.get($theme, font));\n  @include theme.property(line-height, map.get($theme, line-height));\n  @include theme.property(font-size, map.get($theme, size));\n  @include theme.property(font-weight, map.get($theme, weight));\n  @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n\n/// Resolves a theme's typography tokens for the given prefix.\n///\n/// @example - scss\n///   // $theme has the following tokens:\n///   // - label-text-font\n///   // - label-text-line-height\n///   // - label-text-size\n///   // - label-text-tracking\n///   // - label-text-weight\n///   $theme: resolve-theme($theme, map.get($resolvers, typography), label-text);\n///\n/// @param {Map} $theme - The theme to resolve tokens for.\n/// @param {Function} $resolver - The typography resolver to use.\n/// @param {String...} $token-prefixes - The prefix(es) of a typography token\n///     set.\n/// @return {Map} The theme with resolved typography tokens.\n@function resolve-theme($theme, $resolver, $token-prefixes...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $token-prefix in $token-prefixes {\n    $typography-theme: meta.call(\n      $resolver,\n      $font: map.get($theme, '#{$token-prefix}-font'),\n      $line-height: map.get($theme, '#{$token-prefix}-line-height'),\n      $size: map.get($theme, '#{$token-prefix}-size'),\n      $tracking: map.get($theme, '#{$token-prefix}-tracking'),\n      $weight: map.get($theme, '#{$token-prefix}-weight')\n    );\n\n    $theme: map.merge(\n      $theme,\n      (\n        '#{$token-prefix}-font': map.get($typography-theme, font),\n        '#{$token-prefix}-line-height': map.get($typography-theme, line-height),\n        '#{$token-prefix}-size': map.get($typography-theme, size),\n        '#{$token-prefix}-tracking': map.get($typography-theme, tracking),\n        '#{$token-prefix}-weight': map.get($typography-theme, weight),\n      )\n    );\n  }\n\n  @return $theme;\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n///     resolved by other theme functions first (i.e. custom property Maps and\n///     Material theme keys are not supported in this mixin). If the value is\n///     null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n///     provided, a second property/value declaration will be added before the\n///     main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n  $property,\n  $value,\n  $fallback-value: null,\n  $gss: (),\n  $important: false\n) {\n  // Normally setting a null value to a property will not emit CSS, so mixins\n  // wouldn't need to check this. However, Sass will throw an error if the\n  // interpolated property is a custom property.\n  @if $value != null {\n    $important-rule: if($important, ' !important', '');\n\n    @if $fallback-value and $enable-fallback-declarations {\n      @include gss.annotate($gss);\n      #{$property}: #{$fallback-value} #{$important-rule};\n\n      // Add @alternate to annotations.\n      $gss: map.merge(\n        $gss,\n        (\n          alternate: true,\n        )\n      );\n    }\n\n    @include gss.annotate($gss);\n    #{$property}: #{$value}#{$important-rule};\n  }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n  @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n    @return $value $value $value $value;\n  } @else if list.length($value) == 4 {\n    @return $value;\n  } @else if list.length($value) == 3 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n      list.nth($value, 2);\n  } @else if list.length($value) == 2 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n      list.nth($value, 2);\n  }\n\n  @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n@use './line-ripple-theme';\n\n// Public\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include line-ripple-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define line-ripple\n  .mdc-line-ripple {\n    @include feature-targeting.targets($feat-structure) {\n      &::before,\n      &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        border-bottom-style: solid;\n        content: '';\n      }\n\n      &::before {\n        z-index: 1;\n      }\n\n      &::after {\n        transform: scaleX(0);\n        opacity: 0;\n        z-index: 2;\n      }\n    }\n  }\n\n  .mdc-line-ripple--active::after {\n    @include feature-targeting.targets($feat-structure) {\n      transform: scaleX(1);\n      opacity: 1;\n    }\n  }\n\n  .mdc-line-ripple--deactivating::after {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n  }\n}\n","//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define line-ripple\n  .mdc-line-ripple {\n    @include feature-targeting.targets($feat-structure) {\n      @include height(1px);\n      @include active-height(2px);\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      &::after {\n        transition: functions.transition-value(transform),\n          functions.transition-value(opacity);\n      }\n    }\n  }\n}\n\n@mixin height($height) {\n  &::before {\n    @include theme.property(border-bottom-width, $height);\n  }\n}\n\n@mixin active-height($height) {\n  &::after {\n    @include theme.property(border-bottom-width, $height);\n  }\n}\n\n@mixin active-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    &::after {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin inactive-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    &::before {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './notched-outline-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include notched-outline-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 0;\n      box-sizing: border-box;\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n      @include rtl.ignore-next-line();\n      text-align: left;\n      pointer-events: none;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        box-sizing: border-box;\n        height: 100%;\n        pointer-events: none;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        flex-grow: 1;\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        position: relative;\n        max-width: 100%;\n      }\n    }\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        text-overflow: clip;\n      }\n    }\n\n    &--upgraded .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% / 0.75);\n      }\n    }\n  }\n\n  .mdc-notched-outline--notched {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(padding, right, 8px);\n\n        border-top: none;\n      }\n    }\n  }\n\n  .mdc-notched-outline--no-label {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n}\n","//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION\n$min-leading-stroke-edge-position: 12px !default;\n// The gap between the stroke end and floating label\n// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE\n$notch-gutter-size: 4px !default;\n$border-width: 1px !default;\n$leading-width: 12px !default;\n$padding: 4px !default;\n// This variable keeps the before/after JS label centered in the notch when the font-size is changed.\n$label-adjust: 14% !default;\n/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in\n/// the middle when it is notched.\n$label-box-height: 13.5px !default;\n/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font\n/// size we add additional offset value.\n$label-adjust-absolute: 2.5px !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        border-top: $border-width solid;\n        border-bottom: $border-width solid;\n      }\n    }\n\n    &__leading {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, $border-width solid, none);\n\n        width: $leading-width;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, none, $border-width solid);\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% - #{$leading-width} * 2);\n      }\n    }\n  }\n}\n\n@mixin color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin stroke-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-width, $width);\n    }\n  }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline--notched .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: $stroke-width;\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $component-height: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Resolve the radius relative to the notched outline component's height. The\n  // component should provide its current height from its density. The resolved\n  // radius allows percentage radii to be converted to pixels.\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $component-height\n  );\n\n  // Grab the top-left radius. We'll need it to adjust the leading for the\n  // label notch if the resulting radius shape is larger than the default\n  // leading.\n  $top-left-radius: list.nth(\n    shape-functions.unpack-radius($resolved-radius),\n    1\n  );\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n\n  .mdc-notched-outline__leading {\n    // mask the leading to apply the top-left and bottom-left corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 1 0 0 1),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        // If the radius is bigger than the default leading width, we need to\n        // increase the leading width\n        width: $top-left-radius-px;\n        @if ($top-left-is-custom-prop) {\n          // The radius may be a custom property, in which case the above width\n          // is the IE11 fallback value.\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        // If the top-left radius is dynamic, the width of the leading is\n        // the max of whichever is larger: the default leading width or the\n        // value of the custom property.\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          width: max(#{$leading-width}, #{$var});\n        }\n      }\n    }\n  }\n\n  // Similar to above, adjust the max-width of the notch if we adjusted the\n  // leading's width.\n  .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        max-width: calc(100% - #{$top-left-radius-px} * 2);\n        @if ($top-left-is-custom-prop) {\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          max-width: calc(100% - max(#{$leading-width}, #{$var}) * 2);\n        }\n      }\n    }\n  }\n\n  .mdc-notched-outline__trailing {\n    // mask the leading to apply the top-right and bottom-right corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 0 1 1 0),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n  }\n}\n\n@mixin floating-label-float-position(\n  $positionY,\n  $positionX: 0%,\n  $scale: 0.75,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include floating-label-mixins.float-position(\n    $positionY + $label-adjust,\n    $positionX,\n    1,\n    $query: $query\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: ($scale * 1rem);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 1rem;\n      }\n    }\n  }\n}\n\n///\n/// Sets floating label position in notched outline when label is afloat.\n///\n/// @param {Number} $positionY Absolute Y-axis position in `px`.\n/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.\n/// @param {Number} $scale Defaults to `.75`.\n///\n/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is\n///     center aligned in all the places.\n///\n@mixin floating-label-float-position-absolute(\n  $positionY,\n  $positionX: 0,\n  $scale: 0.75,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $float-positionY: if(\n    meta.type-of($positionY) == 'calculation',\n    calc($positionY + $label-adjust-absolute),\n    $positionY + $label-adjust-absolute\n  );\n\n  @include floating-label-mixins.float-position(\n    $float-positionY,\n    $positionX,\n    $scale: 1,\n    $query: $query\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: ($scale * 1rem);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 1rem;\n      }\n    }\n  }\n}\n\n///\n/// Sets the max-width for the notch\n///\n/// @param {Number} $max-width Max-width for the notch\n///\n@mixin notch-max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      max-width: $max-width;\n    }\n  }\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query: $query);\n\n  .mdc-ripple-surface {\n    @include ripple-theme.states($query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-ripple-surface {\n    @include surface($query: $query);\n    @include radius-bounded($query: $query);\n    @include surface-styles($query: $query);\n  }\n\n  .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n  .mdc-ripple-upgraded--unbounded {\n    @include radius-unbounded($query: $query);\n    @include unbounded-styles($query: $query);\n  }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n///     a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states($color, $query: $query);\n  @include ripple-theme.states-activated($color, $query: $query);\n  @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: relative;\n    outline: none;\n    overflow: hidden;\n  }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    overflow: visible;\n  }\n}\n\n@mixin common($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n  // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n  // mdc-ripple.scss.)\n  @include feature-targeting.targets($feat-animation) {\n    @include base-mixins.emit-once('mdc-ripple/common/animation') {\n      @include keyframes_;\n    }\n  }\n}\n\n@mixin surface(\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    --mdc-ripple-fg-size: 0;\n    --mdc-ripple-left: 0;\n    --mdc-ripple-top: 0;\n    --mdc-ripple-fg-scale: 1;\n    --mdc-ripple-fg-translate-end: 0;\n    --mdc-ripple-fg-translate-start: 0;\n\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    // TODO(b/151931961): Remove the following block once resolved\n    @if $include-will-change {\n      will-change: transform, opacity;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      border-radius: 50%;\n      opacity: 0;\n      pointer-events: none;\n      content: '';\n    }\n  }\n\n  #{$ripple-target}::before {\n    @include feature-targeting.targets($feat-animation) {\n      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n      transition: opacity ripple-theme.$states-wash-duration linear,\n        background-color ripple-theme.$states-wash-duration linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 1)\n      );\n    }\n  }\n\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 0)\n      );\n    }\n  }\n\n  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: 0;\n        @include rtl.ignore-next-line();\n        left: 0;\n        transform: scale(0);\n        transform-origin: center center;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--unbounded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: var(--mdc-ripple-top, 0);\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, 0);\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-activation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n            forwards,\n          mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-deactivation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        // Retain transform from mdc-ripple-fg-radius-in activation\n        @include rtl.ignore-next-line();\n        transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n          scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n  }\n}\n\n@mixin radius-bounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{$radius});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{$radius});\n      width: $radius * 2;\n      height: $radius * 2;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n@mixin radius-unbounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{math.div($radius, 2)});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{math.div($radius, 2)});\n      width: $radius;\n      height: $radius;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    // Necessary for clicks on other inner elements (e.g. close icon in chip)\n    // to go through.\n    pointer-events: none;\n  }\n}\n\n@mixin keyframes_ {\n  @keyframes mdc-ripple-fg-radius-in {\n    from {\n      animation-timing-function: variables2.$standard-curve-timing-function;\n      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n      // that custom properties are supported within the browser before adding this class, we can\n      // safely use them without a fallback.\n      @include rtl.ignore-next-line();\n      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n        scale(var(--mdc-ripple-fg-scale, 1));\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-in {\n    from {\n      animation-timing-function: linear;\n      opacity: 0;\n    }\n\n    to {\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-out {\n    from {\n      animation-timing-function: linear;\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n\n    to {\n      opacity: 0;\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay linear;\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:map';\n@use '@material/animation/animation';\n@use '@material/theme/css';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/dom';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/line-ripple/mixins' as line-ripple-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use 'helper-text/mixins' as helper-text-mixins;\n@use 'character-counter/mixins' as character-counter-mixins;\n@use 'icon/mixins' as icon-mixins;\n@use 'icon/variables' as icon-variables;\n@use './variables';\n@use '@material/rtl/rtl';\n\n$_density-config: map.merge(\n  variables.$density-config,\n  (\n    minimum: math.min(variables.$minimum-height, 36px),\n  )\n);\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include ripple($query);\n  @include static-styles($query);\n  @include helper-text-mixins.helper-text-core-styles($query);\n  @include character-counter-mixins.character-counter-core-styles($query);\n  @include icon-mixins.icon-core-styles($query);\n}\n\n/// @deprecated Use static-styles() instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Baseline\n  // postcss-bem-linter: define text-field\n  .mdc-text-field {\n    @include _base($query);\n  }\n\n  .mdc-text-field__input {\n    @include _input($query);\n\n    @include placeholder-selector_ {\n      @include _input-placeholder($query);\n    }\n\n    // Always show placeholder for text fields that has no\n    // label and show only on focused state when label is present.\n    .mdc-text-field--no-label &,\n    .mdc-text-field--focused & {\n      @include placeholder-selector_ {\n        @include _input-placeholder-visible($query);\n      }\n    }\n  }\n\n  .mdc-text-field__affix {\n    @include _affix($query: $query);\n\n    .mdc-text-field--label-floating &,\n    .mdc-text-field--no-label & {\n      @include _affix-visible($query: $query);\n    }\n\n    // Safari only\n    @supports (-webkit-hyphens: none) {\n      .mdc-text-field--outlined & {\n        @include _centered-affix-safari-support($query: $query);\n      }\n    }\n  }\n\n  .mdc-text-field__affix--prefix {\n    @include _prefix($query: $query);\n\n    .mdc-text-field--end-aligned & {\n      @include _prefix-end-aligned($query: $query);\n    }\n  }\n\n  .mdc-text-field__affix--suffix {\n    @include _suffix($query: $query);\n\n    .mdc-text-field--end-aligned & {\n      @include _suffix-end-aligned($query: $query);\n    }\n  }\n\n  // Variants\n\n  .mdc-text-field--filled {\n    @include _filled($query);\n\n    &.mdc-text-field--no-label {\n      @include filled-no-label($query);\n    }\n  }\n\n  .mdc-text-field--outlined {\n    @include outlined_($query);\n\n    .mdc-notched-outline {\n      @include _outlined-notched-outline($query);\n    }\n  }\n\n  // Other Variations\n\n  .mdc-text-field--textarea {\n    @include textarea_($query);\n\n    .mdc-text-field__input {\n      @include _textarea-input($query);\n    }\n\n    &.mdc-text-field--filled {\n      @include _textarea-filled($query);\n\n      .mdc-text-field__input {\n        @include _textarea-filled-input($query);\n      }\n\n      &.mdc-text-field--no-label {\n        .mdc-text-field__input {\n          @include _textarea-filled-no-label-input($query);\n        }\n      }\n    }\n\n    &.mdc-text-field--outlined {\n      @include _textarea-outlined($query);\n\n      .mdc-text-field__input {\n        @include _textarea-outlined-input($query);\n      }\n\n      .mdc-floating-label {\n        @include _textarea-outlined-floating-label($query);\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        @include _textarea-input-with-internal-counter($query);\n      }\n\n      .mdc-text-field-character-counter {\n        @include _textarea-internal-counter($query);\n      }\n    }\n  }\n\n  // Resizer element does not need to be under mdc-text-field--textarea, that\n  // just adds specificity\n  .mdc-text-field__resizer {\n    @include _textarea-resizer($query);\n\n    .mdc-text-field--filled & {\n      @include _textarea-filled-resizer($query);\n\n      .mdc-text-field__input,\n      .mdc-text-field-character-counter {\n        @include _textarea-filled-resizer-children($query);\n      }\n    }\n\n    .mdc-text-field--outlined & {\n      @include _textarea-outlined-resizer($query);\n\n      .mdc-text-field__input,\n      .mdc-text-field-character-counter {\n        @include _textarea-outlined-resizer-children($query);\n      }\n    }\n  }\n\n  .mdc-text-field--with-leading-icon {\n    @include _padding-horizontal-with-leading-icon($query);\n\n    &.mdc-text-field--filled {\n      @include with-leading-icon_($query);\n    }\n\n    &.mdc-text-field--outlined {\n      @include outlined-with-leading-icon_($query);\n    }\n  }\n\n  .mdc-text-field--with-trailing-icon {\n    @include _padding-horizontal-with-trailing-icon($query);\n\n    &.mdc-text-field--filled {\n      @include _with-trailing-icon($query);\n    }\n\n    &.mdc-text-field--outlined {\n      @include _outlined-with-trailing-icon($query);\n    }\n  }\n\n  .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n    @include _padding-horizontal-with-both-icons($query);\n\n    &.mdc-text-field--filled {\n      @include _with-leading-and-trailing-icon($query);\n    }\n  }\n\n  // postcss-bem-linter: define text-field-helper-text\n  .mdc-text-field-helper-line {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      justify-content: space-between;\n      box-sizing: border-box;\n    }\n\n    .mdc-text-field + & {\n      @include feature-targeting.targets($feat-structure) {\n        padding-right: variables.$helper-line-padding;\n        padding-left: variables.$helper-line-padding;\n      }\n    }\n  }\n  // postcss-bem-linter: end\n\n  // mdc-form-field tweaks to align text field label correctly\n  // stylelint-disable selector-max-type --\n  // TODO: document why this disable is neccessary\n  .mdc-form-field > .mdc-text-field + label {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-start;\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  // States\n  .mdc-text-field--focused {\n    @include focused_($query);\n\n    &.mdc-text-field--outlined {\n      @include _focused-outlined($query);\n\n      &.mdc-text-field--textarea {\n        @include _focused-outlined-textarea($query);\n      }\n    }\n  }\n\n  .mdc-text-field--invalid {\n    @include invalid_($query);\n  }\n\n  .mdc-text-field--disabled {\n    @include disabled_($query);\n\n    &.mdc-text-field--filled {\n      @include _disabled-filled($query);\n    }\n\n    .mdc-text-field__input {\n      @include _disabled-input($query);\n    }\n  }\n\n  .mdc-text-field--end-aligned {\n    @include end-aligned_($query);\n  }\n\n  .mdc-text-field--ltr-text {\n    @include _ltr-text($query);\n\n    &.mdc-text-field--end-aligned {\n      @include _ltr-text-end-aligned($query);\n    }\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other text field styles. It is recommended that most users use `mdc-text-field-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-text-field--filled {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n  }\n\n  #{variables.$ripple-target} {\n    @include ripple.target-common($query: $query);\n  }\n}\n\n///\n/// Sets density scale for default text field variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled textfields at which to allow floating labels.\n///\n@mixin density(\n  $density-scale,\n  $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height(\n    $height,\n    $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n    $query: $query\n  );\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-height($height, $query: $query);\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for outlined text field with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-with-leading-icon-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-with-leading-icon-height($height, $query: $query);\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for filled textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin filled-textarea-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $textfield-height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n  $no-label-margin-top: density-functions.prop-value(\n    $density-config: variables.$textarea-filled-no-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-top,\n  );\n  $no-label-margin-bottom: density-functions.prop-value(\n    $density-config: variables.$textarea-filled-no-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-bottom,\n  );\n\n  // Textarea mixins require two modifier classes since two are used internally\n  // for styles (textarea and filled). An extra class is added for the public\n  // mixin so that only a single public class is needed for specificity.\n  &.mdc-text-field--filled {\n    .mdc-text-field__resizer {\n      @include feature-targeting.targets($feat-structure) {\n        min-height: $textfield-height;\n      }\n    }\n\n    @if $density-scale >= -1 {\n      $keyframe-suffix: text-field-filled-#{$density-scale};\n      $label-top: density-functions.prop-value(\n        $density-config: variables.$textarea-filled-label-density-config,\n        $density-scale: math.div($density-scale, 2),\n        $property-name: top,\n      );\n\n      // Adjust the floating position and animation/keyframes of the floating\n      // label by the new position of the resting label\n      $label-top-difference: variables.$textarea-outlined-label-top -\n        $label-top;\n\n      // Floating label position\n      @include floating-label-mixins.float-position(\n        variables.$textarea-filled-label-position-y - $label-top-difference,\n        $query: $query\n      );\n\n      // Floating label animation\n      @include floating-label-mixins.shake-animation(\n        $keyframe-suffix,\n        $query: $query\n      );\n      @at-root {\n        @include floating-label-mixins.shake-keyframes(\n          $keyframe-suffix,\n          variables.$textarea-filled-label-position-y - $label-top-difference,\n          0%,\n          $query: $query\n        );\n      }\n\n      // Resting label position\n      .mdc-floating-label {\n        @include feature-targeting.targets($feat-structure) {\n          top: $label-top;\n        }\n      }\n\n      $margin-bottom: density-functions.prop-value(\n        $density-config: variables.$textarea-filled-density-config,\n        $density-scale: $density-scale,\n        $property-name: margin-bottom,\n      );\n\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-bottom: $margin-bottom;\n        }\n      }\n    } @else {\n      // The textarea is too dense to show a floating label\n      .mdc-floating-label {\n        @include feature-targeting.targets($feat-structure) {\n          display: none;\n        }\n      }\n\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-top: $no-label-margin-top;\n          margin-bottom: $no-label-margin-bottom;\n        }\n      }\n    }\n\n    &.mdc-text-field--no-label {\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-top: $no-label-margin-top;\n          margin-bottom: $no-label-margin-bottom;\n        }\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        // Space between textarea and internal counter should not be affected\n        @include _textarea-input-with-internal-counter($query);\n      }\n    }\n  }\n}\n\n///\n/// Sets density scale for outlined textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-textarea-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $keyframe-suffix: text-field-outlined-#{$density-scale};\n  $label-top: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: top,\n  );\n  $textfield-height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n  $margin-top: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-top,\n  );\n  $margin-bottom: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-bottom,\n  );\n\n  // Textarea mixins require two modifier classes since two are used internally\n  // for styles (textarea and outlined). An extra class is added for the public\n  // mixin so that only a single public class is needed for specificity.\n  &.mdc-text-field--outlined {\n    // Adjust the floating position and animation/keyframes of the floating\n    // label by the new position of the resting label\n    $label-top-difference: variables.$textarea-outlined-label-top - $label-top;\n\n    // Floating label position\n    @include notched-outline-mixins.floating-label-float-position-absolute(\n      variables.$textarea-outlined-label-position-y - $label-top-difference,\n      $query: $query\n    );\n\n    // Floating label animation\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n    @at-root {\n      @include floating-label-mixins.shake-keyframes(\n        $keyframe-suffix,\n        variables.$textarea-outlined-label-position-y - $label-top-difference,\n        0%,\n        $query: $query\n      );\n    }\n\n    // Resting label position\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        top: $label-top;\n      }\n    }\n\n    .mdc-text-field__resizer {\n      @include feature-targeting.targets($feat-structure) {\n        min-height: $textfield-height;\n      }\n    }\n\n    .mdc-text-field__input {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: $margin-top;\n        margin-bottom: $margin-bottom;\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        // Space between textarea and internal counter should not be affected\n        @include _textarea-input-with-internal-counter($query);\n      }\n    }\n  }\n}\n\n///\n/// Sets the minimum number of rows for a textarea a textarea may be resized to.\n///\n/// For IE11 this mixin can be used instead of the rows attribute.\n///\n/// @param {Number} $rows - The minimum number of rows for a textarea.\n/// @param {Number} $line-height - The line-height of the textarea.\n///\n@mixin textarea-min-rows(\n  $rows,\n  $line-height: variables.$textarea-line-height,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      min-height: $rows * $line-height;\n    }\n  }\n}\n\n///\n/// Sets height of default text field variant.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled textfields at which to allow floating labels.\n/// @access public\n///\n@mixin height(\n  $height,\n  $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(height, $height);\n  }\n\n  // We can only hide the label (when there's not enough vertical space for it)\n  // if we know the container height at compilation time.\n  // That's not the case when $height is a custom property.\n  @if not custom-properties.is-custom-prop($height) {\n    @if $height < $minimum-height-for-filled-label {\n      @include filled-no-label($query: $query);\n    }\n  }\n}\n\n///\n/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @access public\n///\n@mixin outlined-height(\n  $height,\n  $keyframe-suffix: text-field-outlined-#{$height},\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $positionY: variables.get-outlined-label-position-y($height);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    $positionY,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    $keyframe-suffix,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix,\n      $positionY,\n      $query: $query\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n///\n/// Sets height of outlined text field with leading icon variant.\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @access public\n///\n@mixin outlined-with-leading-icon-height(\n  $height,\n  $keyframe-suffix: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // This extra specificity is needed because textfield applies the below mixin\n  // already to two selectors (outlined + with-leading-icon). To override\n  // them with a new label position and animation, another selector is needed.\n  &.mdc-text-field--outlined {\n    @include _outlined-with-leading-icon-floating-label-position-animation(\n      $height,\n      $keyframe-suffix,\n      $query\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n// Mixin that sets the floating label position and animations for a given height.\n// This mixin is separate to allow outlined-with-leading-icon-height() to\n// provide greater specificity over the default mixin that adds styles for\n// outlined with leading icons.\n@mixin _outlined-with-leading-icon-floating-label-position-animation(\n  $height,\n  $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height},\n  $query: feature-targeting.all()\n) {\n  $positionY: variables.get-outlined-label-position-y($height);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    $positionY,\n    variables.$outlined-with-leading-icon-label-position-x,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    $keyframe-suffix,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix,\n      $positionY,\n      variables.$outlined-with-leading-icon-label-position-x,\n      $query: $query\n    );\n  }\n\n  $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n  @include rtl.rtl {\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n  }\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix-rtl,\n      $positionY,\n      -(variables.$outlined-with-leading-icon-label-position-x),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets shape radius of default text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of default text field variant. Required only when `$radius` is in\n///     percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin shape-radius(\n  $radius,\n  $density-scale: variables.$density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @if (meta.type-of($radius) == 'list') and\n    (list.length($radius) > 2) and\n    (list.nth($radius, 3) != 0 or list.nth($radius, 4) != 0)\n  {\n    @error \"mdc-textfield: Invalid radius #{$radius}. Only top-left and top-right corners may be customized.\";\n  }\n\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  $masked-radius: shape-functions.mask-radius($radius, 1 1 0 0);\n\n  $fallback: if(\n    custom-properties.is-custom-prop($radius),\n    custom-properties.get-fallback($radius),\n    null\n  );\n\n  @if meta.type-of($fallback) == 'list' {\n    $fallback: css.unpack-value($fallback);\n    $first: list.nth($masked-radius, 1);\n    $second: list.nth($masked-radius, 2);\n    $third: list.nth($masked-radius, 3);\n    $fourth: list.nth($masked-radius, 4);\n    $masked-radius: (\n      if(\n        custom-properties.is-custom-prop($first),\n        custom-properties.set-fallback($first, list.nth($fallback, 1)),\n        $first\n      ),\n      if(\n        custom-properties.is-custom-prop($second),\n        custom-properties.set-fallback($second, list.nth($fallback, 2)),\n        $second\n      ),\n      if(\n        custom-properties.is-custom-prop($third),\n        custom-properties.set-fallback($third, list.nth($fallback, 3)),\n        $third\n      ),\n      if(\n        custom-properties.is-custom-prop($fourth),\n        custom-properties.set-fallback($fourth, list.nth($fallback, 4)),\n        $fourth\n      )\n    );\n  }\n\n  @include shape-mixins.radius(\n    $masked-radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n}\n\n@mixin textarea-shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @include notched-outline-mixins.shape-radius(\n    $radius,\n    $rtl-reflexive,\n    $query: $query\n  );\n}\n\n///\n/// Customizes the color of the text entered into an enabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the entered text in a disabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the placeholder in an enabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin placeholder-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include placeholder-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the placeholder in a disabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin disabled-placeholder-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include placeholder-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the background color of the text field or textarea when enabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include fill-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the background color of the text field or textarea when disabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin disabled-fill-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include fill-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the disabled text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin disabled-bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the hover text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin hover-bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include hover-bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the default line ripple of the text field.\n/// @param {Color} $color - The desired line ripple color.\n///\n@mixin line-ripple-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include line-ripple-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text color of the label in an enabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin label-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include label-ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text color of the label in a disabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin disabled-label-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include label-ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the border color of the outlined text field or textarea.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is hovered.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin hover-outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include hover-outline-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is focused.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin focused-outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include focused-outline-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is disabled.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin disabled-outline-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the caret color of the text field or textarea.\n/// @param {Color} $color - The desired caret color.\n///\n@mixin caret-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(caret-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the color of the prefix text for an enabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin prefix-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include _prefix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the prefix text for a disabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin disabled-prefix-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include _prefix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the suffix text for an enabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin suffix-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include _suffix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the suffix text for a disabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin disabled-suffix-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include _suffix-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets shape radius of outlined text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of outlined text field variant. Required only when `$radius` is in\n///     percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin outline-shape-radius(\n  $radius,\n  $density-scale: variables.$density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-notched-outline {\n    @include notched-outline-mixins.shape-radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $height\n  );\n  $unpacked-radius: shape-functions.unpack-radius($resolved-radius);\n  $top-left-radius: list.nth($unpacked-radius, 1);\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n  $top-right-radius: list.nth($unpacked-radius, 2);\n  $top-right-is-custom-prop: custom-properties.is-custom-prop(\n    $top-right-radius\n  );\n\n  @if (\n    $top-left-is-custom-prop or\n      $top-right-is-custom-prop or\n      $top-left-radius-px >\n      notched-outline-variables.$leading-width\n  ) {\n    // The horizontal padding only needs to be overriden from the base padding\n    // if the radius is a custom property, or if the top-left radius is a value\n    // that is large than that default notched outline's leading width.\n    @include _outline-shape-radius-horizontal-padding(\n      $top-left-radius,\n      $top-right-radius,\n      $query: $query\n    );\n\n    + .mdc-text-field-helper-line {\n      @include _outline-shape-radius-horizontal-padding(\n        $top-left-radius,\n        $top-right-radius,\n        $query: $query\n      );\n    }\n\n    // Ensure that leading/trailing icon padding is overriden. Even if the\n    // top left/right isn't a custom property or the leading isn't larger, we\n    // still need to override. The above left/right padding rules have more\n    // specificty than the original leading/trailing icon rules, so we need to\n    // re-apply them.\n    // Additionally, if the top left/right radii _are_ custom properties, we\n    // should use those instead.\n\n    &.mdc-text-field--with-leading-icon {\n      @if ($top-right-is-custom-prop) {\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          padding-left: 0;\n        }\n        @include _apply-outline-shape-padding(\n          padding-right,\n          $top-right-radius,\n          $query: $query\n        );\n\n        @include rtl.rtl {\n          @include _apply-outline-shape-padding(\n            padding-left,\n            $top-right-radius,\n            $query: $query\n          );\n          @include feature-targeting.targets($feat-structure) {\n            @include rtl.ignore-next-line();\n            padding-right: 0;\n          }\n        }\n      } @else {\n        @include _padding-horizontal-with-leading-icon($query);\n      }\n    }\n\n    &.mdc-text-field--with-trailing-icon {\n      @if (\n        $top-left-is-custom-prop or\n          $top-left-radius-px >\n          notched-outline-variables.$leading-width\n      ) {\n        @include _apply-outline-shape-padding(\n          padding-left,\n          $top-left-radius,\n          $add-label-padding: true,\n          $query: $query\n        );\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          padding-right: 0;\n        }\n\n        @include rtl.rtl {\n          @include feature-targeting.targets($feat-structure) {\n            @include rtl.ignore-next-line();\n            padding-left: 0;\n          }\n          @include _apply-outline-shape-padding(\n            padding-right,\n            $top-left-radius,\n            $add-label-padding: true,\n            $query: $query\n          );\n        }\n      } @else {\n        @include _padding-horizontal-with-trailing-icon($query);\n      }\n    }\n\n    &.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n      @include _padding-horizontal-with-both-icons($query);\n    }\n  }\n}\n\n@mixin _outline-shape-radius-horizontal-padding(\n  $top-left-radius,\n  $top-right-radius,\n  $query: feature-targeting.all()\n) {\n  @include _apply-outline-shape-padding(\n    padding-left,\n    $top-left-radius,\n    $add-label-padding: true,\n    $query: $query\n  );\n  @include _apply-outline-shape-padding(\n    padding-right,\n    $top-right-radius,\n    $query: $query\n  );\n\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n  $top-right-is-custom-prop: custom-properties.is-custom-prop(\n    $top-right-radius\n  );\n  $top-right-radius-px: $top-right-radius;\n  @if ($top-right-is-custom-prop) {\n    $top-right-radius-px: custom-properties.get-fallback($top-right-radius);\n  }\n\n  @if (\n    (\n        $top-left-is-custom-prop and\n          $top-right-is-custom-prop and not\n          custom-properties.are-equal($top-left-radius, $top-right-radius)\n      ) or\n      $top-left-radius-px !=\n      $top-right-radius-px\n  ) {\n    // Normally base horizontal padding doesn't need RTL, but if the values\n    // are different or they are two different custom properties, they need to\n    // be reversed.\n    @include rtl.rtl {\n      @include _apply-outline-shape-padding(\n        padding-right,\n        $top-left-radius,\n        $add-label-padding: true,\n        $query: $query\n      );\n      @include _apply-outline-shape-padding(\n        padding-left,\n        $top-right-radius,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _apply-outline-shape-padding(\n  $property,\n  $padding,\n  $add-label-padding: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $padding-is-custom-prop: custom-properties.is-custom-prop($padding);\n  $padding-px: $padding;\n  @if ($padding-is-custom-prop) {\n    $padding-px: custom-properties.get-fallback($padding);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    // The shape should only change the padding if the radius becomes greater\n    // than the default padding. That means we need to add more padding.\n    @if ($padding-px > variables.$padding-horizontal) {\n      // Set a px value if it's greater. This is either the only value (if\n      // we're given an exact value), or an IE11 fallback if we're given a\n      // custom property and the fallback value is greater than the padding.\n      $value: $padding-px;\n      @if ($add-label-padding) {\n        // If this is for the top-left leading, add the notched outline padding\n        // to keep it aligned with the label\n        $value: $padding-px + notched-outline-variables.$padding;\n      }\n\n      @include rtl.ignore-next-line();\n      #{$property}: $value;\n      @if ($padding-is-custom-prop) {\n        // Add an alternate GSS tag b/c this was an IE11 fallback and we're\n        // going to add another property with the var() value\n        /* @alternate */\n      }\n    }\n    @if ($padding-is-custom-prop) {\n      // If it's a custom property, always add it since the value may change\n      // to be greater than the padding at runtime, even if the fallback is\n      // not currently greater than the default padding.\n      $value: custom-properties.create-var($padding);\n      @if ($add-label-padding) {\n        $value: calc(#{$value} + #{notched-outline-variables.$padding});\n      }\n\n      // Interpolation is a workaround for sass/sass#3259.\n      @supports (top: max(#{0%})) {\n        // A max() function makes this runtime dynamic. The padding will be\n        // whichever is greater: the default horizontal padding, or the calculated\n        // custom property plus extra padding.\n        @include rtl.ignore-next-line();\n        #{$property}: max(#{variables.$padding-horizontal}, #{$value});\n      }\n    }\n  }\n}\n\n///\n/// Sets the CSS transition for the floating label's 'float' animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin floating-label-float-transition(\n  $duration-ms,\n  $timing-function: null,\n  $query: feature-targeting.all()\n) {\n  .mdc-floating-label {\n    @include floating-label-mixins.float-transition(\n      $duration-ms,\n      $timing-function,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets custom font size of the input.\n///\n/// @param {number} $font-size - Overrides the font size.\n///\n@mixin input-font-size($font-size, $query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  .mdc-text-field__input,\n  .mdc-text-field__affix--suffix,\n  .mdc-text-field__affix--prefix {\n    @include feature-targeting.targets($feat-typography) {\n      font-size: $font-size;\n    }\n  }\n}\n\n///\n/// Sets custom font family of the input.\n///\n/// @param {String} $font-family - Selected font family.\n///\n@mixin input-font-family($font-family, $query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-typography) {\n      font-family: $font-family;\n    }\n  }\n}\n\n// Private mixins\n\n// Base shared styles\n@mixin _base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Shape\n  @include shape-radius(variables.$shape-radius, $query: $query);\n\n  // Colors\n  @include label-color(variables.$label, $query: $query);\n  @include ink-color(variables.$ink-color, $query: $query);\n  @include placeholder-color(variables.$placeholder-ink-color, $query: $query);\n  @include caret-color(primary, $query: $query);\n  @include helper-text-mixins.helper-text-color(\n    variables.$helper-text-color,\n    $query: $query\n  );\n  @include character-counter-mixins.character-counter-color(\n    variables.$helper-text-color,\n    $query: $query\n  );\n  @include icon-mixins.leading-icon-color(\n    variables.$icon-color,\n    $query: $query\n  );\n  @include icon-mixins.trailing-icon-color(\n    variables.$icon-color,\n    $query: $query\n  );\n  @include prefix-color(variables.$affix-color, $query: $query);\n  @include suffix-color(variables.$affix-color, $query: $query);\n\n  // Floating Label\n  @include floating-label_($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    // display and align-items are necessary to make the text field participate\n    // in baseline alignment, even though some variants are 'centered'. Those\n    // variants should use the _baseline-center-aligned() mixin\n    display: inline-flex;\n    align-items: baseline;\n    padding: 0 variables.$padding-horizontal;\n    position: relative;\n    box-sizing: border-box;\n    overflow: hidden;\n    /* @alternate */\n    will-change: opacity, transform, color;\n  }\n}\n\n// This mixin adds styles to visually center the text within the text field.\n// Sibling text will align to the baseline and appear centered next to the\n// text field.\n@mixin _baseline-center-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // In order for a flexbox container to participate in baseline alignment,\n    // it follows these rules to determine where its baseline is:\n    // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n    //\n    // In order to avoid leading icons 'controlling' the baseline (since they\n    // are the first child), flexbox will generate a baseline from any child\n    // flex items that participate in baseline alignment.\n    //\n    // Icons are set to \"align-self: center\", while all other children are\n    // aligned to baseline. The next problem is deciding which child is\n    // used to determine the baseline.\n    //\n    // According to spec, the item with the largest distance between its\n    // baseline and the edge of the cross axis is placed flush with that edge,\n    // making it the baseline of the container.\n    // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n    //\n    // For the filled variant, the pseudo ::before strut is the 'largest'\n    // child since the input has a height of 28px and the strut is 40px. We\n    // can emulate center alignment and force the baseline to use the input\n    // text by making the input the full height of the container and removing\n    // the baseline strut.\n\n    // IE11 does not respect this, and makes the leading icon (if present) the\n    // baseline. This is a gap with IE11 that we have accepted.\n    .mdc-text-field__input {\n      height: 100%;\n    }\n  }\n}\n\n@mixin _padding-horizontal-with-leading-icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(padding, 0, variables.$padding-horizontal);\n  }\n}\n\n@mixin _padding-horizontal-with-trailing-icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(padding, variables.$padding-horizontal, 0);\n  }\n}\n\n@mixin _padding-horizontal-with-both-icons($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    padding-left: 0;\n    @include rtl.ignore-next-line();\n    padding-right: 0;\n  }\n}\n\n@mixin floating-label_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n  }\n}\n\n// Filled\n\n@mixin _filled($query: feature-targeting.all()) {\n  // Text Field intentionally omits press ripple, so each state needs to be specified individually.\n  @include ripple-theme.states-base-color(\n    variables.$ink-color,\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include ripple-theme.states-hover-opacity(\n    ripple-theme.states-opacity(variables.$ink-color, hover),\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include ripple-theme.states-focus-opacity(\n    ripple-theme.states-opacity(variables.$ink-color, focus),\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n\n  @include height(variables.$height, $query: $query);\n  @include typography.baseline-top(\n    variables.$filled-baseline-top,\n    $query: $query\n  );\n  @include fill-color(variables.$background, $query: $query);\n  @include bottom-line-color(variables.$bottom-line-idle, $query: $query);\n  @include hover-bottom-line-color(\n    variables.$bottom-line-hover,\n    $query: $query\n  );\n  @include line-ripple-color_(primary, $query: $query);\n  @include _filled-floating-label($query);\n}\n\n@mixin _filled-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, variables.$label-offset);\n    }\n  }\n\n  @include floating-label-mixins.float-position(\n    variables.$label-position-y,\n    $query: $query\n  );\n}\n\n// Filled variant with no label. This variant centers the text elements and\n// hides the label and is used with there is explicitly no label provided or\n// when the height of the text field is too small for a label to be allowed.\n@mixin filled-no-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _baseline-center-aligned($query);\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-floating-label {\n      display: none;\n    }\n\n    &::before {\n      // Remove baseline-top strut\n      display: none;\n    }\n  }\n\n  // Safari only\n  @supports (-webkit-hyphens: none) {\n    .mdc-text-field__affix {\n      @include _centered-affix-safari-support($query: $query);\n    }\n  }\n}\n\n// Outlined\n\n@mixin outlined_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include outlined-height(\n    $height: variables.$height,\n    $keyframe-suffix: text-field-outlined,\n    $query: $query\n  );\n  @include _baseline-center-aligned($query: $query);\n  @include outline-color(variables.$outlined-idle-border, $query: $query);\n  @include hover-outline-color(\n    variables.$outlined-hover-border,\n    $query: $query\n  );\n  @include focused-outline-color(primary, $query: $query);\n  @include outline-shape-radius(variables.$shape-radius, $query: $query);\n  @include notched-outline-mixins.notch-offset(\n    notched-outline-variables.$border-width,\n    $query: $query\n  );\n  @include ripple-theme.states-base-color(\n    transparent,\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include _outlined-floating-label($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    overflow: visible;\n  }\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      // TODO(b/154349735): Investigate the neccessity of these styles\n      display: flex;\n      // stylelint-disable-next-line declaration-no-important --\n      // FF adds unwanted border in HC mode on windows.\n      border: none !important;\n      background-color: transparent;\n    }\n  }\n}\n\n@mixin _outlined-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, notched-outline-variables.$padding);\n    }\n  }\n}\n\n@mixin _outlined-notched-outline($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // Force the outline to appear \"above\" the textfield elements, even though\n    // it is absolutely positioned and comes before the input in the DOM. This\n    // is primarily for the textarea scrollbar and resize elements, which may\n    // clip with with outline border.\n    z-index: 1;\n  }\n}\n\n// States\n\n@mixin disabled_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ink-color_(variables.$disabled-ink-color, $query: $query);\n  @include placeholder-color_(\n    variables.$disabled-placeholder-ink-color,\n    $query: $query\n  );\n  @include label-ink-color_(variables.$disabled-label-color, $query: $query);\n  @include helper-text-mixins.helper-text-color_(\n    variables.$disabled-helper-text-color,\n    $query: $query\n  );\n  @include character-counter-mixins.character-counter-color_(\n    variables.$disabled-helper-text-color,\n    $query: $query\n  );\n  @include icon-mixins.leading-icon-color_(\n    variables.$disabled-icon,\n    $query: $query\n  );\n  @include icon-mixins.trailing-icon-color_(\n    variables.$disabled-icon,\n    $query: $query\n  );\n  @include _prefix-color(variables.$disabled-affix-color, $query: $query);\n  @include _suffix-color(variables.$disabled-affix-color, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include bottom-line-color_(variables.$disabled-border, $query: $query);\n  @include notched-outline-mixins.color(\n    variables.$outlined-disabled-border,\n    $query: $query\n  );\n\n  @include dom.forced-colors-mode {\n    @include placeholder-color_(GrayText, $query: $query);\n    @include label-ink-color_(GrayText, $query: $query);\n    @include helper-text-mixins.helper-text-color_(GrayText, $query: $query);\n    @include character-counter-mixins.character-counter-color_(\n      GrayText,\n      $query: $query\n    );\n    @include icon-mixins.leading-icon-color_(GrayText, $query: $query);\n    @include icon-mixins.trailing-icon-color_(GrayText, $query: $query);\n    @include _prefix-color(GrayText, $query: $query);\n    @include _suffix-color(GrayText, $query: $query);\n\n    // Mixins that are ok to include since they target variant-specific elements\n    @include bottom-line-color_(GrayText, $query: $query);\n    @include notched-outline-mixins.color(GrayText, $query: $query);\n  }\n\n  @include dom.forced-colors-mode($exclude-ie11: true) {\n    .mdc-text-field__input {\n      @include feature-targeting.targets($feat-structure) {\n        background-color: Window;\n      }\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        z-index: 1;\n      }\n    }\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    pointer-events: none;\n  }\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: default;\n    }\n  }\n}\n\n@mixin _disabled-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // disabled inputs should still allow users to interact with them to select\n    // text and scroll for textareas\n    pointer-events: auto;\n  }\n}\n\n@mixin _disabled-filled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include fill-color_(variables.$disabled-background, $query: $query);\n\n  #{variables.$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      // prevent ripple from displaying on hover when some interactible\n      // elements like input and resize handles are hovered\n      display: none;\n    }\n  }\n}\n\n@mixin invalid_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include hover-bottom-line-color(variables.$error, $query: $query);\n  @include line-ripple-color(variables.$error, $query: $query);\n  @include label-color(variables.$error, $query: $query);\n  @include helper-text-mixins.helper-text-validation-color(\n    variables.$error,\n    $query: $query\n  );\n  @include caret-color(variables.$error, $query: $query);\n  @include icon-mixins.trailing-icon-color(variables.$error, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include bottom-line-color(variables.$error, $query: $query);\n  @include outline-color(variables.$error, $query: $query);\n  @include hover-outline-color(variables.$error, $query: $query);\n  @include focused-outline-color(variables.$error, $query: $query);\n\n  + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin focused_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include label-color(variables.$focused-label-color, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include notched-outline-mixins.stroke-width(\n    variables.$outlined-stroke-width,\n    $query: $query\n  );\n\n  + .mdc-text-field-helper-line\n    .mdc-text-field-helper-text:not(\n      .mdc-text-field-helper-text--validation-msg\n    ) {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin _focused-outlined($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(\n    variables.$outlined-stroke-width,\n    $query: $query\n  );\n}\n\n@mixin _focused-outlined-textarea($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(0, $query: $query);\n}\n\n// Icons\n\n@mixin with-leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $icon-padding: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($icon-padding, $query: $query);\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $icon-padding);\n    }\n  }\n\n  $truncation: $icon-padding + variables.$padding-horizontal;\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _with-trailing-icon($query: feature-targeting.all()) {\n  $truncation: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right +\n    variables.$label-offset;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($truncation, $query: $query);\n  }\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _with-leading-and-trailing-icon($query: feature-targeting.all()) {\n  $leading-icon: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n  $trailing-icon: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n  $truncation: $leading-icon + $trailing-icon;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($truncation, $query: $query);\n  }\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin outlined-with-leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Resting label position\n  $icon-padding: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n  $left-spacing: $icon-padding - notched-outline-variables.$leading-width;\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $left-spacing);\n    }\n  }\n\n  // Notch width\n  $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n  @include _truncate-notched-outline-max-width(\n    $notch-truncation,\n    $query: $query\n  );\n\n  // Floating label position and animation\n  @include _outlined-with-leading-icon-floating-label-position-animation(\n    $height: variables.$height,\n    $keyframe-suffix: text-field-outlined-leading-icon,\n    $query: $query\n  );\n}\n\n///\n/// Applied to the outlined text field with a trailing icon\n///\n@mixin _outlined-with-trailing-icon($query: feature-targeting.all()) {\n  // Resting label position\n  $icon-padding: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n  // Notch width\n  $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n\n  @include _truncate-notched-outline-max-width(\n    $notch-truncation,\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the notched outline by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the notched outline max-width\n///\n@mixin _truncate-notched-outline-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  @include notched-outline-mixins.notch-max-width(\n    calc(100% - #{$truncation}),\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  @include floating-label-mixins.max-width(\n    calc(100% - #{$truncation}),\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount while scaling by the given scale value\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-floated-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  $scale: floating-label-variables.$float-scale;\n  @include floating-label-mixins.max-width(\n    calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n    $query: $query\n  );\n}\n\n// Textarea\n\n@mixin textarea_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include _textarea-floating-label($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    flex-direction: column;\n    align-items: center;\n    width: auto;\n    height: auto;\n    padding: 0; // see below for explanation\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: none;\n  }\n}\n\n@mixin _textarea-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-self: stretch;\n    display: inline-flex;\n    flex-direction: column;\n    flex-grow: 1;\n    max-height: 100%;\n    max-width: 100%;\n    min-height: variables.$height;\n    // 'stretch' is the preferred rule here. It will allow the textarea to grow\n    // to the min/max width of the container, but if an explicit width is set,\n    // it cannot be resized horizontally.\n    // Stretch is still a working draft. Chrome and Firefox have it implemented\n    // with 'available' prefixes. fit-content is another good target for\n    // Safari since it works in almost all use cases except when an explicit\n    // width is set (the user can make the textarea smaller than the container).\n    // None of this matters for IE11, which doesn't support resize.\n    min-width: fit-content;\n    /* @alternate */\n    min-width: -moz-available;\n    /* @alternate */\n    min-width: -webkit-fill-available;\n    overflow: hidden;\n    resize: both;\n  }\n}\n\n@mixin _textarea-filled-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Shift the resizer element up by a margin amount to make space for the\n  // resize handle. For filled elements, the resize handle directly touches\n  // the bottom line and is hard to see.\n  // Using a margin affects the width and positioning of the overall component\n  // and underlying textarea, which is why a transform is used instead.\n  $y: -1 * variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    transform: translateY($y);\n  }\n}\n\n@mixin _textarea-filled-resizer-children($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // See above. After shifting the resize wrapper element, all of its children\n  // should be shifted in the opposite direction (down) to compensate.\n  $y: variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    transform: translateY($y);\n  }\n}\n\n@mixin _textarea-outlined-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Shift the resizer element left/up by a margin amount to make space for the\n  // resize handle. For outlined elements, the resize handle directly touches\n  // the outline and is hard to see.\n  // Using a margin affects the width and positioning of the overall component\n  // and underlying textarea, which is why a transform is used instead.\n  $x: -1 * variables.$textarea-input-handle-margin;\n  $y: -1 * variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    transform: translateX($x) translateY($y);\n\n    @include rtl.rtl {\n      // Flip the horizontal shifting direction for RTL\n      @include rtl.ignore-next-line();\n      transform: translateX(-1 * $x) translateY($y);\n    }\n  }\n}\n\n@mixin _textarea-outlined-resizer-children($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // See above. After shifting the resize wrapper element, all of its children\n  // should be shifted in the opposite direction (right and down) to compensate.\n  $x: variables.$textarea-input-handle-margin;\n  $y: variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    transform: translateX($x) translateY($y);\n\n    @include rtl.rtl {\n      // Flip the horizontal shifting direction for RTL\n      @include rtl.ignore-next-line();\n      transform: translateX(-1 * $x) translateY($y);\n    }\n  }\n}\n\n@mixin _textarea-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Resting label position\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      top: variables.$textarea-label-top;\n    }\n\n    // Resets center aligning the floating label.\n    &:not(.mdc-floating-label--float-above) {\n      @include feature-targeting.targets($feat-structure) {\n        transform: none;\n      }\n    }\n  }\n}\n\n@mixin _textarea-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include feature-targeting.targets($feat-structure) {\n    flex-grow: 1;\n    height: auto;\n    min-height: variables.$textarea-line-height;\n    overflow-x: hidden; // https://bugzilla.mozilla.org/show_bug.cgi?id=33654\n    overflow-y: auto;\n    box-sizing: border-box;\n    resize: none;\n    // Textarea has horizontal padding instead of the container. This allows the\n    // resize handle to extend to the edge of the container.\n    padding: 0 variables.$padding-horizontal;\n  }\n\n  @include feature-targeting.targets($feat-typography) {\n    line-height: variables.$textarea-line-height;\n  }\n}\n\n@mixin _textarea-internal-counter($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include typography.baseline-bottom(\n    variables.$textarea-internal-counter-baseline-bottom,\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    align-self: flex-end;\n    // Needed since padding is on the textarea and not the container\n    padding: 0 variables.$padding-horizontal;\n\n    &::before {\n      // Remove baseline-top\n      display: none;\n    }\n  }\n}\n\n@mixin _textarea-input-with-internal-counter($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-bottom: variables.$textarea-internal-counter-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-filled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    &::before {\n      // <textarea> does not align to baseline when it does not have a value,\n      // unlike <input>, so we have to use padding to fake it instead\n      display: none;\n    }\n  }\n\n  // Floating label position\n  @include floating-label-mixins.float-position(\n    variables.$textarea-filled-label-position-y,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    textarea-filled,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      textarea-filled,\n      variables.$textarea-filled-label-position-y,\n      0%,\n      $query: $query\n    );\n  }\n}\n\n@mixin _textarea-filled-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-filled-input-margin-top;\n    margin-bottom: variables.$textarea-filled-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-filled-no-label-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-filled-no-label-input-margin-top;\n    margin-bottom: variables.$textarea-filled-no-label-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-outlined($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(0, $query: $query);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    variables.$textarea-outlined-label-position-y,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    textarea-outlined,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      textarea-outlined,\n      variables.$textarea-outlined-label-position-y,\n      0%,\n      $query: $query\n    );\n  }\n}\n\n@mixin _textarea-outlined-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    top: variables.$textarea-outlined-label-top;\n  }\n}\n\n@mixin _textarea-outlined-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-outlined-input-margin-top;\n    margin-bottom: variables.$textarea-outlined-input-margin-bottom;\n  }\n}\n\n// Text, Prefix and Suffix\n\n// Common styles for the text of the text field, including the prefix, suffix,\n// and input.\n@mixin _text($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.\n  @include typography.typography(\n    subtitle1,\n    $exclude-props: (line-height),\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    height: variables.$input-height;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: animation.standard(opacity, 150ms);\n  }\n}\n\n@mixin _input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _text($query: $query);\n  @include feature-targeting.targets($feat-structure) {\n    width: 100%;\n    min-width: 0; // Fixes flex issues on Firefox\n    border: none;\n    border-radius: 0;\n    background: none;\n    appearance: none;\n    padding: 0;\n\n    // Remove built-in trailing clear icon on IE11. IE vendor prefixes cannot\n    // be combined with other vendor prefixes like the webkit one below.\n    &::-ms-clear {\n      display: none;\n    }\n\n    // Remove built-in datepicker icon on Chrome\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    // Remove red outline on firefox\n    &:invalid {\n      box-shadow: none;\n    }\n  }\n}\n\n@mixin _input-placeholder($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: animation.standard(opacity, 67ms);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 0;\n  }\n}\n\n@mixin _input-placeholder-visible($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition-delay: 40ms;\n    transition-duration: 110ms;\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin _affix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _text($query: $query);\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 0;\n    white-space: nowrap;\n  }\n}\n\n// TODO(b/155467610): Remove when Safari supports baseline alignment\n// https://github.com/material-components/material-components-web/issues/5879\n@mixin _centered-affix-safari-support($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-items: center;\n    align-self: center;\n    display: inline-flex;\n    height: 100%;\n  }\n}\n\n@mixin _affix-visible($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin _prefix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(padding, right, variables.$prefix-padding);\n  }\n}\n\n@mixin _prefix-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(\n      padding,\n      right,\n      variables.$prefix-end-aligned-padding\n    );\n  }\n}\n\n@mixin _suffix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(padding, left, variables.$suffix-padding);\n  }\n}\n\n@mixin _suffix-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(\n      padding,\n      left,\n      variables.$suffix-end-aligned-padding\n    );\n  }\n}\n\n// End aligned\n@mixin end-aligned_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      // IE11 does not support text-align: end\n      @include rtl.ignore-next-line();\n      text-align: right;\n    }\n\n    @include rtl.rtl {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        text-align: left;\n      }\n    }\n  }\n}\n\n// Forces input, prefix, and suffix to be LTR when in an RTL environment. Other\n// elements such as labels and icons will remain RTL.\n@mixin _ltr-text($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.rtl {\n      .mdc-text-field__input,\n      .mdc-text-field__affix {\n        @include rtl.ignore-next-line();\n        direction: ltr;\n      }\n\n      .mdc-text-field__affix--prefix {\n        @include rtl.ignore-next-line();\n        padding-left: 0;\n        @include rtl.ignore-next-line();\n        padding-right: variables.$prefix-padding;\n      }\n\n      .mdc-text-field__affix--suffix {\n        @include rtl.ignore-next-line();\n        padding-left: variables.$suffix-padding;\n        @include rtl.ignore-next-line();\n        padding-right: 0;\n      }\n\n      // Need to specify an order for all elements since icons maintain their\n      // original positions. We can't just reverse the container.\n      .mdc-text-field__icon--leading {\n        order: 1;\n      }\n\n      .mdc-text-field__affix--suffix {\n        order: 2;\n      }\n\n      .mdc-text-field__input {\n        order: 3;\n      }\n\n      .mdc-text-field__affix--prefix {\n        order: 4;\n      }\n\n      .mdc-text-field__icon--trailing {\n        order: 5;\n      }\n    }\n  }\n}\n\n// Forces input, prefix, and suffix that are already forced to LTR to also be\n// end-aligned. This mixin should be used alongside the styles provided in\n// _ltr-text().\n@mixin _ltr-text-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.rtl {\n      .mdc-text-field__input {\n        // IE11 does not support text-align: end, so we need to duplicate\n        // the LTR end-aligned style here.\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n\n      .mdc-text-field__affix--prefix {\n        // padding-left: 0 provided by _ltr-text mixin\n        @include rtl.ignore-next-line();\n        padding-right: variables.$prefix-end-aligned-padding;\n      }\n\n      .mdc-text-field__affix--suffix {\n        @include rtl.ignore-next-line();\n        padding-left: variables.$suffix-end-aligned-padding;\n        // padding-right: 0 provided by _ltr-text mixin\n      }\n    }\n  }\n}\n\n// Customization\n\n@mixin ink-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin placeholder-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__input {\n      @include placeholder-selector_ {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin fill-color_(\n  $color,\n  $query: feature-targeting.all(),\n  $addAlternate: false\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @if ($addAlternate) {\n      /* @alternate */\n    }\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin bottom-line-color_($color, $query: feature-targeting.all()) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.inactive-color($color, $query: $query);\n  }\n}\n\n@mixin hover-bottom-line-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &:hover .mdc-line-ripple {\n    @include line-ripple-mixins.inactive-color($color, $query: $query);\n  }\n}\n\n@mixin line-ripple-color_($color, $query: feature-targeting.all()) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.active-color($color, $query: $query);\n  }\n}\n\n@mixin hover-outline-color_($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--focused):hover {\n    .mdc-notched-outline {\n      @include notched-outline-mixins.color($color, $query: $query);\n    }\n  }\n}\n\n@mixin focused-outline-color_($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--focused {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n@mixin label-ink-color_($color, $query: feature-targeting.all()) {\n  .mdc-floating-label {\n    @include floating-label-mixins.ink-color($color, $query: $query);\n  }\n}\n\n@mixin _prefix-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__affix--prefix {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _suffix-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__affix--suffix {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n// Selectors\n\n@mixin placeholder-selector_ {\n  // GSS will combine selectors with the same content, and some browsers have a\n  // CSS quirk where it drops a rule if it does not recognize one of the\n  // selectors.\n  // To avoid GSS combining the ::placeholder and :-ms-input-placeholder\n  // selectors, we wrap them in `@media all`.\n  // TODO(b/142329051)\n  @media all {\n    // ::placeholder needs to be wrapped because IE11 will drop other selectors\n    // with the same content\n    &::placeholder {\n      @content;\n    }\n  }\n\n  @media all {\n    // :-ms-input-placeholder needs to be wrapped because Firefox will drop\n    // other selectors with the same content\n    &:-ms-input-placeholder {\n      @content;\n    }\n  }\n}\n\n// State qualifiers\n\n///\n/// Helps style the text-field only when it's enabled.\n/// @access private\n///\n@mixin if-enabled_ {\n  &:not(.mdc-text-field--disabled) {\n    @content;\n  }\n}\n\n///\n/// Helps style the text-field only when it's disabled.\n/// @access private\n///\n@mixin if-disabled_ {\n  &.mdc-text-field--disabled {\n    @content;\n  }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/animation';\n@use '@material/animation/variables';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n\n// Public mixins\n\n@mixin helper-text-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define text-field-helper-text\n\n  .mdc-text-field-helper-text {\n    @include typography.typography(caption, $query: $query);\n    @include typography.text-baseline($top: 16px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: 0;\n      opacity: 0;\n      will-change: opacity;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation.standard(opacity, 150ms);\n    }\n  }\n\n  .mdc-text-field-helper-text--persistent {\n    @include feature-targeting.targets($feat-animation) {\n      transition: none;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n      will-change: initial;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n///\n/// Customizes the color of the helper text following an enabled text-field.\n/// @param {Color} $color - The desired helper text color.\n///\n@mixin helper-text-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include helper-text-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color of the helper text following a disabled text-field.\n/// @param {Color} $color - The desired helper text color.\n///\n@mixin disabled-helper-text-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include helper-text-color_($color, $query);\n  }\n}\n\n@mixin helper-text-validation-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include helper-text-validation-color_($color, $query);\n  }\n}\n\n// Private mixins\n\n@mixin helper-text-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  + .mdc-text-field-helper-line .mdc-text-field-helper-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin helper-text-validation-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-text-field--invalid\n    + .mdc-text-field-helper-line\n    .mdc-text-field-helper-text--validation-msg {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n","//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/theme';\n@use '@material/rtl/rtl';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n\n// Public mixins\n\n@mixin character-counter-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define text-field-character-counter\n\n  .mdc-text-field-character-counter {\n    @include typography.typography(caption, $query: $query);\n    @include typography.text-baseline($top: 16px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      // Keep flex item align to trailing side on absence of helper text.\n      @include rtl.reflexive-box(margin, left, auto);\n      @include rtl.reflexive-box(padding, left, 16px);\n\n      white-space: nowrap;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n///\n/// Customizes the color of the character counter associated with an enabled text field.\n/// @param {Color} $color - The desired character counter color.\n///\n@mixin character-counter-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include character-counter-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color of the character counter associated with a disabled text field.\n/// @param {Color} $color - The desired character counter color.\n///\n@mixin disabled-character-counter-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  &.mdc-text-field--disabled {\n    @include character-counter-color_($color, $query);\n  }\n}\n\n@mixin character-counter-position(\n  $xOffset,\n  $yOffset,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field-character-counter {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(right, $xOffset);\n      position: absolute;\n      bottom: $yOffset;\n    }\n  }\n}\n\n// Private mixins\n\n@mixin character-counter-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Character counter is placed inside mdc-textfield element (for textarea variant) or\n  // inside helper line which is sibling to mdc-textfield.\n  .mdc-text-field-character-counter,\n  + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n\n// Public mixins\n\n@mixin icon-core-styles($query: feature-targeting.all()) {\n  .mdc-text-field__icon {\n    @include icon_($query: $query);\n\n    svg {\n      @include _icon-svg($query: $query);\n    }\n  }\n\n  .mdc-text-field__icon--leading {\n    @include leading-icon_($query: $query);\n  }\n\n  .mdc-text-field__icon--trailing {\n    @include trailing-icon_($query: $query);\n  }\n}\n\n///\n/// Customizes the color for the leading icon in an enabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin leading-icon-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include leading-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the trailing icon in an enabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin trailing-icon-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include trailing-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the leading icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-leading-icon-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include leading-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the trailing icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-trailing-icon-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include trailing-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the leading/trailing icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-icon-color($color, $query: feature-targeting.all()) {\n  @include disabled-leading-icon-color($color, $query);\n  @include disabled-trailing-icon-color($color, $query);\n}\n\n/// Sets the size of the leading and trailing icons.\n///\n/// @param {Number} $size - the size of the icon in px\n@mixin size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-text-field__icon {\n      font-size: $size;\n    }\n  }\n}\n\n// Private mixins\n\n@mixin icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-self: center;\n    cursor: pointer;\n  }\n\n  &:not([tabindex]),\n  &[tabindex='-1'] {\n    @include feature-targeting.targets($feat-color) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n}\n\n@mixin _icon-svg($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // SVG children can cause misalignment when displayed as inline since\n    // line-height will be inherited and cause additional vertical space.\n    // Setting the display to block prevents this.\n    display: block;\n  }\n}\n\n@mixin leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(\n      margin,\n      variables.$leading-icon-padding-left,\n      variables.$leading-icon-padding-right\n    );\n  }\n}\n\n@mixin trailing-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    $padding: math.div(variables.$touch-target-size - variables.$icon-size, 2);\n    $left-margin: variables.$trailing-icon-padding-left - $padding;\n    $right-margin: variables.$trailing-icon-padding-right - $padding;\n\n    padding: $padding;\n    @include rtl.reflexive-property(margin, $left-margin, $right-margin);\n  }\n}\n\n@mixin leading-icon-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__icon--leading {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin trailing-icon-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__icon--trailing {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:math';\n@use 'sass:color';\n@use '@material/density/variables' as density-variables;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme-color';\n\n///\n/// Returns outlined text field floating label position for given height.\n///\n/// @todo Instead of adjusting `$positionY` with label box height that might change based on floating label font size\n///     wrap label in a child element to apply `transitionY(-50%)` to automatically offset based on box height.\n///\n@function get-outlined-label-position-y($text-field-height) {\n  $offset: math.div(notched-outline-variables.$label-box-height, 2);\n\n  // If $text-field-height is not a primitive value, but a custom property or a custom property map,\n  // we cannot compute the label Y position at compilation time.\n  // We will have to defer it to the browser, using calc().\n  @if custom-properties.is-custom-prop($text-field-height) {\n    $text-field-height: custom-properties.get-declaration-value(\n      $text-field-height\n    );\n    @return calc($offset + $text-field-height / 2); // Evaluated in the browser.\n  }\n\n  @if custom-properties.is-custom-prop-string($text-field-height) {\n    @return calc($offset + $text-field-height / 2); // Evaluated in the browser.\n  }\n\n  @return $offset + math.div($text-field-height, 2); // Evaluated statically.\n}\n\n$error: error !default;\n$disabled-border: rgba(theme-color.prop-value(on-surface), 0.06) !default;\n$disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3) !default;\n$bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42) !default;\n$label: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$ink-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n$icon-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$focused-label-color: rgba(theme-color.prop-value(primary), 0.87) !default;\n$placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$affix-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-placeholder-ink-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-helper-text-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n\n$background: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  4%\n) !default;\n$disabled-background: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  2%\n) !default;\n$secondary-text: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$outlined-disabled-border: rgba(\n  theme-color.prop-value(on-surface),\n  0.06\n) !default;\n$outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n\n$textarea-border: rgba(theme-color.prop-value(on-surface), 0.73) !default;\n$textarea-background: rgba(theme-color.prop-value(surface), 1) !default;\n$textarea-disabled-border-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.26\n) !default;\n// cannot be transparent because multiline textarea input\n// will make text unreadable\n$textarea-disabled-background: rgba(249, 249, 249, 1) !default;\n\n$ripple-target: '.mdc-text-field__ripple';\n$outlined-stroke-width: 2px !default;\n$height: 56px !default;\n$minimum-height: 36px !default;\n$minimum-height-for-filled-label: 52px !default;\n$maximum-height: $height !default;\n$padding-horizontal: 16px !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n$shape-radius: small !default;\n$label-position-y: floating-label-variables.$position-y !default;\n$label-offset: 16px !default;\n// TODO(b/154350788): Remove this variable, it's not used internally but it is\n// externally in Angular\n/// @deprecated this variable will be removed in the future.\n/// Use get-outlined-label-position-y($height) instead\n$outlined-label-position-y: get-outlined-label-position-y($height) !default;\n$outlined-with-leading-icon-label-position-x: 32px !default;\n$textarea-outlined-label-position-y: 24.75px !default; // visually ~4dp from top to baseline\n$textarea-filled-label-position-y: 10.25px !default; // visually ~20dp from top to label baseline\n$helper-line-padding: 16px !default;\n$filled-baseline-top: 40px !default;\n$input-height: 28px !default;\n$textarea-label-top: 19px !default; // visually ~32dp from top to label baseline\n$textarea-outlined-label-top: $textarea-label-top -\n  notched-outline-variables.$border-width !default;\n$textarea-line-height: 1.5rem !default; // 24dp from baseline to baseline\n$textarea-input-handle-margin: 1px !default;\n// Outlined textarea's first line should be placed at the same position as\n// outlined textfield, and should look identical if it is 1 row. Since textfield\n// is centered and font metrics vary for where the baseline is, the best way to\n// ensure textarea and textfield align is with padding. At 56px height with a\n// 24px line-height, a centered textfield has 16px of top and bottom padding.\n// Textarea should use this to position itself.\n$textarea-outlined-input-margin-top: 16px !default;\n$textarea-outlined-input-margin-bottom: 16px !default;\n$textarea-outlined-density-config: (\n  margin-top: (\n    default: $textarea-outlined-input-margin-top,\n    maximum: $textarea-outlined-input-margin-top,\n    minimum: $textarea-outlined-input-margin-top - 8,\n  ),\n  margin-bottom: (\n    default: $textarea-outlined-input-margin-bottom,\n    maximum: $textarea-outlined-input-margin-bottom,\n    minimum: $textarea-outlined-input-margin-bottom - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-outlined-label-density-config: (\n  top: (\n    default: $textarea-outlined-label-top,\n    maximum: $textarea-outlined-label-top,\n    minimum: $textarea-outlined-label-top - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-filled-input-margin-top: 23px !default; // visually ~40dp from top to baseline\n$textarea-filled-input-margin-bottom: 9px !default; // visually ~16dp from baseline to bottom\n$textarea-filled-density-config: (\n  margin-bottom: (\n    default: $textarea-filled-input-margin-bottom,\n    maximum: $textarea-filled-input-margin-bottom,\n    minimum: $textarea-filled-input-margin-bottom - 4,\n  ),\n) !default; // scale to -1 for minimum\n$textarea-filled-label-density-config: (\n  top: (\n    default: $textarea-label-top,\n    maximum: $textarea-label-top,\n    minimum: $textarea-label-top - 2,\n  ),\n) !default; // remove 1/2 of scale to -1 for minimm\n$textarea-filled-no-label-input-margin-top: 16px !default; // see above explanation for outlined textarea margin\n$textarea-filled-no-label-input-margin-bottom: 16px !default; // see above explanation for outlined textarea margin\n$textarea-filled-no-label-density-config: (\n  margin-top: (\n    default: $textarea-filled-no-label-input-margin-top,\n    maximum: $textarea-filled-no-label-input-margin-top,\n    minimum: $textarea-filled-no-label-input-margin-top - 8,\n  ),\n  margin-bottom: (\n    default: $textarea-filled-no-label-input-margin-bottom,\n    maximum: $textarea-filled-no-label-input-margin-bottom,\n    minimum: $textarea-filled-no-label-input-margin-bottom - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-internal-counter-input-margin-bottom: 2px !default; // visually ~20dp from baseline to counter baseline\n$textarea-internal-counter-baseline-bottom: 16px !default;\n// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.\n\n$prefix-padding: 2px !default;\n$prefix-end-aligned-padding: 12px !default;\n$suffix-padding: 12px !default;\n$suffix-end-aligned-padding: 2px !default;\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n  hover: 0.04,\n  focus: 0.12,\n  press: 0.12,\n  selected: 0.08,\n  activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n  hover: 0.08,\n  focus: 0.24,\n  press: 0.24,\n  selected: 0.16,\n  activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n  focus-state-layer-color: theme-color.$on-surface,\n  focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n  hover-state-layer-color: theme-color.$on-surface,\n  hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n  pressed-state-layer-color: theme-color.$on-surface,\n  pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @if shadow-dom.$css-selector-fallback-declarations {\n    .mdc-ripple-surface {\n      @include theme-styles($theme);\n    }\n  }\n}\n\n$_ripple-theme: (\n  hover-state-layer-color: null,\n  focus-state-layer-color: null,\n  pressed-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  focus-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  // TODO(b/191298796): Support states layer color for every interactive states.\n  // Use only hover state layer color, ignoring focus and pressed color.\n  @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n  @include theme.validate-theme-styles($_ripple-theme, $theme);\n\n  @include states-base-color(\n    map.get($theme, hover-state-layer-color),\n    $ripple-target: $ripple-target\n  );\n  @include states-hover-opacity(\n    map.get($theme, hover-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-focus-opacity(\n    map.get($theme, focus-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-press-opacity(\n    map.get($theme, pressed-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin states-base-color(\n  $color,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @if not custom-properties.is-custom-prop($color) {\n      $color: custom-properties.create(\n        ripple-color,\n        theme-color.get-custom-property($color)\n      );\n    }\n\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n  $opacity-map: (),\n  $has-nested-focusable-element: false,\n  $ripple-target: '&',\n  $query: feature-targeting.all()\n) {\n  // Ensure sufficient specificity to override base state opacities\n  @if map.get($opacity-map, hover) {\n    @include states-hover-opacity(\n      map.get($opacity-map, hover),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, focus) {\n    @include states-focus-opacity(\n      map.get($opacity-map, focus),\n      $ripple-target: $ripple-target,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, press) {\n    @include states-press-opacity(\n      map.get($opacity-map, press),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n}\n\n@mixin states-hover-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity and not custom-properties.is-custom-prop($opacity) {\n    $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n  }\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover,\n  &.mdc-ripple-surface--hover {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(opacity, $opacity);\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity(\n  $opacity,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  // Focus overrides hover by reusing the ::before pseudo-element.\n  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n  // but undesirable in general in case of nested stateful components.\n  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n  @if $has-nested-focusable-element {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus,\n    &:focus-within {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  } @else {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n    }\n\n    // Note that this duration is only effective on focus, not blur\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: 75ms;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin states-press-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Styles for non-upgraded (CSS-only) stateful surfaces\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n    }\n\n    &:not(.mdc-ripple-upgraded) {\n      // Apply press additively by using the ::after pseudo-element\n      #{$ripple-target}::after {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity $fade-out-duration linear;\n        }\n      }\n\n      &:active {\n        #{$ripple-target}::after {\n          @include feature-targeting.targets($feat-animation) {\n            transition-duration: $fade-in-duration;\n          }\n\n          // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n          @include feature-targeting.targets($feat-color) {\n            @include theme.property(opacity, $opacity);\n          }\n        }\n      }\n    }\n\n    &.mdc-ripple-upgraded {\n      @include feature-targeting.targets($feat-color) {\n        // Upgraded ripple should always emit custom property, regardless of\n        // configuration, since ripple itself feature detects custom property\n        // support at runtime.\n        @include custom-properties.configure($emit-custom-properties: true) {\n          @include theme.property(\n            custom-properties.create(ripple-fg-opacity, $opacity)\n          );\n        }\n      }\n    }\n  }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n  $color: theme-color.prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include states-interactions_(\n    $color: $color,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target,\n    $opacity-map: $opacity-map\n  );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $activated-opacity: states-opacity($color, activated);\n\n  &--activated {\n    // Stylelint seems to think that '&' qualifies as a type selector here?\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-activated-opacity,\n            $activated-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $activated-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $selected-opacity: states-opacity($color, selected);\n\n  &--selected {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-selected-opacity,\n            $selected-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $selected-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include target-selector($ripple-target) {\n    @include states-base-color($color, $query);\n  }\n\n  @if $opacity-map == null {\n    $opacity-map: (\n      hover: states-opacity($color, hover) + $opacity-modifier,\n      focus: states-opacity($color, focus) + $opacity-modifier,\n      press: states-opacity($color, press) + $opacity-modifier,\n    );\n  }\n\n  @include states-opacities(\n    $opacity-map,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $ripple-target: $ripple-target,\n    $query: $query\n  );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n  @if $ripple-target == '&' {\n    @content;\n  } @else {\n    #{$ripple-target} {\n      @content;\n    }\n  }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n  #{$_hover-selector},\n  #{$_focus-selector},\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n@mixin hover() {\n  #{$_hover-selector} {\n    @content;\n  }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n  #{$_focus-selector} {\n    @content;\n  }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n  @include pressed() {\n    @content;\n  }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n  $ripple-target,\n  $content-root-selector: '&',\n  $query: feature-targeting.all()\n) {\n  // Needed for IE11. Without this, IE11 renders the state layer completely\n  // underneath the container, making it invisible.\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  #{$content-root-selector} {\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 0;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, -1)\n      );\n    }\n  }\n}\n\n@function states-opacity($color, $state) {\n  $color-value: theme-color.prop-value($color);\n  $opacity-map: if(\n    theme-color.tone($color-value) == 'light',\n    $light-ink-opacities,\n    $dark-ink-opacities\n  );\n\n  @if not map.has-key($opacity-map, $state) {\n    @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n  }\n\n  @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n  #{$ripple-target}::before {\n    @content;\n  }\n}\n","// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n  $border-width: 1px,\n  $border-style: solid,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    @include rtl.ignore-next-line();\n    left: 0;\n    border: $border-width $border-style transparent;\n    border-radius: inherit;\n    content: '';\n    pointer-events: none;\n  }\n\n  // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n  @include forced-colors-mode($exclude-ie11: true) {\n    @include feature-targeting.targets($feat-structure) {\n      border-color: CanvasText;\n    }\n  }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    clip: rect(1px, 1px, 1px, 1px);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap; /* added line */\n    width: 1px;\n  }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    @content;\n  }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n  @if $exclude-ie11 {\n    @media screen and (forced-colors: active) {\n      @content;\n    }\n  } @else {\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      @content;\n    }\n  }\n}\n"],"sourceRoot":""}