-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css.map
1 lines (1 loc) · 232 KB
/
styles.css.map
1
{"version":3,"file":"styles.css","mappings":";;;AAAA;ACAA;EACE,6BAA6B;EAC7B,kBAAkB;EAClB,gBAAgB;EAChB,mCAAmC,EAAE,cAAc;EACnD;;;;wDAIsD;AACxD;AAEA;EACE,6BAA6B;EAC7B,mBAAmB;EACnB,kBAAkB;EAClB,eAAe,GAAG,wBAAwB;EAC1C,qBAAqB;EACrB,cAAc;EACd,oBAAoB;EACpB,sBAAsB;EACtB,iBAAiB;EACjB,mBAAmB;EACnB,cAAc;;EAEd,qCAAqC;EACrC,mCAAmC;EACnC,mCAAmC;EACnC,kCAAkC;;EAElC,yBAAyB;EACzB,kCAAkC;;EAElC,oBAAoB;EACpB,6BAA6B;AAC/B;ACoLE;EACE,gBA1MU;EA2MV,eA5MQ;EA6MR;AFpNJ;AEuNE;EAEE;AFrNJ;AEwNE;EACE;AFrNJ;AG8KE;;;;;EC5GE;EAcF;EDoGE;AH1KJ;AG6KE;;;;;ECrHE;EAcF;ED6GE;AHzKJ;AG4KE;;;;;EC9HE;EAcF;EDsHE;AHxKJ;AG2KE;;;;;ECvIE;EAcF;ED+HE;AHvKJ;AG6KE;;;ECnJE;ED8JA;AHjLJ;AGoLE;;;ECjKE;ED4KA;AHxLJ;AG2LE;;;;EC/KE;EAcF;AJlBF;AG0LE;;;;;ECtLE;EAcF;AJTF;AGwLI;;;;;EACE;AHlLN;AGsLE;;;;EClME;EAcF;AJMF;AGqLE;;ECzME;EAcF;ED8LE;AHjLJ;AGoLE;;EC/ME;EAcF;EDoME;AHhLJ;AGmLE;;ECrNE;EAcF;ED0ME;AH/KJ;AGkLE;;EC3NE;EAcF;EDgNE;AH9KJ;AK3GE;ED2DE;EAcF;AJuCF;AMmCE;;EAGI;EACA;EACA;ANjCN;AOvCE;EACE;AP0CJ;AQjHE;EACE;ARoHJ;AQjHE;EAEI;EACA;ARmHN;AQ/GE;EACE;ARkHJ;AQ/GE;;EAEE;ARkHJ;AS5DE;EACE;AT+DJ;AS3DE;EACE;AT8DJ;AU5EE;EACE;EACA;AV+EJ;AU7EI;;EAEE,eA7FkB;AV4KxB;AW7IE;EACE;AXgJJ;AW7IE;EACE;EACA;AXgJJ;AW7IE;EACE;AXgJJ;AYEE;EACE;AZCJ;AYEE;EACE,eAzLsB;AZ0L1B;AYEE;;EAGI;EACA;AZAN;AYIE;EAEI,eArM6B;EAsM7B;AZFN;Aa7LE;ET0DE;EAcF;AJ0HF;Ac7JE;EAEI;EACA;EACA;Ad+JN;Ac3JE;EVaE;EAcF;AJqIF;Ae9DE;EX5FE,kBAeU;EAdV,gBAeY;EAdZ,kBAeY;EAdZ,iDAeY;EAGd;AJ6IF;AelEE;EACE,yBAPuB;Af4E3B;Ae/DI;;EACE,eAvB2B;EAwB3B,kBAxCU;Af2GhB;Ae/DI;;EACE;EACA;AfkEN;AehEM;;EACE;EACA,kBAlDQ;AfqHhB;Ae9DE;EACE;EAEA;AfgEJ;Ae5DI;;EAzEF;EAEA;AfyIF;Ae1DI;EAjFF;EAEA;Af6IF;AevDE;EACE;EACA,sBApEiB;Af8HrB;AevDE;EACE;Af0DJ;AevDE;EAGE,iBAhEuB;AfwH3B;AerDE;EACE,cA/EoB;EAgFpB,0BAzEqB;EA6ErB;AfqDJ;AgBhMI;EACE,sBAJqB;AhBuM3B;AgBhMI;EACE;AhBkMN;AgB9LM;;EAxDJ;EAEA;AhByPF;AgB5LM;EA/DJ;EAEA;AhB6PF;AgBxLM;EAvEJ;EAEA;AhBiQF;AgBrLI;EACE;AhBuLN;AgBpLI;EAGE,cAzCqB;AhB6N3B;AgBjLI;EACE,0BAjDmB;EAqDnB;AhBgLN;AgB1KE;EAGM;;IA3FN;EhBwQA;EgBtKM;IAlGN;EhB2QA;EgBjKM;IA1GN;EhB8QA;AACF;AiB5PI;EACE;AjB8PN;AiB3PI;EACE;EACA,kBAT2B;AjBsQjC;AiBzPM;;EAnCJ;EAEA;AjB+RF;AiBrPM;EA5CJ;EAEA;AjBmSF;AkB9OI;EACE;AlBiPN;AkB9OI;EACE;EACA,mBAT8B;AlByPpC;AkB5OM;;EA1CJ;EAEA;AlByRF;AkBxOM;EAnDJ;EAEA;AlB6RF;AmBjWE;;EAGE;AnBmWJ;AoBvWE;;EARA;EACA;EACA;EAQE;EACA;ApB4WJ;AoBzWI;;EACE,eDJwB;AnBgX9B;AqBjTE;EACE;ArBoTJ;AsBlVE;EAEI;EACA;EACA;AtBoVN;AuB3VE;;EAGI;EACA;AvB6VN;AwBrUE;EACE;AxBwUJ;AyB1UE;EACE;AzB6UJ;AyB1UE;EACE;AzB6UJ;A0B3UE;EACE;A1B8UJ;A2B/OE;EAEI;EACA;EACA;A3BiPN;A4BhTE;EACE;A5BmTJ;A4BhTE;EAEI;EACA;A5BkTN;A4B9SE;EACE;A5BiTJ;A4B9SE;EACE;A5BiTJ;A4B9SE;EAEI;EACA;A5BgTN;A6BvSE;EACE;A7B0SJ;A6BvSE;EAEI;EACA;EACA;A7BySN;A8B3XE;;;;;;;E1BOE;EAcF;E0BbE;A9B+XJ;A+BtbE;EACE;EACA,eArBQ;EAsBR,gBArBe;EAsBf,mBAtBe;A/B+cnB;A+BtbE;EACE,eAvBgB;EAwBhB,gBAvBuB;EAwBvB,mBAxBuB;A/Bid3B;AgC1aE;EACE,iDAHY;AhCgbhB;AgC1aE;EACE,iDAPY;AhCobhB;AgCxaI;EACE;AhC2aN;AoB9dE;EARA;EACA;EACA;EAQE;EACA;ApBkeJ;AoB/dI;EACE,eY6C0B;AhCobhC;AgCjbI;EACE;AhCmbN;AoB3eE;EARA;EACA;EACA;EAQE;EACA;ApB+eJ;AoB5eI;EACE,eYkD0B;AhC4bhC;AgCzbI;EACE;EACA;EACA;AhC2bN;AgCrbI;EACE;AhCwbN;AoB9fE;EARA;EACA;EACA;EAQE;EACA;ApBkgBJ;AoB/fI;EACE,eYgE0B;AhCichC;AgC9bI;EACE;AhCgcN;AoB3gBE;EARA;EACA;EACA;EAQE;EACA;ApB+gBJ;AoB5gBI;EACE,eYqE0B;AhCychC;AgCtcI;EACE,iDA1CU;EA2CV;EACA;AhCwcN;AiCjfE;EAEI;EACA;AjCmfN;AkCrhBE;E9B2DE;EAcF;AJidF;AmClhBE;EAEI;EACA;AnCohBN;AmChhBE;EACE;EAEE;EACA;EACA;AnCkhBN;AoCliBE;EACE;ApCqiBJ;AoCliBE;;EAEE;EACA;ApCqiBJ;AqChkBE;EACE;EAIA;ArCgkBJ;AqCzjBI;EACE;ArC2jBN;AqCvjBE;EACE;ArC0jBJ;AqCvjBE;EACE;EACA;EACA;EAEA;EAIA;ArCsjBJ;AsCviBI;EDXE;ArCqjBN;AsCzlBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAGA;EAGA;EACA;EAMA;AtCglBJ;AsC9kBI;EACE;EACA;AtCglBN;AuChmBE;EAEE;EAGA;EACA;EACA;EACA;AvCgmBJ;AuC5lBE;EACE;EACA,aA3BwB;AvC0nB5B;AuC7lBI;EAGE;AvC6lBN;AuCrlBE;EACE;EACA;EACA,aA1Cc;AvCkoBlB;AuCplBE;EAGE;EACA;EACA;EACA,aApDc;EAwDd;EACA;EACA;AvCklBJ;AuC/kBE;EAEE;EACA;EACA;EACA;EACA;EAEA,aApEuB;EAqEvB;EACA;EACA;EACA;AvCglBJ;AuC9kBI;EACE;AvCglBN;AuC3kBM;EAGE;AvC2kBR;AuCtkBE;EACE,+BAtFqB;AvC+pBzB;AuCtkBE;EAEE;EACA;EACA;AvCwkBJ;AuClkBI;EACE;EACA;AvCokBN;AuChkBE;EACE;AvCmkBJ;AuC9jBE;EACE;EACA,aArHc;EA0Hd;EAIA;EAGA;EACA;AvCwjBJ;AuCpjBE;EACE;EAKA;EAKA;AvC+iBJ;AwChsBE;EACE;AxCmsBJ;AwC7rBE;EAyCA;EACA;EAxCE;EACA;AxCisBJ;AwCxrBE;EA6BA;EACA;EA5BE;AxC4rBJ;AwClrBE;AAAA;AACA;AAAA;AAEA;EAEE;UAAA;AxCmrBJ;AwChrBE;EAEE;UAAA;AxCkrBJ;AyCntBE;EACE;AzCstBJ;AyCptBI;ECbF;EACA;EACA;EACA;EACA;EDWI;EACA;EACA;EAAA;EACA;EAAA;EAYA;EAAA;AzC+sBN;AyCvsBI;EACE;AzCysBN;AsC5pBM;EG/BA;AzC+rBN;AyC1uBE;EACE;AzC6uBJ;AyC3uBI;ECbF;EACA;EACA;EACA;EACA;EDWI;EACA;EACA;EAAA;EACA;EAAA;EAYA;EAAA;AzCsuBN;AyC9tBI;EACE;AzCguBN;AsCnrBM;EG/BA;AzCstBN;A2ClwBE;EAII;A3CkwBN;AiCpwBE;EACE;AjCuwBJ;AiCrwBI;EAEE;AjCswBN;AiClwBI;EACE;AjCowBN;AiCjwBI;EACE;EACA;AjCmwBN;AiChwBI;EACE;AjCkwBN;AiC9vBE;EACE;AjCiwBJ;AiC9vBE;EACE;AjCiwBJ;AiC9vBE;EACE;AjCiwBJ;AkCryBE;EACE;AlCwyBJ;AkCryBE;EACE;AlCwyBJ;A4CnyBE;EACE;A5CsyBJ;A4CpyBI;EACE;A5CsyBN;A4ClyBE;EACE,cAZe;A5CizBnB;A4ClyBE;;EAEE;A5CqyBJ;A4C7xBE;;;;EAIE;A5CgyBJ;A4C7xBE;;EAEE;A5CgyBJ;A4C3xBI;;EACE,mBAxCa;A5Cu0BnB;A6Cx0BE;EAIE;EACA;A7Cw0BJ;A6Cj0BI;ECkIF;A9CmsBF;A6Cr0BI;ECkIF;A9CusBF;A6Cz0BI;ECkIF;A9C2sBF;A6C70BI;ECkIF;A9C+sBF;A6Cj1BI;ECkIF;A9CmtBF;A6Cr1BI;ECkIF;A9CutBF;A6Cz1BI;ECkIF;A9C2tBF;A6C71BI;ECkIF;A9C+tBF;A6Cj2BI;ECkIF;A9CmuBF;A6Cr2BI;ECkIF;A9CuuBF;A6Cz2BI;ECkIF;A9C2uBF;A6C72BI;ECkIF;A9C+uBF;A6Cj3BI;ECkIF;A9CmvBF;A6Cr3BI;ECkIF;A9CuvBF;A6Cz3BI;ECkIF;A9C2vBF;A6C73BI;ECkIF;A9C+vBF;A6Cj4BI;ECkIF;A9CmwBF;A6Cr4BI;ECkIF;A9CuwBF;A6Cz4BI;ECkIF;A9C2wBF;A6C74BI;ECkIF;A9C+wBF;A6Cj5BI;ECkIF;A9CmxBF;A6Cr5BI;ECkIF;A9CuxBF;A6Cz5BI;ECkIF;A9C2xBF;A6C75BI;ECkIF;A9C+xBF;A6Cj6BI;ECkIF;A9CmyBF;A6C95BI;EACE;A7Ci6BN;A+C37BE;EAEE;EACA;A/C67BJ;A8CjyBE;EAXA;A9C+yBF;A+Cz7BI;EACE;A/C27BN;A+Cz7BM;EACE;A/C27BR;AE72BE;EACE;AFg3BJ;AEz2BE;EACE;AF42BJ;AEx2BI;EACE;AF22BN;AEv2BE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AF02BJ;AEv2BE;;EAEE;AF02BJ;AEr2BE;EAEE;AFu2BJ;AE59BE;EACE,WATS;EAUT,YAVS;EAWT,iBAXS;AF0+Bb;AE39BI;EACE;AF69BN;AEx9BI;EACE;AF09BN;AEr9BI;EACE;AFu9BN;AEl9BI;EACE;EACA;AFo9BN;AE/8BI;EACE;AFi9BN;AE58BI;EACE;EACA;AF88BN;AEx8BM;EACE;AF08BR;AEr8BM;EACE;EACA;AFu8BR;AEl8BM;EACE;AFo8BR;AE/7BM;EACE;EACA;AFi8BR;AEpgCE;EACE,WAVW;EAWX,YAXW;EAYX,iBAZW;AFmhCf;AEngCI;EACE;AFqgCN;AEhgCI;EACE;AFkgCN;AE7/BI;EACE;AF+/BN;AE1/BI;EACE;EACA;AF4/BN;AEv/BI;EACE;AFy/BN;AEp/BI;EACE;EACA;AFs/BN;AEh/BM;EACE;AFk/BR;AE7+BM;EACE;EACA;AF++BR;AE1+BM;EACE;AF4+BR;AEv+BM;EACE;EACA;AFy+BR;AE5iCE;EACE,WARS;EAST,YATS;EAUT,iBAVS;AFyjCb;AE3iCI;EACE;AF6iCN;AExiCI;EACE;AF0iCN;AEriCI;EACE;AFuiCN;AEliCI;EACE;EACA;AFoiCN;AE/hCI;EACE;AFiiCN;AE5hCI;EACE;EACA;AF8hCN;AExhCM;EACE;AF0hCR;AErhCM;EACE;EACA;AFuhCR;AElhCM;EACE;AFohCR;AE/gCM;EACE;EACA;AFihCR;AEv8BE;EACE;EACA;AF08BJ;AsC/jCI;EpCwHE;EACA;AF08BN;AEr8BI;EACE;EACA;AFw8BN;AEn8BI;EACE;EACA;AFs8BN;AEj8BI;EAWI;EAMF;AFq7BN;AKznCE;EyCkJA;EzChJE;EACA;AL4nCJ;AM1iCE;EAKE;EACA;ANyiCJ;AMzkCE;EACE;AN2kCJ;AMzkCE;EACE;AN2kCJ;AMzkCE;EACE;AN2kCJ;AMvkCI;EAEE;ANwkCN;AM3oCE;EACE;AN6oCJ;AM1oCE;EACE;AN4oCJ;AMzoCE;EACE;AN2oCJ;AMxoCE;EACE;AN0oCJ;AMzjCI;EACE,YAxGY;EAyGZ;AN2jCN;AMvjCE;EACE;AN0jCJ;AMrjCE;EACE;ANwjCJ;AMrjCE;EAEE;EACA;ANujCJ;AMlnCE;EACE;ANonCJ;AMlnCE;EACE;ANonCJ;AMlnCE;EACE;ANonCJ;AMhnCI;EAEE;ANinCN;AM9nCE;EACE;ANgoCJ;AM9nCE;EACE;ANgoCJ;AM9nCE;EACE;ANgoCJ;AM5nCI;EAEE;AN6nCN;AM/pCE;EAXA,0CADmB;AN8qCrB;AM9pCE;EAfA,oCADmB;ANirCrB;AM7pCE;EAnBA,0CADmB;ANorCrB;A8CjjCE;EAXA;A9CgkCF;A8CrjCE;EAXA;A9CokCF;A8CzjCE;EAXA;A9CukCF;A8C5jCE;EAXA;A9C0kCF;A8C/jCE;EAXA;A9C8kCF;A8CnkCE;EAXA;A9CilCF;A8CtkCE;EAXA;A9ColCF;A8CzkCE;;EAXA;A9CylCF;AOvtCI;;EACE;AP2tCN;AOvtCE;EACE;AP0tCJ;AOxtCI;EACE;AP0tCN;AOttCE;EACE;EACA;APytCJ;AOvtCI;EACE;APytCN;AOrtCE;EACE;APwtCJ;AOrtCE;EACE;EACA;APwtCJ;AOptCI;EACE;EACA;EACA;APutCN;AOntCE;EACE;EACA;APstCJ;AOptCI;EACE;APstCN;AOltCE;EACE;EACA;APqtCJ;AOntCI;EACE;APqtCN;AOltCI;EACE;APotCN;AOhtCE;;EAEE;APmtCJ;AOjsCI;EACE,iBALc;APysCpB;AQzyCE;EAEE;EACA;AR2yCJ;A8ClpCE;EAXA;A9CgqCF;A8CrpCE;EAXA;A9CmqCF;AQzyCE;EACE;AR4yCJ;AS1yCE;EACE;AT6yCJ;AS1yCE;EACE,aAdoB;AT2zCxB;AS1yCE;EAGE;AT2yCJ;ASxyCE;EACE,yBAxBoB;ATm0CxB;ASvyCI;EACE;AT0yCN;ASvyCI;EACE;ATyyCN;AStyCI;EACE;ATwyCN;ASjyCM;EACE,yBAtCW;AT00CnB;AS/xCM;EACE,qBA5CW;AT60CnB;AS7xCI;EACE;AT+xCN;ASzxCE;EACE;AT4xCJ;ASvxCI;;EACE;AT2xCN;ASxxCI;;EACE;AT2xCN;ASxxCI;;EACE;AT2xCN;AUn0CE;EA5CA,yBAyCwB;EAxCxB,YAyCwB;AV00C1B;AUj3CE;EACE,YAsCsB;EArCtB;AVm3CJ;AUx0CM;EoCmGJ;A9CwuCF;AUv0CM;EACE;AVy0CR;AUr0CI;EACE;AVu0CN;AUp0CI;EACE;AVs0CN;AUj0CI;EAnEF,yBAyBE;EAxBF,YAuBwB;AVi3C1B;AUt4CE;EACE,YAoBsB;EAnBtB;AVw4CJ;AUl3CE;EAVA,0CADmB;AVg4CrB;AUz0CI;EAvEF,yBAyBE;EAxBF,YAuBwB;AV43C1B;AUj5CE;EACE,YAoBsB;EAnBtB;AVm5CJ;AU73CE;EAVA,0CADmB;AV24CrB;AUh1CI;EA3EF,yBAyBE;EAxBF,0BAuBwB;AVu4C1B;AU55CE;EACE,0BAoBsB;EAnBtB;AV85CJ;AUx4CE;EAVA,oCADmB;AVs5CrB;AWt6CE;EACE;AXy6CJ;AWt6CE;;;;EAIE;AXy6CJ;AWt6CE;;EAEE;AXy6CJ;AWt6CE;EACE;AXy6CJ;AWt6CE;EACE;AXy6CJ;AY13CE;EACE;AZ63CJ;AYx3CE;;;EAGE;AZ23CJ;AYx3CE;EACE;AZ23CJ;AYx3CE;;EAEE;AZ23CJ;AYx3CE;;EAEE;EACA;AZ23CJ;AYv6CE;EAiDI,+BA/Ba;AZy5CnB;AYt3CE;EACE,+BApCe;AZ65CnB;AYt3CE;EAOI;AZm3CN;AYn7CE;EA2EI;AZ42CN;AYv7CE;EAoFM;AZu2CR;AYrxCE;EACE,iCA9MA;AZs+CJ;AYrxCE;;EAEE,kCAViB;AZkyCrB;AYrxCE;;EAEE;AZwxCJ;AYrxCE;;EAEE;AZwxCJ;AYrxCE;;EAEE,mBAxBc;AZgzClB;AYrxCE;;EAEE,mBA5BuB;AZozC3B;AY7/CE;EACE;EACA;AZggDJ;AY7/CE;EAII;AZ6/CN;AYp/CE;EACE;AZu/CJ;AYr+CE;;EASI;AZi+CN;AYn/CE;EASA;IASI;EZs+CJ;AACF;AY94CE;EkCCA;ElCCE;EACA;AZg5CJ;AY/0CE;EACE,oCA9MA;AZ+hDJ;AY90CE;;EAEE,kCAViB;AZ01CrB;AY70CE;;EAEE;AZ+0CJ;AY50CE;;EAEE;AZ80CJ;AY30CE;;EAEE,mBAxBc;AZq2ClB;AY10CE;;EAEE,mBA5BuB;AZw2C3B;AYjjDE;EACE;EACA;AZmjDJ;AYhjDE;EAII;AZ+iDN;AYtiDE;EACE;AZwiDJ;AYthDE;;EASI;AZihDN;AYniDE;EASA;IASI;EZqhDJ;AACF;AYz3CE;EACE,kCA9MA;AZykDJ;AYx3CE;;EAEE,kCAViB;AZo4CrB;AYv3CE;;EAEE;AZy3CJ;AYt3CE;;EAEE;AZw3CJ;AYr3CE;;EAEE,mBAxBc;AZ+4ClB;AYp3CE;;EAEE,mBA5BuB;AZk5C3B;AY3lDE;EACE;EACA;AZ6lDJ;AY1lDE;EAII;AZylDN;AYhlDE;EACE;AZklDJ;AYhkDE;;EASI;AZ2jDN;AY7kDE;EASA;IASI;EZ+jDJ;AACF;AYz9CE;EkCbA;A9C0+CF;AYz9CE;EACE;AZ49CJ;AY19CI;EACE;AZ49CN;AYz9CI;EACE;AZ29CN;AYv9CE;EACE;AZ09CJ;AazoDE;EiCiJA;EjC/IE;EACA;Ab4oDJ;AgDppDE;EACE;AhDupDJ;AgDppDE;EACE;AhDupDJ;AcrpDE;EAEE;EACA;AdupDJ;A8ChgDE;EAXA;A9C8gDF;AcvpDE;EACE;Ad0pDJ;AiD1qDM;EnCoBF;Ad0pDJ;AcrpDE;EACE;IAEE;EdupDJ;AACF;AcppDE;EACE;AdspDJ;AcnpDE;;EAEE;AdspDJ;AcnpDE;EACE;AdspDJ;AcppDI;;EAEE;AdspDN;AcznDI;EACE,YALe;AdioDrB;Ac1nDM;EACE,YAVY;AdsoDpB;Ae9qDE;EACE,+BAZA;Af6rDJ;Ae9qDE;EACE,+BAhBA;AfisDJ;Ae9qDE;EACE,cAnBoB;AfosDxB;Ae/qDI;EACE,cAhBqB;AfisD3B;Ae9qDI;EACE,cAnBmB;AfmsDzB;Ae5qDE;EACE,cA9BqB;Af6sDzB;Ae5qDE;EACE,uBA9BA;Af6sDJ;Ae3qDI;EACE,yBAhCsB;Af8sD5B;Ae5qDM;EACE,yBArCmB;AfmtD3B;Ae3qDM;EACE,yBAxCiB;AfqtDzB;AevqDI;EACE,cA9CsB;AfwtD5B;AevqDI;EACE,cApDqB;Af6tD3B;AetqDI;EACE,cAvDmB;Af+tDzB;AehqDI;EACE,cAhEmB;AfmuDzB;AejqDM;;EAEE,cApEiB;AfuuDzB;Ae/pDI;;EAEE,yBA1EmB;Af2uDzB;Ae7pDE;EACE,cA/EqB;Af+uDzB;AgB1vDI;EACE,+BANU;AhBmwDhB;AgB1vDI;EACE,+BAVU;AhBswDhB;AgBzvDI;EACE,0CAZF;AhBuwDJ;AgBxvDI;EkCzBF;EACA;EACA;AlDoxDF;AmD9wDI;EACE,0CAJF;AnDqxDJ;AmD9wDI;EDZF;EACA;EACA;AlD6xDF;AiB/wDI;EACE,0CATF;AjB2xDJ;AiB/wDI;EACE,2CAXF;AjB4xDJ;AiB9wDI;EACE,0CAbF;AjB6xDJ;AiB5wDM;EACE,+BAjBiB;AjB+xDzB;AiB3wDM;EACE;AjB6wDR;AkBzxDI;EACE,+BAXF;AlBuyDJ;AkBzxDI;EACE,YAbF;AlBwyDJ;AkBvxDM;EACE,cAjBkB;AlB0yD1B;AkBtxDM;EACE,cApBiB;AlB4yDzB;AkBrxDM;EACE,cAvBe;AlB8yDvB;AkBjxDM;EACE,cA9Be;AlBizDvB;AkB9wDM;EACE,+BA3CiB;AlB2zDzB;AkB7wDM;EACE,gCAtCJ;AlBqzDJ;AoDn0DI;EACE;ApDs0DN;AoDn0DI;EACE;ApDq0DN;AoDl0DI;EACE;ApDo0DN;AqBx0DE;EACE;ArB20DJ;AqBx0DE;;EAEE;ArB20DJ;AqBx0DE;EACE;ArB20DJ;AqD/1DE;EhCuBI;ArB20DN;AqDl2DE;EhCuBI;ArB20DN;AqD91DE;EhCmBI;ArB80DN;AqD71DE;EhCeI;ArBi1DN;AqD11DE;EhCSI;ArBo1DN;AqB10DQ;EACE,0BiCbU;AtDy1DpB;AqBz0DQ;EACE,0BiCfW;AtD01DrB;AqBr0DE;EACE;ArBw0DJ;AqBr0DE;;EAEE;ArBw0DJ;AqBr0DE;EACE;ArBw0DJ;AgCx3DI;EACE;AhC23DN;AgCx3DI;EACE;AhC03DN;AgCv3DI;EACE;AhCy3DN;AgCt3DI;EACE;EACA;AhCw3DN;AgCj3DI;;;;;EACE;AhCw3DN;AgCn3DI;EACE;AhCs3DN;AsBn5DE;EAEE;AtBq5DJ;A8C3vDE;EAXA;A9CywDF;AsBr5DE;EACE;EACA;AtBw5DJ;AsBr5DM;;;EAGE;AtBu5DR;AsBl5DE;;EAEE;AtBq5DJ;AsB94DI;;;;EACE;AtBo5DN;AuBh7DE;EACE;AvBm7DJ;AuBh7DE;;EAEE;AvBm7DJ;AuBh7DE;;EAEE;EACA;AvBm7DJ;AuBh7DE;;EAEE;AvBm7DJ;AuB/6DI;;;;EAIE;AvBk7DN;AuB35DI;EACE,gBALK;AvBm6DX;AuDp8DE;EACE;AvDu8DJ;AuDp8DE;EACE;AvDu8DJ;AuDp8DE;EACE;AvDu8DJ;AuDn8DI;EACE;AvDs8DN;AuDn8DI;EACE;AvDq8DN;AuDl8DI;EACE;AvDo8DN;AuD/7DI;EACE;AvDk8DN;AuD/7DI;EACE;AvDi8DN;AuD97DI;EACE;AvDg8DN;AwDj/DI;EACE;AxDo/DN;AwDj/DI;EACE;AxDm/DN;AwDh/DI;EACE;AxDk/DN;AwB3+DE;EACE;AxB8+DJ;AwBngEE;EACE;AxBsgEJ;AwBngEE;;EAIE;AxBmgEJ;AwB3gEE;EACE;AxB6gEJ;AwB1gEE;;EAIE;AxB0gEJ;AwBlhEE;EACE;AxBohEJ;AwBjhEE;;EAIE;AxBihEJ;AwBh/DM;;EAEE;AxBk/DR;AwB/+DM;;EAEE;AxBi/DR;AwB9+DM;EACE;AxBg/DR;AwB1+DI;EACE;AxB4+DN;AyB7hEE;EACE;AzBgiEJ;AyB7hEE;EACE;AzBgiEJ;AyB7hEE;EACE;AzBgiEJ;AyB7hEE;EACE;AzBgiEJ;AyB7hEE;EACE;AzBgiEJ;A8Cz5DE;EAXA;A9Cu6DF;AyBhiEI;EACE;AzBkiEN;AyB5hEM;EACE;AzB+hER;AyB5hEM;EACE;AzB8hER;AyB3hEM;EACE;AzB6hER;AyBzhEI;EACE;AzB2hEN;AyBxhEI;EACE;AzB0hEN;AyDpkEE;EACE,yBALmC;EAMnC;AzDukEJ;AyDpkEE;EACE,yBAXwB;EAYxB;AzDukEJ;AyDrkEI;EACE,yBAb2B;AzDolEjC;AyDpkEI;EX6HF;A9C08DF;AyDhkEE;EACE,iDAvBmB;AzD0lEvB;AyDjkEI;EACE,gDA1BiB;EA2BjB;AzDmkEN;AyD/jEE;EACE,gDAhCmB;EAiCnB;AzDkkEJ;AyDhkEI;EACE;EACA,iDArCiB;AzDumEvB;AyD9jEE;EAQI;AzD0jEN;A0BnnEI;EACE;A1BsnEN;A0BnnEI;EAGE;A1BmnEN;A0BhnEI;EAGE;A1BgnEN;A0B7nEI;EACE;A1B+nEN;A0B5nEI;EAGE;A1B4nEN;A0BznEI;EAGE;A1BynEN;A0BtoEI;EACE;A1BwoEN;A0BroEI;EAGE;A1BqoEN;A0BloEI;EAGE;A1BkoEN;A0B7lEI;EAGE,uBAhBqB;A1B6mE3B;A0BzlEE;EoB2FA;EpBzFE;A1B4lEJ;A0BzlEE;EACE,0CA3BoB;A1BunExB;A2BlnEE;EACE,0CAbqB;A3BkoEzB;A2BjqEE;;;EAGE;A3BoqEJ;A2BjqEE;EACE;A3BmqEJ;A2BhqEE;EAGE,uCADQ;A3BiqEZ;A2B7qEE;;;EAGE;A3B+qEJ;A2B5qEE;EACE;A3B8qEJ;A2B3qEE;EAGE,0CADQ;A3B4qEZ;A2BxrEE;;;EAGE;A3B0rEJ;A2BvrEE;EACE;A3ByrEJ;A2BtrEE;EAGE,wCADQ;A3BurEZ;A2BpoEI;;EACE,0CAhC2B;A3BwqEjC;A2BnoEI;;;EAGE,0CAvCwB;A3B6qE9B;A2BloEM;EACE,0CA5CsB;A3BgrE9B;A2B9nEI;EAGE,2CADQ;A3BgoEd;A2BrnEM;;EAEE,uBA/DJ;A3BsrEJ;A2BnnEQ;;EAEE,0CAnEN;A3BwrEJ;A2B/mEM;EACE,sCAhFiB;EAiFjB;A3BinER;A2B5mEQ;EACE,sCAtFuB;A3BosEjC;A2B3mEQ;EACE,sCAzFoB;A3BssE9B;A2BvmEE;EACE,sCAzFA;A3BmsEJ;A2BjmEE;EACE;EAIA;A3BimEJ;A2BvlEE;EACE;A3B0lEJ;A4B1uEI;EAIE;A5B0uEN;A4BvuEI;EACE;A5ByuEN;A4BnuEI;EACE;IACE;E5BquEN;AACF;A4BluEI;;EAIE;A5BkuEN;A4B/tEI;EAGE;EACA;A5B+tEN;A4B5tEI;;;EAGE;EACA;A5B8tEN;A4B1tEM;EACE;A5B4tER;A4BztEM;;;EAGE;EACA;A5B2tER;A4BttEM;EACE;A5BwtER;A4BrtEM;;;EAGE;EACA;A5ButER;A4BntEI;EACE;EACA;A5BqtEN;A4BltEI;EACE;A5BotEN;A4BjtEI;EACE;A5BmtEN;A4B/sEE;EACE;A5BktEJ;A4B/sEE;EACE;A5BktEJ;A4B/sEE;;;EAGE;A5BktEJ;A4BzqEI;EACE,YANK;A5BkrEX;A4BzqEI;;EAEE;A5B4qEN;A4BvqEI;EACE;EACA;A5B0qEN;A4BrqEM;EACE;A5BwqER;A4BnqEI;EACE;A5BsqEN;A0D30EE;EAYI;A1Dm0EN;A6B30EE;;EAEE,kDAJc;A7Bk1ElB;A6B10EI;;EAEE,+CAVY;EAWZ;A7B60EN;A6Bz0EE;EACE;A7B40EJ;A6B10EI;EACE;A7B40EN;A6Bx0EE;EACE;A7B20EJ;A6Bx0EE;EACE;A7B20EJ;A6Bv0EE;;EAEE;EACA;A7B00EJ;A6B5xEM;;;;;EACE;A7BmyER;A6B9yEE;EACE;A7BgzEJ;A6BjzEE;EACE;A7BmzEJ;A6B1yEM;;;;;EACE;A7BgzER;A6B3zEE;EACE;A7B6zEJ;A6B9zEE;EACE;A7Bg0EJ;A6BvzEM;;;;;EACE;A7B6zER;A6Bx0EE;EACE;A7B00EJ;A6B30EE;EACE;A7B60EJ;A6Bp0EM;;;;;EACE;A7B00ER;A6B/zEE;EACE;A7Bi0EJ;A6B7zEE;EACE;A7B+zEJ;A6B7zEI;EACE;A7B+zEN;A6B1zEE;;;;;;;EAIE;A7B+zEJ;A6B5zEE;;;EAGE;EACA;A7B8zEJ;A6BzzEE;;;;;EAIE;EACA;A7B4zEJ;A6B32EM;;;;;EACE;A7Bi3ER;A6Bt2EE;EACE;A7Bw2EJ;A6Bp2EE;EACE;A7Bs2EJ;A6Bp2EI;EACE;A7Bs2EN;A6Bj2EE;;;;;;;EAIE;A7Bs2EJ;A6Bn2EE;;;EAGE;EACA;A7Bq2EJ;A6Bh2EE;;;;;EAIE;EACA;A7Bm2EJ;A6Bl5EM;;;;;EACE;A7Bw5ER;A6B74EE;EACE;A7B+4EJ;A6B34EE;EACE;A7B64EJ;A6B34EI;EACE;A7B64EN;A6Bx4EE;;;;;;;EAIE;A7B64EJ;A6B14EE;;;EAGE;EACA;A7B44EJ;A6Bv4EE;;;;;EAIE;EACA;A7B04EJ;A8Bp+EE;EACE;EACA;A9Bu+EJ;A8Br+EI;EApCF;EACA;A9B4gFF;A8Br+EI;EAxCF;EACA;A9BghFF;A8Br+EI;EA5CF;EACA;A9BohFF;A8BhhFE;;;EAGE;A9BkhFJ;A8B/gFE;;;;;EAKE;A9BihFJ;A8B9gFE;EACE;A9BghFJ;A8B7iFE;EACE,gBA6Ee;A9Bm+EnB;A8B9iFE;EACE,YA0Ee;A9Bu+EnB;A8B39EI;EA1FF;IACE,gBA+Ec;E9B0+EhB;E8BvjFA;IACE,YA4Ec;E9B6+EhB;AACF;A+BrjFE;EACE;A/BujFJ;AoC9jFE;EACE;ApCikFJ;AoC9jFE;;EAEE;ApCikFJ;AoCziFI;EACE,gBALK;ApCijFX;AmC3kFE;EAGE;EACA;EW6IF;A9Cg8EF;AmCxkFE;EACE;AnC2kFJ;AA9kFA;EACE;AAilFF;AA/kFA;EACE;EACA;EACA;EACA;AAklFF;AA9kFA;EACE;EACA;EACA;AAilFF;AA9kFA;EACE;EACA;AAilFF;AA7kFA;EACE;EACA;EACA;EACA;EACA;AAglFF;AA7kFA;EACE;EACA;AAglFF;AA7kFA;EACE;EACA;AAglFF;AA7kFA;EACE;EACA;AAglFF;AA7kFA;EACE;mDAAA;EAEA;AAglFF;AA7kFA;EACE;AAglFF;AA7kFA;EACE;AAglFF;AA5kFA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AA+kFF;AAzkFA;EACE;AA4kFF;AAxkFA;EACE;EACA;EACA;AA2kFF;AArkFA;EACE;AAwkFF;AAlkFA;EACE;AAqkFF;AAlkFA;EACE;AAqkFF;AAhkFA;EACE;AAmkFF;AAhkFA;EACE;EACA;EACA;EACA;AAmkFF;AAhkFA;EACE;EACA;AAmkFF;AAhkFA;EACE;EACA;AAmkFF,C","sources":["./src/styles.scss","./node_modules/material-design-icons/iconfont/material-icons.css","./node_modules/@angular/material/badge/_badge-theme.scss","./node_modules/@angular/material/core/typography/_typography.scss","./node_modules/@angular/material/core/typography/_typography-utils.scss","./node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.scss","./node_modules/@angular/material/button/_button-theme.scss","./node_modules/@angular/material/button-toggle/_button-toggle-theme.scss","./node_modules/@angular/material/card/_card-theme.scss","./node_modules/@angular/material/checkbox/_checkbox-theme.scss","./node_modules/@angular/material/chips/_chips-theme.scss","./node_modules/@angular/material/table/_table-theme.scss","./node_modules/@angular/material/datepicker/_datepicker-theme.scss","./node_modules/@angular/material/dialog/_dialog-theme.scss","./node_modules/@angular/material/expansion/_expansion-theme.scss","./node_modules/@angular/material/form-field/_form-field-theme.scss","./node_modules/@angular/material/form-field/_form-field-legacy-theme.scss","./node_modules/@angular/material/form-field/_form-field-fill-theme.scss","./node_modules/@angular/material/form-field/_form-field-outline-theme.scss","./node_modules/@angular/material/grid-list/_grid-list-theme.scss","./node_modules/@angular/material/core/style/_list-common.scss","./node_modules/@angular/material/input/_input-theme.scss","./node_modules/@angular/material/menu/_menu-theme.scss","./node_modules/@angular/material/paginator/_paginator-theme.scss","./node_modules/@angular/material/radio/_radio-theme.scss","./node_modules/@angular/material/select/_select-theme.scss","./node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss","./node_modules/@angular/material/slider/_slider-theme.scss","./node_modules/@angular/material/stepper/_stepper-theme.scss","./node_modules/@angular/material/tabs/_tabs-theme.scss","./node_modules/@angular/material/toolbar/_toolbar-theme.scss","./node_modules/@angular/material/tooltip/_tooltip-theme.scss","./node_modules/@angular/material/list/_list-theme.scss","./node_modules/@angular/material/core/option/_option-theme.scss","./node_modules/@angular/material/core/option/_optgroup-theme.scss","./node_modules/@angular/material/snack-bar/_snack-bar-theme.scss","./node_modules/@angular/material/tree/_tree-theme.scss","./node_modules/@angular/material/core/ripple/_ripple.scss","./node_modules/@angular/cdk/a11y/_index.scss","./node_modules/@angular/cdk/overlay/_index.scss","./node_modules/@angular/cdk/text-field/_index.scss","./node_modules/@angular/material/core/focus-indicators/_private.scss","./node_modules/@angular/material/core/style/_layout-common.scss","./node_modules/@angular/material/core/ripple/_ripple-theme.scss","./node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss","./node_modules/@angular/material/core/_core-theme.scss","./node_modules/@angular/material/core/style/_elevation.scss","./node_modules/@angular/material/autocomplete/_autocomplete-theme.scss","./node_modules/@angular/material/divider/_divider-theme.scss","./node_modules/@angular/material/expansion/_expansion-mixins.scss","./node_modules/@angular/material/core/style/_form-common.scss","./node_modules/@angular/material/form-field/_form-field-standard-theme.scss","./node_modules/@angular/material/icon/_icon-theme.scss","./node_modules/@angular/material/core/style/_vendor-prefixes.scss","./node_modules/@angular/material/core/theming/_palette.scss","./node_modules/@angular/material/progress-bar/_progress-bar-theme.scss","./node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss","./node_modules/@angular/material/sidenav/_sidenav-theme.scss","./node_modules/@angular/material/sort/_sort-theme.scss"],"sourcesContent":["/* You can add global styles to this file, and also import other style files */\n\n@use '@angular/material' as mat;\n@import '~material-design-icons/iconfont/material-icons.css';\n\n@include mat.core();\n\n\n\n\n$primary: mat.define-palette(mat.$grey-palette, 900);\n$accent: mat.define-palette(mat.$green-palette, A200, A100, A400);\n$warn: mat.define-palette(mat.$red-palette, 900);\n$dark-theme: mat.define-dark-theme($primary, $accent, $warn);\n\n@include mat.all-component-themes($dark-theme);\n\n\n\nbody, html{\n height: 100vh;\n}\nbody{\n margin: 0;\n color: white;\n background-color:#000;\n overflow-y: hidden;\n}\n\n\n.container {\n max-width: 1200px;\n margin: 20px auto 0 auto;\n padding: 30px;\n}\n\n.mat-drawer-container {\n background-color:#000;\n color: white;\n}\n\n\n.column-layout {\n max-width: 1200px;\n margin: 40px auto 0 auto;\n line-height: 1.65;\n padding: 20px 50px;\n display: flex;\n}\n\n.main-column {\n flex: 3;\n order: 1;\n}\n\n.sidebar-one {\n flex: 1;\n order: 2;\n}\n\n.sidebar-two {\n flex: 1;\n order: 3;\n}\n\n.example-fill-remaining-space {\n /* This fills the remaining space, by using flexbox. \n Every toolbar row uses a flexbox row layout. */\n flex: 1 1 auto;\n}\n\n.vertical-align-middle { \n vertical-align: middle; \n}\n\n.padding-bottom-3 {\n padding-bottom: 3px;\n}\n\n\n.app-toolbar {\n position: sticky;\n position: -webkit-sticky; /* For macOS/iOS Safari */\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */\n}\n\n\n\n///mat-button routerLinkActive\n.active-link {\n color: mat.get-color-from-palette($accent) !important;\n}\n\n\nmat-icon.size-45 {\n font-size: 45px;\n height: 45px;\n width: 45px;\n}\n\n\n\n\n#inner {\n display: inline-block;\n}\n\n\n\n\n.example-icon {\n padding: 0 14px;\n}\n\n.example-spacer {\n flex: 1 1 auto;\n}\n\n\n\n.mat-card-header-text{\n width: 100% !important;\n}\n\n.example-custom-placeholder {\n background: rgb(41, 41, 41);\n border: dotted 3px rgb(43, 42, 42);\n min-height: 50px;\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.notify-snackbar-success {\n background: #69f0ae;\n color: #000;\n}\n\n.notify-snackbar-fail {\n background: #b71c1c;\n color: #000;\n}","@font-face {\n font-family: 'Material Icons';\n font-style: normal;\n font-weight: 400;\n src: url(MaterialIcons-Regular.eot); /* For IE6-8 */\n src: local('Material Icons'),\n local('MaterialIcons-Regular'),\n url(MaterialIcons-Regular.woff2) format('woff2'),\n url(MaterialIcons-Regular.woff) format('woff'),\n url(MaterialIcons-Regular.ttf) format('truetype');\n}\n\n.material-icons {\n font-family: 'Material Icons';\n font-weight: normal;\n font-style: normal;\n font-size: 24px; /* Preferred icon size */\n display: inline-block;\n line-height: 1;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: normal;\n white-space: nowrap;\n direction: ltr;\n\n /* Support for all WebKit browsers. */\n -webkit-font-smoothing: antialiased;\n /* Support for Safari and Chrome. */\n text-rendering: optimizeLegibility;\n\n /* Support for Firefox. */\n -moz-osx-font-smoothing: grayscale;\n\n /* Support for IE. */\n font-feature-settings: 'liga';\n}\n","// This contains all of the styles for the badge\n// rather than just the color/theme because of\n// no style sheet support for directives.\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '@angular/cdk';\n\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$font-size: 12px;\n$font-weight: 600;\n$default-size: 22px !default;\n$small-size: $default-size - 6;\n$large-size: $default-size + 6;\n$_badge-structure-emitted: false !default;\n\n// Mixin for building offset given different sizes\n@mixin _badge-size($size) {\n // This mixin isn't used in the context of a theme so we can disable the ampersand check.\n // stylelint-disable material/no-ampersand-beyond-selector-start\n .mat-badge-content {\n width: $size;\n height: $size;\n line-height: $size;\n }\n\n &.mat-badge-above {\n .mat-badge-content {\n top: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-below {\n .mat-badge-content {\n bottom: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-before {\n .mat-badge-content {\n left: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: -$size;\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: -$size;\n }\n }\n\n &.mat-badge-overlap {\n &.mat-badge-before {\n .mat-badge-content {\n left: math.div(-$size, 2);\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: math.div(-$size, 2);\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: math.div(-$size, 2);\n }\n }\n }\n // stylelint-enable\n}\n\n// Structural styles for the badge. They have to be included as a part of the theme,\n// because the badge is a directive and we have no other way of attaching styles to it.\n@mixin _badge-structure {\n .mat-badge {\n position: relative;\n }\n\n // The badge should make sure its host is overflow visible so that the badge content\n // can be rendered outside of the element. Some components such as <mat-icon> explicitly\n // style `overflow: hidden` so this requires extra specificity so that it does not\n // depend on style load order.\n .mat-badge.mat-badge {\n overflow: visible;\n }\n\n .mat-badge-hidden {\n .mat-badge-content {\n display: none;\n }\n }\n\n .mat-badge-content {\n position: absolute;\n text-align: center;\n display: inline-block;\n border-radius: 50%;\n transition: transform 200ms ease-in-out;\n transform: scale(0.6);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n pointer-events: none;\n }\n\n .ng-animate-disabled .mat-badge-content,\n .mat-badge-content._mat-animation-noopable {\n transition: none;\n }\n\n // The active class is added after the element is added\n // so it can animate scale to default\n .mat-badge-content.mat-badge-active {\n // Scale to `none` instead of `1` to avoid blurry text in some browsers.\n transform: none;\n }\n\n .mat-badge-small {\n @include _badge-size($small-size);\n }\n\n .mat-badge-medium {\n @include _badge-size($default-size);\n }\n\n .mat-badge-large {\n @include _badge-size($large-size);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $primary: map.get($config, primary);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-badge-content {\n color: theming.get-color-from-palette($primary, default-contrast);\n background: theming.get-color-from-palette($primary);\n\n @include cdk.high-contrast(active, off) {\n outline: solid 1px;\n border-radius: 0;\n }\n }\n\n .mat-badge-accent {\n .mat-badge-content {\n background: theming.get-color-from-palette($accent);\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n }\n\n .mat-badge-warn {\n .mat-badge-content {\n color: theming.get-color-from-palette($warn, default-contrast);\n background: theming.get-color-from-palette($warn);\n }\n }\n\n .mat-badge-disabled {\n .mat-badge-content {\n $app-background: theming.get-color-from-palette($background, 'background');\n $badge-color: theming.get-color-from-palette($foreground, disabled-button);\n\n // The disabled color usually has some kind of opacity, but because the badge is overlayed\n // on top of something else, it won't look good if it's opaque. If it is a color *type*,\n // we convert it into a solid color by taking the opacity from the rgba value and using\n // the value to determine the percentage of the background to put into foreground when\n // mixing the colors together.\n @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {\n $badge-opacity: opacity($badge-color);\n background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n }\n @else {\n background: $badge-color;\n }\n\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-badge-content {\n font-weight: $font-weight;\n font-size: $font-size;\n font-family: typography-utils.font-family($config);\n }\n\n .mat-badge-small .mat-badge-content {\n // Set the font size to 75% of the original.\n font-size: $font-size * 0.75;\n }\n\n .mat-badge-large .mat-badge-content {\n font-size: $font-size * 2;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n // Try to reduce the number of times that the structural styles are emitted.\n @if not $_badge-structure-emitted {\n @include _badge-structure;\n\n // Only flip the flag if the mixin is included at the top level. Otherwise the first\n // inclusion might be inside of a theme class which will exclude the structural styles\n // from all other themes.\n @if not & {\n $_badge-structure-emitted: true !global;\n }\n }\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'typography-utils';\n@use '../theming/theming';\n\n/// Defines a typography level from the Material Design spec.\n/// @param {String} $font-size The font-size for this level.\n/// @param {String | Number} $line-height The line-height for this level.\n/// @param {String | Number} $font-weight The font-weight for this level.\n/// @param {String} $font-family The font-family for this level.\n/// @param {String} $letter-spacing The letter-spacing for this level.\n/// @returns {Map} A map representing the definition of this typographic level.\n@function define-typography-level(\n $font-size,\n $line-height: $font-size,\n $font-weight: 400,\n $font-family: null,\n $letter-spacing: normal) {\n\n @return (\n font-size: $font-size,\n line-height: $line-height,\n font-weight: $font-weight,\n font-family: $font-family,\n letter-spacing: $letter-spacing\n );\n}\n\n/// Defines a collection of typography levels to configure typography for an application.\n/// Any level not specified defaults to the values defined in the Material Design specification:\n/// https://material.io/guidelines/style/typography.html.\n///\n/// Note that the Material Design specification does not describe explicit letter-spacing values.\n/// The values here come from reverse engineering the Material Design examples.\n/// @param {String} $font-family Default font-family for levels that don't specify font-family.\n/// @param {Map} $display-4 Configuration for the \"display-4\" typographic level.\n/// @param {Map} $display-3 Configuration for the \"display-3\" typographic level.\n/// @param {Map} $display-2 Configuration for the \"display-2\" typographic level.\n/// @param {Map} $display-1 Configuration for the \"display-1\" typographic level.\n/// @param {Map} $headline Configuration for the \"headline\" typographic level.\n/// @param {Map} $title Configuration for the \"title\" typographic level.\n/// @param {Map} $subheading-2 Configuration for the \"subheading-2\" typographic level.\n/// @param {Map} $subheading-1 Configuration for the \"subheading-1\" typographic level.\n/// @param {Map} $body-2 Configuration for the \"body-2\" typographic level.\n/// @param {Map} $body-1 Configuration for the \"body-1\" typographic level.\n/// @param {Map} $caption Configuration for the \"caption\" typographic level.\n/// @param {Map} $button Configuration for the \"button\" typographic level.\n/// @param {Map} $input Configuration for the \"input\" typographic level.\n/// @returns {Map} A typography config for the application.\n@function define-typography-config(\n $font-family: 'Roboto, \"Helvetica Neue\", sans-serif',\n $display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),\n $display-3: define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),\n $display-2: define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),\n $display-1: define-typography-level(34px, 40px, 400),\n $headline: define-typography-level(24px, 32px, 400),\n $title: define-typography-level(20px, 32px, 500),\n $subheading-2: define-typography-level(16px, 28px, 400),\n $subheading-1: define-typography-level(15px, 24px, 400),\n $body-2: define-typography-level(14px, 24px, 500),\n $body-1: define-typography-level(14px, 20px, 400),\n $caption: define-typography-level(12px, 20px, 400),\n $button: define-typography-level(14px, 14px, 500),\n // Line-height must be unit-less fraction of the font-size.\n $input: define-typography-level(inherit, 1.125, 400)\n) {\n\n // Declare an initial map with all of the levels.\n $config: (\n display-4: $display-4,\n display-3: $display-3,\n display-2: $display-2,\n display-1: $display-1,\n headline: $headline,\n title: $title,\n subheading-2: $subheading-2,\n subheading-1: $subheading-1,\n body-2: $body-2,\n body-1: $body-1,\n caption: $caption,\n button: $button,\n input: $input,\n );\n\n // Loop through the levels and set the `font-family` of the ones that don't have one to the base.\n // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.\n @each $key, $level in $config {\n @if map.get($level, font-family) == null {\n $new-level: map.merge($level, (font-family: $font-family));\n $config: map.merge($config, ($key: $new-level));\n }\n }\n\n // Add the base font family to the config.\n @return map.merge($config, (font-family: $font-family));\n}\n\n// Whether a config is for the Material Design 2018 typography system.\n@function private-typography-is-2018-config($config) {\n @return map.get($config, headline-1) != null;\n}\n\n// Whether a config is for the Material Design 2014 typography system.\n@function private-typography-is-2014-config($config) {\n @return map.get($config, headline) != null;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2014 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n//\n// Components using this function should be migrated to normalize to the 2018 style config instead.\n// New components should not use this function.\n@function private-typography-to-2014-config($config) {\n @if $config == null {\n @return null;\n }\n @if not private-typography-is-2014-config($config) {\n $args: (\n display-4: map.get($config, headline-1),\n display-3: map.get($config, headline-2),\n display-2: map.get($config, headline-3),\n display-1: map.get($config, headline-4),\n headline: map.get($config, headline-5),\n title: map.get($config, headline-6),\n subheading-2: map.get($config, subtitle-1),\n subheading-1: map.get($config, subtitle-2),\n body-2: map.get($config, body-1),\n body-1: map.get($config, body-2),\n button: map.get($config, button),\n caption: map.get($config, caption),\n );\n $non-null-args: ();\n @each $key, $value in $args {\n @if $value != null {\n $non-null-args: map.merge($non-null-args, ($key: $value));\n }\n }\n @return define-typography-config($non-null-args...);\n }\n @return $config;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2018 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n@function private-typography-to-2018-config($config) {\n @if $config == null {\n @return null;\n }\n @if not private-typography-is-2018-config($config) {\n @return (\n headline-1: map.get($config, display-4),\n headline-2: map.get($config, display-3),\n headline-3: map.get($config, display-2),\n headline-4: map.get($config, display-1),\n headline-5: map.get($config, headline),\n headline-6: map.get($config, title),\n subtitle-1: map.get($config, subheading-2),\n\n // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2\n // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018\n // system.\n subtitle-2: map.get($config, body-2),\n body-1: map.get($config, subheading-1),\n\n body-2: map.get($config, body-1),\n button: map.get($config, button),\n caption: map.get($config, caption),\n overline: if(map.get($config, overline), map.get($config, overline),\n define-typography-level(12px, 32px, 500)\n )\n );\n }\n @return $config;\n}\n\n/// Emits baseline typographic styles based on a given config.\n/// @param {Map} $config-or-theme A typography config for an entire theme.\n/// @param {String} $selector Ancestor selector under which native elements, such as h1, will\n/// be styled.\n@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {\n $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));\n\n // Note that it seems redundant to prefix the class rules with the `$selector`, however it's\n // necessary if we want to allow people to overwrite the tag selectors. This is due to\n // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.\n .mat-h1,\n .mat-headline,\n #{$selector} .mat-h1,\n #{$selector} .mat-headline,\n #{$selector} h1 {\n @include typography-utils.typography-level($config, headline);\n margin: 0 0 16px;\n }\n\n .mat-h2,\n .mat-title,\n #{$selector} .mat-h2,\n #{$selector} .mat-title,\n #{$selector} h2 {\n @include typography-utils.typography-level($config, title);\n margin: 0 0 16px;\n }\n\n .mat-h3,\n .mat-subheading-2,\n #{$selector} .mat-h3,\n #{$selector} .mat-subheading-2,\n #{$selector} h3 {\n @include typography-utils.typography-level($config, subheading-2);\n margin: 0 0 16px;\n }\n\n .mat-h4,\n .mat-subheading-1,\n #{$selector} .mat-h4,\n #{$selector} .mat-subheading-1,\n #{$selector} h4 {\n @include typography-utils.typography-level($config, subheading-1);\n margin: 0 0 16px;\n }\n\n // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for\n // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em\n // and h6 at 0.67em.\n .mat-h5,\n #{$selector} .mat-h5,\n #{$selector} h5 {\n @include typography-utils.font-shorthand(\n // calc is used here to support css variables\n calc(#{typography-utils.font-size($config, body-1)} * 0.83),\n typography-utils.font-weight($config, body-1),\n typography-utils.line-height($config, body-1),\n typography-utils.font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-h6,\n #{$selector} .mat-h6,\n #{$selector} h6 {\n @include typography-utils.font-shorthand(\n // calc is used here to support css variables\n calc(#{typography-utils.font-size($config, body-1)} * 0.67),\n typography-utils.font-weight($config, body-1),\n typography-utils.line-height($config, body-1),\n typography-utils.font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-body-strong,\n .mat-body-2,\n #{$selector} .mat-body-strong,\n #{$selector} .mat-body-2 {\n @include typography-utils.typography-level($config, body-2);\n }\n\n .mat-body,\n .mat-body-1,\n #{$selector} .mat-body,\n #{$selector} .mat-body-1,\n #{$selector} {\n @include typography-utils.typography-level($config, body-1);\n\n p {\n margin: 0 0 12px;\n }\n }\n\n .mat-small,\n .mat-caption,\n #{$selector} .mat-small,\n #{$selector} .mat-caption {\n @include typography-utils.typography-level($config, caption);\n }\n\n .mat-display-4,\n #{$selector} .mat-display-4 {\n @include typography-utils.typography-level($config, display-4);\n margin: 0 0 56px;\n }\n\n .mat-display-3,\n #{$selector} .mat-display-3 {\n @include typography-utils.typography-level($config, display-3);\n margin: 0 0 64px;\n }\n\n .mat-display-2,\n #{$selector} .mat-display-2 {\n @include typography-utils.typography-level($config, display-2);\n margin: 0 0 64px;\n }\n\n .mat-display-1,\n #{$selector} .mat-display-1 {\n @include typography-utils.typography-level($config, display-1);\n margin: 0 0 64px;\n }\n}\n","@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n\n\n// Utility for fetching a nested value from a typography config.\n@function _mat-get-type-value($config, $level, $name) {\n @return map.get(map.get($config, $level), $name);\n}\n\n/// Gets the font size for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-size($config, $level) {\n @return _mat-get-type-value($config, $level, font-size);\n}\n\n/// Gets the line height for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function line-height($config, $level) {\n @return _mat-get-type-value($config, $level, line-height);\n}\n\n/// Gets the font weight for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-weight($config, $level) {\n @return _mat-get-type-value($config, $level, font-weight);\n}\n\n/// Gets the letter spacing for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function letter-spacing($config, $level) {\n @return _mat-get-type-value($config, $level, letter-spacing);\n}\n\n/// Gets the font-family from a typography config and removes the quotes around it.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-family($config, $level: null) {\n $font-family: map.get($config, font-family);\n\n @if $level != null {\n $font-family: _mat-get-type-value($config, $level, font-family);\n }\n\n // Guard against unquoting non-string values, because it's deprecated.\n @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);\n}\n\n/// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to\n/// the individual properties if a value that isn't allowed in the shorthand is passed in.\n/// @param {String} $font-size The font-size value.\n/// @param {String | Number} $font-weight The font-weight value.\n/// @param {String | Number} $line-height The line-height value.\n/// @param {String} $font-family The font-family value.\n/// @returns {String} The `font` shorthand value combining the given parts.\n@mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {\n // If any of the values are set to `inherit`, we can't use the shorthand\n // so we fall back to passing in the individual properties.\n @if ($font-size == inherit or\n $font-weight == inherit or\n $line-height == inherit or\n $font-family == inherit or\n $font-size == null or\n $font-weight == null or\n $line-height == null or\n $font-family == null) {\n\n font-size: $font-size;\n font-weight: $font-weight;\n line-height: $line-height;\n font-family: $font-family;\n }\n @else {\n // Otherwise use the shorthand `font`, because it's the least amount of bytes.\n font: $font-weight list.slash($font-size, $line-height) $font-family;\n }\n}\n\n/// Emits CSS styles for the given typography level.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@mixin typography-level($config, $level) {\n $font-size: font-size($config, $level);\n $font-weight: font-weight($config, $level);\n $line-height: line-height($config, $level);\n $font-family: font-family($config, $level);\n\n @include font-shorthand($font-size, $font-weight, $line-height, $font-family);\n letter-spacing: letter-spacing($config, $level);\n}\n\n/// Coerce a value to `em` if it is a unitless number, otherwise returns\n/// the value provided.\n@function private-coerce-unitless-to-em($value) {\n @return if(math.is-unitless($value), 1em * $value, $value);\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-bottom-sheet-container {\n @include private.private-theme-elevation(16, $config);\n background: theming.get-color-from-palette($background, dialog);\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-bottom-sheet-container {\n @include typography-utils.typography-level($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$_ripple-opacity: 0.1;\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _focus-overlay-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n &.mat-primary .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($warn);\n }\n\n &.mat-button-disabled .mat-button-focus-overlay {\n background-color: transparent;\n }\n}\n\n// Applies the background color for a ripple. If the value provided is not a Sass color,\n// we assume that we've been given a CSS variable. Since we can't perform alpha-blending\n// on a CSS variable, we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $hue, $opacity) {\n $background-color: theming.get-color-from-palette($palette, $hue, $opacity);\n background-color: $background-color;\n @if (meta.type-of($background-color) != color) {\n opacity: $opacity;\n }\n}\n\n@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {\n $primary: map.get($theme, primary);\n $accent: map.get($theme, accent);\n $warn: map.get($theme, warn);\n\n &.mat-primary .mat-ripple-element {\n @include _ripple-background($primary, $hue, $opacity);\n }\n\n &.mat-accent .mat-ripple-element {\n @include _ripple-background($accent, $hue, $opacity);\n }\n\n &.mat-warn .mat-ripple-element {\n @include _ripple-background($warn, $hue, $opacity);\n }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _theme-property($theme, $property, $hue) {\n $primary: map.get($theme, primary);\n $accent: map.get($theme, accent);\n $warn: map.get($theme, warn);\n $background: map.get($theme, background);\n $foreground: map.get($theme, foreground);\n\n &.mat-primary {\n #{$property}: theming.get-color-from-palette($primary, $hue);\n }\n &.mat-accent {\n #{$property}: theming.get-color-from-palette($accent, $hue);\n }\n &.mat-warn {\n #{$property}: theming.get-color-from-palette($warn, $hue);\n }\n\n &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {\n &.mat-button-disabled {\n $palette: if($property == 'color', $foreground, $background);\n #{$property}: theming.get-color-from-palette($palette, disabled-button);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-button, .mat-icon-button, .mat-stroked-button {\n // Buttons without a background color should inherit the font color. This is necessary to\n // ensure that the button is readable on custom background colors. It's wrong to always assume\n // that those buttons are always placed inside of containers with the default background\n // color of the theme (e.g. themed toolbars).\n color: inherit;\n background: transparent;\n\n @include _theme-property($config, 'color', text);\n @include _focus-overlay-color($config);\n\n // Setup the ripple color to be based on the text color. This ensures that the ripples\n // are matching with the current theme palette and are in contrast to the background color\n // (e.g in themed toolbars).\n .mat-ripple-element {\n opacity: $_ripple-opacity;\n background-color: currentColor;\n }\n }\n\n .mat-button-focus-overlay {\n background: map.get($foreground, base);\n }\n\n // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion\n // order of the theme styles and the button reset may end up resetting this as well.\n .mat-stroked-button:not(.mat-button-disabled) {\n border-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n // Default font and background color when not using any color palette.\n color: theming.get-color-from-palette($foreground, text);\n background-color: theming.get-color-from-palette($background, raised-button);\n\n @include _theme-property($config, 'color', default-contrast);\n @include _theme-property($config, 'background-color', default);\n @include _ripple-color($config, default-contrast);\n }\n\n .mat-stroked-button, .mat-flat-button {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n\n .mat-raised-button {\n @include private.private-theme-overridable-elevation(2, $config);\n\n &:not(.mat-button-disabled):active {\n @include private.private-theme-overridable-elevation(8, $config);\n }\n\n &.mat-button-disabled {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n\n .mat-fab, .mat-mini-fab {\n @include private.private-theme-overridable-elevation(6, $config);\n\n &:not(.mat-button-disabled):active {\n @include private.private-theme-overridable-elevation(12, $config);\n }\n\n &.mat-button-disabled {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,\n .mat-flat-button, .mat-fab, .mat-mini-fab {\n font: {\n family: typography-utils.font-family($config, button);\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './button-toggle-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $divider-color: theming.get-color-from-palette($foreground, divider);\n $theme-divider-color: map.get($foreground, divider);\n\n // By default the theme usually has an rgba color for the dividers, which can\n // stack up with the background of a button toggle. This can cause the border\n // of a selected toggle to look different from an deselected one. We use a solid\n // color to ensure that the border always stays the same.\n $divider-color: if(type-of($theme-divider-color) == color,\n theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),\n $theme-divider-color\n );\n\n .mat-button-toggle-standalone,\n .mat-button-toggle-group {\n @include private.private-theme-overridable-elevation(2, $config);\n }\n\n .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n .mat-button-toggle-group-appearance-standard {\n &:not([class*='mat-elevation-z']) {\n box-shadow: none;\n }\n }\n\n .mat-button-toggle {\n color: theming.get-color-from-palette($foreground, hint-text);\n\n .mat-button-toggle-focus-overlay {\n background-color: theming.get-color-from-palette($background, focused-button);\n }\n }\n\n .mat-button-toggle-appearance-standard {\n color: theming.get-color-from-palette($foreground, text);\n background: theming.get-color-from-palette($background, card);\n\n .mat-button-toggle-focus-overlay {\n background-color: theming.get-color-from-palette($background, focused-button, 1);\n }\n }\n\n .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: solid 1px $divider-color;\n }\n\n [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: solid 1px $divider-color;\n }\n\n .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {\n .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: none;\n border-top: solid 1px $divider-color;\n }\n }\n\n .mat-button-toggle-checked {\n background-color: theming.get-color-from-palette($background, selected-button);\n color: theming.get-color-from-palette($foreground, secondary-text);\n\n &.mat-button-toggle-appearance-standard {\n color: theming.get-color-from-palette($foreground, text);\n }\n }\n\n .mat-button-toggle-disabled {\n color: theming.get-color-from-palette($foreground, disabled-button);\n background-color: theming.get-color-from-palette($background, disabled-button-toggle);\n\n &.mat-button-toggle-appearance-standard {\n background: theming.get-color-from-palette($background, card);\n }\n\n &.mat-button-toggle-checked {\n background-color: theming.get-color-from-palette($background, selected-disabled-button);\n }\n }\n\n .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n .mat-button-toggle-group-appearance-standard {\n border: solid 1px $divider-color;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-button-toggle {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $standard-height: compatibility.private-density-prop-value(\n button-toggle-variables.$standard-density-config, $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n line-height: $standard-height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-card {\n @include private.private-theme-overridable-elevation(1, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n // Needs extra specificity to be able to override the elevation selectors.\n &.mat-card-flat {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n\n .mat-card-subtitle {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-card {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-card-title {\n font: {\n size: typography-utils.font-size($config, headline);\n weight: typography-utils.font-weight($config, title);\n }\n }\n\n .mat-card-header .mat-card-title {\n font-size: typography-utils.font-size($config, title);\n }\n\n .mat-card-subtitle,\n .mat-card-content {\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n\n // The color of the checkbox's checkmark / mixedmark.\n $checkbox-mark-color: theming.get-color-from-palette($background, background);\n\n // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n // this does not work well with elements layered on top of one another. To get around this we\n // blend the colors together based on the base color and the theme background.\n $white-30pct-opacity-on-dark: #686868;\n $black-26pct-opacity-on-light: #b0b0b0;\n $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n\n .mat-checkbox-frame {\n border-color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-checkbox-checkmark {\n fill: $checkbox-mark-color;\n }\n\n .mat-checkbox-checkmark-path {\n // !important is needed here because a stroke must be set as an\n // attribute on the SVG in order for line animation to work properly.\n stroke: $checkbox-mark-color !important;\n }\n\n .mat-checkbox-mixedmark {\n background-color: $checkbox-mark-color;\n }\n\n .mat-checkbox-indeterminate, .mat-checkbox-checked {\n &.mat-primary .mat-checkbox-background {\n background-color: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-checkbox-background {\n background-color: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-checkbox-background {\n background-color: theming.get-color-from-palette($warn);\n }\n }\n\n .mat-checkbox-disabled {\n &.mat-checkbox-checked,\n &.mat-checkbox-indeterminate {\n .mat-checkbox-background {\n background-color: $disabled-color;\n }\n }\n\n &:not(.mat-checkbox-checked) {\n .mat-checkbox-frame {\n border-color: $disabled-color;\n }\n }\n\n .mat-checkbox-label {\n color: theming.get-color-from-palette($foreground, disabled);\n }\n }\n\n // Switch this to a solid color since we're using `opacity`\n // to control how opaque the ripple should be.\n .mat-checkbox .mat-ripple-element {\n background-color: map.get(map.get($config, foreground), base);\n }\n\n .mat-checkbox-checked:not(.mat-checkbox-disabled),\n .mat-checkbox:active:not(.mat-checkbox-disabled) {\n &.mat-primary .mat-ripple-element {\n background: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-ripple-element {\n background: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-ripple-element {\n background: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-checkbox {\n font-family: typography-utils.font-family($config);\n }\n\n // TODO(kara): Remove this style when fixing vertical baseline\n .mat-checkbox-layout .mat-checkbox-label {\n line-height: typography-utils.line-height($config, body-2);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$chip-remove-font-size: 18px;\n\n@mixin _element-color($foreground, $background) {\n background-color: $background;\n color: $foreground;\n\n .mat-chip-remove {\n color: $foreground;\n opacity: 0.4;\n }\n}\n\n\n// Applies the background color for a ripple element.\n// If the color value provided is not a Sass color,\n// we assume that we've been given a CSS variable.\n// Since we can't perform alpha-blending on a CSS variable,\n// we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $default-contrast, $opacity) {\n $background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity);\n background-color: $background-color;\n @if (meta.type-of($background-color) != color) {\n opacity: $opacity;\n }\n}\n\n@mixin _palette-styles($palette) {\n @include _element-color(theming.get-color-from-palette($palette, default-contrast),\n theming.get-color-from-palette($palette));\n\n .mat-ripple-element {\n @include _ripple-background($palette, default-contrast, 0.1);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $unselected-background: theming.get-color-from-palette($background, unselected-chip);\n $unselected-foreground: theming.get-color-from-palette($foreground, text);\n\n .mat-chip.mat-standard-chip {\n @include _element-color($unselected-foreground, $unselected-background);\n\n &:not(.mat-chip-disabled) {\n &:active {\n @include private.private-theme-elevation(3, $config);\n }\n\n .mat-chip-remove:hover {\n opacity: 0.54;\n }\n }\n\n &.mat-chip-disabled {\n opacity: 0.4;\n }\n\n &::after {\n background: map.get($foreground, base);\n }\n }\n\n .mat-chip.mat-standard-chip.mat-chip-selected {\n &.mat-primary {\n @include _palette-styles($primary);\n }\n\n &.mat-warn {\n @include _palette-styles($warn);\n }\n\n &.mat-accent {\n @include _palette-styles($accent);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-chip {\n font-size: typography-utils.font-size($config, body-2);\n font-weight: typography-utils.font-weight($config, body-2);\n\n .mat-chip-trailing-icon.mat-icon,\n .mat-chip-remove.mat-icon {\n font-size: $chip-remove-font-size;\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-table {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-table thead, .mat-table tbody, .mat-table tfoot,\n mat-header-row, mat-row, mat-footer-row,\n [mat-header-row], [mat-row], [mat-footer-row],\n .mat-table-sticky {\n background: inherit;\n }\n\n mat-row, mat-header-row, mat-footer-row,\n th.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n border-bottom-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-header-cell {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-cell, .mat-footer-cell {\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-table {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-header-cell {\n font-size: typography-utils.font-size($config, caption);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n\n .mat-cell, .mat-footer-cell {\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n$selected-today-box-shadow-width: 1px;\n$selected-fade-amount: 0.6;\n$range-fade-amount: 0.2;\n$today-fade-amount: 0.2;\n$calendar-body-font-size: 13px !default;\n$calendar-weekday-table-font-size: 11px !default;\n\n@mixin _color($palette) {\n @include date-range-colors(\n theming.get-color-from-palette($palette, default, $range-fade-amount));\n\n .mat-calendar-body-selected {\n background-color: theming.get-color-from-palette($palette);\n color: theming.get-color-from-palette($palette, default-contrast);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-selected {\n $background: theming.get-color-from-palette($palette);\n\n @if (meta.type-of($background) == color) {\n background-color: color.adjust($background, $alpha: -$selected-fade-amount);\n }\n @else {\n // If we couldn't resolve to background to a color (e.g. it's a CSS variable),\n // fall back to fading the content out via `opacity`.\n opacity: $today-fade-amount;\n }\n }\n\n .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 $selected-today-box-shadow-width\n theming.get-color-from-palette($palette, default-contrast);\n }\n\n .cdk-keyboard-focused .mat-calendar-body-active,\n .cdk-program-focused .mat-calendar-body-active {\n @include _highlighted-cell($palette);\n }\n\n @media (hover: hover) {\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {\n @include _highlighted-cell($palette);\n }\n }\n}\n\n// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.\n@mixin _unselected-cell {\n &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n @content;\n }\n}\n\n// Styles for a highlighted calendar cell (e.g. hovered or focused).\n@mixin _highlighted-cell($palette) {\n & > .mat-calendar-body-cell-content {\n @include _unselected-cell {\n background-color: theming.get-color-from-palette($palette, 0.3);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n .mat-calendar-arrow {\n fill: theming.get-color-from-palette($foreground, icon);\n }\n\n // The prev/next buttons need a bit more specificity to\n // avoid being overwritten by the .mat-icon-button.\n .mat-datepicker-toggle,\n .mat-datepicker-content .mat-calendar-next-button,\n .mat-datepicker-content .mat-calendar-previous-button {\n color: theming.get-color-from-palette($foreground, icon);\n }\n\n .mat-calendar-table-header-divider::after {\n background: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-calendar-table-header,\n .mat-calendar-body-label {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-calendar-body-cell-content,\n .mat-date-range-input-separator {\n color: theming.get-color-from-palette($foreground, text);\n border-color: transparent;\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-cell-content {\n @include _unselected-cell {\n color: $disabled-color;\n }\n }\n\n .mat-form-field-disabled .mat-date-range-input-separator {\n color: $disabled-color;\n }\n\n .mat-calendar-body-in-preview {\n $divider-color: theming.get-color-from-palette($foreground, divider);\n\n @if meta.type-of($divider-color) == color {\n // The divider color is set under the assumption that it'll be used\n // for a solid border, but because we're using a dashed border for the\n // preview range, we need to bump its opacity to ensure that it's visible.\n color: rgba($divider-color, math.min(opacity($divider-color) * 2, 1));\n }\n @else {\n color: $divider-color;\n }\n }\n\n .mat-calendar-body-today {\n @include _unselected-cell {\n // Note: though it's not text, the border is a hint about the fact that this is today's date,\n // so we use the hint color.\n border-color: theming.get-color-from-palette($foreground, hint-text);\n }\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-today {\n @include _unselected-cell {\n $color: theming.get-color-from-palette($foreground, hint-text);\n\n @if (meta.type-of($color) == color) {\n border-color: color.adjust($color, $alpha: -$today-fade-amount);\n }\n @else {\n // If the color didn't resolve to a color value, but something like a CSS variable, we can't\n // fade it out so we fall back to reducing the element opacity. Note that we don't use the\n // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied\n // to it already and we don't want them to stack on top of each other.\n opacity: 0.5;\n }\n }\n }\n\n @include _color(map.get($config, primary));\n\n .mat-datepicker-content {\n @include private.private-theme-elevation(4, $config);\n background-color: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-accent {\n @include _color(map.get($config, accent));\n }\n\n &.mat-warn {\n @include _color(map.get($config, warn));\n }\n }\n\n .mat-datepicker-content-touch {\n @include private.private-theme-elevation(24, $config);\n }\n\n .mat-datepicker-toggle-active {\n color: theming.get-color-from-palette(map.get($config, primary), text);\n\n &.mat-accent {\n color: theming.get-color-from-palette(map.get($config, accent), text);\n }\n\n &.mat-warn {\n color: theming.get-color-from-palette(map.get($config, warn), text);\n }\n }\n\n .mat-date-range-input-inner[disabled] {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-calendar {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-calendar-body {\n font-size: $calendar-body-font-size;\n }\n\n .mat-calendar-body-label,\n .mat-calendar-period-button {\n font: {\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n\n .mat-calendar-table-header th {\n font: {\n size: $calendar-weekday-table-font-size;\n weight: typography-utils.font-weight($config, body-1);\n }\n }\n}\n\n@mixin date-range-colors(\n $range-color,\n $comparison-color: rgba(#f9ab00, $range-fade-amount),\n $overlap-color: #a8dab5,\n $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)) {\n\n .mat-calendar-body-in-range::before {\n background: $range-color;\n }\n\n .mat-calendar-body-comparison-identical,\n .mat-calendar-body-in-comparison-range::before {\n background: $comparison-color;\n }\n\n .mat-calendar-body-comparison-bridge-start::before,\n [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {\n background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);\n }\n\n .mat-calendar-body-comparison-bridge-end::before,\n [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {\n background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);\n }\n\n .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n background: $overlap-color;\n }\n\n .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n background: $overlap-selected-color;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-dialog-container {\n @include private.private-theme-elevation(24, $config);\n background: theming.get-color-from-palette($background, dialog);\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-dialog-title {\n @include typography-utils.typography-level($config, title);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './expansion-variables';\n@use './expansion-mixins';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-expansion-panel {\n @include private.private-theme-overridable-elevation(2, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-action-row {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n\n @include expansion-mixins.private-expansion-focus {\n background: theming.get-color-from-palette($background, hover);\n }\n\n // Disable the hover on touch devices since it can appear like it is stuck. We can't use\n // `@media (hover)` above, because the desktop support browser support isn't great.\n @media (hover: none) {\n .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n .mat-expansion-panel-header:hover {\n background: theming.get-color-from-palette($background, card);\n }\n }\n\n .mat-expansion-panel-header-title {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-expansion-panel-header-description,\n .mat-expansion-indicator::after {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-expansion-panel-header[aria-disabled='true'] {\n color: theming.get-color-from-palette($foreground, disabled-button);\n\n .mat-expansion-panel-header-title,\n .mat-expansion-panel-header-description {\n color: inherit;\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-expansion-panel-header {\n font: {\n family: typography-utils.font-family($config, subheading-1);\n size: typography-utils.font-size($config, subheading-1);\n weight: typography-utils.font-weight($config, subheading-1);\n }\n }\n\n .mat-expansion-panel-content {\n @include typography-utils.typography-level($config, body-1);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $expanded-height: compatibility.private-density-prop-value(\n expansion-variables.$header-density-config, $density-scale, expanded-height);\n $collapsed-height: compatibility.private-density-prop-value(\n expansion-variables.$header-density-config, $density-scale, collapsed-height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-expansion-panel-header {\n height: $collapsed-height;\n\n &.mat-expanded {\n height: $expanded-height;\n }\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@use './form-field-fill-theme.scss';\n@use './form-field-legacy-theme.scss';\n@use './form-field-outline-theme.scss';\n@use './form-field-standard-theme.scss';\n\n// Color styles that apply to all appearances of the form-field.\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n // Label colors. Required is used for the `*` star shown in the label.\n $label-color:\n theming.get-color-from-palette($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n $focused-label-color: theming.get-color-from-palette($primary, text);\n $required-label-color: theming.get-color-from-palette($accent, text);\n\n // Underline colors.\n $underline-color-base:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n $underline-color-accent: theming.get-color-from-palette($accent, text);\n $underline-color-warn: theming.get-color-from-palette($warn, text);\n $underline-focused-color: theming.get-color-from-palette($primary, text);\n\n .mat-form-field-label {\n color: $label-color;\n }\n\n .mat-hint {\n color: $label-color;\n }\n\n .mat-form-field.mat-focused .mat-form-field-label {\n color: $focused-label-color;\n\n &.mat-accent {\n color: $underline-color-accent;\n }\n\n &.mat-warn {\n color: $underline-color-warn;\n }\n }\n\n .mat-focused .mat-form-field-required-marker {\n color: $required-label-color;\n }\n\n .mat-form-field-ripple {\n background-color: $underline-color-base;\n }\n\n .mat-form-field.mat-focused {\n .mat-form-field-ripple {\n background-color: $underline-focused-color;\n\n &.mat-accent {\n background-color: $underline-color-accent;\n }\n\n &.mat-warn {\n background-color: $underline-color-warn;\n }\n }\n }\n\n .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {\n .mat-form-field-infix::after {\n color: $underline-focused-color;\n }\n\n &.mat-accent .mat-form-field-infix::after {\n color: $underline-color-accent;\n }\n\n &.mat-warn .mat-form-field-infix::after {\n color: $underline-color-warn;\n }\n }\n\n // Styling for the error state of the form field. Note that while the same can be\n // achieved with the ng-* classes, we use this approach in order to ensure that the same\n // logic is used to style the error state and to show the error messages.\n .mat-form-field.mat-form-field-invalid {\n .mat-form-field-label {\n color: $underline-color-warn;\n\n &.mat-accent,\n .mat-form-field-required-marker {\n color: $underline-color-warn;\n }\n }\n\n .mat-form-field-ripple,\n .mat-form-field-ripple.mat-accent {\n background-color: $underline-color-warn;\n }\n }\n\n .mat-error {\n color: $underline-color-warn;\n }\n\n @include form-field-legacy-theme.legacy-color($config);\n @include form-field-standard-theme.standard-color($config);\n @include form-field-fill-theme.fill-color($config);\n @include form-field-outline-theme.outline-color($config);\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $dedupe;\n\n $dedupe: $dedupe + 0.00001 !global;\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The amount to scale the font for the prefix and suffix icons.\n $prefix-suffix-icon-font-scale: 1.5;\n\n // The padding on the infix. Mocks show half of the text size.\n $infix-padding: 0.5em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n // If the line-height is given as a unitless number, coerce it to `em`.\n $infix-margin-top: $subscript-font-scale *\n typography-utils.private-coerce-unitless-to-em($line-height);\n // Font size to use for the label and subscript text.\n $subscript-font-size: $subscript-font-scale * 100%;\n // Font size to use for the for the prefix and suffix icons.\n $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n .mat-form-field {\n @include typography-utils.typography-level($config, input);\n }\n\n .mat-form-field-wrapper {\n padding-bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-prefix,\n .mat-form-field-suffix {\n // Allow icons in a prefix or suffix to adapt to the correct size.\n .mat-icon {\n font-size: $prefix-suffix-icon-font-size;\n line-height: $line-height;\n }\n\n // Allow icon buttons in a prefix or suffix to adapt to the correct size.\n .mat-icon-button {\n height: $prefix-suffix-icon-font-scale * 1em;\n width: $prefix-suffix-icon-font-scale * 1em;\n\n .mat-icon {\n height: typography-utils.private-coerce-unitless-to-em($line-height);\n line-height: $line-height;\n }\n }\n }\n\n .mat-form-field-infix {\n padding: $infix-padding 0;\n // Throws off the baseline if we do it as a real margin, so we do it as a border instead.\n border-top: $infix-margin-top solid transparent;\n }\n\n .mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n\n .mat-form-field-label-wrapper {\n top: -$infix-margin-top;\n padding-top: $infix-margin-top;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n }\n\n .mat-form-field-underline {\n // We want the underline to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount.\n bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-subscript-wrapper {\n font-size: $subscript-font-size;\n margin-top: $subscript-margin-top;\n\n // We want the subscript to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount (adjusted for the smaller font size);\n top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n }\n\n @include form-field-legacy-theme.legacy-typography($config);\n @include form-field-standard-theme.standard-typography($config);\n @include form-field-fill-theme.fill-typography($config);\n @include form-field-outline-theme.outline-typography($config);\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n @include form-field-legacy-theme.private-form-field-legacy-density($density-scale);\n @include form-field-standard-theme.private-form-field-standard-density($density-scale);\n @include form-field-fill-theme.private-form-field-fill-density($density-scale);\n @include form-field-outline-theme.private-form-field-outline-density($density-scale);\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin legacy-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $label-color: theming.get-color-from-palette($foreground, secondary-text);\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n .mat-form-field-appearance-legacy {\n .mat-form-field-label {\n color: $label-color;\n }\n\n .mat-hint {\n color: $label-color;\n }\n\n .mat-form-field-underline {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled .mat-form-field-underline {\n @include form-common.private-control-disabled-underline($underline-color);\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n // We use perspective to fix the text blurriness as described here:\n // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/\n // This results in a small jitter after the label floats on Firefox, which the\n // translateZ fixes.\n transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)\n translateZ(0.001px + $legacy-dedupe);\n width: math.div(100%, $font-scale) + $legacy-dedupe;\n\n $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {\n // This results in a small jitter after the label floats on Firefox, which the\n // translateZ fixes.\n transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)\n scale($font-scale);\n // The tricks above used to smooth out the animation on chrome and firefox actually make things\n // worse on IE, so we don't include them in the IE version.\n $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n@mixin legacy-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The amount of space between the top of the line and the top of the actual text\n // (as a fraction of the font-size).\n $line-spacing: math.div($line-height - 1, 2);\n // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge\n // of the text itself, not the edge of the line; therefore we subtract off the line spacing.\n $infix-padding: 0.5em - $line-spacing;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n // If the line-height is given as a unitless number, coerce it to `em`.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size. We again need to subtract off the line spacing since the mocks measure to the edge of the\n // text, not the edge of the line.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n .mat-form-field-appearance-legacy {\n .mat-form-field-wrapper {\n padding-bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-infix {\n padding: $infix-padding 0;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n }\n\n .mat-form-field-underline {\n // We want the underline to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount.\n bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-subscript-wrapper {\n margin-top: $subscript-margin-top;\n\n // We want the subscript to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount (adjusted for the smaller font size);\n top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n }\n }\n\n // translateZ causes the label to not appear while printing, so we override it to not\n // apply translateZ while printing\n @media print {\n .mat-form-field-appearance-legacy {\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n }\n }\n}\n\n@mixin private-form-field-legacy-density($config-or-theme) {}\n\n@mixin legacy-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include legacy-color($color);\n }\n @if $density != null {\n @include private-form-field-legacy-density($density);\n }\n @if $typography != null {\n @include legacy-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin fill-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $fill-background:\n theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04));\n $fill-disabled-background:\n theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n .mat-form-field-appearance-fill {\n .mat-form-field-flex {\n background-color: $fill-background;\n }\n\n &.mat-form-field-disabled .mat-form-field-flex {\n background-color: $fill-disabled-background;\n }\n\n .mat-form-field-underline::before {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled {\n .mat-form-field-label {\n color: $label-disabled-color;\n }\n\n .mat-form-field-underline::before {\n background-color: transparent;\n }\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $fill-dedupe;\n\n $fill-dedupe: $fill-dedupe + 0.00001 !global;\n}\n\n@mixin fill-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The padding on top of the infix.\n $infix-padding-top: 0.25em;\n // The padding below the infix.\n $infix-padding-bottom: 0.75em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The amount we offset the label from the input text in the fill appearance.\n $fill-appearance-label-offset: -0.5em;\n\n .mat-form-field-appearance-fill {\n .mat-form-field-infix {\n padding: $infix-padding-top 0 $infix-padding-bottom 0;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding-top;\n margin-top: $fill-appearance-label-offset;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n@mixin private-form-field-fill-density($config-or-theme) {}\n\n@mixin fill-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include fill-color($color);\n }\n @if $density != null {\n @include private-form-field-fill-density($density);\n }\n @if $typography != null {\n @include fill-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin outline-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n $outline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n $outline-color-hover:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n $outline-color-primary: theming.get-color-from-palette($primary);\n $outline-color-accent: theming.get-color-from-palette($accent);\n $outline-color-warn: theming.get-color-from-palette($warn);\n $outline-color-disabled:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06));\n\n .mat-form-field-appearance-outline {\n .mat-form-field-outline {\n color: $outline-color;\n }\n\n .mat-form-field-outline-thick {\n color: $outline-color-hover;\n }\n\n &.mat-focused {\n .mat-form-field-outline-thick {\n color: $outline-color-primary;\n }\n\n &.mat-accent .mat-form-field-outline-thick {\n color: $outline-color-accent;\n }\n\n &.mat-warn .mat-form-field-outline-thick {\n color: $outline-color-warn;\n }\n }\n\n // Class repeated so that rule is specific enough to override focused accent color case.\n &.mat-form-field-invalid.mat-form-field-invalid {\n .mat-form-field-outline-thick {\n color: $outline-color-warn;\n }\n }\n\n &.mat-form-field-disabled {\n .mat-form-field-label {\n color: $label-disabled-color;\n }\n\n .mat-form-field-outline {\n color: $outline-color-disabled;\n }\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $outline-dedupe;\n\n $outline-dedupe: $outline-dedupe + 0.00001 !global;\n}\n\n@mixin outline-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The padding above and below the infix.\n $infix-padding: 1em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n // The amount we offset the label from the input text in the outline appearance.\n $outline-appearance-label-offset: -0.25em;\n\n .mat-form-field-appearance-outline {\n .mat-form-field-infix {\n padding: $infix-padding 0 $infix-padding 0;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n margin-top: $outline-appearance-label-offset;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n@mixin private-form-field-outline-density($config-or-theme) {}\n\n@mixin outline-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include outline-color($color);\n }\n @if $density != null {\n @include private-form-field-outline-density($density);\n }\n @if $typography != null {\n @include outline-typography($typography);\n }\n }\n}\n\n","@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin color($config-or-theme) {}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-grid-tile-header,\n .mat-grid-tile-footer {\n @include list-common.base(typography-utils.font-size($config, caption));\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","// This mixin will ensure that lines that overflow the container will hide the overflow and\n// truncate neatly with an ellipsis.\n@mixin truncate-line() {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n// Mixin to provide all mat-line styles, changing secondary font size based on whether the list\n// is in dense mode.\n@mixin base($secondary-font-size) {\n .mat-line {\n @include truncate-line();\n display: block;\n box-sizing: border-box;\n\n // all lines but the top line should have smaller text\n &:nth-child(n+2) {\n font-size: $secondary-font-size;\n }\n }\n}\n\n// This mixin normalizes default element styles, e.g. font weight for heading text.\n@mixin normalize-text() {\n & > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n }\n}\n\n// This mixin provides base styles for the wrapper around mat-line elements in a list.\n@mixin wrapper-base() {\n @include normalize-text();\n\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n\n // Must remove wrapper when lines are empty or it takes up horizontal\n // space and pushes other elements to the right.\n &:empty {\n display: none;\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/vendor-prefixes';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $foreground: map.get($config, foreground);\n\n .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-input-element:disabled,\n .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n .mat-input-element {\n caret-color: theming.get-color-from-palette($primary, text);\n\n @include vendor-prefixes.input-placeholder {\n color: form-common.private-control-placeholder-color($config);\n }\n\n // On dark themes we set the native `select` color to some shade of white,\n // however the color propagates to all of the `option` elements, which are\n // always on a white background inside the dropdown, causing them to blend in.\n // Since we can't change background of the dropdown, we need to explicitly\n // reset the color of the options to something dark.\n @if (map.get($config, is-dark)) {\n &:not(.mat-native-select-inline) {\n option {\n color: palette.$dark-primary-text;\n }\n\n option:disabled {\n color: palette.$dark-disabled-text;\n }\n }\n }\n }\n\n .mat-form-field.mat-accent .mat-input-element {\n caret-color: theming.get-color-from-palette($accent, text);\n }\n\n .mat-form-field.mat-warn .mat-input-element,\n .mat-form-field-invalid .mat-input-element {\n caret-color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: theming.get-color-from-palette($warn, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n // The amount of space between the top of the line and the top of the actual text\n // (as a fraction of the font-size).\n $line-spacing: math.div($line-height - 1, 2);\n\n // <input> elements seem to have their height set slightly too large on Safari causing the text to\n // be misaligned w.r.t. the placeholder. Adding this margin corrects it.\n input.mat-input-element {\n margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-menu-panel {\n @include private.private-theme-overridable-elevation(4, $config);\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-menu-item {\n background: transparent;\n color: theming.get-color-from-palette($foreground, 'text');\n\n &[disabled] {\n &,\n .mat-menu-submenu-icon,\n .mat-icon-no-color {\n color: theming.get-color-from-palette($foreground, 'disabled');\n }\n }\n }\n\n .mat-menu-item .mat-icon-no-color,\n .mat-menu-submenu-icon {\n color: theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-menu-item:hover,\n .mat-menu-item.cdk-program-focused,\n .mat-menu-item.cdk-keyboard-focused,\n .mat-menu-item-highlighted {\n &:not([disabled]) {\n background: theming.get-color-from-palette($background, 'hover');\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-menu-item {\n font: {\n family: typography-utils.font-family($config, body-1);\n size: typography-utils.font-size($config, body-1);\n weight: typography-utils.font-weight($config, body-1);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './paginator-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n\n .mat-paginator {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-paginator-decrement,\n .mat-paginator-increment {\n border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n border-right: 2px solid theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-paginator-first,\n .mat-paginator-last {\n border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-icon-button[disabled] {\n .mat-paginator-decrement,\n .mat-paginator-increment,\n .mat-paginator-first,\n .mat-paginator-last {\n border-color: theming.get-color-from-palette($foreground, 'disabled');\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n font: {\n family: typography-utils.font-family($config, caption);\n size: typography-utils.font-size($config, caption);\n }\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(paginator-variables.$density-config,\n $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-paginator-container {\n min-height: $height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _color($palette) {\n &.mat-radio-checked .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($palette);\n }\n\n .mat-radio-inner-circle,\n .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),\n &.mat-radio-checked .mat-radio-persistent-ripple,\n &:active .mat-radio-persistent-ripple {\n background-color: theming.get-color-from-palette($palette);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-radio-button {\n &.mat-primary {\n @include _color($primary);\n }\n\n &.mat-accent {\n @include _color($accent);\n }\n\n &.mat-warn {\n @include _color($warn);\n }\n\n // This needs extra specificity, because the classes above are combined\n // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.\n // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).\n &.mat-radio-disabled {\n &.mat-radio-checked .mat-radio-outer-circle,\n .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($foreground, disabled);\n }\n\n .mat-radio-ripple .mat-ripple-element,\n .mat-radio-inner-circle {\n background-color: theming.get-color-from-palette($foreground, disabled);\n }\n\n .mat-radio-label-content {\n color: theming.get-color-from-palette($foreground, disabled);\n }\n }\n\n // Switch this to a solid color since we're using `opacity`\n // to control how opaque the ripple should be.\n .mat-ripple-element {\n background-color: map.get($foreground, base);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-radio-button {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-select-value {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-select-placeholder {\n color: form-common.private-control-placeholder-color($config);\n }\n\n .mat-select-disabled .mat-select-value {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n .mat-select-arrow {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-select-panel {\n background: theming.get-color-from-palette($background, card);\n @include private.private-theme-overridable-elevation(4, $config);\n\n .mat-option.mat-selected:not(.mat-option-multiple) {\n background: theming.get-color-from-palette($background, hover, 0.12);\n }\n }\n\n .mat-form-field {\n &.mat-focused {\n &.mat-primary .mat-select-arrow {\n color: theming.get-color-from-palette($primary, text);\n }\n\n &.mat-accent .mat-select-arrow {\n color: theming.get-color-from-palette($accent, text);\n }\n\n &.mat-warn .mat-select-arrow {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n\n .mat-select.mat-select-invalid .mat-select-arrow {\n color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-select.mat-select-disabled .mat-select-arrow {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n .mat-select {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-select-trigger {\n height: typography-utils.private-coerce-unitless-to-em($line-height);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _checked-color($palette, $thumb-checked-hue) {\n &.mat-checked {\n .mat-slide-toggle-thumb {\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n }\n\n .mat-slide-toggle-bar {\n // Opacity is determined from the specs for the selection controls.\n // See: https://material.io/design/components/selection-controls.html#specs\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue, 0.54);\n }\n\n .mat-ripple-element {\n // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n // Color hues are based on the specs which briefly show the hues that are applied to a switch.\n // The 2018 specs no longer describe how dark switches should look like. Due to the lack of\n // information for dark themed switches, we partially keep the old behavior that is based on\n // the previous specifications. For the checked color we always use the `default` hue because\n // that follows MDC and also makes it easier for people to create a custom theme without needing\n // to specify each hue individually.\n $thumb-unchecked-hue: if($is-dark, 400, 50);\n $thumb-checked-hue: default;\n\n $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);\n $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);\n\n .mat-slide-toggle {\n @include _checked-color($accent, $thumb-checked-hue);\n\n &.mat-primary {\n @include _checked-color($primary, $thumb-checked-hue);\n }\n\n &.mat-warn {\n @include _checked-color($warn, $thumb-checked-hue);\n }\n\n &:not(.mat-checked) .mat-ripple-element {\n // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n background-color: $ripple-unchecked-color;\n }\n }\n\n .mat-slide-toggle-thumb {\n @include private.private-theme-elevation(1, $config);\n background-color: theming.get-color-from-palette(palette.$grey-palette, $thumb-unchecked-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: $bar-unchecked-color;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-slide-toggle-content {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _inner-content-theme($palette) {\n .mat-slider-track-fill,\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: theming.get-color-from-palette($palette);\n }\n\n .mat-slider-thumb-label-text {\n color: theming.get-color-from-palette($palette, default-contrast);\n }\n\n .mat-slider-focus-ring {\n $opacity: 0.2;\n $color: theming.get-color-from-palette($palette, default, $opacity);\n background-color: $color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($color) != color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active);\n $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-labeled-min-value-thumb-color:\n theming.get-color-from-palette($foreground, slider-min);\n $mat-slider-labeled-min-value-thumb-label-color:\n theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-tick-opacity: 0.7;\n $mat-slider-tick-color:\n theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity);\n $mat-slider-tick-size: 2px;\n\n .mat-slider-track-background {\n background-color: $mat-slider-off-color;\n }\n\n .mat-slider {\n &.mat-primary {\n @include _inner-content-theme($primary);\n }\n\n &.mat-accent {\n @include _inner-content-theme($accent);\n }\n\n &.mat-warn {\n @include _inner-content-theme($warn);\n }\n }\n\n .mat-slider:hover,\n .mat-slider.cdk-focused {\n .mat-slider-track-background {\n background-color: $mat-slider-off-focused-color;\n }\n }\n\n .mat-slider.mat-slider-disabled {\n .mat-slider-track-background,\n .mat-slider-track-fill,\n .mat-slider-thumb {\n background-color: $mat-slider-disabled-color;\n }\n\n &:hover {\n .mat-slider-track-background {\n background-color: $mat-slider-disabled-color;\n }\n }\n }\n\n .mat-slider.mat-slider-min-value {\n .mat-slider-focus-ring {\n $opacity: 0.12;\n $color: theming.get-color-from-palette($foreground, base, $opacity);\n background-color: $color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($color) != color) {\n opacity: $opacity;\n }\n }\n\n &.mat-slider-thumb-label-showing {\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: $mat-slider-labeled-min-value-thumb-color;\n }\n\n &.cdk-focused {\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: $mat-slider-labeled-min-value-thumb-label-color;\n }\n }\n }\n\n &:not(.mat-slider-thumb-label-showing) {\n .mat-slider-thumb {\n border-color: $mat-slider-off-color;\n background-color: transparent;\n }\n\n &:hover,\n &.cdk-focused {\n .mat-slider-thumb {\n border-color: $mat-slider-off-focused-color;\n }\n\n &.mat-slider-disabled .mat-slider-thumb {\n border-color: $mat-slider-disabled-color;\n }\n }\n }\n }\n\n .mat-slider-has-ticks .mat-slider-wrapper::after {\n border-color: $mat-slider-tick-color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n\n .mat-slider-horizontal .mat-slider-ticks {\n background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n // Firefox doesn't draw the gradient correctly with 'to right'\n // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).\n background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n\n .mat-slider-vertical .mat-slider-ticks {\n background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-slider-thumb-label-text {\n font: {\n family: typography-utils.font-family($config);\n size: typography-utils.font-size($config, caption);\n weight: typography-utils.font-weight($config, body-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './stepper-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-step-header {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover:not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n background-color: theming.get-color-from-palette($background, hover);\n }\n\n &:hover[aria-disabled='true'] {\n cursor: default;\n }\n\n // On touch devices the :hover state will linger on the element after a tap.\n // Reset it via `@media` after the declaration, because the media query isn't\n // supported by all browsers yet.\n @media (hover: none) {\n &:hover {\n background: none;\n }\n }\n\n .mat-step-label,\n .mat-step-optional {\n // TODO(josephperrott): Update to using a corrected disabled-text contrast\n // instead of secondary-text.\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-step-icon {\n // TODO(josephperrott): Update to using a corrected disabled-text contrast\n // instead of secondary-text.\n background-color: theming.get-color-from-palette($foreground, secondary-text);\n color: theming.get-color-from-palette($primary, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($primary);\n color: theming.get-color-from-palette($primary, default-contrast);\n }\n\n &.mat-accent {\n .mat-step-icon {\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($accent);\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n }\n\n &.mat-warn {\n .mat-step-icon {\n color: theming.get-color-from-palette($warn, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($warn);\n color: theming.get-color-from-palette($warn, default-contrast);\n }\n }\n\n .mat-step-icon-state-error {\n background-color: transparent;\n color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-step-label.mat-step-label-active {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-step-label.mat-step-label-error {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n\n .mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: theming.get-color-from-palette($background, card);\n }\n\n .mat-stepper-vertical-line::before {\n border-left-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-horizontal-stepper-header::before,\n .mat-horizontal-stepper-header::after,\n .mat-stepper-horizontal-line {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-step-label {\n font: {\n size: typography-utils.font-size($config, body-1);\n weight: typography-utils.font-weight($config, body-1);\n };\n }\n\n .mat-step-sub-label-error {\n font-weight: normal;\n }\n\n .mat-step-label-error {\n font-size: typography-utils.font-size($config, body-2);\n }\n\n .mat-step-label-selected {\n font: {\n size: typography-utils.font-size($config, body-2);\n weight: typography-utils.font-weight($config, body-2);\n };\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(stepper-variables.$density-config,\n $density-scale, height);\n $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-horizontal-stepper-header {\n height: $height;\n }\n\n .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n .mat-vertical-stepper-header {\n padding: $vertical-padding stepper-variables.$side-gap;\n }\n\n // Ensures that the vertical lines for the step content exceed into the step\n // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.\n .mat-stepper-vertical-line::before {\n top: stepper-variables.$line-gap - $vertical-padding;\n bottom: stepper-variables.$line-gap - $vertical-padding;\n }\n\n // Ensures that the horizontal lines for the step header are centered vertically.\n .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n &::after, &::before {\n top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n }\n }\n\n // Ensures that the horizontal line for the step content is aligned centered vertically.\n .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n $header-border: 1px solid theming.get-color-from-palette($foreground, divider);\n\n .mat-tab-nav-bar,\n .mat-tab-header {\n border-bottom: $header-border;\n }\n\n .mat-tab-group-inverted-header {\n .mat-tab-nav-bar,\n .mat-tab-header {\n border-top: $header-border;\n border-bottom: none;\n }\n }\n\n .mat-tab-label, .mat-tab-link {\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-tab-disabled {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n\n .mat-tab-header-pagination-chevron {\n border-color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n // Remove header border when there is a background color\n .mat-tab-group[class*='mat-background-'] > .mat-tab-header,\n .mat-tab-nav-bar[class*='mat-background-'] {\n border-bottom: none;\n border-top: none;\n }\n\n .mat-tab-group, .mat-tab-nav-bar {\n $theme-colors: (\n primary: $primary,\n accent: $accent,\n warn: $warn\n );\n\n @each $name, $color in $theme-colors {\n // Set the foreground color of the tabs\n &.mat-#{$name} {\n @include _label-focus-color($color);\n @include _ink-bar-color($color);\n\n // Override ink bar when background color is the same\n &.mat-background-#{$name} {\n > .mat-tab-header, > .mat-tab-link-container {\n @include _ink-bar-color($color, default-contrast);\n }\n }\n }\n }\n\n @each $name, $color in $theme-colors {\n // Set background color of the tabs and override focus color\n &.mat-background-#{$name} {\n @include _label-focus-color($color);\n @include _tabs-background($color);\n }\n }\n }\n}\n\n@mixin _ink-bar-color($color, $hue: default) {\n .mat-ink-bar {\n background-color: theming.get-color-from-palette($color, $hue);\n }\n}\n\n@mixin _label-focus-color($tab-focus-color) {\n .mat-tab-label,\n .mat-tab-link {\n &.cdk-keyboard-focused,\n &.cdk-program-focused {\n &:not(.mat-tab-disabled) {\n background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3);\n }\n }\n }\n}\n\n@mixin _tabs-background($background-color) {\n // Note that these selectors target direct descendants so\n // that the styles don't apply to any nested tab groups.\n\n // Set background color for the tab group\n > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {\n background-color: theming.get-color-from-palette($background-color);\n }\n\n // Set labels to contrast against background\n > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {\n color: theming.get-color-from-palette($background-color, default-contrast);\n\n &.mat-tab-disabled {\n color: theming.get-color-from-palette($background-color, default-contrast, 0.4);\n }\n }\n\n // Set pagination chevrons to contrast background\n > .mat-tab-header .mat-tab-header-pagination-chevron,\n > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n > .mat-tab-link-container .mat-focus-indicator::before,\n > .mat-tab-header .mat-focus-indicator::before {\n border-color: theming.get-color-from-palette($background-color, default-contrast);\n }\n\n > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n border-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n opacity: 0.4;\n }\n\n // Set ripples color to be the contrast color of the new background. Otherwise the ripple\n // color will be based on the app background color.\n > .mat-tab-header .mat-ripple-element,\n > .mat-tab-link-container .mat-ripple-element,\n > .mat-tab-header-pagination .mat-ripple-element {\n // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n background-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n opacity: 0.12;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tab-group {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-tab-label, .mat-tab-link {\n font: {\n family: typography-utils.font-family($config, button);\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/style/variables';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './toolbar-variables';\n\n@mixin _height($height) {\n .mat-toolbar-multiple-rows {\n min-height: $height;\n }\n .mat-toolbar-row, .mat-toolbar-single-row {\n height: $height;\n }\n}\n\n@mixin _palette-styles($palette) {\n background: theming.get-color-from-palette($palette);\n color: theming.get-color-from-palette($palette, default-contrast);\n}\n\n@mixin _form-field-overrides {\n .mat-form-field-underline,\n .mat-form-field-ripple,\n .mat-focused .mat-form-field-ripple {\n background-color: currentColor;\n }\n\n .mat-form-field-label,\n .mat-focused .mat-form-field-label,\n .mat-select-value,\n .mat-select-arrow,\n .mat-form-field.mat-focused .mat-select-arrow {\n color: inherit;\n }\n\n .mat-input-element {\n caret-color: currentColor;\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-toolbar {\n background: theming.get-color-from-palette($background, app-bar);\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-primary {\n @include _palette-styles($primary);\n }\n\n &.mat-accent {\n @include _palette-styles($accent);\n }\n\n &.mat-warn {\n @include _palette-styles($warn);\n }\n\n @include _form-field-overrides;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-toolbar,\n .mat-toolbar h1,\n .mat-toolbar h2,\n .mat-toolbar h3,\n .mat-toolbar h4,\n .mat-toolbar h5,\n .mat-toolbar h6 {\n @include typography-utils.typography-level($config, title);\n margin: 0;\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height-desktop: compatibility.private-density-prop-value(\n toolbar-variables.$desktop-density-config, $density-scale, height);\n $height-mobile: compatibility.private-density-prop-value(\n toolbar-variables.$mobile-density-config, $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n // Set the default height for the toolbar.\n @include _height($height-desktop);\n\n // As per specs, toolbars should have a different height in mobile devices. This has been\n // specified in the old guidelines and is still observable in the new specifications by\n // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy\n @media (variables.$xsmall) {\n @include _height($height-mobile);\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$target-height: 22px;\n$font-size: 10px;\n$vertical-padding: math.div($target-height - $font-size, 2);\n\n$handset-target-height: 30px;\n$handset-font-size: 14px;\n$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n\n .mat-tooltip {\n background: theming.get-color-from-palette($background, tooltip, 0.9);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tooltip {\n font-family: typography-utils.font-family($config);\n font-size: $font-size;\n padding-top: $vertical-padding;\n padding-bottom: $vertical-padding;\n }\n\n .mat-tooltip-handset {\n font-size: $handset-font-size;\n padding-top: $handset-vertical-padding;\n padding-bottom: $handset-vertical-padding;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-list-base {\n .mat-list-item {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-list-option {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-subheader {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-list-item-disabled {\n background-color: theming.get-color-from-palette($background, disabled-list-option);\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n\n .mat-list-option,\n .mat-nav-list .mat-list-item,\n .mat-action-list .mat-list-item {\n &:hover, &:focus {\n background: theming.get-color-from-palette($background, 'hover');\n }\n }\n\n .mat-list-single-selected-option {\n &, &:hover, &:focus {\n background: theming.get-color-from-palette($background, hover, 0.12);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n $font-family: typography-utils.font-family($config);\n\n .mat-list-item {\n font-family: $font-family;\n }\n\n .mat-list-option {\n font-family: $font-family;\n }\n\n // Default list\n .mat-list-base {\n .mat-list-item {\n font-size: typography-utils.font-size($config, subheading-2);\n @include list-common.base(typography-utils.font-size($config, body-1));\n }\n\n .mat-list-option {\n font-size: typography-utils.font-size($config, subheading-2);\n @include list-common.base(typography-utils.font-size($config, body-1));\n }\n\n .mat-subheader {\n font-family: typography-utils.font-family($config, body-2);\n font-size: typography-utils.font-size($config, body-2);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n }\n\n // Dense list\n .mat-list-base[dense] {\n .mat-list-item {\n font-size: typography-utils.font-size($config, caption);\n @include list-common.base(typography-utils.font-size($config, caption));\n }\n\n .mat-list-option {\n font-size: typography-utils.font-size($config, caption);\n @include list-common.base(typography-utils.font-size($config, caption));\n }\n\n .mat-subheader {\n font-family: $font-family;\n font-size: typography-utils.font-size($config, caption);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-option {\n color: theming.get-color-from-palette($foreground, text);\n\n &:hover:not(.mat-option-disabled),\n &:focus:not(.mat-option-disabled) {\n background: theming.get-color-from-palette($background, hover);\n }\n\n // In multiple mode there is a checkbox to show that the option is selected.\n &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n background: theming.get-color-from-palette($background, hover);\n }\n\n &.mat-active {\n background: theming.get-color-from-palette($background, hover);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n &.mat-option-disabled {\n color: theming.get-color-from-palette($foreground, hint-text);\n }\n }\n\n .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($primary, text);\n }\n\n .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($accent, text);\n }\n\n .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($warn, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-option {\n font: {\n family: typography-utils.font-family($config);\n size: typography-utils.font-size($config, subheading-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n\n .mat-optgroup-label {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-optgroup-disabled .mat-optgroup-label {\n color: theming.get-color-from-palette($foreground, hint-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-optgroup-label {\n @include typography-utils.typography-level($config, body-2);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n@use '../core/theming/palette';\n@use '../core/style/private';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $accent: map.get($config, accent);\n\n .mat-snack-bar-container {\n // Use the primary text on the dark theme, even though the lighter one uses\n // a secondary, because the contrast on the light primary text is poor.\n color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text);\n background: if($is-dark-theme, map.get(palette.$grey-palette, 50), #323232);\n\n @include private.private-theme-elevation(6, $config);\n }\n\n .mat-simple-snackbar-action {\n color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-simple-snackbar {\n font: {\n family: typography-utils.font-family($config, body-1);\n size: typography-utils.font-size($config, body-1);\n }\n }\n\n .mat-simple-snackbar-action {\n line-height: 1;\n font: {\n family: inherit;\n size: inherit;\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './tree-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-tree {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tree {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n font-weight: typography-utils.font-weight($config, body-1);\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(tree-variables.$density-config,\n $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-tree-node {\n min-height: $height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use '@angular/cdk';\n\n@mixin ripple() {\n // The host element of an mat-ripple directive should always have a position of \"absolute\" or\n // \"relative\" so that the ripples inside are correctly positioned relatively to the container.\n .mat-ripple {\n overflow: hidden;\n\n // By default, every ripple container should have position: relative in favor of creating an\n // easy API for developers using the MatRipple directive.\n position: relative;\n\n // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,\n // because we don't want all ripple containers to have their own layer since they're used in a\n // lot of places and the layer is only relevant while animating. Note that ideally we'd use\n // the `contain` property here (see #13175), because `:empty` can be broken by having extra\n // text inside the element, but it isn't very well supported yet.\n &:not(:empty) {\n transform: translateZ(0);\n }\n }\n\n .mat-ripple.mat-ripple-unbounded {\n overflow: visible;\n }\n\n .mat-ripple-element {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n\n transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n\n // We use a 3d transform here in order to avoid an issue in Safari where\n // the ripples aren't clipped when inside the shadow DOM (see #24028).\n transform: scale3d(0, 0, 0);\n\n // In high contrast mode the ripple is opaque, causing it to obstruct the content.\n @include cdk.high-contrast(active, off) {\n display: none;\n }\n }\n}\n","/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element\n/// to make that element visually hidden while remaining available to assistive technology.\n@mixin a11y-visually-hidden() {\n .cdk-visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n\n // This works around a Chrome bug that can cause the tab to crash when large amounts of\n // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444\n white-space: nowrap;\n\n // Avoid browsers rendering the focus ring in some cases.\n outline: 0;\n\n // Avoid some cases where the browser will still render the native controls (see #9049).\n -webkit-appearance: none;\n -moz-appearance: none;\n\n // We need at least one of top/bottom/left/right in order to prevent cases where the\n // absolute-positioned element is pushed down and can affect scrolling (see #24597).\n // `left` was chosen here, because it's the least likely to break overrides where the\n // element might have been positioned (e.g. `mat-checkbox`).\n left: 0;\n\n [dir='rtl'] & {\n left: auto;\n right: 0;\n }\n }\n}\n\n/// @deprecated Use `a11y-visually-hidden`.\n@mixin a11y() {\n @include a11y-visually-hidden;\n}\n\n/// Emits the mixin's content nested under `$selector-context` if `$selector-context`\n/// is non-empty.\n/// @param {String} selector-context The selector under which to nest the mixin's content.\n@mixin _optionally-nest-content($selector-context) {\n @if ($selector-context == '') {\n @content;\n }\n @else {\n #{$selector-context} {\n @content;\n }\n }\n}\n\n/// Applies styles for users in high contrast mode. Note that this only applies\n/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n/// attribute, however Chrome handles high contrast differently.\n///\n/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be\n/// `white-on-black` or `black-on-white`.\n/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:\n/// * `on` - works for `Emulated`, `Native`, and `ShadowDom`\n/// * `off` - works for `None`\n/// * `any` - works for all encapsulation modes by emitting the CSS twice (default).\n@mixin high-contrast($target: active, $encapsulation: 'any') {\n @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {\n @error 'Unknown cdk-high-contrast value \"#{$target}\" provided. ' +\n 'Allowed values are \"active\", \"black-on-white\", and \"white-on-black\"';\n }\n\n @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {\n @error 'Unknown cdk-high-contrast encapsulation \"#{$encapsulation}\" provided. ' +\n 'Allowed values are \"on\", \"off\", and \"any\"';\n }\n\n // If the selector context has multiple parts, such as `.section, .region`, just doing\n // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the\n // context. We address this by nesting the selector context under .cdk-high-contrast.\n @at-root {\n $selector-context: #{&};\n\n @if ($encapsulation != 'on') {\n // Note that if this selector is updated, the same change has to be made inside\n // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.\n .cdk-high-contrast-#{$target} {\n @include _optionally-nest-content($selector-context) {\n @content;\n }\n }\n }\n\n @if ($encapsulation != 'off') {\n .cdk-high-contrast-#{$target} :host {\n @include _optionally-nest-content($selector-context) {\n @content;\n }\n }\n }\n }\n}\n","// We want overlays to always appear over user content, so set a baseline\n// very high z-index for the overlay container, which is where we create the new\n// stacking context for all overlays.\n$overlay-container-z-index: 1000 !default;\n$overlay-z-index: 1000 !default;\n$overlay-backdrop-z-index: 1000 !default;\n\n// Background color for all of the backdrops\n$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;\n\n// Default backdrop animation is based on the Material Design swift-ease-out.\n$backdrop-animation-duration: 400ms !default;\n$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n\n/// Emits structural styles required for cdk/overlay to function.\n@mixin overlay() {\n .cdk-overlay-container, .cdk-global-overlay-wrapper {\n // Disable events from being captured on the overlay container.\n pointer-events: none;\n\n // The container should be the size of the viewport.\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n }\n\n // The overlay-container is an invisible element which contains all individual overlays.\n .cdk-overlay-container {\n position: fixed;\n z-index: $overlay-container-z-index;\n\n &:empty {\n // Hide the element when it doesn't have any child nodes. This doesn't\n // include overlays that have been detached, rather than disposed.\n display: none;\n }\n }\n\n // We use an extra wrapper element in order to use make the overlay itself a flex item.\n // This makes centering the overlay easy without running into the subpixel rendering\n // problems tied to using `transform` and without interfering with the other position\n // strategies.\n .cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: $overlay-z-index;\n }\n\n // A single overlay pane.\n .cdk-overlay-pane {\n // Note: it's important for this one to start off `absolute`,\n // in order for us to be able to measure it correctly.\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n z-index: $overlay-z-index;\n\n // For connected-position overlays, we set `display: flex` in\n // order to force `max-width` and `max-height` to take effect.\n display: flex;\n max-width: 100%;\n max-height: 100%;\n }\n\n .cdk-overlay-backdrop {\n // TODO(jelbourn): reuse sidenav fullscreen mixin.\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n\n z-index: $overlay-backdrop-z-index;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;\n opacity: 0;\n\n &.cdk-overlay-backdrop-showing {\n opacity: 1;\n\n // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because\n // this file will be copied to the top-level `cdk` package when putting together the files\n // for npm. Any relative import paths we use here will become invalid once the file is copied.\n .cdk-high-contrast-active & {\n // In high contrast mode the rgba background will become solid\n // so we need to fall back to making it opaque using `opacity`.\n opacity: 0.6;\n }\n }\n }\n\n .cdk-overlay-dark-backdrop {\n background: $overlay-backdrop-color;\n }\n\n .cdk-overlay-transparent-backdrop {\n // Define a transition on the visibility so that the `transitionend` event can fire immediately.\n transition: visibility 1ms linear, opacity 1ms linear;\n visibility: hidden;\n opacity: 1;\n\n // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from\n // capturing the user's mouse scroll events. Since we also can't use something like\n // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at\n // all and using `opacity` to make the element transparent.\n &.cdk-overlay-backdrop-showing {\n opacity: 0;\n visibility: visible;\n }\n }\n\n .cdk-overlay-backdrop-noop-animation {\n transition: none;\n }\n\n // Overlay parent element used with the connected position strategy. Used to constrain the\n // overlay element's size to fit within the viewport.\n .cdk-overlay-connected-position-bounding-box {\n position: absolute;\n z-index: $overlay-z-index;\n\n // We use `display: flex` on this element exclusively for centering connected overlays.\n // When *not* centering, a top/left/bottom/right will be set which overrides the normal\n // flex layout.\n display: flex;\n\n // We use the `column` direction here to avoid some flexbox issues in Edge\n // when using the \"grow after open\" options.\n flex-direction: column;\n\n // Add some dimensions so the element has an `innerText` which some people depend on in tests.\n min-width: 1px;\n min-height: 1px;\n }\n\n // Used when disabling global scrolling.\n .cdk-global-scrollblock {\n position: fixed;\n\n // Necessary for the content not to lose its width. Note that we're using 100%, instead of\n // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width\n // that the element had before we made it `fixed`.\n width: 100%;\n\n // Note: this will always add a scrollbar to whatever element it is on, which can\n // potentially result in double scrollbars. It shouldn't be an issue, because we won't\n // block scrolling on a page that doesn't have a scrollbar in the first place.\n overflow-y: scroll;\n }\n}\n","// Structural styles for the autosize text fields.\n@mixin text-field-autosize() {\n // Remove the resize handle on autosizing textareas, because whatever height\n // the user resized to will be overwritten once they start typing again.\n textarea.cdk-textarea-autosize {\n resize: none;\n }\n\n // This class is temporarily applied to the textarea when it is being measured. It is immediately\n // removed when measuring is complete. We use `!important` rules here to make sure user-specified\n // rules do not interfere with the measurement.\n textarea.cdk-textarea-autosize-measuring {\n @include _autosize-measuring-base;\n height: auto !important;\n overflow: hidden !important;\n }\n\n // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need\n // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's\n // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,\n // because the measurements there don't seem to be affected by the `height: 0`, whereas on other\n // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.\n // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784\n textarea.cdk-textarea-autosize-measuring-firefox {\n @include _autosize-measuring-base;\n height: 0 !important;\n }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin text-field-autofill() {\n // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled\n // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is\n // needed to prevent LibSass from stripping the keyframes out.\n // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7\n @keyframes cdk-text-field-autofill-start {/*!*/}\n @keyframes cdk-text-field-autofill-end {/*!*/}\n\n .cdk-text-field-autofill-monitored:-webkit-autofill {\n // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n animation: cdk-text-field-autofill-start 0s 1ms;\n }\n\n .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n animation: cdk-text-field-autofill-end 0s 1ms;\n }\n}\n\n@mixin _autosize-measuring-base {\n // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect\n // measurement. We just have to account for it later and subtract it off the final result.\n padding: 2px 0 !important;\n box-sizing: content-box !important;\n}\n\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$autofill-color-frame-count: 0;\n\n// Mixin used to apply custom background and foreground colors to an autofilled text field.\n// Based on: https://stackoverflow.com/questions/2781549/\n// removing-input-background-colour-for-chrome-autocomplete#answer-37432260\n@mixin text-field-autofill-color($background, $foreground:'') {\n @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {\n to {\n background: $background;\n @if $foreground != '' { color: $foreground; }\n }\n }\n\n &:-webkit-autofill {\n animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n }\n\n &.cdk-text-field-autofill-monitored:-webkit-autofill {\n // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart\n // event won't fire.\n animation: cdk-text-field-autofill-start 0s 1ms,\n cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n }\n\n $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;\n}\n\n// @deprecated Use `autosize` and `autofill` instead.\n@mixin text-field {\n @include text-field-autosize();\n @include text-field-autofill();\n}\n","@use 'sass:map';\n@use '@angular/cdk';\n@use '../style/layout-common';\n\n// Private sass variables that will be used as reference throughout component stylesheets.\n$default-border-width: 3px;\n$default-border-style: solid;\n$default-border-color: transparent;\n$default-border-radius: 4px;\n\n// Mixin that renders the focus indicator structural styles.\n@mixin structural-styling($prefix) {\n .#{$prefix}-focus-indicator {\n position: relative;\n\n &::before {\n @include layout-common.fill();\n box-sizing: border-box;\n pointer-events: none;\n display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.\n border: var(\n --#{$prefix}-focus-indicator-border-width,\n #{$default-border-width}\n )\n var(\n --#{$prefix}-focus-indicator-border-style,\n #{$default-border-style}\n )\n var(\n --#{$prefix}-focus-indicator-border-color,\n #{$default-border-color}\n );\n border-radius: var(\n --#{$prefix}-focus-indicator-border-radius,\n #{$default-border-radius}\n );\n }\n\n // By default, render the focus indicator when the focus indicator host element takes focus.\n // Defining a pseudo element's content will cause it to render.\n &:focus::before {\n content: '';\n }\n }\n\n // Enable the indicator in high contrast mode.\n @include cdk.high-contrast(active, off) {\n @include customize-focus-indicators((display: block), $prefix);\n }\n}\n\n// Generates CSS variable declarations from a map.\n@mixin _output-variables($map) {\n @each $key, $value in $map {\n @if ($value) {\n --#{$key}: #{$value};\n }\n }\n}\n\n// Mixin that dedups CSS variables for the strong-focus-indicators mixin.\n@mixin customize-focus-indicators($config, $prefix) {\n $border-style: map.get($config, border-style);\n $border-width: map.get($config, border-width);\n $border-radius: map.get($config, border-radius);\n $border-color: map.get($config, border-color);\n $display: map.get($config, display);\n $map: (\n '#{$prefix}-focus-indicator-border-style': $border-style,\n '#{$prefix}-focus-indicator-border-width': $border-width,\n '#{$prefix}-focus-indicator-border-radius': $border-radius,\n '#{$prefix}-focus-indicator-border-color': $border-color,\n '#{$prefix}-focus-indicator-display': $display,\n );\n\n @if (&) {\n @include _output-variables($map);\n }\n @else {\n // We use `html` here instead of `:root`, because the\n // latter causes some issues with internal tooling.\n html {\n @include _output-variables($map);\n }\n }\n}\n","// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.\n@mixin fill {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../theming/theming';\n\n// Colors for the ripple elements.\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $foreground-base: map.get($foreground, base);\n $color-opacity: 0.1;\n\n .mat-ripple-element {\n // If the ripple color is resolves to a color *type*, we can use it directly, otherwise\n // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.\n @if (meta.type-of($foreground-base) == color) {\n background-color: rgba($foreground-base, $color-opacity);\n }\n @else {\n background-color: $foreground-base;\n opacity: $color-opacity;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {\n $color: theming.get-color-config($theme);\n @if $color != null {\n @include color($color);\n }\n }\n}\n","@use 'sass:map';\n@use '../../theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n\n // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n // this does not work well with elements layered on top of one another. To get around this we\n // blend the colors together based on the base color and the theme background.\n $white-30pct-opacity-on-dark: #686868;\n $black-26pct-opacity-on-light: #b0b0b0;\n $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';\n\n .mat-pseudo-checkbox {\n color: theming.get-color-from-palette(map.get($config, foreground), secondary-text);\n\n &::after {\n color: theming.get-color-from-palette($background, background);\n }\n }\n\n .mat-pseudo-checkbox-disabled {\n color: $disabled-color;\n }\n\n .mat-primary .mat-pseudo-checkbox-checked,\n .mat-primary .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, primary));\n }\n\n // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the\n // theme from their parent, rather than implementing their own theming, which is why we\n // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`\n // in order to allow for the color to be overwritten if the checkbox is inside a parent that\n // has `mat-accent` and is placed inside another parent that has `mat-primary`.\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate,\n .mat-accent .mat-pseudo-checkbox-checked,\n .mat-accent .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, accent));\n }\n\n .mat-warn .mat-pseudo-checkbox-checked,\n .mat-warn .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, warn));\n }\n\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate {\n &.mat-pseudo-checkbox-disabled {\n background: $disabled-color;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'theming/theming';\n@use './style/private';\n@use './ripple/ripple-theme';\n@use './option/option-theme';\n@use './option/optgroup-theme';\n@use './selection/pseudo-checkbox/pseudo-checkbox-theme';\n@use './style/elevation';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n // Wrapper element that provides the theme background when the user's content isn't\n // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand\n // selector in case the mixin is included at the top level.\n .mat-app-background#{if(&, ', &.mat-app-background', '')} {\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n background-color: theming.get-color-from-palette($background, background);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n // Provides external CSS classes for each elevation value. Each CSS class is formatted as\n // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is\n // elevated.\n @for $zValue from 0 through 24 {\n .#{elevation.$prefix}#{$zValue} {\n @include private.private-theme-elevation($zValue, $config);\n }\n }\n\n // Marker that is used to determine whether the user has added a theme to their page.\n @at-root {\n .mat-theme-loaded-marker {\n display: none;\n }\n }\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that\n // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then\n // the imported themes (such as `mat-ripple-theme`) should not report again.\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {\n @include ripple-theme.theme($theme);\n @include option-theme.theme($theme);\n @include optgroup-theme.theme($theme);\n @include pseudo-checkbox-theme.theme($theme);\n\n $color: theming.get-color-config($theme);\n @if $color != null {\n @include color($color);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'variables';\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://material.io/design/environment/elevation.html\n// Examples:\n//\n//\n// .mat-foo {\n// @include $mat-elevation(2);\n//\n// &:active {\n// @include $mat-elevation(8);\n// }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n@function _get-umbra-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.2), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 2px 1px -1px #{$shadow-color}',\n 2: '0px 3px 1px -2px #{$shadow-color}',\n 3: '0px 3px 3px -2px #{$shadow-color}',\n 4: '0px 2px 4px -1px #{$shadow-color}',\n 5: '0px 3px 5px -1px #{$shadow-color}',\n 6: '0px 3px 5px -1px #{$shadow-color}',\n 7: '0px 4px 5px -2px #{$shadow-color}',\n 8: '0px 5px 5px -3px #{$shadow-color}',\n 9: '0px 5px 6px -3px #{$shadow-color}',\n 10: '0px 6px 6px -3px #{$shadow-color}',\n 11: '0px 6px 7px -4px #{$shadow-color}',\n 12: '0px 7px 8px -4px #{$shadow-color}',\n 13: '0px 7px 8px -4px #{$shadow-color}',\n 14: '0px 7px 9px -4px #{$shadow-color}',\n 15: '0px 8px 9px -5px #{$shadow-color}',\n 16: '0px 8px 10px -5px #{$shadow-color}',\n 17: '0px 8px 11px -5px #{$shadow-color}',\n 18: '0px 9px 11px -5px #{$shadow-color}',\n 19: '0px 9px 12px -6px #{$shadow-color}',\n 20: '0px 10px 13px -6px #{$shadow-color}',\n 21: '0px 10px 13px -6px #{$shadow-color}',\n 22: '0px 10px 14px -6px #{$shadow-color}',\n 23: '0px 11px 14px -7px #{$shadow-color}',\n 24: '0px 11px 15px -7px #{$shadow-color}'\n );\n}\n\n@function _get-penumbra-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.14), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 1px 1px 0px #{$shadow-color}',\n 2: '0px 2px 2px 0px #{$shadow-color}',\n 3: '0px 3px 4px 0px #{$shadow-color}',\n 4: '0px 4px 5px 0px #{$shadow-color}',\n 5: '0px 5px 8px 0px #{$shadow-color}',\n 6: '0px 6px 10px 0px #{$shadow-color}',\n 7: '0px 7px 10px 1px #{$shadow-color}',\n 8: '0px 8px 10px 1px #{$shadow-color}',\n 9: '0px 9px 12px 1px #{$shadow-color}',\n 10: '0px 10px 14px 1px #{$shadow-color}',\n 11: '0px 11px 15px 1px #{$shadow-color}',\n 12: '0px 12px 17px 2px #{$shadow-color}',\n 13: '0px 13px 19px 2px #{$shadow-color}',\n 14: '0px 14px 21px 2px #{$shadow-color}',\n 15: '0px 15px 22px 2px #{$shadow-color}',\n 16: '0px 16px 24px 2px #{$shadow-color}',\n 17: '0px 17px 26px 2px #{$shadow-color}',\n 18: '0px 18px 28px 2px #{$shadow-color}',\n 19: '0px 19px 29px 2px #{$shadow-color}',\n 20: '0px 20px 31px 3px #{$shadow-color}',\n 21: '0px 21px 33px 3px #{$shadow-color}',\n 22: '0px 22px 35px 3px #{$shadow-color}',\n 23: '0px 23px 36px 3px #{$shadow-color}',\n 24: '0px 24px 38px 3px #{$shadow-color}'\n );\n}\n\n@function _get-ambient-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.12), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 1px 3px 0px #{$shadow-color}',\n 2: '0px 1px 5px 0px #{$shadow-color}',\n 3: '0px 1px 8px 0px #{$shadow-color}',\n 4: '0px 1px 10px 0px #{$shadow-color}',\n 5: '0px 1px 14px 0px #{$shadow-color}',\n 6: '0px 1px 18px 0px #{$shadow-color}',\n 7: '0px 2px 16px 1px #{$shadow-color}',\n 8: '0px 3px 14px 2px #{$shadow-color}',\n 9: '0px 3px 16px 2px #{$shadow-color}',\n 10: '0px 4px 18px 3px #{$shadow-color}',\n 11: '0px 4px 20px 3px #{$shadow-color}',\n 12: '0px 5px 22px 4px #{$shadow-color}',\n 13: '0px 5px 24px 4px #{$shadow-color}',\n 14: '0px 5px 26px 4px #{$shadow-color}',\n 15: '0px 6px 28px 5px #{$shadow-color}',\n 16: '0px 6px 30px 5px #{$shadow-color}',\n 17: '0px 6px 32px 5px #{$shadow-color}',\n 18: '0px 7px 34px 6px #{$shadow-color}',\n 19: '0px 7px 36px 6px #{$shadow-color}',\n 20: '0px 8px 38px 7px #{$shadow-color}',\n 21: '0px 8px 40px 7px #{$shadow-color}',\n 22: '0px 8px 42px 7px #{$shadow-color}',\n 23: '0px 9px 44px 8px #{$shadow-color}',\n 24: '0px 9px 46px 8px #{$shadow-color}'\n );\n}\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: variables.$fast-out-slow-in-timing-function;\n\n// The default color for elevation shadows.\n$color: black !default;\n\n// The default opacity scaling value for elevation shadows.\n$opacity: 1 !default;\n\n// Prefix for elevation-related selectors.\n$prefix: 'mat-elevation-z';\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin elevation($zValue, $color: $color, $opacity: $opacity) {\n @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {\n @error '$zValue must be a unitless number';\n }\n @if $zValue < 0 or $zValue > 24 {\n @error '$zValue must be between 0 and 24';\n }\n\n box-shadow: #{map.get(_get-umbra-map($color, $opacity), $zValue)},\n #{map.get(_get-penumbra-map($color, $opacity), $zValue)},\n #{map.get(_get-ambient-map($color, $opacity), $zValue)};\n}\n\n// Applies the elevation to an element in a manner that allows\n// consumers to override it via the Material elevation classes.\n@mixin overridable-elevation(\n $zValue,\n $color: $color,\n $opacity: $opacity) {\n &:not([class*='#{$prefix}']) {\n @include elevation($zValue, $color, $opacity);\n }\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n// transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// }\n@function private-transition-property-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function) {\n @return box-shadow #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin elevation-transition(\n $duration: $transition-duration,\n $easing: $transition-timing-function) {\n transition: private-transition-property-value($duration, $easing);\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n\n .mat-autocomplete-panel {\n @include private.private-theme-overridable-elevation(4, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n // Selected options in autocompletes should not be gray, but we\n // only want to override the background for selected options if\n // they are *not* in hover or focus state. This change has to be\n // made here because base option styles are shared between the\n // autocomplete and the select.\n .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: theming.get-color-from-palette($background, card);\n\n &:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($foreground, text);\n }\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n\n .mat-divider {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-divider-vertical {\n border-right-color: theming.get-color-from-palette($foreground, divider);\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@mixin private-expansion-focus {\n .mat-expansion-panel {\n & .mat-expansion-panel-header.cdk-keyboard-focused,\n & .mat-expansion-panel-header.cdk-program-focused,\n &:not(.mat-expanded) .mat-expansion-panel-header:hover {\n &:not([aria-disabled='true']) {\n @content;\n }\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n\n// Renders a gradient for showing the dashed line when the input is disabled.\n// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line\n// to match the Material Design spec.\n@mixin private-control-disabled-underline($color) {\n background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);\n background-size: 4px 100%;\n background-repeat: repeat-x;\n}\n\n// Figures out the color of the placeholder for a form control.\n// Used primarily to prevent the various form controls from\n// becoming out of sync since these colors aren't in a palette.\n@function private-control-placeholder-color($config) {\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n @return theming.get-color-from-palette($foreground, secondary-text,\n if($is-dark-theme, 0.5, 0.42));\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n@mixin standard-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n .mat-form-field-appearance-standard {\n .mat-form-field-underline {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled .mat-form-field-underline {\n @include form-common.private-control-disabled-underline($underline-color);\n }\n }\n}\n\n@mixin standard-typography($config-or-theme) {}\n\n@mixin private-form-field-standard-density($config-or-theme) {}\n\n@mixin standard-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include standard-color($color);\n }\n @if $density != null {\n @include private-form-field-standard-density($density);\n }\n @if $typography != null {\n @include standard-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-icon {\n &.mat-primary {\n color: theming.get-color-from-palette($primary, text);\n }\n\n &.mat-accent {\n color: theming.get-color-from-palette($accent, text);\n }\n\n &.mat-warn {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","// stylelint-disable material/no-prefixes\n@mixin user-select($value) {\n -webkit-user-select: $value;\n user-select: $value;\n}\n\n@mixin input-placeholder {\n &::placeholder {\n @content;\n }\n\n &::-moz-placeholder {\n @content;\n }\n\n &::-webkit-input-placeholder {\n @content;\n }\n\n // Note: this isn't necessary anymore since we don't support\n // IE, but it caused some presubmit failures in #23416.\n &:-ms-input-placeholder {\n @content;\n }\n}\n\n@mixin backface-visibility($value) {\n -webkit-backface-visibility: $value;\n backface-visibility: $value;\n}\n\n@mixin color-adjust($value) {\n -webkit-print-color-adjust: $value;\n color-adjust: $value;\n}\n\n@mixin private-background-clip($value) {\n -webkit-background-clip: $value;\n background-clip: $value;\n}\n\n@mixin clip-path($value) {\n -webkit-clip-path: $value;\n clip-path: $value;\n}\n// stylelint-enable\n","@use 'sass:map';\n// Color palettes from the Material Design spec.\n// See https://material.io/design/color/\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\n\n\n// @deprecated renamed to $dark-primary-text.\n// @breaking-change 8.0.0\n$black-87-opacity: rgba(black, 0.87);\n// @deprecated renamed to $light-primary-text.\n// @breaking-change 8.0.0\n$white-87-opacity: rgba(white, 0.87);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-12-opacity: rgba(black, 0.12);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-12-opacity: rgba(white, 0.12);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-6-opacity: rgba(black, 0.06);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-6-opacity: rgba(white, 0.06);\n\n$dark-primary-text: rgba(black, 0.87);\n$dark-secondary-text: rgba(black, 0.54);\n$dark-disabled-text: rgba(black, 0.38);\n$dark-dividers: rgba(black, 0.12);\n$dark-focused: rgba(black, 0.12);\n$light-primary-text: white;\n$light-secondary-text: rgba(white, 0.7);\n$light-disabled-text: rgba(white, 0.5);\n$light-dividers: rgba(white, 0.12);\n$light-focused: rgba(white, 0.12);\n\n$red-palette: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$pink-palette: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$purple-palette: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$deep-purple-palette: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$indigo-palette: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$blue-palette: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$light-blue-palette: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$cyan-palette: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$teal-palette: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$green-palette: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$light-green-palette: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$lime-palette: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$yellow-palette: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$amber-palette: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$orange-palette: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: black,\n )\n);\n\n$deep-orange-palette: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$brown-palette: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$grey-palette: (\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$gray-palette: $grey-palette;\n\n$blue-grey-palette: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$blue-gray-palette: $blue-grey-palette;\n\n\n// Background palette for light themes.\n$light-theme-background-palette: (\n status-bar: map.get($grey-palette, 300),\n app-bar: map.get($grey-palette, 100),\n background: map.get($grey-palette, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12),\n raised-button: white,\n focused-button: $dark-focused,\n selected-button: map.get($grey-palette, 300),\n selected-disabled-button: map.get($grey-palette, 400),\n disabled-button-toggle: map.get($grey-palette, 200),\n unselected-chip: map.get($grey-palette, 300),\n disabled-list-option: map.get($grey-palette, 200),\n tooltip: map.get($grey-palette, 700),\n);\n\n// Background palette for dark themes.\n$dark-theme-background-palette: (\n status-bar: black,\n app-bar: map.get($grey-palette, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map.get($grey-palette, 800),\n dialog: map.get($grey-palette, 800),\n disabled-button: rgba(white, 0.12),\n raised-button: map.get($grey-palette, 800),\n focused-button: $light-focused,\n selected-button: map.get($grey-palette, 900),\n selected-disabled-button: map.get($grey-palette, 800),\n disabled-button-toggle: black,\n unselected-chip: map.get($grey-palette, 700),\n disabled-list-option: rgba(white, 0.12),\n tooltip: map.get($grey-palette, 700),\n);\n\n// Foreground palette for light themes.\n$light-theme-foreground-palette: (\n base: black,\n divider: $dark-dividers,\n dividers: $dark-dividers,\n disabled: $dark-disabled-text,\n disabled-button: rgba(black, 0.26),\n disabled-text: $dark-disabled-text,\n elevation: black,\n hint-text: $dark-disabled-text,\n secondary-text: $dark-secondary-text,\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87),\n slider-min: rgba(black, 0.87),\n slider-off: rgba(black, 0.26),\n slider-off-active: rgba(black, 0.38),\n);\n\n// Foreground palette for dark themes.\n$dark-theme-foreground-palette: (\n base: white,\n divider: $light-dividers,\n dividers: $light-dividers,\n disabled: $light-disabled-text,\n disabled-button: rgba(white, 0.3),\n disabled-text: $light-disabled-text,\n elevation: black,\n hint-text: $light-disabled-text,\n secondary-text: $light-secondary-text,\n icon: white,\n icons: white,\n text: white,\n slider-min: white,\n slider-off: rgba(white, 0.3),\n slider-off-active: rgba(white, 0.3),\n);\n","@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:color';\n@use '../core/theming/theming';\n\n// Approximates the correct buffer color by using a mix between the theme color\n// and the theme's background color.\n@function _get-buffer-color($theme, $background) {\n $theme-color: theming.get-color-from-palette($theme);\n // Return fallback color if the theme uses variables to define colors.\n @if (meta.type-of($theme-color) != 'color' or meta.type-of($background) != 'color') {\n @return theming.get-color-from-palette($theme, lighter);\n }\n @return color.mix($theme-color, $background, $weight: 25%);\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get(map.get($config, background), background);\n\n .mat-progress-bar-background {\n fill: _get-buffer-color($primary, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($primary, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($primary);\n }\n\n .mat-progress-bar.mat-accent {\n .mat-progress-bar-background {\n fill: _get-buffer-color($accent, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($accent, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($accent);\n }\n }\n\n .mat-progress-bar.mat-warn {\n .mat-progress-bar-background {\n fill: _get-buffer-color($warn, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($warn, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-progress-spinner, .mat-spinner {\n circle {\n stroke: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent circle {\n stroke: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn circle {\n stroke: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $drawer-background-color: theming.get-color-from-palette($background, dialog);\n $drawer-container-background-color: theming.get-color-from-palette($background, background);\n $drawer-push-background-color: theming.get-color-from-palette($background, dialog);\n $drawer-side-border: solid 1px theming.get-color-from-palette($foreground, divider);\n\n .mat-drawer-container {\n background-color: $drawer-container-background-color;\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-drawer {\n background-color: $drawer-background-color;\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-drawer-push {\n background-color: $drawer-push-background-color;\n }\n\n &:not(.mat-drawer-side) {\n // The elevation of z-16 is noted in the design specifications.\n // See https://material.io/design/components/navigation-drawer.html\n @include private.private-theme-elevation(16, $config);\n }\n }\n\n .mat-drawer-side {\n border-right: $drawer-side-border;\n\n &.mat-drawer-end {\n border-left: $drawer-side-border;\n border-right: none;\n }\n }\n\n [dir='rtl'] .mat-drawer-side {\n border-left: $drawer-side-border;\n border-right: none;\n\n &.mat-drawer-end {\n border-left: none;\n border-right: $drawer-side-border;\n }\n }\n\n .mat-drawer-backdrop.mat-drawer-shown {\n $opacity: 0.6;\n $backdrop-color: theming.get-color-from-palette($background, card, $opacity);\n\n @if (meta.type-of($backdrop-color) == color) {\n // We use invert() here to have the darken the background color expected to be used. If the\n // background is light, we use a dark backdrop. If the background is dark,\n // we use a light backdrop.\n background-color: color.invert($backdrop-color);\n }\n @else {\n // If we couldn't resolve the backdrop color to a color value, fall back to using\n // `opacity` to make it opaque since its end value could be a solid color.\n background-color: $backdrop-color;\n opacity: $opacity;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-sort-header-arrow {\n $table-background: theming.get-color-from-palette($background, 'card');\n $text-color: theming.get-color-from-palette($foreground, secondary-text);\n\n // Because the arrow is made up of multiple elements that are stacked on top of each other,\n // we can't use the semi-transparent color from the theme directly. If the value is a color\n // *type*, we convert it into a solid color by taking the opacity from the rgba value and\n // using the value to determine the percentage of the background to put into foreground\n // when mixing the colors together. Otherwise, if it resolves to something different\n // (e.g. it resolves to a CSS variable), we use the color directly.\n @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {\n $text-opacity: opacity($text-color);\n color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);\n }\n @else {\n color: $text-color;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n"],"names":[],"sourceRoot":"webpack:///","x_google_ignoreList":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58]}