| 1 | {"version":3,"sources":["webpack:///mdc-select.scss","webpack:///./packages/mdc-select/mdc-select.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/line-ripple/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_variables.scss","webpack:///./packages/mdc-select/_select.scss","webpack:///./packages/mdc-select/_select-theme.scss","webpack:///./packages/mdc-select/_select-helper-text-theme.scss","webpack:///./packages/mdc-select/_select-icon-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/list/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/list/_evolution-mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/menu-surface/_mixins.scss","webpack:///./packages/mdc-select/_select-filled.scss","webpack:///./packages/mdc-select/_select-outlined.scss","webpack:///./packages/mdc-select/_select-ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/mdc-select/_select-helper-text.scss","webpack:///./packages/mdc-select/_select-icon.scss"],"names":[],"mappings":";;;;;;;AAAA,oBCsCE,iCCkSE,mCACA,+BCvQE,+GAYF,eAZE,0DAYF,gBAZE,6DAYF,0BAZE,0EAYF,wBAZE,iFAYF,CAZE,wEAYF,uBAZE,uEAYF,kBFhCE,OAEA,kCAEA,0BAEA,oBACA,gBACA,uBACA,mBACA,YACA,gBACA,sBAKA,yGAiBA,CAjBA,gGAiBA,CAjBA,qJAiBA,mEAbE,UAEA,mCAEA,2BAEA,iBAEA,kCAYN,WAEI,sCAKF,eAuJA,iBAEA,YACA,8FArJE,aAgKF,iBAEA,kCA9EF,+CAcM,CAdN,uCAcM,4BASN,uEAEI,CAFJ,+DAEI,kEApEF,GACE,wEAEE,CAFF,gEAEE,KAIF,0EACE,CADF,kEACE,0EAEA,CAFA,iEAEA,KAIF,kFACE,CADF,0EACE,2EAOA,CAPA,kEAOA,MAIF,wEAEE,CAFF,gEAEE,EAwCF,yDApEF,GACE,wEAEE,CAFF,gEAEE,KAIF,0EACE,CADF,kEACE,0EAEA,CAFA,iEAEA,KAIF,kFACE,CADF,0EACE,2EAOA,CAPA,kEAOA,MAIF,wEAEE,CAFF,gEAEE,6CGwIN,KACE,8DC1R6B,CD0R7B,sDC1R6B,8EDgS3B,CChS2B,qEDgS3B,IAGF,uGACE,CADF,+FACE,EHnJE,mCGwIN,KACE,8DC1R6B,CD0R7B,sDC1R6B,8EDgS3B,CChS2B,qEDgS3B,IAGF,uGACE,CADF,+FACE,8CAKJ,KACE,wCACE,CADF,gCACE,UACA,IAGF,uCACE,EAZA,oCAKJ,KACE,wCACE,CADF,gCACE,UACA,IAGF,uCACE,+CAIJ,KACE,wCACE,CADF,gCACE,wCACA,IAGF,SACE,EAXA,qCAIJ,KACE,wCACE,CADF,gCACE,wCACA,IAGF,SACE,mDE5SA,iBAEE,SACA,OACA,WACA,0BACA,WACA,0BAwCN,uBArCoB,0BAEhB,SACE,yBAGF,2BACE,CADF,mBACE,wBACA,UACA,UACA,yBAKF,0GACE,CADF,kGACE,CADF,uJACE,iCAMN,2BAEI,CAFJ,mBAEI,UACA,uCAIJ,SAEI,sBCzCJ,YA0UE,kBACA,MACA,QACA,OACA,sBACA,WACA,eACA,YACA,gBAEA,oBACA,8DC3SE,gBD+SA,0FAtVF,qBAII,YACA,qBACA,wBACA,oBACA,+BAIJ,qBJyBA,6BMlDY,gFDoDV,gBLFF,uDIbA,gBJaA,mCILI,kFCOF,qBLFF,+CIDA,aAEI,WACA,gCACA,0CAIJ,oBAEI,kBACA,eACA,uDAIJ,kBAEI,iEAIJ,yBAEI,2DAMJ,cJ7BA,kCIiCI,wIC/BF,gBLFF,4EIuCA,YAEI,aGnEN,mBAwFI,kBACA,mEC6/CF,yBR5jDA,6DQ4jDA,yBR5jDA,4DQ4nDA,wBR5nDA,gFQ4nDA,4BR5nDA,sDQ4nDA,yBR5nDA,mEQmpDE,wBRnpDF,uFQmpDE,YR/pDA,uCAYF,6DQmpDE,wBRnpDF,gESJA,wBTIA,0DSJA,yBTIA,0DUKA,yBVLA,oDUKA,yBVLA,uEWoBA,4DHwiDA,cR5jDA,6DQmpDE,QRnpDF,sDQ4nDA,cR5nDA,2DG0BA,4BH1BA,6LIkDF,qBJlDE,oDUKA,cVLA,0DSJA,cTIA,kCOkVF,OAEI,mCACA,CADA,0BACA,oBACA,iCAuEJ,iBP7ZE,oGKEE,cLFF,kFOmaF,cPnaE,gKKEE,cLFF,+CUhCA,UAlBQ,mEF22BV,UE32BU,qEHyWV,iBPvTE,uJKEE,iBLFF,qFOwUF,aPxUE,wKKEE,gBLFF,2COkEA,gBPlEA,sCO4EI,kBACA,kBACA,mBACA,uBACA,cACA,oBACA,6HA8IN,iBAGI,MACA,OACA,+DAIJ,oBAKI,sBACA,gEAaJ,SAEI,oCAIA,8DAKJ,SAEI,+BAIA,0EF3QA,gBLFF,yGO0RF,SAEI,iCAIA,qFAIJ,SAEI,yCAIA,qBA/MJ,WC9Fc,YDsGV,cACA,kBACA,sBACA,gBACA,aACA,eACA,qGTcE,CSdF,uCTcE,sCSwON,YAEI,wBACA,CADA,oBACA,CADA,eACA,oBACA,sBACA,WACA,YACA,YACA,YC/WiB,YDiXjB,aACA,UACA,6BAIA,cACA,4BAIJ,iCR1HE,mCACA,+BCvQE,+GAYF,eAZE,0DAYF,oBAZE,iEAYF,gBAZE,6DAYF,0BAZE,0EAYF,wBAZE,iFAYF,CAZE,wEAYF,uBAZE,uEAYF,uBDoQA,mBACA,gBACA,cQmHE,WACA,gBAEA,0EF1XA,gBE6XE,qEC6vCJ,aRxoDE,sCAYF,yFQ4nDA,aRxoDE,sCAYF,6GSQA,aTpBE,sCAYF,4EQmpDE,YR/pDA,qCAYF,gGQmpDE,YR/pDA,qCAYF,uBOoIF,cAqQE,oBACA,4EAnFF,iBPvTE,6LKEE,iBLFF,0FWoBA,0BJqIA,iBIjMA,sBACA,WACA,YACA,MACA,OACA,6BACA,sBACA,WACA,oBACA,yIA+CA,0BJyIA,uBIlLE,yGDmBJ,aVME,oQKEE,aLFF,wSYyhBF,UZriBI,wCAYF,qaY2kBF,UZvlBI,wCAYF,yCOuKF,mBAEI,mBACA,qBAIJ,iBP9KE,+EKEE,iBLFF,8EaohBF,WNjWsD,4DM0WtD,WNtWsD,kFAGlD,eAEI,yFAIJ,aRiJM,aAoBN,mBAEA,oBAIA,iGAaJ,oBAyCA,QACA,YQhOc,WRkOd,iBAxCI,gGAaJ,oBAwBA,QACA,YQ/NiB,WRiOjB,qBAvBI,kHQrMA,aRyIM,aAoBN,mBAEA,0HAiBJ,oBAyCA,QACA,YQzNqD,WR2NrD,iBAxCI,0CQ9KJ,cP9ME,2EauqBA,cbvqBA,qJKEE,iBLFF,gFa4qBA,gBb5qBA,iKKEE,aLFF,kFa4sBA,UN5f+C,YAAM,sGF9MnD,iBLFF,6Da0rBA,iBb1rBA,4HKEE,cLFF,sEa+rBA,gBb/rBA,0IKEE,gBLFF,2DQ6jCF,WAxkCO,aAglCO,qBT5xBV,iDA+EJ,oBAyCA,QACA,YS3aoB,WT6apB,iBAxCI,iGA6BJ,WAEI,mGSi+BF,WACE,oBACA,mBACA,sEAGF,YACE,yCAhjBJ,0BR/1BI,mDAYF,4BAZE,oDAYF,6HQwkDA,2BRxkDA,8DQwkDA,wBRxkDA,yEG0BA,uCH1BA,+EG0BA,uCH1BA,wEGgBA,2BH5BE,sDAYF,mEG0BA,uCH1BA,yCQo/CF,2BAEI,sDAKJ,yCAGI,sDMr+CJ,0BAII,4BACA,gEC5CF,6BAEI,CAFJ,qBAEI,UACA,yCAIJ,SfOA,kHKEE,YLFF,kFQm5CF,SRn5CE,8KKEE,YLFF,kFQo/CF,2BAEI,oFAKJ,yCAGI,0ELp+CF,2BHtCE,oDAYF,gFG0BA,2BHtCE,oDAYF,yEGgBA,2BH5BE,oDAYF,uBgB/CF,WAmCI,2CR+rCJ,WA9rCO,4EVoHP,+CAcM,CAdN,uCAcM,4EM6HN,gBAEI,oNN7IJ,kDAcM,CAdN,0CAcM,oNM6IJ,cAEI,sENtIN,mFAEI,CAFJ,2EAEI,8EApEF,GACE,2EAEE,CAFF,mEAEE,KAIF,0EACE,CADF,kEACE,6EAEA,CAFA,oEAEA,KAIF,kFACE,CADF,0EACE,8EAOA,CAPA,qEAOA,MAIF,2EAEE,CAFF,mEAEE,EAwCF,qEApEF,GACE,2EAEE,CAFF,mEAEE,KAIF,0EACE,CADF,kEACE,6EAEA,CAFA,oEAEA,KAIF,kFACE,CADF,0EACE,8EAOA,CAPA,qEAOA,MAIF,2EAEE,CAFF,mEAEE,2EMwBN,0BJ9HI,mDAYF,qFAZE,sDAYF,sKKEE,wBLFF,4BAZE,oDAYF,+BAZE,uDAYF,qDI6II,yEA3BN,4CA4BQ,0BAoBF,uEAZN,+DAaQ,4EAMR,wBJzKE,4BAZE,oDAYF,+BAZE,uDAYF,oMKEE,0BLdA,mDAYF,qFAZE,sDAYF,yBQ+0CE,0CAvcF,+DA4cI,yGHl1CF,cGi5BI,yBA4bJ,uGH70CA,gEGk1CE,0BALF,8CAjbF,8DAsbI,iHHl1CF,aGu6BI,yBAsaJ,+GH70CA,+DGk1CE,uEAoPJ,4BRxkDA,gEQwkDA,4BRxkDA,6OIkDF,gCJlDE,wcIkDF,gCJlDE,wWI8DF,gBIlEsB,wWJsDtB,oBJ9DI,+CAYF,2NIkDF,gCJlDE,2GIoRF,2BIswCI,2CQniDF,YAgBI,qBAEA,iBACA,sElBsHN,8EAEI,CAFJ,sEAEI,4EAzBJ,+CAcM,CAdN,uCAcM,4EM6HN,gBAEI,oNN7IJ,kDAcM,CAdN,0CAcM,oNM6IJ,cAEI,qGAvLN,eElIa,8EP4cb,WAEI,gFSi+BF,WACE,oBACA,mBACA,mDAGF,YACE,4DQr3CF,YAEI,YACA,UACA,6BAIA,yCAIJ,SAEI,2CAIJ,mBAEI,ShBlCJ,sHKEE,YLFF,+GI+EF,eInFsB,ySJsDtB,oBJ9DI,6CAYF,ogBIkDF,oBJ9DI,6CAYF,oaI8DF,gBIlEsB,oaJsDtB,oBJ9DI,6CAYF,yEQg7CF,SRh7CE,kLKEE,YLFF,iGFyGF,iEAIM,CAJN,yDAIM,8LO3GF,gEPiHI,COjHJ,wDPiHI,sFMiIR,gBAEI,wON7IJ,oEAIM,CAJN,4DAIM,qfO3GF,mEPiHI,COjHJ,2DPiHI,wOMiJN,cAEI,gFNtIN,gGAEI,CAFJ,wFAEI,2FApEF,GACE,6EAEE,CAFF,qEAEE,KAIF,0EACE,CADF,kEACE,+EAEA,CAFA,sEAEA,KAIF,kFACE,CADF,0EACE,gFAOA,CAPA,uEAOA,MAIF,6EAEE,CAFF,qEAEE,EAwCF,kFApEF,GACE,6EAEE,CAFF,qEAEE,KAIF,0EACE,CADF,kEACE,+EAEA,CAFA,sEAEA,KAIF,kFACE,CADF,0EACE,gFAOA,CAPA,uEAOA,MAIF,6EAEE,CAFF,qEAEE,mLAsCN,gGAEI,CAFJ,wFAEI,+FApEF,GACE,8EAEE,CAFF,sEAEE,KAIF,0EACE,CADF,kEACE,gFAEA,CAFA,uEAEA,KAIF,kFACE,CADF,0EACE,iFAOA,CAPA,wEAOA,MAIF,8EAEE,CAFF,sEAEE,EAwCF,sFApEF,GACE,8EAEE,CAFF,sEAEE,KAIF,0EACE,CADF,kEACE,gFAEA,CAFA,uEAEA,KAIF,kFACE,CADF,0EACE,iFAOA,CAPA,wEAOA,MAIF,8EAEE,CAFF,sEAEE,0IM0LN,2BIswCI,yCQh9CF,iBAEI,qHAIJ,eAGI,qBChIN,uBhBiFE,qBACA,oBACA,yBACA,iCACA,mCACA,0CAEA,8BAGE,gGAIJ,iBAGI,kBACA,UACA,oBACA,WACA,iDAIJ,2DAGI,UD5EA,qCAYF,gDC6EF,SDzFI,qCAYF,qECyFA,sDAEI,CAFJ,8CAEI,oEAIJ,KAEI,OAEA,2BACA,CADA,kBACA,uCACA,CADA,8BACA,+EAMJ,4BAEI,+BAEA,2FAMJ,+FAEI,CAFJ,uFAEI,6FAQJ,iDAEI,CAFJ,yCAEI,wGAKA,CALA,+FAKA,gGAcN,oBAGI,sBAEA,WACA,YACA,oEAKF,qCAEI,uCACA,gGiBvFJ,oClBxFE,8DAYF,iIkBqdF,YlBjeI,8CAYF,yKkBqdF,wBA9QI,alBnNA,8CAYF,yCiBtBA,iBhB4OA,MACA,OACA,WACA,YACA,oBAGA,0OiBjJA,qBlBxFE,4EAYF,2QkBqdF,YlBjeI,8CAYF,mTkBqdF,wBA9QI,alBnNA,8CAYF,+IkBiOE,+BAEI,sJAKF,wBA9QW,alB0Bb,8CAYF,gGkBqPA,6DlBrPA,oNkB4EA,qBlBxFE,4EAYF,qPkBqdF,YlBjeI,8CAYF,6RkBqdF,wBA9QI,alBnNA,8CAYF,oIkBiOE,+BAEI,2IAKF,wBA9QW,alB0Bb,8CAYF,gGkBqPA,6DlBrPA,yBmB/CF,QAEI,iBnB6CF,oDD0PA,mCACA,+BCvQE,6GAYF,kBAZE,2DAYF,oBAZE,+DAYF,gBAZE,2DAYF,8BAZE,4EAYF,wBAZE,+EAYF,CAZE,sEAYF,uBAZE,qEAYF,cDiVQ,aAoBN,mBAEA,oEMrWA,gBLFF,mDDwXF,oBAyCA,QACA,YoB3c2C,WpB6c3C,iBAxCI,yCoBlaJ,SAEI,sDAIA,iHAIJ,SAGI,kDCHJ,oBAEI,sBACA,YACA,qBACA,eACA,yBACA,CADA,qBACA,CADA,oBACA,CADA,gBACA,cACA,kBACA,6BAIA,kBACA,kDVQJ,gBVME,wIKEE,gBLFF,sFoBzCF,cAGI,oBACA,C","file":"mdc.select.min.css","sourcesContent":[".mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-floating-label,.mdc-floating-label[dir=rtl]{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required::after{margin-left:1px;margin-right:0px;content:\"*\"}[dir=rtl] .mdc-floating-label--required::after,.mdc-floating-label--required[dir=rtl]::after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard 250ms 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-106%) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-line-ripple::before,.mdc-line-ripple::after{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:\"\"}.mdc-line-ripple::before{border-bottom-width:1px}.mdc-line-ripple::before{z-index:1}.mdc-line-ripple::after{transform:scaleX(0);border-bottom-width:2px;opacity:0;z-index:2}.mdc-line-ripple::after{transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-line-ripple--active::after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating::after{opacity:0}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline,.mdc-notched-outline[dir=rtl]{text-align:right}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}[dir=rtl] .mdc-notched-outline__leading,.mdc-notched-outline__leading[dir=rtl]{border-left:none;border-right:1px solid}.mdc-notched-outline__trailing{border-left:none;border-right:1px solid;flex-grow:1}[dir=rtl] .mdc-notched-outline__trailing,.mdc-notched-outline__trailing[dir=rtl]{border-left:1px solid;border-right:none}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 12px * 2)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch,.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl]{padding-left:8px;padding-right:0}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-select{display:inline-flex;position:relative}.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text{color:rgba(0, 0, 0, 0.87)}.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0, 0, 0, 0.6)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:rgba(98, 0, 238, 0.87)}.mdc-select.mdc-select--disabled .mdc-floating-label{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:rgba(0, 0, 0, 0.54)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#6200ee;fill:var(--mdc-theme-primary, #6200ee)}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled)+.mdc-select-helper-text{color:rgba(0, 0, 0, 0.6)}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__icon{color:rgba(0, 0, 0, 0.54)}.mdc-select.mdc-select--disabled .mdc-select__icon{color:rgba(0, 0, 0, 0.38)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:red}.mdc-select.mdc-select--disabled .mdc-floating-label{color:GrayText}.mdc-select.mdc-select--disabled .mdc-line-ripple::before{border-bottom-color:GrayText}.mdc-select.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select.mdc-select--disabled .mdc-notched-outline__trailing{border-color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__icon{color:GrayText}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:GrayText}}.mdc-select .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-select .mdc-select__anchor{padding-left:16px;padding-right:0}[dir=rtl] .mdc-select .mdc-select__anchor,.mdc-select .mdc-select__anchor[dir=rtl]{padding-left:0;padding-right:16px}.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor{padding-left:0;padding-right:0}[dir=rtl] .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor,.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor[dir=rtl]{padding-left:0;padding-right:0}.mdc-select .mdc-select__icon{width:24px;height:24px;font-size:24px}.mdc-select .mdc-select__dropdown-icon{width:24px;height:24px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item,.mdc-select .mdc-select__menu .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:16px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:12px}[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic,.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic[dir=rtl]{margin-left:12px;margin-right:0}.mdc-select__dropdown-icon{margin-left:12px;margin-right:12px;display:inline-flex;position:relative;align-self:center;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active,.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{position:absolute;top:0;left:0}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-graphic{width:41.6666666667%;height:20.8333333333%}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:1;transition:opacity 75ms linear 75ms}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:0;transition:opacity 75ms linear}[dir=rtl] .mdc-select__dropdown-icon,.mdc-select__dropdown-icon[dir=rtl]{margin-left:12px;margin-right:12px}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:0;transition:opacity 49.5ms linear}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:1;transition:opacity 100.5ms linear 49.5ms}.mdc-select__anchor{width:200px;min-width:0;flex:1 1 auto;position:relative;box-sizing:border-box;overflow:hidden;outline:none;cursor:pointer}.mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-select__selected-text-container{display:flex;appearance:none;pointer-events:none;box-sizing:border-box;width:auto;min-width:0;flex-grow:1;height:28px;border:none;outline:none;padding:0;background-color:transparent;color:inherit}.mdc-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:100%;text-align:left}[dir=rtl] .mdc-select__selected-text,.mdc-select__selected-text[dir=rtl]{text-align:right}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid+.mdc-select-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error, #b00020)}.mdc-select--disabled{cursor:default;pointer-events:none}.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item,.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item[dir=rtl]{padding-left:12px;padding-right:12px}@media screen and (forced-colors: active),(-ms-high-contrast: active){.mdc-select__menu::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}}@media screen and (forced-colors: active)and (forced-colors: active),screen and (-ms-high-contrast: active)and (forced-colors: active){.mdc-select__menu::before{border-color:CanvasText}}.mdc-select__menu .mdc-deprecated-list .mdc-select__icon,.mdc-select__menu .mdc-list .mdc-select__icon{margin-left:0;margin-right:0}[dir=rtl] .mdc-select__menu .mdc-deprecated-list .mdc-select__icon,[dir=rtl] .mdc-select__menu .mdc-list .mdc-select__icon,.mdc-select__menu .mdc-deprecated-list .mdc-select__icon[dir=rtl],.mdc-select__menu .mdc-list .mdc-select__icon[dir=rtl]{margin-left:0;margin-right:0}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-select__menu .mdc-list-item__start{display:inline-flex;align-items:center}.mdc-select__option{padding-left:16px;padding-right:16px}[dir=rtl] .mdc-select__option,.mdc-select__option[dir=rtl]{padding-left:16px;padding-right:16px}.mdc-select__one-line-option.mdc-list-item--with-one-line{height:48px}.mdc-select__two-line-option.mdc-list-item--with-two-lines{height:64px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__start{margin-top:20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before{display:inline-block;width:0;height:28px;content:\"\";vertical-align:0}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:\"\";vertical-align:-20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before{display:inline-block;width:0;height:36px;content:\"\";vertical-align:0}.mdc-select__option-with-leading-content{padding-left:0;padding-right:12px}.mdc-select__option-with-leading-content.mdc-list-item{padding-left:0;padding-right:auto}[dir=rtl] .mdc-select__option-with-leading-content.mdc-list-item,.mdc-select__option-with-leading-content.mdc-list-item[dir=rtl]{padding-left:auto;padding-right:0}.mdc-select__option-with-leading-content .mdc-list-item__start{margin-left:12px;margin-right:0}[dir=rtl] .mdc-select__option-with-leading-content .mdc-list-item__start,.mdc-select__option-with-leading-content .mdc-list-item__start[dir=rtl]{margin-left:0;margin-right:12px}.mdc-select__option-with-leading-content .mdc-list-item__start{width:36px;height:24px}[dir=rtl] .mdc-select__option-with-leading-content,.mdc-select__option-with-leading-content[dir=rtl]{padding-left:12px;padding-right:0}.mdc-select__option-with-meta.mdc-list-item{padding-left:auto;padding-right:0}[dir=rtl] .mdc-select__option-with-meta.mdc-list-item,.mdc-select__option-with-meta.mdc-list-item[dir=rtl]{padding-left:0;padding-right:auto}.mdc-select__option-with-meta .mdc-list-item__end{margin-left:12px;margin-right:12px}[dir=rtl] .mdc-select__option-with-meta .mdc-list-item__end,.mdc-select__option-with-meta .mdc-list-item__end[dir=rtl]{margin-left:12px;margin-right:12px}.mdc-select--filled .mdc-select__anchor{height:56px;display:flex;align-items:baseline}.mdc-select--filled .mdc-select__anchor::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text::before{content:\"\"}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor::before{display:none}.mdc-select--filled .mdc-select__anchor{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor{background-color:whitesmoke}.mdc-select--filled.mdc-select--disabled .mdc-select__anchor{background-color:#fafafa}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.42)}.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.87)}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::after{border-bottom-color:#6200ee;border-bottom-color:var(--mdc-theme-primary, #6200ee)}.mdc-select--filled.mdc-select--disabled .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.06)}.mdc-select--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-select--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-select--filled .mdc-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}.mdc-select--filled.mdc-select--focused.mdc-line-ripple::after{transform:scale(1, 2);opacity:1}.mdc-select--filled .mdc-floating-label{left:16px;right:initial}[dir=rtl] .mdc-select--filled .mdc-floating-label,.mdc-select--filled .mdc-floating-label[dir=rtl]{left:initial;right:16px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:48px;right:initial}[dir=rtl] .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label,.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl]{left:initial;right:48px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 96px / 0.75)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled):hover .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::after{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined{border:none}.mdc-select--outlined .mdc-select__anchor{height:56px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{font-size:.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-56px{0%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl]{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}@supports(top: max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px, var(--mdc-shape-small, 4px))}}@supports(top: max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl]{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}@supports(top: max(0%)){.mdc-select--outlined .mdc-select__anchor{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-select--outlined .mdc-select__anchor,.mdc-select--outlined .mdc-select__anchor[dir=rtl]{padding-left:0}@supports(top: max(0%)){[dir=rtl] .mdc-select--outlined .mdc-select__anchor,.mdc-select--outlined .mdc-select__anchor[dir=rtl]{padding-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports(top: max(0%)){.mdc-select--outlined+.mdc-select-helper-text{margin-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text,.mdc-select--outlined+.mdc-select-helper-text[dir=rtl]{margin-left:0}@supports(top: max(0%)){[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text,.mdc-select--outlined+.mdc-select-helper-text[dir=rtl]{margin-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor{background-color:transparent}.mdc-select--outlined.mdc-select--disabled .mdc-select__anchor{background-color:transparent}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.38)}.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.87)}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.06)}.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-select--outlined .mdc-select__anchor{display:flex;align-items:baseline;overflow:visible}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined 250ms 1}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{font-size:.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text::before{content:\"\"}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--outlined .mdc-select__anchor::before{display:none}.mdc-select--outlined .mdc-select__selected-text-container{display:flex;border:none;z-index:1;background-color:transparent}.mdc-select--outlined .mdc-select__icon{z-index:2}.mdc-select--outlined .mdc-floating-label{line-height:1.15rem;left:4px;right:initial}[dir=rtl] .mdc-select--outlined .mdc-floating-label,.mdc-select--outlined .mdc-floating-label[dir=rtl]{left:initial;right:4px}.mdc-select--outlined.mdc-select--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:36px;right:initial}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl]{left:initial;right:36px}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-37.25px) translateX(32px) scale(1)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{font-size:.75rem}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(0.75)}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-34.75px) translateX(32px) scale(0.75)}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px{0%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake,.mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl{0%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 96px)}.mdc-select--outlined .mdc-menu-surface{margin-bottom:8px}.mdc-select--outlined.mdc-select--no-label .mdc-menu-surface,.mdc-select--outlined .mdc-menu-surface--is-open-below{margin-bottom:0}.mdc-select__anchor{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-select__anchor .mdc-select__ripple::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-select__anchor .mdc-select__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-select__anchor.mdc-ripple-upgraded--unbounded .mdc-select__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-select__anchor.mdc-ripple-upgraded--foreground-activation .mdc-select__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-select__anchor.mdc-ripple-upgraded--foreground-deactivation .mdc-select__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-select__anchor:hover .mdc-select__ripple::before,.mdc-select__anchor.mdc-ripple-surface--hover .mdc-select__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__anchor.mdc-ripple-upgraded--background-focused .mdc-select__ripple::before,.mdc-select__anchor:not(.mdc-ripple-upgraded):focus .mdc-select__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__anchor .mdc-select__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple::after{transition:opacity 150ms linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple::after{transition:opacity 150ms linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select-helper-text{margin:0;margin-left:16px;margin-right:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal}[dir=rtl] .mdc-select-helper-text,.mdc-select-helper-text[dir=rtl]{margin-left:16px;margin-right:16px}.mdc-select-helper-text::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.mdc-select-helper-text--validation-msg{opacity:0;transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-select--invalid+.mdc-select-helper-text--validation-msg,.mdc-select-helper-text--validation-msg-persistent{opacity:1}.mdc-select--with-leading-icon .mdc-select__icon{display:inline-block;box-sizing:border-box;border:none;text-decoration:none;cursor:pointer;user-select:none;flex-shrink:0;align-self:center;background-color:transparent;fill:currentColor}.mdc-select--with-leading-icon .mdc-select__icon{margin-left:12px;margin-right:12px}[dir=rtl] .mdc-select--with-leading-icon .mdc-select__icon,.mdc-select--with-leading-icon .mdc-select__icon[dir=rtl]{margin-left:12px;margin-right:12px}.mdc-select__icon:not([tabindex]),.mdc-select__icon[tabindex=\"-1\"]{cursor:default;pointer-events:none}","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/rtl/rtl';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/typography/typography';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define floating-label\n .mdc-floating-label {\n @include typography.typography(\n subtitle1,\n $exclude-props: (line-height),\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n @include rtl.ignore-next-line();\n left: 0;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: left top;\n @include rtl.ignore-next-line();\n transform-origin: left top;\n line-height: 1.15rem;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: text;\n overflow: hidden;\n\n /* @alternate */\n // Force the label into its own layer to prevent visible layer promotion adjustments\n // when the ripple is activated behind it.\n will-change: transform;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n right: 0;\n @include rtl.ignore-next-line();\n left: auto;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: right top;\n @include rtl.ignore-next-line();\n transform-origin: right top;\n @include rtl.ignore-next-line();\n text-align: right;\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transform variables.$transition-duration\n animation-variables.$standard-curve-timing-function,\n color variables.$transition-duration\n animation-variables.$standard-curve-timing-function;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n .mdc-floating-label--required {\n &::after {\n @include _required-content($query);\n }\n\n @include rtl.rtl {\n &::after {\n @include _required-content-rtl($query);\n }\n }\n }\n\n @at-root {\n @include float-position(variables.$position-y, $query: $query);\n @include shake-animation(standard, $query: $query);\n }\n\n @include shake-keyframes(standard, variables.$position-y, $query: $query);\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n}\n\n// Used for textarea in case of scrolling\n@mixin fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n}\n\n@mixin shake-keyframes(\n $modifier,\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: feature-targeting.all()\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-animation) {\n @keyframes mdc-floating-label-shake-float-above-#{$modifier} {\n 0% {\n @include rtl.ignore-next-line();\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 33% {\n animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n @include rtl.ignore-next-line();\n transform: translateX(calc(4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 66% {\n animation-timing-function: cubic-bezier(\n 0.302435,\n 0.381352,\n 0.55,\n 0.956352\n );\n @include rtl.ignore-next-line();\n transform: translateX(calc(-4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 100% {\n @include rtl.ignore-next-line();\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n }\n }\n}\n\n@mixin float-position(\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n @if $positionX > 0 or $positionX < 0 {\n @include rtl.ignore-next-line();\n transform: translateY(-1 * $positionY)\n translateX(-1 * $positionX)\n scale($scale);\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n transform: translateY(-1 * $positionY) translateX($positionX)\n scale($scale);\n }\n } @else {\n transform: translateY(-1 * $positionY) scale($scale);\n }\n }\n }\n}\n\n@mixin shake-animation($modifier, $query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-floating-label--shake {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;\n }\n }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n max-width: $max-width;\n }\n}\n\n///\n/// Sets the CSS transition for the floating animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin float-transition(\n $duration-ms,\n $timing-function: animation-variables.$standard-curve-timing-function,\n $query: feature-targeting.all()\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-animation) {\n transition: color $duration-ms $timing-function,\n transform $duration-ms $timing-function;\n }\n}\n\n@mixin _required-content($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: 1px;\n @include rtl.ignore-next-line();\n margin-right: 0px;\n content: '*';\n }\n}\n\n// Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]\n// selector and that breaks some browsers\n@mixin _required-content-rtl($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: 0;\n @include rtl.ignore-next-line();\n margin-right: 1px;\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n $options: (\n custom-property-prefix: typography,\n );\n\n $base-styles: keys.set-values($base-styles, $options: $options);\n\n @each $style, $style-props in $scale-styles {\n @each $base-key in map.keys($base-styles) {\n // Ignore the return result, it's not needed\n $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n }\n\n // Merge base properties for all styles.\n $style-props: map.merge($base-styles, $style-props);\n\n // Merge overrides onto each style.\n $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n // Register keys for this style\n @each $property, $value in $style-props {\n $unused: keys.set-value(\n keys.combine($style, $property),\n $value,\n $options: $options\n );\n }\n\n // Override original styles with new styles.\n $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n }\n\n @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n @if custom-properties.is-custom-prop($px) {\n @return custom-properties.set-fallback(\n $px,\n _px-to-rem(custom-properties.get-fallback($px))\n );\n }\n @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n @if $px == null {\n @return null;\n }\n @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n thin: 100,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700,\n black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n $base,\n (\n headline1: (\n font-size: px-to-rem(96px),\n line-height: px-to-rem(96px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-1.5, 6),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline2: (\n font-size: px-to-rem(60px),\n line-height: px-to-rem(60px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-0.5, 3.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline3: (\n font-size: px-to-rem(48px),\n line-height: px-to-rem(50px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline4: (\n font-size: px-to-rem(34px),\n line-height: px-to-rem(40px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 2.125),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline5: (\n font-size: px-to-rem(24px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline6: (\n font-size: px-to-rem(20px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.25, 1.25),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(28px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.15, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(22px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.1, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(24px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.5, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n caption: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.4, 0.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n button: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(36px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(1.25, 0.875),\n text-decoration: none,\n text-transform: uppercase,\n ),\n overline: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(2, 0.75),\n text-decoration: none,\n text-transform: uppercase,\n ),\n ),\n (\n headline1: $styles-headline1,\n headline2: $styles-headline2,\n headline3: $styles-headline3,\n headline4: $styles-headline4,\n headline5: $styles-headline5,\n headline6: $styles-headline6,\n subtitle1: $styles-subtitle1,\n subtitle2: $styles-subtitle2,\n body1: $styles-body1,\n body2: $styles-body2,\n caption: $styles-caption,\n button: $styles-button,\n overline: $styles-overline,\n )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-typography {\n @include base($query: $query);\n }\n\n @each $style in get-typography-styles() {\n .mdc-typography--#{$style} {\n @include typography($style, $query: $query);\n }\n }\n}\n\n@mixin base($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(font-family, font-family);\n }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @if not is-typography-style($style) {\n @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n }\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @each $key in keys.get-keys($style) {\n // <style>-<property>: headline1-font-size\n // Slice the string past the first key separator to retrieve the\n // property name\n $property: string.slice($key, string.index($key, '-') + 1);\n @if list.index($exclude-props, $property) == null {\n $current-global-value: map.get($styles, $style, $property);\n $configured-global-value: map.get($_styles-copy, $style, $property);\n @if $current-global-value != $configured-global-value {\n // A compile time change was made to $mdc-typography-styles. To\n // support Angular, use this value instead of the key's value.\n @if $current-global-value {\n // Only emit if the overridden value exists\n $custom-prop: keys.create-custom-property($key);\n $custom-prop: custom-properties.set-fallback(\n $custom-prop,\n $current-global-value\n );\n @include theme.property($property, $custom-prop);\n }\n } @else {\n // Otherwise, use the key, which may be different from the original\n // configured global value.\n @include theme.property($property, $key);\n }\n }\n }\n }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include feature-targeting.targets($feat-typography) {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n/// `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: $display;\n\n @if $isFlexbox {\n align-items: baseline;\n }\n }\n\n @if $top > 0 {\n @include baseline-top($top, $query: $query);\n }\n\n @if $bottom > 0 {\n @if $isFlexbox {\n @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n }\n\n @include baseline-bottom($bottom, $query: $query);\n }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n/// is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n/// or `inline-block`.\n@mixin text-baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $lineHeight: normal,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include baseline(\n $display: $display,\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n @if $top > 0 {\n margin-top: 0;\n /* @alternate */\n line-height: #{$lineHeight};\n }\n\n @if $bottom > 0 {\n margin-bottom: -1 * $bottom;\n }\n }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n/// the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n/// bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::after {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n content: '\\200b';\n }\n }\n}\n\n@mixin baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: '';\n}\n\n@function get-font($typography) {\n @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n font: null,\n line-height: null,\n size: null,\n weight: null,\n tracking: null,\n);\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme-keys($_typography-theme, $theme);\n\n @include theme.property(font-family, map.get($theme, font));\n @include theme.property(line-height, map.get($theme, line-height));\n @include theme.property(font-size, map.get($theme, size));\n @include theme.property(font-weight, map.get($theme, weight));\n @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include static-styles($query: $query);\n\n .mdc-ripple-surface {\n @include ripple-theme.states($query: $query);\n }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include radius-bounded($query: $query);\n @include surface-styles($query: $query);\n }\n\n .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n .mdc-ripple-upgraded--unbounded {\n @include radius-unbounded($query: $query);\n @include unbounded-styles($query: $query);\n }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n/// a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n @include ripple-theme.states($color, $query: $query);\n @include ripple-theme.states-activated($color, $query: $query);\n @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n overflow: visible;\n }\n}\n\n@mixin common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n // mdc-ripple.scss.)\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-ripple/common/animation') {\n @include keyframes_;\n }\n }\n}\n\n@mixin surface(\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n // TODO(b/151931961): Remove the following block once resolved\n @if $include-will-change {\n will-change: transform, opacity;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n }\n }\n\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition: opacity ripple-theme.$states-wash-duration linear,\n background-color ripple-theme.$states-wash-duration linear;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 1)\n );\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 0)\n );\n }\n }\n\n // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n }\n\n &.mdc-ripple-upgraded--unbounded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, 0);\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n forwards,\n mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n }\n}\n\n@mixin radius-bounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{$radius});\n @include rtl.ignore-next-line();\n left: calc(50% - #{$radius});\n width: $radius * 2;\n height: $radius * 2;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin radius-unbounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{math.div($radius, 2)});\n @include rtl.ignore-next-line();\n left: calc(50% - #{math.div($radius, 2)});\n width: $radius;\n height: $radius;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Necessary for clicks on other inner elements (e.g. close icon in chip)\n // to go through.\n pointer-events: none;\n }\n}\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables2.$standard-curve-timing-function;\n // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n // that custom properties are supported within the browser before adding this class, we can\n // safely use them without a fallback.\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n\n to {\n opacity: 0;\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n @return $name $duration $delay linear;\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n\n// Public\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define line-ripple\n .mdc-line-ripple {\n @include feature-targeting.targets($feat-structure) {\n &::before,\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom-style: solid;\n content: '';\n }\n\n @include height(1px);\n\n &::before {\n z-index: 1;\n }\n\n &::after {\n transform: scaleX(0);\n border-bottom-width: 2px;\n opacity: 0;\n z-index: 2;\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n &::after {\n transition: functions.transition-value(transform),\n functions.transition-value(opacity);\n }\n }\n }\n\n .mdc-line-ripple--active::after {\n @include feature-targeting.targets($feat-structure) {\n transform: scaleX(1);\n opacity: 1;\n }\n }\n\n .mdc-line-ripple--deactivating::after {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n }\n}\n\n@mixin height($height) {\n &::before {\n border-bottom-width: $height;\n }\n}\n\n@mixin active-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n &::after {\n @include theme.property(border-bottom-color, $color);\n }\n }\n}\n\n@mixin inactive-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n &::before {\n @include theme.property(border-bottom-color, $color);\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline {\n @include base_($query);\n\n &__leading,\n &__notch,\n &__trailing {\n @include feature-targeting.targets($feat-structure) {\n box-sizing: border-box;\n height: 100%;\n border-top: variables.$border-width solid;\n border-bottom: variables.$border-width solid;\n pointer-events: none;\n }\n }\n\n &__leading {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n border,\n variables.$border-width solid,\n none\n );\n\n width: variables.$leading-width;\n }\n }\n\n &__trailing {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n border,\n none,\n variables.$border-width solid\n );\n\n flex-grow: 1;\n }\n }\n\n &__notch {\n @include feature-targeting.targets($feat-structure) {\n flex: 0 0 auto;\n width: auto;\n max-width: calc(100% - #{variables.$leading-width} * 2);\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n position: relative;\n max-width: 100%;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n text-overflow: clip;\n }\n }\n\n &--upgraded .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n max-width: calc(100% / 0.75);\n }\n }\n }\n\n .mdc-notched-outline--notched {\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(padding, right, 8px);\n\n border-top: none;\n }\n }\n }\n\n .mdc-notched-outline--no-label {\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n }\n}\n\n@mixin color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $color);\n }\n }\n}\n\n@mixin stroke-width($width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting.targets($feat-structure) {\n border-width: $width;\n }\n }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline--notched .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n padding-top: $stroke-width;\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $component-height: null,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n // Resolve the radius relative to the notched outline component's height. The\n // component should provide its current height from its density. The resolved\n // radius allows percentage radii to be converted to pixels.\n $resolved-radius: shape-functions.resolve-radius(\n $radius,\n $component-height: $component-height\n );\n\n // Grab the top-left radius. We'll need it to adjust the leading for the\n // label notch if the resulting radius shape is larger than the default\n // leading.\n $top-left-radius: list.nth(\n shape-functions.unpack-radius($resolved-radius),\n 1\n );\n $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n $top-left-radius-px: $top-left-radius;\n @if ($top-left-is-custom-prop) {\n $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n }\n\n .mdc-notched-outline__leading {\n // mask the leading to apply the top-left and bottom-left corners\n @include shape-mixins.radius(\n shape-functions.mask-radius($radius, 1 0 0 1),\n $rtl-reflexive: true,\n $component-height: $component-height,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n @if ($top-left-radius-px > variables.$leading-width) {\n // If the radius is bigger than the default leading width, we need to\n // increase the leading width\n width: $top-left-radius-px;\n @if ($top-left-is-custom-prop) {\n // The radius may be a custom property, in which case the above width\n // is the IE11 fallback value.\n /* @alternate */\n }\n }\n\n @if ($top-left-is-custom-prop) {\n // If the top-left radius is dynamic, the width of the leading is\n // the max of whichever is larger: the default leading width or the\n // value of the custom property.\n $var: custom-properties.create-var($top-left-radius);\n // Interpolation is a workaround for sass/sass#3259.\n @supports (top: max(#{0%})) {\n width: max(#{variables.$leading-width}, #{$var});\n }\n }\n }\n }\n\n // Similar to above, adjust the max-width of the notch if we adjusted the\n // leading's width.\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n @if ($top-left-radius-px > variables.$leading-width) {\n max-width: calc(100% - #{$top-left-radius-px} * 2);\n @if ($top-left-is-custom-prop) {\n /* @alternate */\n }\n }\n\n @if ($top-left-is-custom-prop) {\n $var: custom-properties.create-var($top-left-radius);\n // Interpolation is a workaround for sass/sass#3259.\n @supports (top: max(#{0%})) {\n max-width: calc(100% - max(#{variables.$leading-width}, #{$var}) * 2);\n }\n }\n }\n }\n\n .mdc-notched-outline__trailing {\n // mask the leading to apply the top-right and bottom-right corners\n @include shape-mixins.radius(\n shape-functions.mask-radius($radius, 0 1 1 0),\n $rtl-reflexive: true,\n $component-height: $component-height,\n $query: $query\n );\n }\n}\n\n@mixin floating-label-float-position(\n $positionY,\n $positionX: 0%,\n $scale: 0.75,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include floating-label-mixins.float-position(\n $positionY + variables.$label-adjust,\n $positionX,\n 1,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n font-size: ($scale * 1rem);\n }\n }\n\n // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n &.mdc-notched-outline--upgraded,\n .mdc-notched-outline--upgraded {\n @include floating-label-mixins.float-position(\n $positionY,\n $positionX,\n $scale,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n font-size: 1rem;\n }\n }\n }\n}\n\n///\n/// Sets floating label position in notched outline when label is afloat.\n///\n/// @param {Number} $positionY Absolute Y-axis position in `px`.\n/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.\n/// @param {Number} $scale Defaults to `.75`.\n///\n/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is\n/// center aligned in all the places.\n///\n@mixin floating-label-float-position-absolute(\n $positionY,\n $positionX: 0,\n $scale: 0.75,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include floating-label-mixins.float-position(\n $positionY + variables.$label-adjust-absolute,\n $positionX,\n 1,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n font-size: ($scale * 1rem);\n }\n }\n\n // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n &.mdc-notched-outline--upgraded,\n .mdc-notched-outline--upgraded {\n @include floating-label-mixins.float-position(\n $positionY,\n $positionX,\n $scale,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n font-size: 1rem;\n }\n }\n }\n}\n\n///\n/// Sets the max-width for the notch\n///\n/// @param {Number} $max-width Max-width for the notch\n///\n@mixin notch-max-width($max-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n max-width: $max-width;\n }\n }\n}\n\n//\n// Private\n//\n@mixin base_($query) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n height: 100%;\n @include rtl.ignore-next-line();\n text-align: left;\n pointer-events: none;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n text-align: right;\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n/// padding-left: 4px;\n///\n/// @include rtl {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n/// }\n///\n/// @example - css\n/// .mdc-foo {\n/// padding-left: 4px;\n/// }\n///\n/// [dir=\"rtl\"] .mdc-foo,\n/// .mdc-foo[dir=\"rtl\"] {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n/// <!-- ... -->\n/// <div dir=\"ltr\">\n/// <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n/// </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n @if ($include) {\n $dir-rtl: '[dir=rtl]';\n\n $rtl-selectors: list.join(\n selector.nest($dir-rtl, &),\n selector-ext.append-strict(&, $dir-rtl)\n );\n\n @at-root {\n #{$rtl-selectors} {\n /*rtl:begin:ignore*/\n @content;\n /*rtl:end:ignore*/\n }\n }\n }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 8px;\n// margin-right: 0;\n//\n// @include rtl {\n// margin-left: 0;\n// margin-right: 8px;\n// }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 0;\n// margin-right: 8px;\n//\n// @include rtl {\n// margin-left: 8px;\n// margin-right: 0;\n// }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n $base-property,\n $default-direction,\n $value,\n $replace: null\n) {\n @if (list.index((right, left), $default-direction) == null) {\n @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n }\n\n $left-value: $value;\n $right-value: 0;\n\n @if ($default-direction == right) {\n $left-value: 0;\n $right-value: $value;\n }\n\n @include reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: auto;\n// margin-right: 12px;\n//\n// @include rtl {\n// margin-left: 12px;\n// margin-right: auto;\n// }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: null\n) {\n $prop-left: #{$base-property}-left;\n $prop-right: #{$base-property}-right;\n\n @include reflexive(\n $prop-left,\n $left-value,\n $prop-right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 0;\n// right: initial;\n//\n// @include rtl {\n// left: initial;\n// right: 0;\n// }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n @if (list.index((right, left), $position-property) == null) {\n @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n }\n\n // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n $left-value: $value;\n $right-value: initial;\n\n @if ($position-property == right) {\n $right-value: $value;\n $left-value: initial;\n }\n\n @include reflexive(\n left,\n $left-value,\n right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 2px;\n// right: 5px;\n//\n// @include rtl {\n// right: 2px;\n// left: 5px;\n// }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n $left-property,\n $left-value,\n $right-property,\n $right-value,\n $replace: null\n) {\n $left-replace: null;\n $right-replace: null;\n @if $replace {\n @if meta.type-of($left-value) == 'string' {\n $left-replace: $replace;\n }\n\n @if meta.type-of($right-value) == 'string' {\n $right-replace: $replace;\n }\n\n @if $left-replace == null and $right-replace == null {\n @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n }\n\n // If any replacements are null, treat the entire value as null (do not\n // emit anything).\n @each $name, $replacement in $replace {\n @if $replacement == null {\n $left-value: null;\n $right-value: null;\n }\n }\n }\n\n // Do not emit if either value are null\n @if $left-value and $right-value {\n @include _property($left-property, $left-value, $replace: $left-replace);\n @include _property($right-property, $right-value, $replace: $right-replace);\n\n @include rtl {\n @include _property(\n $left-property,\n $right-value,\n $replace: $right-replace\n );\n @include _property($right-property, $left-value, $replace: $left-replace);\n }\n }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n @include gss.annotate(\n (\n noflip: $include,\n )\n );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n @include theme.property(\n $property,\n $value,\n $replace: $replace,\n $gss: (noflip: $include)\n );\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION\n$min-leading-stroke-edge-position: 12px !default;\n// The gap between the stroke end and floating label\n// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE\n$notch-gutter-size: 4px !default;\n$border-width: 1px !default;\n$leading-width: 12px !default;\n$padding: 4px !default;\n// This variable keeps the before/after JS label centered in the notch when the font-size is changed.\n$label-adjust: 14% !default;\n\n/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in\n/// the middle when it is notched.\n$label-box-height: 13.5px !default;\n\n/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font\n/// size we add additional offset value.\n$label-adjust-absolute: 2.5px !default;\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:math';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/evolution-mixins' as list-evolution-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/rtl/rtl';\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/typography/mixins' as typography-mixins;\n@use './select-helper-text-theme';\n@use './select-icon-theme';\n@use './select-theme';\n@use './select-filled';\n@use './select-outlined';\n@use './select-ripple';\n@use './select-helper-text';\n@use './select-icon';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select {\n @include select-theme.ink-color(\n (\n default: select-theme.$ink-color,\n disabled: select-theme.$disabled-ink-color,\n ),\n $query: $query\n );\n\n @include select-theme.label-color(\n (\n default: select-theme.$label-color,\n focus: select-theme.$focused-label-color,\n disabled: select-theme.$disabled-label-color,\n ),\n $query: $query\n );\n\n @include select-theme.dropdown-icon-color(\n (\n default: select-theme.$dropdown-icon-color,\n focus: primary,\n disabled: select-theme.$disabled-dropdown-icon-color,\n ),\n $query: $query\n );\n\n @include select-helper-text-theme.helper-text-color(\n (\n default: select-helper-text-theme.$helper-text-color,\n disabled: select-helper-text-theme.$disabled-helper-text-color,\n ),\n $query: $query\n );\n\n @include select-icon-theme.icon-color(\n (\n default: select-icon-theme.$icon-color,\n disabled: select-icon-theme.$disabled-icon-color,\n ),\n $query: $query\n );\n\n // High-contrast mode support\n @include dom-mixins.forced-colors-mode() {\n $gray-text: (\n disabled: GrayText,\n );\n @include select-theme.ink-color($gray-text, $query: $query);\n @include select-theme.dropdown-icon-color(\n (\n disabled: red,\n ),\n $query: $query\n );\n @include select-theme.label-color($gray-text, $query: $query);\n @include select-theme.bottom-line-color($gray-text, $query: $query);\n @include select-theme.outline-color($gray-text, $query: $query);\n @include select-icon-theme.icon-color($gray-text, $query: $query);\n @include select-helper-text-theme.helper-text-color(\n $gray-text,\n $query: $query\n );\n }\n\n // Floating label private mixin\n @include _floating-label($query: $query);\n\n // structural\n @include _padding-horizontal(\n $left: select-theme.$anchor-padding-left,\n $left-with-leading-icon:\n select-theme.$anchor-padding-left-with-leading-icon,\n $right: select-theme.$anchor-padding-right,\n $query: $query\n );\n @include select-icon-theme.size(\n select-icon-theme.$icon-size,\n $query: $query\n );\n @include select-theme.dropdown-icon-size(\n select-icon-theme.$icon-size,\n $query: $query\n );\n @include _option-side-padding(16px, $query: $query);\n @include _option-graphic-trailing-margin(12px, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n position: relative; // Menu is absolutely positioned relative to this.\n }\n\n &__dropdown-icon {\n @include _dropdown-icon-base($query: $query);\n @include _dropdown-icon-inactive($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n margin,\n select-icon-theme.$icon-horizontal-margin,\n select-icon-theme.$icon-horizontal-margin\n );\n display: inline-flex;\n position: relative;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .mdc-select--activated & {\n @include _dropdown-icon-active($query: $query);\n }\n }\n }\n\n .mdc-select__anchor {\n @include floating-label-mixins.float-position(\n select-theme.$label-position-y,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n width: select-theme.$default-width;\n min-width: 0;\n flex: 1 1 auto;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n outline: none;\n cursor: pointer;\n }\n }\n\n @include _text($query: $query);\n\n .mdc-select--invalid {\n @include select-theme.label-color(\n (\n default: select-theme.$error-color,\n focus: select-theme.$error-color,\n ),\n $query: $query\n );\n @include select-helper-text-theme.helper-text-validation-color(\n select-theme.$error-color,\n $query: $query\n );\n @include select-theme.dropdown-icon-color(\n (\n default: select-theme.$error-color,\n focus: select-theme.$error-color,\n ),\n $query: $query\n );\n }\n\n .mdc-select--disabled {\n @include _disabled($query: $query);\n }\n\n .mdc-select--with-leading-icon {\n @include _option-side-padding(12px, $query: $query);\n }\n\n @include _list($query: $query);\n\n @include select-filled.core-styles($query: $query);\n @include select-outlined.core-styles($query: $query);\n @include select-ripple.core-styles($query: $query);\n @include select-helper-text.helper-text-core-styles($query: $query);\n @include select-icon.icon-core-styles($query: $query);\n}\n\n@mixin _list($query) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include dom-mixins.forced-colors-mode() {\n .mdc-select__menu::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n }\n\n .mdc-select__menu .mdc-deprecated-list,\n .mdc-select__menu .mdc-list {\n @include select-icon-theme.icon-horizontal-margins(0, 0, $query: $query);\n @include list-mixins.deprecated-item-selected-text-color(\n on-surface,\n $query: $query\n );\n }\n\n .mdc-select__menu .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n align-items: center;\n }\n }\n\n .mdc-select__option {\n @include list-evolution-mixins.item-spacing(16px, $query: $query);\n }\n\n .mdc-select__one-line-option {\n @include list-evolution-mixins.one-line-item-height(48px, $query: $query);\n }\n\n .mdc-select__two-line-option {\n @include list-evolution-mixins.two-line-item-height(64px, $query: $query);\n\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 20px;\n }\n }\n\n .mdc-list-item__primary-text {\n @include typography-mixins.text-baseline(\n $top: 28px,\n $bottom: 20px,\n $query: $query\n );\n }\n\n &.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n @include typography-mixins.text-baseline($top: 36px, $query: $query);\n }\n }\n }\n\n .mdc-select__option-with-leading-content {\n @include list-evolution-mixins.item-start-spacing(12px, 0, $query: $query);\n @include list-evolution-mixins.item-start-size(36px, 24px, $query: $query);\n @include list-evolution-mixins.item-spacing(0, 12px, $query: $query);\n }\n\n .mdc-select__option-with-meta {\n @include list-evolution-mixins.item-end-spacing(12px, $query: $query);\n }\n}\n\n///\n/// Sets base dropdown icon styles.\n/// @access private\n///\n@mixin _dropdown-icon-base($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__dropdown-icon-active,\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n\n .mdc-select__dropdown-icon-graphic {\n $svg-natural-width: 10px;\n $svg-natural-height: 5px;\n\n @include feature-targeting.targets($feat-structure) {\n width: math.div($svg-natural-width, select-icon-theme.$icon-size) * 100%;\n height: math.div($svg-natural-height, select-icon-theme.$icon-size) * 100%;\n }\n }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to inactive state.\n/// @access private\n///\n@mixin _dropdown-icon-inactive($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity select-theme.$icon-inactive-fade-in-duration linear\n select-theme.$icon-inactive-fade-out-duration;\n }\n }\n\n .mdc-select__dropdown-icon-active {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity select-theme.$icon-inactive-fade-out-duration linear;\n }\n }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to activated state.\n/// @access private\n///\n@mixin _dropdown-icon-active($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity select-theme.$icon-active-fade-out-duration linear;\n }\n }\n\n .mdc-select__dropdown-icon-active {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity select-theme.$icon-active-fade-in-duration linear\n select-theme.$icon-active-fade-out-duration;\n }\n }\n}\n\n///\n/// Sets the side padding for option text.\n/// @access private\n///\n@mixin _option-side-padding($side-padding, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__menu .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, $side-padding, $side-padding);\n }\n }\n}\n\n///\n/// Sets the traliing margin for an option's leading graphic.\n/// @access private\n///\n@mixin _option-graphic-trailing-margin(\n $margin-right,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__menu .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, right, $margin-right);\n }\n }\n}\n\n@mixin _floating-label($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n }\n}\n\n@mixin _text($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-select__selected-text-container {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n appearance: none;\n pointer-events: none;\n box-sizing: border-box;\n width: auto;\n min-width: 0;\n flex-grow: 1;\n height: select-theme.$selected-text-height;\n border: none;\n outline: none;\n padding: 0;\n }\n\n @include feature-targeting.targets($feat-color) {\n background-color: transparent;\n color: inherit; // Override default user agent stylesheet\n }\n }\n\n .mdc-select__selected-text {\n @include typography-mixins.typography(subtitle1, $query: $query);\n @include typography-mixins.overflow-ellipsis($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: block;\n width: 100%;\n @include rtl.ignore-next-line();\n text-align: left;\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n text-align: right;\n }\n }\n }\n}\n\n@mixin _disabled($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n}\n\n/// Adds horizontal padding to the selected text\n///\n/// @param {Number} $left - left side padding\n/// @param {Number} $left-with-leading-icon - left-side padding when a leading\n/// icon is present\n/// @param {Number} $right - right-side padding; note that a trailing icon is\n/// always present.\n@mixin _padding-horizontal(\n $left,\n $left-with-leading-icon,\n $right,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__anchor {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, $left, $right);\n }\n }\n\n &.mdc-select--with-leading-icon .mdc-select__anchor {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, $left-with-leading-icon, $right);\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/tokens/resolvers';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/line-ripple/mixins' as line-ripple-mixins;\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/evolution-mixins' as list-evolution-mixins;\n@use '@material/menu-surface/mixins' as menu-surface-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/rtl/rtl';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/gss';\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/variables' as theme-variables;\n@use '@material/typography/mixins' as typography-mixins;\n@use '@material/typography/typography';\n@use './select-icon-theme';\n@use './select-helper-text-theme';\n\n$ripple-target: '.mdc-select__ripple';\n\n@function get-outlined-label-position-y($select-anchor-height) {\n @return math.div($select-anchor-height, 2) +\n math.div(notched-outline-variables.$label-box-height, 2);\n}\n\n$arrow-padding: 52px !default;\n$label-padding: 16px !default;\n$height: 56px !default;\n$minimum-height-for-filled-label: 52px !default;\n$filled-baseline-top: 40px !default;\n$selected-text-height: 28px !default;\n$anchor-padding-left: 16px !default;\n$anchor-padding-left-with-leading-icon: 0 !default;\n$anchor-padding-right: 0 !default;\n$outlined-stroke-width: 2px !default;\n$default-width: 200px !default;\n$shape-radius: small !default;\n\n$minimum-height: 40px !default;\n$minimum-height-for-filled-label: 52px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n\n$ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !default;\n$dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.54\n) !default;\n$label-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;\n$focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !default;\n$bottom-line-idle-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.42\n) !default;\n$bottom-line-hover-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n) !default;\n\n$fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 4%\n) !default;\n\n// Disabled Styles\n$disabled-label-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n$disabled-ink-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n$disabled-fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 2%\n) !default;\n$disabled-fill-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n) !default;\n$disabled-bottom-line-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n) !default;\n$disabled-dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n$disabled-outline-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n) !default;\n\n$outlined-idle-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n$outlined-hover-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n) !default;\n\n$label-position-y: 106% !default;\n$outline-label-offset: 16px !default;\n$outlined-label-position-y: get-outlined-label-position-y($height) !default;\n$outlined-with-leading-icon-label-position-x: 32px !default;\n\n$dropdown-transition-duration: 150ms !default;\n// Transition durartions to active state\n$icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration !default;\n$icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration !default;\n// Transition durartions to inactive state\n$icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration !default;\n$icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration !default;\n\n// Error colors\n$error-color: error !default;\n\n$_light-theme: (\n // Implement `menu-cascading-menu-indicator-icon-color` when select supports.\n // Implement `menu-cascading-menu-indicator-icon-size` when select supports.\n // Implement `menu-container-surface-tint-layer-color` when select supports.\n // Implement `text-field-disabled-trailing-icon-color` when select supports.\n // Implement `text-field-hover-trailing-icon-color` when select supports.\n // Implement `text-field-focus-trailing-icon-color` when select supports.\n // Implement `text-field-error-trailing-icon-color` when select supports.\n // Implement `text-field-error-hover-trailing-icon-color` when select supports.\n // Implement `text-field-error-focus-trailing-icon-color` when select supports.\n // Implement `text-field-trailing-icon-color` when select supports.\n // Implement `text-field-trailing-icon-size` when select supports.\n // Implement `text-field-error-hover-state-layer-color` when select supports.\n // Implement `text-field-error-hover-state-layer-opacity` when select supports.\n // Implement `text-field-hover-state-layer-color` when select supports.\n // Implement `text-field-hover-state-layer-opacity` when select supports.\n menu-container-color: null,\n menu-container-elevation: null,\n menu-container-shadow-color: null,\n menu-container-shape: null,\n menu-divider-color: null,\n menu-divider-height: null,\n menu-list-item-container-height: null,\n menu-list-item-label-text-color: null,\n menu-list-item-label-text-font: null,\n menu-list-item-label-text-line-height: null,\n menu-list-item-label-text-size: null,\n menu-list-item-label-text-tracking: null,\n menu-list-item-label-text-weight: null,\n menu-list-item-selected-container-color: null,\n menu-list-item-with-leading-icon-leading-icon-color: null,\n menu-list-item-with-leading-icon-leading-icon-size: null,\n menu-list-item-with-trailing-icon-trailing-icon-color: null,\n menu-list-item-with-trailing-icon-trailing-icon-size: null,\n text-field-active-indicator-color: null,\n text-field-active-indicator-height: null,\n text-field-caret-color: null,\n // Token key `text-field-hover-caret-color` not available on DSDB.\n text-field-hover-caret-color: null,\n // Token key `text-field-focus-caret-color` not available on DSDB.\n text-field-focus-caret-color: null,\n text-field-container-color: null,\n text-field-container-height: null,\n text-field-container-shape: null,\n text-field-disabled-active-indicator-color: null,\n text-field-disabled-active-indicator-height: null,\n text-field-disabled-active-indicator-opacity: null,\n text-field-disabled-container-color: null,\n text-field-disabled-container-opacity: null,\n text-field-disabled-input-text-color: null,\n text-field-disabled-input-text-opacity: null,\n text-field-disabled-label-text-color: null,\n text-field-disabled-label-text-opacity: null,\n text-field-disabled-leading-icon-color: null,\n text-field-disabled-leading-icon-opacity: null,\n text-field-disabled-outline-color: null,\n text-field-disabled-outline-opacity: null,\n text-field-disabled-outline-width: null,\n text-field-disabled-supporting-text-color: null,\n text-field-disabled-supporting-text-opacity: null,\n text-field-disabled-trailing-icon-opacity: null,\n text-field-error-active-indicator-color: null,\n text-field-error-focus-active-indicator-color: null,\n // Token key `text-field-error-caret-color` not available on DSDB.\n text-field-error-caret-color: null,\n // Token key `text-field-error-hover-caret-color` not available on DSDB.\n text-field-error-hover-caret-color: null,\n text-field-error-focus-caret-color: null,\n text-field-error-focus-input-text-color: null,\n text-field-error-focus-label-text-color: null,\n text-field-error-focus-leading-icon-color: null,\n text-field-error-focus-outline-color: null,\n text-field-error-focus-supporting-text-color: null,\n text-field-error-hover-active-indicator-color: null,\n text-field-error-hover-input-text-color: null,\n text-field-error-hover-label-text-color: null,\n text-field-error-hover-leading-icon-color: null,\n text-field-error-hover-outline-color: null,\n text-field-error-hover-supporting-text-color: null,\n text-field-error-input-text-color: null,\n text-field-error-label-text-color: null,\n text-field-error-leading-icon-color: null,\n text-field-error-outline-color: null,\n text-field-error-supporting-text-color: null,\n text-field-focus-active-indicator-color: null,\n text-field-focus-active-indicator-height: null,\n text-field-focus-input-text-color: null,\n text-field-focus-label-text-color: null,\n text-field-focus-leading-icon-color: null,\n text-field-focus-outline-color: null,\n text-field-focus-outline-width: null,\n text-field-focus-supporting-text-color: null,\n text-field-hover-active-indicator-color: null,\n text-field-hover-active-indicator-height: null,\n text-field-hover-input-text-color: null,\n text-field-hover-label-text-color: null,\n text-field-hover-leading-icon-color: null,\n text-field-hover-outline-color: null,\n text-field-hover-outline-width: null,\n text-field-hover-supporting-text-color: null,\n text-field-input-text-color: null,\n text-field-input-text-font: null,\n text-field-input-text-line-height: null,\n text-field-input-text-size: null,\n text-field-input-text-tracking: null,\n text-field-input-text-weight: null,\n text-field-label-text-color: null,\n text-field-label-text-font: null,\n text-field-label-text-line-height: null,\n text-field-label-text-populated-line-height: null,\n text-field-label-text-populated-size: null,\n text-field-label-text-size: null,\n text-field-label-text-tracking: null,\n text-field-label-text-weight: null,\n text-field-leading-icon-color: null,\n text-field-leading-icon-size: null,\n text-field-outline-color: null,\n text-field-outline-width: null,\n text-field-supporting-text-color: null,\n text-field-supporting-text-font: null,\n text-field-supporting-text-line-height: null,\n text-field-supporting-text-size: null,\n text-field-supporting-text-tracking: null,\n text-field-supporting-text-weight: null\n);\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n @include theme.validate-theme-keys($_light-theme, $theme);\n\n @include container-fill-color(\n (\n default: map.get($theme, text-field-container-color),\n disabled: map.get($theme, text-field-disabled-container-color),\n )\n );\n @include outline-color(\n (\n default: map.get($theme, text-field-outline-color),\n hover: map.get($theme, text-field-hover-outline-color),\n focus: map.get($theme, text-field-focus-outline-color),\n disabled: map.get($theme, text-field-disabled-outline-color),\n )\n );\n @include _error-outline-color(\n (\n default: map.get($theme, text-field-error-outline-color),\n hover: map.get($theme, text-field-error-hover-outline-color),\n focus: map.get($theme, text-field-error-focus-outline-color),\n )\n );\n @include outline-width(\n (\n default: map.get($theme, text-field-outline-width),\n hover: map.get($theme, text-field-hover-outline-width),\n focus: map.get($theme, text-field-focus-outline-width),\n )\n );\n @include _menu-container-color(map.get($theme, menu-container-color));\n @include _menu-container-elevation(\n map.get($resolvers, elevation),\n $shadow-color: map.get($theme, menu-container-shadow-color),\n $elevation: map.get($theme, menu-container-elevation)\n );\n @include _menu-container-shape(map.get($theme, menu-container-shape));\n @include _menu-divider-color(map.get($theme, menu-divider-color));\n @include _menu-divider-height(map.get($theme, menu-divider-height));\n @include _menu-list-item-container-height(\n map.get($theme, menu-list-item-container-height)\n );\n @include _menu-list-item-label-text-color(\n map.get($theme, menu-list-item-label-text-color)\n );\n @include _menu-list-item-label-text-typography(\n (\n font: map.get($theme, menu-list-item-label-text-font),\n line-height: map.get($theme, menu-list-item-label-text-line-height),\n size: map.get($theme, menu-list-item-label-text-size),\n tracking: map.get($theme, menu-list-item-label-text-tracking),\n weight: map.get($theme, menu-list-item-label-text-weight),\n )\n );\n @include _menu-list-item-selected-container-color(\n map.get($theme, menu-list-item-selected-container-color)\n );\n @include _menu-list-item-with-leading-icon-leading-icon-color(\n map.get($theme, menu-list-item-with-leading-icon-leading-icon-color)\n );\n @include _menu-list-item-with-leading-icon-leading-icon-size(\n map.get($theme, menu-list-item-with-leading-icon-leading-icon-size)\n );\n // TODO: Create new mixin for trailing icon theming when select supports it.\n @include _menu-list-item-with-leading-icon-leading-icon-color(\n map.get($theme, menu-list-item-with-trailing-icon-trailing-icon-color)\n );\n @include _menu-list-item-with-leading-icon-leading-icon-size(\n map.get($theme, menu-list-item-with-trailing-icon-trailing-icon-size)\n );\n @include bottom-line-color(\n (\n default: map.get($theme, text-field-active-indicator-color),\n hover: map.get($theme, text-field-hover-active-indicator-color),\n focus: map.get($theme, text-field-focus-active-indicator-color),\n disabled: map.get($theme, text-field-disabled-indicator-color),\n )\n );\n @include _text-field-error-active-indicator-color(\n (\n default: map.get($theme, text-field-error-active-indicator-color),\n hover: map.get($theme, text-field-error-hover-active-indicator-color),\n focus: map.get($theme, text-field-error-focus-active-indicator-color),\n )\n );\n @include _text-field-active-indicator-height(\n map.get($theme, text-field-active-indicator-height)\n );\n @include _text-field-caret-color(\n (\n default: map.get($theme, text-field-caret-color),\n hover: map.get($theme, text-field-hover-caret-color),\n focus: map.get($theme, text-field-focus-caret-color),\n )\n );\n @include _text-field-error-caret-color(\n (\n default: map.get($theme, text-field-error-caret-color),\n hover: map.get($theme, text-field-error-hover-caret-color),\n focus: map.get($theme, text-field-error-focus-caret-color),\n )\n );\n @include ink-color(\n (\n default: map.get($theme, text-field-input-text-color),\n hover: map.get($theme, text-field-hover-input-text-color),\n focus: map.get($theme, text-field-focus-input-text-color),\n disabled: map.get($theme, text-field-disabled-input-text-color),\n )\n );\n @include _error-input-text-color(\n (\n default: map.get($theme, text-field-error-input-text-color),\n hover: map.get($theme, text-field-error-hover-input-text-color),\n focus: map.get($theme, text-field-error-focus-input-text-color),\n )\n );\n @include label-color(\n (\n default: map.get($theme, text-field-label-text-color),\n hover: map.get($theme, text-field-hover-label-text-color),\n focus: map.get($theme, text-field-focus-label-text-color),\n disabled: map.get($theme, text-field-disabled-label-text-color),\n )\n );\n @include label-floating-color(\n (\n default: map.get($theme, text-field-label-text-color),\n hover: map.get($theme, text-field-hover-label-text-color),\n focus: map.get($theme, text-field-focus-label-text-color),\n disabled: map.get($theme, text-field-disabled-label-text-color),\n )\n );\n @include _error-label-text-color(\n (\n default: map.get($theme, text-field-error-label-text-color),\n hover: map.get($theme, text-field-error-hover-label-text-color),\n focus: map.get($theme, text-field-error-focus-label-text-color),\n )\n );\n @include _text-field-leading-icon-color(\n (\n default: map.get($theme, text-field-leading-icon-color),\n hover: map.get($theme, text-field-hover-leading-icon-color),\n focus: map.get($theme, text-field-focus-leading-icon-color),\n disabled: map.get($theme, text-field-disabled-leading-icon-color),\n )\n );\n @include _error-text-field-leading-icon-color(\n (\n default: map.get($theme, text-field-error-leading-icon-color),\n hover: map.get($theme, text-field-error-hover-leading-icon-color),\n focus: map.get($theme, text-field-error-focus-leading-icon-color),\n )\n );\n @include select-helper-text-theme.helper-text-color(\n (\n default: map.get($theme, text-field-supporting-text-color),\n disabled: map.get($theme, text-field-disabled-supporting-text-color),\n )\n );\n @include select-helper-text-theme.helper-text-validation-color(\n map.get($theme, text-field-error-supporting-text-color)\n );\n @include _text-field-input-text-typography(\n (\n font: map.get($theme, text-field-input-text-font),\n line-height: map.get($theme, text-field-input-text-line-height),\n size: map.get($theme, text-field-input-text-size),\n tracking: map.get($theme, text-field-input-text-tracking),\n weight: map.get($theme, text-field-input-text-weight),\n )\n );\n @include _text-field-label-text-typography(\n (\n font: map.get($theme, text-field-label-text-font),\n line-height: map.get($theme, text-field-label-text-line-height),\n size: map.get($theme, text-field-label-text-size),\n tracking: map.get($theme, text-field-label-text-tracking),\n weight: map.get($theme, text-field-label-text-weight),\n )\n );\n @include _text-field-label-text-populated-typography(\n (\n line-height: map.get($theme, text-field-label-text-populated-line-height),\n size: map.get($theme, text-field-label-text-populated-size),\n )\n );\n @include _text-field-supporting-text-typography(\n (\n font: map.get($theme, text-field-supporting-text-font),\n line-height: map.get($theme, text-field-supporting-text-line-height),\n size: map.get($theme, text-field-supporting-text-size),\n tracking: map.get($theme, text-field-supporting-text-tracking),\n weight: map.get($theme, text-field-supporting-text-weight),\n )\n );\n}\n\n@mixin _text-field-supporting-text-typography($typography-theme) {\n & + .mdc-select-helper-text {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin _text-field-input-text-typography($typography-theme) {\n .mdc-select__selected-text {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin _text-field-label-text-populated-typography($typography-theme) {\n .mdc-floating-label--float-above,\n // Used for CSS specificity to match with selector used in `outlined-height()`.\n &.mdc-select--with-leading-icon .mdc-select__anchor .mdc-notched-outline .mdc-floating-label.mdc-floating-label--float-above {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin _text-field-label-text-typography($typography-theme) {\n .mdc-floating-label {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin _error-outline-color($color) {\n &.mdc-select--invalid {\n @include outline-color($color);\n }\n}\n\n@mixin _error-text-field-leading-icon-color($color) {\n &.mdc-select--invalid {\n @include _text-field-leading-icon-color($color);\n }\n}\n\n@mixin _text-field-leading-icon-color($color) {\n @include _if-enabled {\n @include _set-text-field-leading-icon-color(\n state.get-default-state($color)\n );\n\n &:not(.mdc-select--focused):hover {\n @include _set-text-field-leading-icon-color(\n state.get-hover-state($color)\n );\n }\n\n @include _if-focused {\n @include _set-text-field-leading-icon-color(\n state.get-focus-state($color)\n );\n }\n }\n\n @include _if-disabled {\n @include _set-text-field-leading-icon-color(\n state.get-disabled-state($color)\n );\n }\n}\n\n@mixin _set-text-field-leading-icon-color($color) {\n .mdc-select__anchor .mdc-select__icon {\n @include theme.property(color, $color);\n }\n}\n\n@mixin _error-label-text-color($color) {\n &.mdc-select--invalid {\n @include label-floating-color($color);\n }\n}\n\n@mixin _error-input-text-color($color) {\n &.mdc-select--invalid {\n @include ink-color($color);\n }\n}\n\n@mixin _text-field-caret-color($color) {\n @include dropdown-icon-color($color);\n}\n\n@mixin _text-field-error-caret-color($color) {\n &.mdc-select--invalid {\n @include dropdown-icon-color($color);\n }\n}\n\n@mixin _text-field-error-active-indicator-color($color) {\n &.mdc-select--invalid {\n @include bottom-line-color($color);\n }\n}\n\n@mixin _text-field-active-indicator-height($height) {\n .mdc-line-ripple {\n @include line-ripple-mixins.height($height);\n }\n}\n\n@mixin _menu-list-item-with-leading-icon-leading-icon-color($color) {\n &:not(.mdc-select--disabled) .mdc-select__option .mdc-select__icon {\n @include theme.property(color, $color);\n }\n}\n\n@mixin _menu-list-item-with-leading-icon-leading-icon-size($size) {\n &:not(.mdc-select--disabled) .mdc-select__option .mdc-select__icon {\n @include theme.property(font-size, $size);\n }\n}\n\n@mixin _menu-list-item-selected-container-color($color) {\n .mdc-select__option {\n @include list-evolution-mixins.list-item-selected-container-color($color);\n }\n}\n\n@mixin _menu-list-item-label-text-typography($typography-theme) {\n .mdc-select__option {\n @include list-evolution-mixins.list-primary-text-typography(\n $typography-theme\n );\n }\n}\n\n@mixin _menu-list-item-label-text-color($color) {\n .mdc-select__option {\n @include list-evolution-mixins.list-primary-text-ink-color($color);\n }\n}\n\n@mixin _menu-list-item-container-height($height) {\n .mdc-select__option {\n @include list-evolution-mixins.list-item-height($height);\n }\n}\n\n@mixin _menu-divider-color($color) {\n .mdc-select__list {\n @include list-evolution-mixins.divider-color($color);\n }\n}\n\n@mixin _menu-divider-height($height) {\n .mdc-select__list {\n @include list-evolution-mixins.divider-height($height);\n }\n}\n\n@mixin _menu-container-color($color) {\n .mdc-select__menu {\n @include menu-surface-mixins.fill-color($color);\n }\n}\n\n@mixin _menu-container-elevation($resolver, $shadow-color, $elevation) {\n .mdc-select__menu {\n @include elevation-theme.with-resolver(\n $resolver,\n $elevation: $elevation,\n $shadow-color: $shadow-color\n );\n }\n}\n\n@mixin _menu-container-shape($shape) {\n .mdc-select__menu {\n @include menu-surface-mixins.shape-radius($shape);\n }\n}\n\n@mixin menu-list-item-secondary-label-text-color($color) {\n .mdc-select__list {\n @include list-evolution-mixins.list-secondary-text-ink-color($color);\n }\n}\n\n@mixin menu-list-item-secondary-label-text-typography($typography-theme) {\n .mdc-select__list {\n @include list-evolution-mixins.list-secondary-text-typography(\n $typography-theme\n );\n }\n}\n\n/// Sets the min-width of the select.\n/// @param {Number} $min-width - The desired min-width.\n/// @deprecated using this mixin is no longer required, and clients may set\n/// the attribute directly\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n min-width: $min-width;\n }\n}\n\n/// Sets the select behavior to change width dynamically based on content.\n/// @param {Number} $min-width - The min-width of the select, which should be\n/// large enough to allow the label (if exists) to display in full.\n@mixin variable-width($min-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__anchor {\n @include feature-targeting.targets($feat-structure) {\n width: 100%;\n min-width: $min-width;\n }\n }\n}\n\n@mixin ink-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _ink-color(state.get-default-state($color-or-map), $query: $query);\n }\n\n @include _if-disabled {\n @include _ink-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _container-fill-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n }\n\n @include _if-disabled {\n @include _container-fill-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin dropdown-icon-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _dropdown-icon-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:not(.mdc-select--focused):hover {\n @include _dropdown-icon-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n\n @include _if-focused {\n @include _dropdown-icon-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n }\n\n @include _if-disabled {\n @include _dropdown-icon-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin label-floating-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _label-floating-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:not(.mdc-select--focused):hover {\n @include _label-floating-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n }\n}\n\n@mixin bottom-line-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _bottom-line-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n // bottom line inactive/active are on different elements, does not need\n // to check for :not() focused\n &:hover {\n @include _bottom-line-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n\n @include _focused-line-ripple-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n\n @include _if-disabled {\n @include _bottom-line-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin label-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _label-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n @include _if-focused {\n @include _label-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n\n &:not(.mdc-select--focused):hover {\n @include _label-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n }\n\n @include _if-disabled {\n @include _label-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin outline-color($color-or-map, $query: feature-targeting.all()) {\n @include _if-enabled {\n @include _outline-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:not(.mdc-select--focused) .mdc-select__anchor:hover {\n @include _hover-outline-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n\n @include _if-focused {\n @include _focused-outline-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n }\n\n @include _if-disabled {\n @include _outline-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin outline-width($width) {\n @include _if-enabled {\n @include _outline-width(state.get-default-state($width));\n\n &:not(.mdc-select--focused) .mdc-select__anchor:hover {\n @include _outline-width(state.get-hover-state($width));\n }\n\n @include _if-focused {\n .mdc-notched-outline {\n @include _outline-width(state.get-focus-state($width));\n }\n }\n }\n}\n\n@mixin _outline-width($width) {\n @if $width {\n @include notched-outline-mixins.stroke-width($width);\n }\n}\n\n///\n/// Sets the dropdown icon to the specified size.\n///\n@mixin dropdown-icon-size($size, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__dropdown-icon {\n @include feature-targeting.targets($feat-structure) {\n width: $size;\n height: $size;\n }\n }\n}\n\n@mixin filled-shape-radius(\n $radius,\n $density-scale: $density-scale,\n $rtl-reflexive: false,\n $query: feature-targeting.all()\n) {\n @if meta.type-of($radius) == 'list' and list.length($radius) > 2 {\n @error \"mdc-select: Invalid radius #{$radius}. Only top-left and top-right corners may be customized.\";\n }\n\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n $masked-radius: shape-functions.mask-radius($radius, 1 1 0 0);\n\n .mdc-select__anchor {\n @include shape-mixins.radius(\n $masked-radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n}\n\n@mixin outline-shape-radius(\n $radius,\n $density-scale: $density-scale,\n $rtl-reflexive: false,\n $query: feature-targeting.all(),\n $height: null\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @if not $height {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n }\n\n .mdc-notched-outline {\n @include notched-outline-mixins.shape-radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n\n $resolved-radius: shape-functions.resolve-radius(\n $radius,\n $component-height: $height\n );\n $unpacked-radius: shape-functions.unpack-radius($resolved-radius);\n $top-left-radius: list.nth($unpacked-radius, 1);\n $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n $top-left-radius-px: $top-left-radius;\n @if ($top-left-is-custom-prop) {\n $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n }\n\n @if (\n $top-left-is-custom-prop or\n $top-left-radius-px >\n notched-outline-variables.$leading-width\n ) {\n .mdc-select__anchor {\n @include _apply-outline-shape-padding(\n padding-left,\n $top-left-radius,\n $add-label-padding: true,\n $query: $query\n );\n\n @include rtl.rtl {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n padding-left: 0;\n }\n @include _apply-outline-shape-padding(\n padding-right,\n $top-left-radius,\n $add-label-padding: true,\n $query: $query\n );\n }\n }\n\n + .mdc-select-helper-text {\n @include _apply-outline-shape-padding(\n margin-left,\n $top-left-radius,\n $add-label-padding: true,\n $query: $query\n );\n\n @include rtl.rtl {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: 0;\n }\n @include _apply-outline-shape-padding(\n margin-right,\n $top-left-radius,\n $add-label-padding: true,\n $query: $query\n );\n }\n }\n\n // Unlike textfield, select does not need to re-apply leading icon padding.\n // This is because select only has one potential leading class, not two\n // extra classes like textfield (leading + trailing). Textfield's two extra\n // classes can cause specificity conflicts, requiring everything to be\n // re-applied.\n }\n}\n\n///\n/// Sets density scale for filled select variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n///\n@mixin filled-density(\n $density-scale,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include filled-height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: $query\n );\n @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for filled select variant with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n///\n@mixin filled-with-leading-icon-density(\n $density-scale,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include filled-with-leading-icon-height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: $query\n );\n @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select (Excluding outlined select with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-density($density-scale, $query: feature-targeting.all()) {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-height($height, $query: $query);\n @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-with-leading-icon-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-with-leading-icon-height($height, $query: $query);\n @include _list-density($density-scale, $query: $query);\n}\n\n@mixin _list-density($density-scale, $query) {\n @include list-mixins.deprecated-single-line-density(\n $density-scale,\n $query: $query\n );\n .mdc-select__one-line-option {\n @include list-evolution-mixins.one-line-item-density(\n $density-scale,\n $exclude-variants: true,\n $query: $query\n );\n }\n .mdc-select__two-line-option {\n @include list-evolution-mixins.two-line-item-density(\n $density-scale,\n $query: $query\n );\n }\n}\n\n///\n/// Sets height of default select variant.\n///\n/// @param {Number} $new-height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n/// that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-height(\n $new-height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $filled-baseline-top: $filled-baseline-top,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__anchor {\n @include feature-targeting.targets($feat-structure) {\n height: $new-height;\n }\n\n // Filled variant is aligned to baseline...\n @include typography-mixins.baseline(\n $top: $filled-baseline-top,\n $display: flex,\n $query: $query\n );\n // ...unless it is too small to display a label\n @if $new-height < $minimum-height-for-filled-label {\n @include center-aligned($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n .mdc-floating-label {\n display: none;\n }\n }\n }\n }\n\n // No-label variants are always centered\n &.mdc-select--no-label .mdc-select__anchor {\n @include center-aligned($query: $query);\n }\n\n @if $new-height < $height {\n @include dropdown-icon-size(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--filled {\n @include truncate-floating-label-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets height of filled select variant with leading icon.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n/// that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-with-leading-icon-height(\n $new-height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $filled-baseline-top: $filled-baseline-top,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include filled-height(\n $new-height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $filled-baseline-top: $filled-baseline-top,\n $query: $query\n );\n\n @if $new-height < $height {\n @include select-icon-theme.size(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--filled {\n @include truncate-floating-label-max-width(\n $leading-icon-size: select-icon-theme.$dense-icon-size,\n $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-item__graphic {\n width: select-icon-theme.$dense-icon-size;\n height: select-icon-theme.$dense-icon-size;\n }\n\n @include list-evolution-mixins.item-start-size(\n $width: select-icon-theme.$dense-icon-size + 12px,\n $height: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n .mdc-select__anchor {\n @include leading-icon-floating-label-position(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets height of outlined select variant (Excluding outlined select with leading icon).\n///\n/// @param {Number} $new-height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n///\n@mixin outlined-height(\n $new-height,\n $keyframe-suffix: select-outlined-#{$new-height},\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $positionY: get-outlined-label-position-y($new-height);\n\n .mdc-select__anchor {\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $positionY,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $positionY,\n $query: $query\n );\n }\n\n @include feature-targeting.targets($feat-structure) {\n height: $new-height;\n }\n }\n\n @if $new-height < $height {\n @include dropdown-icon-size(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--outlined {\n @include truncate-notched-outline-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets height of outlined select with leading icon variant.\n///\n/// @param {Number} $new-height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n///\n@mixin outlined-with-leading-icon-height(\n $new-height,\n $keyframe-suffix: null,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__anchor {\n @if $new-height < $height {\n @include dropdown-icon-size(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n @include outlined-with-leading-icon-floating-label-position-animation(\n $new-height,\n select-icon-theme.$dense-icon-size,\n $keyframe-suffix,\n $query: $query\n );\n } @else {\n @include outlined-with-leading-icon-floating-label-position-animation(\n $new-height,\n select-icon-theme.$icon-size,\n $keyframe-suffix,\n $query: $query\n );\n }\n\n @include feature-targeting.targets($feat-structure) {\n height: $new-height;\n }\n }\n\n @if $new-height < $height {\n .mdc-deprecated-list-item__graphic {\n width: select-icon-theme.$dense-icon-size;\n height: select-icon-theme.$dense-icon-size;\n }\n\n @include list-evolution-mixins.item-start-size(\n $width: select-icon-theme.$dense-icon-size + 12px,\n $height: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n @include select-icon-theme.size(\n select-icon-theme.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--outlined {\n @include truncate-notched-outline-max-width(\n $leading-icon-size: select-icon-theme.$dense-icon-size,\n $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n// $add-label-padding is copied from textfield's mixin, even though select\n// always sets it to true. This is to try and keep things aligned between select\n// and textfield for when these styles are refactored into shared styles.\n@mixin _apply-outline-shape-padding(\n $property,\n $padding,\n $add-label-padding: false,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $padding-is-custom-prop: custom-properties.is-custom-prop($padding);\n $padding-px: $padding;\n @if ($padding-is-custom-prop) {\n $padding-px: custom-properties.get-fallback($padding);\n }\n\n @include feature-targeting.targets($feat-structure) {\n // The shape should only change the padding if the radius becomes greater\n // than the default padding. That means we need to add more padding.\n @if ($padding-px > notched-outline-variables.$leading-width) {\n // Set a px value if it's greater. This is either the only value (if\n // we're given an exact value), or an IE11 fallback if we're given a\n // custom property and the fallback value is greater than the padding.\n $value: $padding-px;\n @if ($add-label-padding) {\n // If this is for the top-left leading, add the notched outline padding\n // to keep it aligned with the label\n $value: $padding-px + notched-outline-variables.$padding;\n }\n\n @include rtl.ignore-next-line();\n #{$property}: $value;\n @include gss.annotate(\n (\n alternate: $padding-is-custom-prop,\n )\n );\n }\n @if ($padding-is-custom-prop) {\n // If it's a custom property, always add it since the value may change\n // to be greater than the padding at runtime, even if the fallback is\n // not currently greater than the default padding.\n $value: custom-properties.create-var($padding);\n @if ($add-label-padding) {\n $value: calc(#{$value} + #{notched-outline-variables.$padding});\n }\n\n // Interpolation is a workaround for sass/sass#3259.\n @supports (top: max(#{0%})) {\n // A max() function makes this runtime dynamic. The padding will be\n // whichever is greater: the default horizontal padding, or the\n // calculated custom property plus extra padding.\n @include rtl.ignore-next-line();\n #{$property}: max(#{$anchor-padding-left}, #{$value});\n }\n }\n }\n}\n\n// Removes filled baseline alignment\n@mixin center-aligned($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select__selected-text {\n @include typography-mixins.zero-width-prefix($query: $query);\n }\n\n @include feature-targeting.targets($feat-structure) {\n // In order for a flexbox container to participate in baseline alignment,\n // it follows these rules to determine where its baseline is:\n // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n //\n // In order to avoid leading icons \"controlling\" the baseline (since they\n // are the first child), flexbox will generate a baseline from any child\n // flex items that participate in baseline alignment.\n //\n // Icons are set to \"align-self: center\", while all other children are\n // aligned to baseline. The next problem is deciding which child is\n // used to determine the baseline.\n //\n // According to spec, the item with the largest distance between its\n // baseline and the edge of the cross axis is placed flush with that edge,\n // making it the baseline of the container.\n // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n //\n // For the filled variant, the pseudo ::before strut is the \"largest\"\n // child since the input has a height of 28px and the strut is 40px. We\n // can emulate center alignment and force the baseline to use the input\n // text by making the input the full height of the container and removing\n // the baseline strut.\n //\n // IE11 does not respect this, and makes the leading icon (if present)\n // the baseline.\n .mdc-select__selected-text-container {\n height: 100%;\n display: inline-flex;\n align-items: center;\n }\n\n &::before {\n display: none;\n }\n }\n}\n\n///\n/// Sets the position of the floating label for a select with leading icon.\n/// @param {number} $icon-size - The size of the leading icon.\n///\n@mixin leading-icon-floating-label-position(\n $icon-size: select-icon-theme.$icon-size,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $icon-total-width: $icon-size + 2 * select-icon-theme.$icon-horizontal-margin;\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-position(left, $icon-total-width);\n }\n }\n}\n\n///\n/// Sets the floating label position and animations for a given height for an\n/// outlined select with leaing icon.\n/// @param {number} $icon-size - The size of the leading icon.\n/// @param {string} $keyframe-suffix - The suffix for the newly generated keyframes.\n///\n@mixin outlined-with-leading-icon-floating-label-position-animation(\n $height,\n $icon-size,\n $keyframe-suffix: select-outlined-leading-icon-#{$height},\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $icon-total-width: $icon-size + 2 * select-icon-theme.$icon-horizontal-margin;\n $resting-position-x: $icon-total-width -\n select-icon-theme.$icon-horizontal-margin;\n $float-position-y: get-outlined-label-position-y($height);\n $float-position-x: $icon-size + select-icon-theme.$icon-horizontal-margin -\n notched-outline-variables.$notch-gutter-size;\n\n // Resting label position\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-position(left, $resting-position-x);\n }\n }\n\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $float-position-y,\n $float-position-x,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $float-position-y,\n $float-position-x,\n $query: $query\n );\n }\n\n $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n @include rtl.rtl {\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n }\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix-rtl,\n $float-position-y,\n -($float-position-x),\n $query: $query\n );\n }\n}\n\n///\n/// Truncates the max-width of the floating label according to sizes of the\n/// leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin truncate-floating-label-max-width(\n $leading-icon-size,\n $dropdown-icon-size,\n $query: feature-targeting.all()\n) {\n $truncation: select-icon-theme.$icon-horizontal-margin * 2 +\n $dropdown-icon-size;\n\n @if $leading-icon-size > 0 {\n $truncation: $truncation +\n select-icon-theme.$icon-horizontal-margin *\n 2 +\n $leading-icon-size;\n } @else {\n $truncation: $truncation + $outline-label-offset;\n }\n\n .mdc-floating-label {\n @include floating-label-mixins.max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n }\n\n .mdc-floating-label--float-above {\n $scale: floating-label-variables.$float-scale;\n @include floating-label-mixins.max-width(\n calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n $query: $query\n );\n }\n}\n\n///\n/// Truncates the max-width of the notched outline according to the sizes of\n/// the leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin truncate-notched-outline-max-width(\n $leading-icon-size,\n $dropdown-icon-size,\n $query: feature-targeting.all()\n) {\n $truncation: select-icon-theme.$icon-horizontal-margin * 2 +\n $dropdown-icon-size + notched-outline-variables.$leading-width;\n\n @if $leading-icon-size > 0 {\n $truncation: $truncation +\n select-icon-theme.$icon-horizontal-margin +\n $leading-icon-size;\n }\n .mdc-select__anchor {\n @include notched-outline-mixins.notch-max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n }\n}\n\n/// Selector for focused state\n/// @access private\n@mixin _if-focused {\n &.mdc-select--focused {\n @content;\n }\n}\n\n/// Selector for enabled state\n/// @access private\n@mixin _if-enabled {\n &:not(.mdc-select--disabled) {\n @content;\n }\n}\n\n/// Selector for disabled state\n/// @access private\n@mixin _if-disabled {\n &.mdc-select--disabled {\n @content;\n }\n}\n\n@mixin _ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n .mdc-select__selected-text {\n @include feature-targeting.targets($feat-color) {\n @include theme-mixins.property(color, $color);\n }\n }\n }\n}\n\n@mixin _container-fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n .mdc-select__anchor {\n @include feature-targeting.targets($feat-color) {\n @include theme-mixins.property(background-color, $color);\n }\n }\n }\n}\n\n@mixin _bottom-line-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-line-ripple {\n @include line-ripple-mixins.inactive-color($color, $query: $query);\n }\n }\n}\n\n@mixin _focused-line-ripple-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-line-ripple {\n @include line-ripple-mixins.active-color($color, $query: $query);\n }\n }\n}\n\n@mixin _outline-color($color, $query: feature-targeting.all()) {\n @if $color {\n @include notched-outline-mixins.color($color, $query: $query);\n }\n}\n\n@mixin _hover-outline-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-notched-outline {\n @include notched-outline-mixins.color($color, $query: $query);\n }\n }\n}\n\n@mixin _focused-outline-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-notched-outline {\n @include notched-outline-mixins.stroke-width(\n $outlined-stroke-width,\n $query: $query\n );\n @include notched-outline-mixins.color($color, $query: $query);\n }\n }\n}\n\n@mixin _label-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-floating-label {\n @include floating-label-mixins.ink-color($color, $query: $query);\n }\n }\n}\n\n@mixin _label-floating-color($color, $query: feature-targeting.all()) {\n @if $color {\n .mdc-floating-label--float-above {\n @include floating-label-mixins.ink-color($color, $query: $query);\n }\n }\n}\n\n///\n/// Sets the dropdown icon to the specified color.\n/// @access private\n///\n@mixin _dropdown-icon-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n @include feature-targeting.targets($feat-color) {\n .mdc-select__dropdown-icon {\n @include theme-mixins.property(fill, $color);\n }\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/theme/state';\n@use '@material/theme/variables' as theme-variables;\n\n$helper-text-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;\n$disabled-helper-text-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n\n@mixin helper-text-color($color-or-map, $query: feature-targeting.all()) {\n &:not(.mdc-select--disabled) {\n @include _helper-text-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n }\n\n &.mdc-select--disabled {\n @include _helper-text-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin helper-text-validation-color(\n $color-or-map,\n $query: feature-targeting.all()\n) {\n &:not(.mdc-select--disabled) {\n @include _helper-text-validation-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:not(.mdc-select--focused):hover {\n @include _helper-text-validation-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n }\n}\n\n// Private mixins\n\n@mixin _helper-text-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n & + .mdc-select-helper-text {\n @include feature-targeting.targets($feat-color) {\n @include theme-mixins.property(color, $color);\n }\n }\n }\n}\n\n@mixin _helper-text-validation-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n &.mdc-select--invalid + .mdc-select-helper-text--validation-msg {\n @include feature-targeting.targets($feat-color) {\n @include theme-mixins.property(color, $color);\n }\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/theme/state';\n@use '@material/theme/variables' as theme-variables;\n\n$icon-size: 24px !default;\n$dense-icon-size: 20px !default;\n$icon-horizontal-margin: 12px !default;\n\n$icon-color: rgba(theme-variables.prop-value(on-surface), 0.54) !default;\n$disabled-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n\n///\n/// Customizes the size (both width and height) of the icon.\n/// @param {Number} $size - the intended icon size.\n///\n@mixin size($size, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n .mdc-select__icon {\n width: $size;\n height: $size;\n font-size: $size;\n }\n }\n}\n\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n &:not(.mdc-select--disabled) {\n @include _icon-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n }\n\n &.mdc-select--disabled {\n @include _icon-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n@mixin icon-horizontal-margins($left, $right, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n .mdc-select__icon {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, $left, $right);\n }\n }\n}\n\n@mixin _icon-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n .mdc-select__icon {\n @include feature-targeting.targets($feat-color) {\n @include theme-mixins.property(color, $color);\n }\n }\n }\n}\n","// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/feature-targeting/feature-targeting';\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n $border-width: 1px,\n $border-style: solid,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: $border-width $border-style transparent;\n border-radius: inherit;\n content: '';\n pointer-events: none;\n }\n\n // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n @include forced-colors-mode($exclude-ie11: true) {\n @include feature-targeting.targets($feat-structure) {\n border-color: CanvasText;\n }\n }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap; /* added line */\n width: 1px;\n }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n @content;\n }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n @if $exclude-ie11 {\n @media screen and (forced-colors: active) {\n @content;\n }\n } @else {\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n @content;\n }\n }\n}\n","// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:list';\n@use 'sass:map';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n@use '@material/theme/theme-color';\n@use './evolution-mixins';\n\n@mixin deprecated-core-styles($query: feature-targeting.all()) {\n @include deprecated-without-ripple($query);\n @include deprecated-ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other list styles. It is recommended that most\n// users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-without-ripple($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-typography: feature-targeting.create-target($query, typography);\n\n $divider-color: if(\n theme-color.tone(theme-color.$background) == 'dark',\n variables.$deprecated-divider-color-on-dark-bg,\n variables.$deprecated-divider-color-on-light-bg\n );\n\n .mdc-deprecated-list {\n @include deprecated-base_($query);\n }\n\n @include deprecated-single-line-density(\n variables.$deprecated-single-line-density-scale,\n $query: $query\n );\n @include deprecated-item-secondary-text-ink-color(\n text-secondary-on-background,\n $query\n );\n @include deprecated-item-graphic-fill-color(transparent, $query);\n @include deprecated-item-graphic-ink-color(text-icon-on-background, $query);\n @include deprecated-item-meta-ink-color(text-hint-on-background, $query);\n @include deprecated-group-subheader-ink-color(\n text-primary-on-background,\n $query\n );\n @include deprecated-item-disabled-text-opacity(\n variables.$deprecated-text-disabled-opacity,\n $query\n );\n @include deprecated-item-disabled-text-color(\n variables.$deprecated-text-disabled-color,\n $query\n );\n @include deprecated-item-selected-text-color(\n variables.$deprecated-text-selected-color,\n $query\n );\n\n .mdc-deprecated-list--dense {\n @include feature-targeting.targets($feat-structure) {\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: 0.812rem;\n }\n }\n\n .mdc-deprecated-list-item__wrapper {\n @include feature-targeting.targets($feat-structure) {\n display: block;\n }\n }\n\n .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n @include deprecated-item-base_;\n }\n\n // For components using aria-activedescendant, the focus pseudoclass is\n // never applied and use `.mdc-ripple-upgraded--background-focused` instead.\n &:not(.mdc-deprecated-list-item--selected):focus::before,\n &.mdc-ripple-upgraded--background-focused::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n &.mdc-deprecated-list-item--selected::before {\n @include dom-mixins.transparent-border(\n $border-width: 3px,\n $border-style: double,\n $query: $query\n );\n }\n\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-textual-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-textual-variant-config,\n $query\n );\n\n .mdc-deprecated-list--icon-list & {\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-icon-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-icon-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--avatar-list & {\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-avatar-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-avatar-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--thumbnail-list & {\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-thumbnail-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-thumbnail-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--image-list & {\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-image-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-image-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--video-list & {\n @include deprecated-list-item-padding-variant(\n variables.$deprecated-video-variant-config,\n $query\n );\n @include deprecated-list-item-height-variant(\n variables.$deprecated-video-variant-config,\n $query\n );\n }\n }\n\n // This is included here to preserve expected specificity behavior (avatar\n // graphic styles must take priority).\n // TODO(b/157038316): regroup this with density styles when nesting is fixed.\n .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic {\n @include deprecated-graphic-size-dense_(20px, $query);\n }\n\n .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-structure) {\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n fill: currentColor;\n object-fit: cover;\n }\n\n // TODO(b/156624966): this retains legacy spacing but should be updated.\n @include deprecated-graphic-size-variant(\n variables.$deprecated-deprecated-graphic-config,\n $query\n );\n\n .mdc-deprecated-list--icon-list & {\n @include deprecated-graphic-size-variant(\n variables.$deprecated-icon-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--avatar-list & {\n @include deprecated-graphic-size-variant(\n variables.$deprecated-avatar-variant-config,\n $query\n );\n @include feature-targeting.targets($feat-structure) {\n border-radius: 50%;\n }\n }\n\n .mdc-deprecated-list--thumbnail-list & {\n @include deprecated-graphic-size-variant(\n variables.$deprecated-thumbnail-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--image-list & {\n @include deprecated-graphic-size-variant(\n variables.$deprecated-image-variant-config,\n $query\n );\n }\n\n .mdc-deprecated-list--video-list & {\n @include deprecated-graphic-size-variant(\n variables.$deprecated-video-variant-config,\n $query\n );\n }\n }\n\n // Extra specificity is to override .material-icons display style if used in\n // conjunction with mdc-deprecated-list-item__graphic\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-deprecated-list .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n\n .mdc-deprecated-list-item__meta {\n &:not(.material-icons) {\n @include typography.typography(caption, $query);\n }\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: auto;\n @include rtl.ignore-next-line();\n margin-right: 0;\n\n @at-root {\n .mdc-deprecated-list-item[dir='rtl'] &,\n [dir='rtl'] .mdc-deprecated-list-item & {\n @include rtl.ignore-next-line();\n margin-left: 0;\n @include rtl.ignore-next-line();\n margin-right: auto;\n }\n }\n }\n }\n\n .mdc-deprecated-list-item__text {\n @include typography.overflow-ellipsis($query);\n }\n\n // Disable interaction on label elements that may automatically\n // toggle corresponding checkbox / radio input.\n .mdc-deprecated-list-item__text[for] {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n }\n }\n\n .mdc-deprecated-list-item__primary-text {\n @include typography.overflow-ellipsis($query);\n @include typography.text-baseline(\n $top: variables.$deprecated-item-primary-text-baseline-height,\n $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n $display: block,\n $query: $query\n );\n\n .mdc-deprecated-list--video-list &,\n .mdc-deprecated-list--image-list &,\n .mdc-deprecated-list--thumbnail-list &,\n .mdc-deprecated-list--avatar-list &,\n .mdc-deprecated-list--icon-list & {\n @include typography.text-baseline(\n $top:\n variables.$deprecated-item-primary-text-baseline-height-with-graphic,\n $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n $query: $query\n );\n }\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-deprecated-list--dense & {\n @include typography.text-baseline(\n $top: variables.$deprecated-dense-item-primary-text-baseline-height,\n $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n $query: $query\n );\n }\n // stylelint-enable plugin/selector-bem-pattern\n }\n\n .mdc-deprecated-list-item__secondary-text {\n @include typography.typography(body2, $query);\n @include typography.overflow-ellipsis($query);\n @include typography.text-baseline(\n $top: variables.$deprecated-item-secondary-text-baseline-height,\n $display: block,\n $query: $query\n );\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-deprecated-list--dense & {\n @include feature-targeting.targets($feat-structure) {\n font-size: inherit;\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n }\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-deprecated-list--dense .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n height: 40px;\n }\n }\n\n .mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {\n @include feature-targeting.targets($feat-structure) {\n align-self: flex-start;\n }\n }\n\n .mdc-deprecated-list--two-line {\n .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n height: variables.$deprecated-two-line-height;\n }\n }\n\n &.mdc-deprecated-list--video-list .mdc-deprecated-list-item,\n &.mdc-deprecated-list--image-list .mdc-deprecated-list-item,\n &.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,\n &.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,\n &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n height: variables.$deprecated-two-line-graphic-height;\n }\n }\n\n // Icons in multiline lists are the only graphic that isn't centered.\n &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-structure) {\n align-self: flex-start;\n margin-top: variables.$deprecated-two-line-icon-top-margin;\n }\n }\n }\n\n .mdc-deprecated-list--two-line.mdc-deprecated-list--dense\n .mdc-deprecated-list-item,\n .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n .mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n height: 60px;\n }\n }\n\n .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n .mdc-deprecated-list-item__graphic {\n @include deprecated-graphic-size-dense_(36px, $query);\n }\n\n // Only change mouse cursor for list items which are not disabled.\n :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n // Override anchor tag styles for the use-case of a list being used for navigation\n // stylelint-disable selector-max-type,selector-no-qualifying-type\n a.mdc-deprecated-list-item {\n @include feature-targeting.targets($feat-structure) {\n color: inherit;\n text-decoration: none;\n }\n }\n // stylelint-enable selector-max-type,selector-no-qualifying-type\n\n .mdc-deprecated-list-divider {\n @include feature-targeting.targets($feat-structure) {\n height: 0;\n margin: 0;\n border: none;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n }\n }\n\n // Note: ideally we'd be able to hoist this to the top-level `$feat-color`,\n // but doing so will cause the `border` declaration on\n // `.mdc-deprecated-list-divider` above to override it.\n @include deprecated-divider-color($divider-color, $query);\n\n // Deprecated. Use the specialized inset classes instead.\n // Items are fully inset using padding.\n .mdc-deprecated-list-divider--padded {\n @include deprecated-divider-inset-variant(\n variables.$deprecated-textual-variant-config,\n $use-padding: true,\n $query: $query\n );\n }\n\n // Deprecated. Use the specialized inset classes instead.\n // Items's leading, but not trailing, edge is inset to account for *avatar*\n // width.\n .mdc-deprecated-list-divider--inset {\n @include deprecated-divider-inset-variant(\n variables.$deprecated-avatar-variant-config,\n $trailing: false,\n $query: $query\n );\n }\n\n // Deprecated. Use the specialized inset classes instead.\n // Item's leading and trailing edges are inset to account for *avatar* width.\n .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded {\n @include deprecated-divider-inset-variant(\n variables.$deprecated-avatar-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-textual-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list--icon-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-icon-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list--avatar-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-avatar-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list--thumbnail-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-thumbnail-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list--image-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-image-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list--video-list {\n @include deprecated-divider-insets-variant(\n variables.$deprecated-video-variant-config,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-group {\n @include feature-targeting.targets($feat-structure) {\n // Cancel top/bottom padding on individual lists within group\n .mdc-deprecated-list {\n padding: 0;\n }\n }\n }\n\n .mdc-deprecated-list-group__subheader {\n $list-subheader-virtual-height: 3rem;\n $list-subheader-leading: map.get(\n map.get(typography.$styles, body1),\n line-height\n );\n $list-subheader-margin: calc(\n (#{$list-subheader-virtual-height} - #{$list-subheader-leading}) / 2\n );\n\n @include typography.typography(subtitle1, $query);\n\n @include feature-targeting.targets($feat-structure) {\n margin: $list-subheader-margin variables.$deprecated-side-padding;\n }\n }\n\n @include evolution-mixins.without-ripple($query: $query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// list styles. It is recommended that most users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-ripple($query: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // List items should support states by default, but it should be possible to opt out.\n :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n @include deprecated-item-interactive-ripple_($query);\n }\n\n // Set styles only for focus state on disabled list item.\n .mdc-deprecated-list-item--disabled {\n @include ripple.surface(\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple.surface(\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-base-color(\n theme-color.prop-value(on-surface),\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-base-color(\n theme-color.prop-value(on-surface),\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-focus-opacity(\n ripple-theme.states-opacity(primary, focus),\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-focus-opacity(\n ripple-theme.states-opacity(primary, focus),\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n\n #{variables.$deprecated-ripple-target},\n #{variables.$deprecated-temporary-ripple-target} {\n @include ripple.target-common($query: $query);\n }\n }\n\n @include evolution-mixins.with-ripple($query: $query);\n}\n\n///\n/// Sets ripple color for a list item.\n///\n@mixin deprecated-ripple-states($color, $query: feature-targeting.all()) {\n @include ripple-theme.states(\n $color: $color,\n $query: $query,\n $ripple-target: variables.$deprecated-ripple-target\n );\n @include ripple-theme.states(\n $color: $color,\n $query: $query,\n $ripple-target: variables.$deprecated-temporary-ripple-target\n );\n}\n\n/// Sets the text color of the list item in selected or activated state.\n/// @param {color} $color - The desired text color.\n@mixin deprecated-item-selected-text-color(\n $color,\n $query: feature-targeting.all()\n) {\n // \"Selected\" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.\n // \"Activated\" is more permanent. E.g., the currently highlighted navigation destination in a drawer.\n .mdc-deprecated-list-item--selected,\n .mdc-deprecated-list-item--activated {\n @include deprecated-item-primary-text-ink-color($color, $query: $query);\n @include deprecated-item-graphic-ink-color($color, $query: $query);\n }\n}\n\n@mixin deprecated-item-primary-text-ink-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n}\n\n@mixin deprecated-item-secondary-text-ink-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item__secondary-text {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n}\n\n@mixin deprecated-item-graphic-fill-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(background-color, $color);\n }\n }\n}\n\n@mixin deprecated-item-graphic-ink-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n}\n\n@mixin deprecated-item-meta-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item__meta {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n}\n\n///\n/// Sets shape radius (rounded) to single line list variant.\n///\n/// @param {Number | List<Number>} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.\n/// Set to `50%` for rounded shape.\n/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.\n/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.\n/// Defaults to `$mdc-deprecated-list-single-line-density-scale`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-shape-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$deprecated-single-line-density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$deprecated-single-line-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-deprecated-list-item {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n}\n\n@mixin deprecated-divider-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-divider {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(border-bottom-color, $color);\n }\n }\n}\n\n@mixin deprecated-group-subheader-ink-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-group__subheader {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n}\n\n@mixin deprecated-item-disabled-text-opacity(\n $opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text {\n @include feature-targeting.targets($feat-color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin deprecated-item-disabled-text-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-item--disabled {\n .mdc-deprecated-list-item__text,\n .mdc-deprecated-list-item__primary-text,\n .mdc-deprecated-list-item__secondary-text {\n @include feature-targeting.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n }\n}\n\n///\n/// Establishes each list item's padding using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-list-item-padding-variant(\n $variant-config,\n $query: feature-targeting.all()\n) {\n $leading-padding: map.get($variant-config, leading-padding);\n @include deprecated-list-item-padding($leading-padding, $query);\n}\n\n///\n/// Establishes each list item's padding.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n///\n/// @access public\n///\n@mixin deprecated-list-item-padding(\n $leading-padding,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n padding,\n $leading-padding,\n variables.$deprecated-trailing-padding\n );\n }\n}\n\n///\n/// Establishes each list item's single line height using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-list-item-height-variant(\n $variant-config,\n $query: feature-targeting.all()\n) {\n $single-line-height: map.get($variant-config, single-line-height);\n @include deprecated-list-item-height($single-line-height, $query);\n}\n\n///\n/// Establishes each list item's height.\n///\n/// @param {Number} $height The item's height.\n///\n/// @access public\n///\n@mixin deprecated-list-item-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n height: $height;\n }\n}\n\n///\n/// Sets the trailing margin used by icons.\n///\n/// @param {Number} $margin The trailing margin applied to icons.\n///\n/// @access public\n///\n@mixin deprecated-icon-margin($margin, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n .mdc-deprecated-list-item__graphic {\n @include rtl.reflexive-box(margin, right, $margin);\n }\n }\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-divider-insets-variant(\n $variant-config,\n $query: feature-targeting.all()\n) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n @include deprecated-divider-insets($leading-padding, $text-offset, $query);\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n/// @param {Number} $text-offset The item's text offset.\n///\n/// @access public\n///\n@mixin deprecated-divider-insets(\n $leading-padding,\n $text-offset,\n $query: feature-targeting.all()\n) {\n .mdc-deprecated-list-divider--inset-leading {\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $trailing: false,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-divider--inset-trailing {\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $leading: false,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing {\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding {\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $trailing: false,\n $use-padding: true,\n $query: $query\n );\n }\n\n .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding {\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $use-padding: true,\n $query: $query\n );\n }\n}\n\n// Sets the width and height of the graphic element using a variant config.\n@mixin deprecated-graphic-size-variant(\n $variant-config,\n $query: feature-targeting.all()\n) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n $width: map.get(map.get($variant-config, graphic-size), width);\n $height: map.get(map.get($variant-config, graphic-size), height);\n\n @include deprecated-graphic-size(\n $leading-padding,\n $text-offset,\n $width,\n $height,\n $query\n );\n}\n\n// Sets the width and height of the graphic element, as well as calculates the\n// trailing margin for the graphic element such that the text is always offset\n// from the item's leading edge by 72px, which is defined within the spec. If\n// height isn't specified, the graphic is assumed to be square.\n// TODO(b/155397992): restructure to use symmetric margins.\n@mixin deprecated-graphic-size(\n $leading-padding,\n $text-offset,\n $width,\n $height,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $margin-value: max(\n $text-offset - $leading-padding - $width,\n $leading-padding\n );\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, right, $margin-value);\n width: $width;\n height: $height;\n }\n}\n\n// Deprecated. Supports legacy density styles.\n@mixin deprecated-graphic-size-dense_($size, $query: feature-targeting.all()) {\n @include deprecated-graphic-size(\n $leading-padding: 16px,\n $text-offset: 16px,\n $width: $size,\n $height: $size,\n $query: $query\n );\n}\n\n///\n/// Computes the appropriate leading inset for a divider based on list type.\n///\n/// @param {String} $variant-config The list variant configuration.\n/// @param {Boolean} $leading Whether to apply the leading inset.\n/// @param {Boolean} $trailing Whether to apply the trailing inset.\n/// @param {Boolean} $use-padding Whether to align with padding vs. text offset.\n///\n/// @access private\n///\n@mixin deprecated-divider-inset-variant(\n $variant-config,\n $leading: true,\n $trailing: true,\n $use-padding: false,\n $query: feature-targeting.all()\n) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n\n @include deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $leading,\n $trailing,\n $use-padding,\n $query\n );\n}\n\n@mixin deprecated-divider-inset(\n $leading-padding,\n $text-offset,\n $leading: true,\n $trailing: true,\n $use-padding: false,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $trailing-inset: if($trailing, variables.$deprecated-trailing-padding, 0);\n $leading-inset: if(\n $leading,\n if($use-padding, $leading-padding, $text-offset),\n 0\n );\n\n @include feature-targeting.targets($feat-structure) {\n @if $leading {\n @include rtl.reflexive-box(margin, left, $leading-inset);\n }\n width: calc(100% - #{$leading-inset + $trailing-inset});\n }\n}\n\n///\n/// Sets density scale to single line list variant.\n///\n/// @param {Number} $density-scale Density scale for list. Supported density scales are `-4`, `-3`, `-2`, `-1` and `0`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$deprecated-single-line-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-deprecated-list-item {\n @include deprecated-single-line-height($height, $query: $query);\n }\n}\n\n///\n/// Sets height to single line list variant.\n///\n/// @param {Number} $height Height value in `px`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n height: $height;\n }\n}\n\n//\n// Private\n//\n\n@mixin deprecated-base_($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include typography.typography(subtitle1, $query);\n\n @include feature-targeting.targets($feat-typography) {\n // According to the mocks and stickersheet, the line-height is\n // adjusted to 24px for text content, same as for body1.\n /* @alternate */\n line-height: map.get(map.get(typography.$styles, body1), line-height);\n }\n\n @include feature-targeting.targets($feat-structure) {\n margin: 0;\n padding: 8px 0;\n list-style-type: none;\n\n &:focus {\n outline: none;\n }\n }\n\n @include deprecated-item-primary-text-ink-color(\n text-primary-on-background,\n $query\n );\n}\n\n@mixin deprecated-item-base_ {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n overflow: hidden;\n padding: 0;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ripple styles for an interactive list item (one that is enabled and inside an interactive list).\n@mixin deprecated-item-interactive-ripple_($query: feature-targeting.all()) {\n @include ripple.surface(\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple.surface(\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple-theme.states(\n theme-color.prop-value(on-surface),\n false,\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple-theme.states(\n theme-color.prop-value(on-surface),\n false,\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-activated(\n primary,\n false,\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-activated(\n primary,\n false,\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-selected(\n primary,\n false,\n $ripple-target: variables.$deprecated-ripple-target,\n $query: $query\n );\n @include ripple-theme.states-selected(\n primary,\n false,\n $ripple-target: variables.$deprecated-temporary-ripple-target,\n $query: $query\n );\n\n #{variables.$deprecated-ripple-target},\n #{variables.$deprecated-temporary-ripple-target} {\n @include ripple.target-common($query: $query);\n }\n}\n","// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme-color';\n@use './evolution-variables' as variables;\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include without-ripple($query);\n @include with-ripple($query);\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-typography: feature-targeting.create-target($query, typography);\n\n //\n // Items\n //\n\n @include list-primary-text-ink-color(text-primary-on-background, $query);\n @include list-secondary-text-ink-color(text-secondary-on-background, $query);\n @include list-overline-text-ink-color(text-hint-on-background, $query);\n @include list-icon-fill-color(transparent, $query);\n @include list-icon-ink-color(text-icon-on-background, $query);\n @include list-meta-text-ink-color(text-hint-on-background, $query);\n @include list-disabled-opacity(variables.$content-disabled-opacity, $query);\n @include list-disabled-ink-color(variables.$content-disabled-color, $query);\n @include list-selected-ink-color(variables.$content-selected-color, $query);\n\n @include group-subheader-ink-color(text-primary-on-background, $query);\n\n @include _high-contrast-mode($query);\n\n .mdc-list {\n @include list-base($query: $query);\n }\n\n .mdc-list-item__wrapper {\n @include feature-targeting.targets($feat-structure) {\n display: block;\n }\n }\n\n .mdc-list-item {\n @include item-base($query: $query);\n\n @include _one-line-item-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n @include _three-line-item-density(\n variables.$three-line-item-density-scale,\n $query: $query\n );\n\n @include one-line-item-start-alignment(center, $query: $query);\n @include two-line-item-start-alignment(\n $alignment: flex-start,\n $offset: 16px,\n $query: $query\n );\n @include three-line-item-start-alignment(\n $alignment: flex-start,\n $offset: 16px,\n $query: $query\n );\n\n @include one-line-item-end-alignment(center, $query: $query);\n @include two-line-item-end-alignment(center, $query: $query);\n @include three-line-item-end-alignment(\n $alignment: flex-start,\n $offset: 16px,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n align-items: stretch;\n cursor: pointer;\n }\n\n // Reset mouse cursor for disabled and non-interactive items.\n &.mdc-list-item--disabled,\n &.mdc-list-item--non-interactive {\n @include feature-targeting.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n // For components using aria-activedescendant, the focus pseudoclass is\n // never applied and use `.mdc-ripple-upgraded--background-focused` instead.\n &:not(.mdc-list-item--selected):focus::before, // lint-disable-focus-psuedo-selector\n &.mdc-ripple-upgraded--background-focused::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n &.mdc-list-item--selected::before {\n @include dom-mixins.transparent-border(\n $border-width: 3px,\n $border-style: double,\n $query: $query\n );\n }\n\n // lint-disable-focus-psuedo-selector\n &.mdc-list-item--selected:focus::before {\n @include dom-mixins.transparent-border(\n $border-width: 3px,\n $query: $query\n );\n }\n }\n\n // Override anchor tag styles for the use-case of a list being used for navigation\n // stylelint-disable selector-max-type,selector-no-qualifying-type\n a.mdc-list-item {\n @include feature-targeting.targets($feat-structure) {\n color: inherit;\n text-decoration: none;\n }\n }\n // stylelint-enable selector-max-type,selector-no-qualifying-type\n\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n fill: currentColor;\n flex-shrink: 0;\n pointer-events: none;\n }\n }\n\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-structure) {\n flex-shrink: 0;\n pointer-events: none;\n }\n }\n\n .mdc-list-item__content {\n @include typography.overflow-ellipsis($query);\n @include feature-targeting.targets($feat-structure) {\n align-self: center;\n flex: 1;\n pointer-events: none;\n }\n\n .mdc-list-item--with-two-lines &,\n .mdc-list-item--with-three-lines & {\n @include feature-targeting.targets($feat-structure) {\n align-self: stretch;\n }\n }\n\n // Disable interaction on label elements that may automatically\n // toggle corresponding checkbox / radio input.\n &[for] {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n }\n }\n }\n\n .mdc-list-item__primary-text {\n @include typography.typography(subtitle1, $query);\n @include typography.overflow-ellipsis($query);\n\n .mdc-list-item--with-two-lines &,\n .mdc-list-item--with-three-lines & {\n @include typography.text-baseline(\n $top: 28px,\n $bottom: 20px,\n $query: $query\n );\n }\n }\n\n .mdc-list-item__secondary-text {\n @include typography.typography(body2, $query);\n @include typography.overflow-ellipsis($query);\n @include typography.text-baseline(\n $top: 20px,\n $display: block,\n $query: $query\n );\n\n .mdc-list-item--with-three-lines & {\n @include feature-targeting.targets($feat-structure) {\n white-space: normal;\n line-height: 20px;\n }\n }\n\n .mdc-list-item--with-overline & {\n @include feature-targeting.targets($feat-structure) {\n white-space: nowrap;\n line-height: auto;\n }\n }\n }\n\n .mdc-list-item__overline-text {\n @include typography.typography(overline, $query);\n @include typography.overflow-ellipsis($query);\n\n .mdc-list-item--with-two-lines & {\n @include typography.text-baseline(\n $top: 24px,\n $bottom: 20px,\n $query: $query\n );\n }\n\n .mdc-list-item--with-three-lines & {\n @include typography.text-baseline(\n $top: 28px,\n $bottom: 20px,\n $query: $query\n );\n }\n }\n\n .mdc-list-item--with-leading-avatar {\n @include item-start-spacing(16px, $query: $query);\n @include item-start-size(40px, $query: $query);\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n border-radius: 50%;\n }\n }\n }\n\n .mdc-list-item--with-leading-icon {\n @include item-start-size(24px, $query: $query);\n @include item-start-spacing(\n $leading: 16px,\n $trailing: 32px,\n $query: $query\n );\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-thumbnail {\n @include item-start-spacing(16px, $query: $query);\n @include item-start-size(40px, $query: $query);\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-image {\n @include item-start-spacing(16px, $query: $query);\n @include item-start-size(56px, $query: $query);\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-taller-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-video {\n @include two-line-item-start-alignment(\n $alignment: flex-start,\n $offset: 8px,\n $query: $query\n );\n @include item-start-spacing($leading: 0, $trailing: 16px, $query: $query);\n @include item-start-size($width: 100px, $height: 56px, $query: $query);\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-taller-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-checkbox {\n $leading: absorb-overflow(16px, $actual: 40px, $available: 24px);\n $trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);\n $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n @include item-start-spacing($leading, $trailing, $query: $query);\n @include item-start-size(40px, $query: $query);\n @include two-line-item-start-alignment(\n $alignment: flex-start,\n $offset: $top,\n $query: $query\n );\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-radio {\n $leading: absorb-overflow(16px, $actual: 40px, $available: 24px);\n $trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);\n $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n @include item-start-spacing($leading, $trailing, $query: $query);\n @include item-start-size(40px, $query: $query);\n @include two-line-item-start-alignment(\n $alignment: flex-start,\n $offset: $top,\n $query: $query\n );\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-leading-switch {\n @include item-start-spacing(16px, $query: $query);\n @include item-start-size($width: 36px, $height: 20px, $query: $query);\n @include two-line-item-start-alignment(\n $alignment: flex-start,\n $offset: 16px,\n $query: $query\n );\n @include _two-line-item-primary-baseline(32px, 20px, $query: $query);\n @include _two-line-item-overline-baseline(28px, 20px, $query: $query);\n @include _two-line-item-meta-baseline($top: 32px, $query: $query);\n @include _one-line-item-tall-density(\n variables.$one-line-item-density-scale,\n $query: $query\n );\n @include _two-line-item-tall-density(\n variables.$two-line-item-density-scale,\n $query: $query\n );\n }\n\n .mdc-list-item--with-trailing-icon {\n @include item-end-spacing(16px, $query: $query);\n @include item-end-size(24px, $query: $query);\n }\n\n .mdc-list-item--with-trailing-meta {\n @include two-line-item-end-alignment(flex-start, $query: $query);\n @include three-line-item-end-alignment(flex-start, $query: $query);\n @include item-end-spacing($leading: 28px, $trailing: 16px, $query: $query);\n @include _two-line-item-end-baseline($top: 28px, $query: $query);\n @include _three-line-item-end-baseline($top: 28px, $query: $query);\n\n .mdc-list-item__end {\n @include typography.typography(caption, $query);\n }\n }\n\n .mdc-list-item--with-trailing-checkbox {\n $leading: absorb-overflow(32px, $actual: 40px, $available: 24px);\n $trailing: absorb-overflow(16px, $actual: 40px, $available: 24px);\n $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n @include item-end-spacing($leading, $trailing, $query: $query);\n @include item-end-size(40px, $query: $query);\n @include three-line-item-end-alignment(\n $alignment: flex-start,\n $offset: $top,\n $query: $query\n );\n }\n\n .mdc-list-item--with-trailing-radio {\n $leading: absorb-overflow(32px, $actual: 40px, $available: 24px);\n $trailing: absorb-overflow(16px, $actual: 40px, $available: 24px);\n $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n @include item-end-spacing($leading, $trailing, $query: $query);\n @include item-end-size(40px, $query: $query);\n @include three-line-item-end-alignment(\n $alignment: flex-start,\n $offset: $top,\n $query: $query\n );\n }\n\n .mdc-list-item--with-trailing-switch {\n @include item-end-spacing(16px, $query: $query);\n @include item-end-size($width: 36px, $height: 20px, $query: $query);\n @include three-line-item-end-alignment(\n $alignment: flex-start,\n $offset: 16px,\n $query: $query\n );\n }\n\n .mdc-list-item--with-overline {\n @include _two-line-item-primary-baseline(20px, 0px, $query: $query);\n @include _three-line-item-primary-baseline(20px, 0px, $query: $query);\n }\n\n // This must be specified last to ensure that RTL padding takes priority over\n // LTR padding in the cascade.\n .mdc-list-item {\n @include item-spacing(16px, $query: $query);\n }\n\n //\n // Grouping\n //\n\n .mdc-list-group {\n @include feature-targeting.targets($feat-structure) {\n // Cancel top/bottom padding on individual lists within group\n .mdc-deprecated-list {\n padding: 0;\n }\n }\n }\n\n .mdc-list-group__subheader {\n $mdc-list-subheader-virtual-height: 3rem;\n $mdc-list-subheader-leading: map.get(\n map.get(typography.$styles, body1),\n line-height\n );\n $mdc-list-subheader-margin: calc(\n (#{$mdc-list-subheader-virtual-height} - #{$mdc-list-subheader-leading}) /\n 2\n );\n\n @include typography.typography(subtitle1, $query);\n @include feature-targeting.targets($feat-structure) {\n margin: $mdc-list-subheader-margin variables.$side-padding;\n }\n }\n\n //\n // Dividers\n //\n\n $divider-color: if(\n theme-color.tone(theme-color.$background) == 'dark',\n variables.$divider-color-on-dark-bg,\n variables.$divider-color-on-light-bg\n );\n\n @include divider-color($divider-color, $query: $query);\n @include divider-height(1px, $query: $query);\n\n .mdc-list-divider {\n @include feature-targeting.targets($feat-structure) {\n padding: 0;\n\n // Allows the use of padding to specify leading and trailing insets\n // independently.\n background-clip: content-box;\n }\n }\n\n // The base inset variant corresponds to the item's padding.\n .mdc-list-divider,\n .mdc-list-divider--with-leading-text,\n .mdc-list-divider--with-leading-icon,\n .mdc-list-divider--with-leading-image,\n .mdc-list-divider--with-leading-thumbnail,\n .mdc-list-divider--with-leading-avatar,\n .mdc-list-divider--with-leading-checkbox,\n .mdc-list-divider--with-leading-switch,\n .mdc-list-divider--with-leading-radio {\n @include divider-leading-inset(16px, $query: $query);\n @include divider-trailing-inset(16px, $query: $query);\n }\n\n .mdc-list-divider--with-leading-video {\n @include divider-leading-inset(0px, $query: $query);\n }\n\n // This is needed to ensure that default padding isn't applied in RTL locales.\n .mdc-list-divider {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.rtl {\n padding: 0;\n }\n }\n }\n}\n\n@mixin with-ripple($query: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n :not(.mdc-list-item--disabled).mdc-list-item {\n @include _item-interactive-ripple($query);\n }\n\n .mdc-list-item--disabled {\n @include ripple.surface(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-base-color(\n theme-color.prop-value(on-surface),\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-focus-opacity(\n ripple-theme.states-opacity(primary, focus),\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n\n #{variables.$ripple-target} {\n @include ripple.target-common($query: $query);\n }\n }\n}\n\n///\n/// Adjusts an offset (i.e., margin) to accomodate contents that are larger than\n/// the space allocated by the specification.\n///\n/// For instance, the specification provides 24x24dp for a checkbox with a 16dp\n/// margin. However, checkboxes are actually 40x40dp. To ensure that the\n/// checkbox is positioned correctly, the margin is reduced by 8dp to reflect\n/// that the margin is already \"baked into\" the checkbox.\n///\n/// Concretely, 40dp - 24dp = 16dp. Assuming that the control is symmetrical,\n/// half of the overflow (8dp) is on the leading side and half on the trailing\n/// side. Therefore, the leading and trailing margins are reduced by 8dp.\n///\n/// Note: this might be more useful if it's added into the leading/trailing\n/// margin mixins as a parameter.\n///\n@function absorb-overflow($offset, $actual, $available, $symmetric: true) {\n @if $actual <= $available {\n @return $offset;\n }\n $overflow: $actual - $available;\n @return $offset - math.div($overflow, if($symmetric, 2, 1));\n}\n\n@mixin one-line-item-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-one-line {\n @include feature-targeting.targets($feat-structure) {\n height: $height;\n }\n }\n}\n\n@mixin two-line-item-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-two-lines {\n @include feature-targeting.targets($feat-structure) {\n height: $height;\n }\n }\n}\n@mixin three-line-item-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-three-lines {\n @include feature-targeting.targets($feat-structure) {\n height: $height;\n }\n }\n}\n\n@mixin list-item-height($height) {\n &.mdc-list-item--with-one-line,\n &.mdc-list-item--with-two-lines,\n &.mdc-list-item--with-three-lines {\n height: $height;\n }\n}\n\n@mixin item-spacing(\n $leading,\n $trailing: $leading,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, $leading, $trailing);\n }\n}\n\n@mixin one-line-item-start-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-one-line {\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin two-line-item-start-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin three-line-item-start-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-three-lines {\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin one-line-item-end-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-one-line {\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin two-line-item-end-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin three-line-item-end-alignment(\n $alignment,\n $offset: 0,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-item--with-three-lines {\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-structure) {\n align-self: $alignment;\n margin-top: $offset;\n }\n }\n }\n}\n\n@mixin item-start-spacing(\n $leading,\n $trailing: $leading,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n // Extra specificity needed to override default customizations.\n &.mdc-list-item {\n // We rely on auto to avoid clobbering the opposite padding.\n @include rtl.reflexive-property(padding, 0, auto);\n }\n\n .mdc-list-item__start {\n @include rtl.reflexive-property(margin, $leading, $trailing);\n }\n }\n}\n\n@mixin item-end-spacing(\n $leading,\n $trailing: $leading,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n // Extra specificity needed to override default customizations.\n &.mdc-list-item {\n // We rely on auto to avoid clobbering the opposite padding.\n @include rtl.reflexive-property(padding, auto, 0);\n }\n\n .mdc-list-item__end {\n @include rtl.reflexive-property(margin, $leading, $trailing);\n }\n }\n}\n\n@mixin item-start-size(\n $width,\n $height: $width,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n .mdc-list-item__start {\n width: $width;\n height: $height;\n }\n }\n}\n\n@mixin item-end-size($width, $height: $width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n .mdc-list-item__end {\n width: $width;\n height: $height;\n }\n }\n}\n\n@mixin list-item-selected-container-color($color) {\n &.mdc-list-item--selected {\n @include theme.property(background-color, $color);\n }\n}\n\n@mixin list-primary-text-typography($typography-theme) {\n .mdc-list-item__primary-text {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin list-primary-text-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item__primary-text {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin list-secondary-text-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item__secondary-text {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin list-secondary-text-typography($typography-theme) {\n .mdc-list-item__secondary-text {\n @include typography.theme-styles($typography-theme);\n }\n}\n\n@mixin list-overline-text-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item__overline-text {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin list-meta-text-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin list-icon-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--with-leading-icon .mdc-list-item__start,\n .mdc-list-item--with-trailing-icon .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin list-icon-fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--with-leading-icon .mdc-list-item__start,\n .mdc-list-item--with-trailing-icon .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n@mixin list-selected-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--selected,\n .mdc-list-item--activated {\n @include list-primary-text-ink-color($color, $query);\n @include _item-icon-ink-color($color, $leading-only: true, $query: $query);\n }\n}\n\n@mixin list-selected-meta-text-ink-color(\n $color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--selected,\n .mdc-list-item--activated {\n @include list-meta-text-ink-color($color, $query);\n }\n}\n\n@mixin list-disabled-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--disabled {\n @include list-primary-text-ink-color($color, $query);\n @include list-secondary-text-ink-color($color, $query);\n @include list-overline-text-ink-color($color, $query);\n @include _item-icon-ink-color($color, $query: $query);\n @include _item-meta-text-ink-color($color, $query);\n }\n}\n\n@mixin list-disabled-opacity($opacity, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-item--disabled {\n .mdc-list-item__start,\n .mdc-list-item__content,\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n}\n\n@mixin group-subheader-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-deprecated-list-group__subheader {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n///\n/// Sets shape radius (rounded) to single line list variant.\n///\n/// @param {Number | List<Number>} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.\n/// Set to `50%` for rounded shape.\n/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.\n/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.\n/// Defaults to `$mdc-deprecated-list-single-line-density-scale`.\n///\n/// @access public\n///\n@mixin one-line-list-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$one-line-item-density-scale,\n $query: feature-targeting.all()\n) {\n .mdc-list-item--with-one-line {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$one-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n\n &.mdc-list-item--with-leading-avatar,\n &.mdc-list-item--with-leading-icon,\n &.mdc-list-item--with-leading-thumbnail,\n &.mdc-list-item--with-leading-checkbox,\n &.mdc-list-item--with-leading-radio,\n &.mdc-list-item--with-leading-switch {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$one-line-item-tall-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n }\n\n &.mdc-list-item--with-leading-image,\n &.mdc-list-item--with-leading-video {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$one-line-item-taller-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n }\n }\n}\n\n@mixin two-line-list-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$two-line-item-density-scale,\n $query: feature-targeting.all()\n) {\n .mdc-list-item--with-two-lines {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$two-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n\n &.mdc-list-item--with-leading-avatar,\n &.mdc-list-item--with-leading-icon,\n &.mdc-list-item--with-leading-thumbnail,\n &.mdc-list-item--with-leading-checkbox,\n &.mdc-list-item--with-leading-radio,\n &.mdc-list-item--with-leading-switch,\n &.mdc-list-item--with-leading-image,\n &.mdc-list-item--with-leading-video {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$two-line-item-tall-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n }\n }\n}\n\n@mixin three-line-list-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$three-line-item-density-scale,\n $query: feature-targeting.all()\n) {\n .mdc-list-item--with-three-lines {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height:\n density-functions.prop-value(\n $density-config: variables.$three-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height\n ),\n $query: $query\n );\n }\n}\n\n@mixin divider-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-list-divider {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n@mixin divider-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-list-divider {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(height, $height);\n }\n }\n}\n\n@mixin divider-leading-inset($inset, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-divider--with-leading-inset {\n @include feature-targeting.targets($feat-structure) {\n // We rely on auto to avoid clobbering the opposite padding.\n @include rtl.reflexive-property(padding, $inset, auto);\n }\n }\n}\n\n@mixin divider-trailing-inset($inset, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n &.mdc-list-divider--with-trailing-inset {\n @include feature-targeting.targets($feat-structure) {\n // We rely on auto to avoid clobbering the opposite padding.\n @include rtl.reflexive-property(padding, auto, $inset);\n }\n }\n}\n\n// The public density mixins apply the appropriate density styles regardless of\n// the item's start contents.\n@mixin one-line-item-density(\n $density-scale,\n $exclude-variants: false,\n $query: feature-targeting.all()\n) {\n @include _one-line-item-density($density-scale, $query: $query);\n\n @if not $exclude-variants {\n &.mdc-list-item--with-leading-avatar,\n &.mdc-list-item--with-leading-icon,\n &.mdc-list-item--with-leading-thumbnail,\n &.mdc-list-item--with-leading-checkbox,\n &.mdc-list-item--with-leading-radio,\n &.mdc-list-item--with-leading-switch {\n @include _one-line-item-tall-density($density-scale, $query: $query);\n }\n\n &.mdc-list-item--with-leading-image,\n &.mdc-list-item--with-leading-video {\n @include _one-line-item-taller-density($density-scale, $query: $query);\n }\n }\n}\n\n@mixin two-line-item-density($density-scale, $query: feature-targeting.all()) {\n @include _two-line-item-density($density-scale, $query: $query);\n\n &.mdc-list-item--with-leading-avatar,\n &.mdc-list-item--with-leading-icon,\n &.mdc-list-item--with-leading-thumbnail,\n &.mdc-list-item--with-leading-checkbox,\n &.mdc-list-item--with-leading-radio,\n &.mdc-list-item--with-leading-switch,\n &.mdc-list-item--with-leading-image,\n &.mdc-list-item--with-leading-video {\n @include _two-line-item-tall-density($density-scale, $query: $query);\n }\n}\n\n@mixin three-line-item-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n @include _three-line-item-density($density-scale, $query: $query);\n}\n\n//\n// Private\n//\n\n// The private density mixins allow density properties to be overridden\n// individually to avoid increasing specificity.\n@mixin _one-line-item-density($density-scale, $query: feature-targeting.all()) {\n $height: density-functions.prop-value(\n $density-config: variables.$one-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _one-line-item-tall-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$one-line-item-tall-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _one-line-item-taller-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$one-line-item-taller-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _two-line-item-density($density-scale, $query: feature-targeting.all()) {\n $height: density-functions.prop-value(\n $density-config: variables.$two-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include two-line-item-height($height, $query: $query);\n}\n\n@mixin _two-line-item-tall-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$two-line-item-tall-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include two-line-item-height($height, $query: $query);\n}\n\n@mixin _three-line-item-density(\n $density-scale,\n $query: feature-targeting.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$three-line-item-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include three-line-item-height($height, $query: $query);\n}\n\n@mixin list-base($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include typography.typography(subtitle1, $query);\n @include feature-targeting.targets($feat-typography) {\n // According to the mocks and stickersheet, the line-height is\n // adjusted to 24px for text content, same as for body1.\n /* @alternate */\n line-height: map.get(map.get(typography.$styles, body1), line-height);\n }\n @include feature-targeting.targets($feat-structure) {\n margin: 0;\n padding: 8px 0;\n list-style-type: none;\n\n &:focus // lint-disable-focus-psuedo-selector\n {\n outline: none;\n }\n }\n}\n\n@mixin item-base($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n overflow: hidden;\n padding: 0;\n\n &:focus // lint-disable-focus-psuedo-selector\n {\n outline: none;\n }\n }\n}\n\n@mixin _item-interactive-ripple($query: feature-targeting.all()) {\n @include ripple.surface(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states(\n theme-color.prop-value(on-surface),\n false,\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-activated(\n primary,\n false,\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-selected(\n primary,\n false,\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n\n #{variables.$ripple-target} {\n @include ripple.target-common($query: $query);\n }\n}\n\n@mixin _two-line-item-primary-baseline(\n $top,\n $bottom,\n $query: feature-targeting.all()\n) {\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__primary-text {\n @include typography.text-baseline(\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n }\n }\n}\n\n@mixin _three-line-item-primary-baseline(\n $top,\n $bottom,\n $query: feature-targeting.all()\n) {\n &.mdc-list-item--with-three-lines {\n .mdc-list-item__primary-text {\n @include typography.text-baseline(\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n }\n }\n}\n\n@mixin _two-line-item-overline-baseline(\n $top,\n $bottom,\n $query: feature-targeting.all()\n) {\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__overline-text {\n @include typography.text-baseline(\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n }\n }\n}\n\n@mixin _three-line-item-overline-baseline(\n $top,\n $bottom,\n $query: feature-targeting.all()\n) {\n &.mdc-list-item--with-three-lines {\n .mdc-list-item__overline-text {\n @include typography.text-baseline(\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n }\n }\n}\n\n@mixin _two-line-item-end-baseline($top, $query: feature-targeting.all()) {\n &.mdc-list-item--with-two-lines {\n .mdc-list-item__end {\n @include typography.text-baseline(\n $display: block,\n $top: $top,\n $query: $query\n );\n }\n }\n}\n\n@mixin _three-line-item-end-baseline($top, $query: feature-targeting.all()) {\n &.mdc-list-item--with-three-lines {\n .mdc-list-item__end {\n @include typography.text-baseline(\n $display: block,\n $top: $top,\n $query: $query\n );\n }\n }\n}\n\n@mixin _two-line-item-meta-baseline($top, $query: feature-targeting.all()) {\n &.mdc-list-item--with-two-lines {\n &.mdc-list-item--with-trailing-meta {\n .mdc-list-item__end {\n @include typography.text-baseline(\n $display: block,\n $top: $top,\n $query: $query\n );\n }\n }\n }\n}\n\n@mixin _item-meta-text-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n &.mdc-list-item--with-trailing-meta {\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n }\n}\n\n@mixin _item-icon-ink-color(\n $color,\n $leading-only: false,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n &.mdc-list-item--with-leading-icon {\n .mdc-list-item__start {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n }\n\n @if (not $leading-only) {\n &.mdc-list-item--with-trailing-icon {\n .mdc-list-item__end {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n }\n }\n}\n\n@mixin _high-contrast-mode($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n @include dom-mixins.forced-colors-mode {\n .mdc-list-divider::after {\n @include feature-targeting.targets($feat-structure) {\n content: '';\n display: block;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n }\n\n @include feature-targeting.targets($feat-color) {\n // Color ensures border is shown, but will be overridden by the browser.\n @include theme.property(border-bottom-color, white);\n }\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/custom-properties';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/rtl/rtl';\n@use './variables';\n@use './menu-surface-custom-properties';\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n // postcss-bem-linter: define menu-surface\n .mdc-menu-surface {\n @include base_($query);\n @include elevation-mixins.elevation($z-value: 8, $query: $query);\n @include fill-color(surface, $query);\n @include ink-color(on-surface, $query);\n @include shape-radius(variables.$shape-radius, false, $query);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(transform-origin, top left, top right);\n }\n }\n\n .mdc-menu-surface--anchor {\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n overflow: visible;\n }\n }\n\n .mdc-menu-surface--fixed {\n @include feature-targeting.targets($feat-structure) {\n position: fixed;\n }\n }\n\n .mdc-menu-surface--fullwidth {\n @include feature-targeting.targets($feat-structure) {\n width: 100%;\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting.all()\n) {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n\n// Used by filled variants of GM components to conditionally flatten the top\n// corners of the menu.\n@mixin flatten-top-when-opened-below($query: feature-targeting.all()) {\n .mdc-menu-surface--is-open-below {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-structure) {\n display: none;\n position: absolute;\n box-sizing: border-box;\n\n $max-width: custom-properties.create(\n menu-surface-custom-properties.$max-width,\n calc(100vw - #{variables.$min-distance-from-edge})\n );\n @include theme.property(max-width, $max-width);\n $max-height: custom-properties.create(\n menu-surface-custom-properties.$max-height,\n calc(100vh - #{variables.$min-distance-from-edge})\n );\n @include theme.property(max-height, $max-height);\n margin: 0;\n padding: 0;\n transform: scale(1);\n transform-origin: top left;\n opacity: 0;\n overflow: auto;\n will-change: transform, opacity;\n z-index: variables.$z-index;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity variables.$fade-in-duration linear,\n transform variables.$scale-duration\n animation-variables.$deceleration-curve-timing-function,\n height 250ms animation-variables.$deceleration-curve-timing-function;\n }\n\n &:focus {\n @include feature-targeting.targets($feat-structure) {\n outline: none;\n }\n }\n\n &--animating-open {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n transform: scale(0.8);\n opacity: 0;\n }\n }\n\n // Render this after `--animating-open` to override `opacity` & `transform`\n // CSS properties.\n &--open {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n transform: scale(1);\n opacity: 1;\n }\n }\n\n &--animating-closed {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity variables.$fade-out-duration linear;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/menu-surface/mixins' as menu-surface-mixins;\n@use '@material/rtl/rtl';\n@use './select-icon-theme';\n@use './select-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select--filled {\n @include select-theme.filled-height(select-theme.$height, $query: $query);\n @include select-theme.filled-shape-radius(\n select-theme.$shape-radius,\n $query: $query\n );\n\n @include select-theme.container-fill-color(\n (\n default: select-theme.$fill-color,\n disabled: select-theme.$disabled-fill-color,\n ),\n $query: $query\n );\n\n @include select-theme.bottom-line-color(\n (\n default: select-theme.$bottom-line-idle-color,\n focus: primary,\n hover: select-theme.$bottom-line-hover-color,\n disabled: select-theme.$disabled-bottom-line-color,\n ),\n $query: $query\n );\n\n @include select-theme.truncate-floating-label-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: select-icon-theme.$icon-size,\n $query: $query\n );\n\n @include menu-surface-mixins.flatten-top-when-opened-below($query: $query);\n\n &.mdc-select--focused.mdc-line-ripple::after {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(1, 2);\n opacity: 1;\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-position(\n left,\n select-theme.$outline-label-offset\n );\n }\n }\n\n &.mdc-select--with-leading-icon {\n @include select-theme.leading-icon-floating-label-position(\n select-icon-theme.$icon-size,\n $query: $query\n );\n\n @include select-theme.truncate-floating-label-max-width(\n $leading-icon-size: select-icon-theme.$icon-size,\n $dropdown-icon-size: select-icon-theme.$icon-size,\n $query: $query\n );\n }\n }\n\n .mdc-select--invalid {\n @include select-theme.bottom-line-color(\n (\n default: select-theme.$error-color,\n hover: select-theme.$error-color,\n focus: select-theme.$error-color,\n ),\n $query: $query\n );\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/rtl/rtl';\n@use './select-icon-theme';\n@use './select-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-select--outlined {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n @include select-theme.outlined-height(select-theme.$height, $query: $query);\n @include select-theme.outline-shape-radius(\n select-theme.$shape-radius,\n $query: $query\n );\n\n @include select-theme.container-fill-color(\n (\n default: transparent,\n disabled: transparent,\n ),\n $query: $query\n );\n\n @include select-theme.outline-color(\n (\n default: select-theme.$outlined-idle-border,\n hover: select-theme.$outlined-hover-border,\n focus: primary,\n disabled: select-theme.$disabled-outline-color,\n ),\n $query: $query\n );\n\n @include select-theme.truncate-notched-outline-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: select-icon-theme.$icon-size,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n border: none;\n }\n\n .mdc-select__anchor {\n @include floating-label-mixins.shake-animation(\n select-outlined,\n $query: $query\n );\n @include notched-outline-mixins.floating-label-float-position-absolute(\n select-theme.$outlined-label-position-y,\n $query: $query\n );\n @include notched-outline-mixins.notch-offset(\n notched-outline-variables.$border-width,\n $query: $query\n );\n @include select-theme.center-aligned($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n // To eliminate extra gap between helper text & outlined select in IE.\n align-items: baseline;\n overflow: visible;\n }\n }\n\n .mdc-select__selected-text-container {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n border: none;\n z-index: 1;\n }\n\n @include feature-targeting.targets($feat-color) {\n background-color: transparent;\n }\n }\n\n .mdc-select__icon {\n @include feature-targeting.targets($feat-structure) {\n z-index: 2;\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n line-height: 1.15rem;\n\n @include rtl.reflexive-position(\n left,\n notched-outline-variables.$padding\n );\n }\n }\n\n &.mdc-select--focused {\n @include notched-outline-mixins.notch-offset(\n select-theme.$outlined-stroke-width,\n $query: $query\n );\n }\n\n &.mdc-select--invalid {\n @include select-theme.outline-color(\n (\n default: select-theme.$error-color,\n hover: select-theme.$error-color,\n focus: select-theme.$error-color,\n ),\n $query: $query\n );\n }\n\n &.mdc-select--with-leading-icon {\n @include select-theme.outlined-with-leading-icon-floating-label-position-animation(\n select-theme.$height,\n select-icon-theme.$icon-size,\n $query: $query\n );\n @include select-theme.truncate-notched-outline-max-width(\n $leading-icon-size: select-icon-theme.$icon-size,\n $dropdown-icon-size: select-icon-theme.$icon-size,\n $query: $query\n );\n }\n\n .mdc-menu-surface {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 8px;\n }\n }\n\n &.mdc-select--no-label .mdc-menu-surface,\n .mdc-menu-surface--is-open-below {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use './select-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-select__anchor {\n @include ripple.surface(\n $ripple-target: select-theme.$ripple-target,\n $query: $query\n );\n @include ripple.radius-bounded(\n $ripple-target: select-theme.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-base-color(\n select-theme.$ink-color,\n $ripple-target: select-theme.$ripple-target,\n $query: $query\n );\n @include ripple-theme.states-opacities(\n (\n hover: ripple-theme.states-opacity(select-theme.$ink-color, hover),\n focus: ripple-theme.states-opacity(select-theme.$ink-color, focus),\n ),\n $ripple-target: select-theme.$ripple-target,\n $query: $query\n );\n\n #{select-theme.$ripple-target} {\n @include ripple.target-common($query: $query);\n }\n }\n\n .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected {\n @include list-mixins.deprecated-ripple-states(on-surface, $query: $query);\n }\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n focus-state-layer-color: theme-color.$on-surface,\n focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n hover-state-layer-color: theme-color.$on-surface,\n hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n pressed-state-layer-color: theme-color.$on-surface,\n pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n @include keys.declare-custom-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n @if shadow-dom.$css-selector-fallback-declarations {\n .mdc-ripple-surface {\n @include theme-styles($theme);\n }\n }\n}\n\n$_ripple-theme: (\n hover-state-layer-color: null,\n focus-state-layer-color: null,\n pressed-state-layer-color: null,\n hover-state-layer-opacity: null,\n focus-state-layer-opacity: null,\n pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n $theme: keys.create-theme-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n // TODO(b/191298796): Support states layer color for every interactive states.\n // Use only hover state layer color, ignoring focus and pressed color.\n @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n @include theme.validate-theme-keys($_ripple-theme, $theme);\n\n @include states-base-color(\n map.get($theme, hover-state-layer-color),\n $ripple-target: $ripple-target\n );\n @include states-hover-opacity(\n map.get($theme, hover-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-focus-opacity(\n map.get($theme, focus-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-press-opacity(\n map.get($theme, pressed-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n}\n\n@mixin states-base-color(\n $color,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n @if not custom-properties.is-custom-prop($color) {\n $color: custom-properties.create(\n ripple-color,\n theme-color.get-custom-property($color)\n );\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n $opacity-map: (),\n $has-nested-focusable-element: false,\n $ripple-target: '&',\n $query: feature-targeting.all()\n) {\n // Ensure sufficient specificity to override base state opacities\n @if map.get($opacity-map, hover) {\n @include states-hover-opacity(\n map.get($opacity-map, hover),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, focus) {\n @include states-focus-opacity(\n map.get($opacity-map, focus),\n $ripple-target: $ripple-target,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, press) {\n @include states-press-opacity(\n map.get($opacity-map, press),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n}\n\n@mixin states-hover-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity and not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n }\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover,\n &.mdc-ripple-surface--hover {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n // Focus overrides hover by reusing the ::before pseudo-element.\n // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n // but undesirable in general in case of nested stateful components.\n // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n @if $has-nested-focusable-element {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n &.mdc-ripple-upgraded:focus-within,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:not(.mdc-ripple-upgraded):focus-within {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n } @else {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n $feat-animation: feature-targeting.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n }\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n@mixin states-press-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n }\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity $fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition-duration: $fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting.targets($feat-color) {\n // Upgraded ripple should always emit custom property, regardless of\n // configuration, since ripple itself feature detects custom property\n // support at runtime.\n @include custom-properties.configure($emit-custom-properties: true) {\n @include theme.property(\n custom-properties.create(ripple-fg-opacity, $opacity)\n );\n }\n }\n }\n }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n $color: theme-color.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n $opacity-map: $opacity-map\n );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $activated-opacity: states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-activated-opacity,\n $activated-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $activated-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $selected-opacity: states-opacity($color, selected);\n\n &--selected {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-selected-opacity,\n $selected-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $selected-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @if $opacity-map == null {\n $opacity-map: (\n hover: states-opacity($color, hover) + $opacity-modifier,\n focus: states-opacity($color, focus) + $opacity-modifier,\n press: states-opacity($color, press) + $opacity-modifier,\n );\n }\n\n @include states-opacities(\n $opacity-map,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $ripple-target: $ripple-target,\n $query: $query\n );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n @if $ripple-target == '&' {\n @content;\n } @else {\n #{$ripple-target} {\n @content;\n }\n }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n #{$_hover-selector},\n #{$_focus-selector},\n #{$_active-selector} {\n @content;\n }\n}\n\n@mixin hover() {\n #{$_hover-selector} {\n @content;\n }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n #{$_focus-selector} {\n @content;\n }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n #{$_active-selector} {\n @content;\n }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n @include pressed() {\n @content;\n }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n $ripple-target,\n $content-root-selector: '&',\n $query: feature-targeting.all()\n) {\n // Needed for IE11. Without this, IE11 renders the state layer completely\n // underneath the container, making it invisible.\n $feat-structure: feature-targeting.create-target($query, structure);\n\n #{$content-root-selector} {\n @include feature-targeting.targets($feat-structure) {\n z-index: 0;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, -1)\n );\n }\n }\n}\n\n@function states-opacity($color, $state) {\n $color-value: theme-color.prop-value($color);\n $opacity-map: if(\n theme-color.tone($color-value) == 'light',\n $light-ink-opacities,\n $dark-ink-opacities\n );\n\n @if not map.has-key($opacity-map, $state) {\n @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n }\n\n @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n #{$ripple-target}::before {\n @content;\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/animation/variables';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/typography/mixins' as typography-mixins;\n\n@mixin helper-text-core-styles($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select-helper-text {\n @include feature-targeting.targets($feat-structure) {\n margin: 0;\n @include rtl.reflexive-property(margin, 16px, 16px);\n }\n @include typography-mixins.typography(caption, $query: $query);\n @include typography-mixins.text-baseline(16px, $query: $query);\n }\n\n .mdc-select-helper-text--validation-msg {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 180ms variables.$standard-curve-timing-function;\n }\n }\n\n .mdc-select--invalid + .mdc-select-helper-text--validation-msg,\n .mdc-select-helper-text--validation-msg-persistent {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use './select-icon-theme';\n\n@mixin icon-core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-select--with-leading-icon {\n @include _icon($query: $query);\n @include select-icon-theme.icon-horizontal-margins(\n $left: select-icon-theme.$icon-horizontal-margin,\n $right: select-icon-theme.$icon-horizontal-margin,\n $query: $query\n );\n }\n\n .mdc-select__icon:not([tabindex]),\n .mdc-select__icon[tabindex='-1'] {\n @include feature-targeting.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n@mixin _icon($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-select__icon {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n box-sizing: border-box;\n border: none;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n flex-shrink: 0;\n align-self: center;\n }\n\n @include feature-targeting.targets($feat-color) {\n background-color: transparent;\n fill: currentColor;\n }\n }\n}\n"],"sourceRoot":""} |