diff --git a/0c35d18bf06992036b69.woff2 b/0c35d18bf06992036b69.woff2 new file mode 100644 index 00000000..5492a6e7 Binary files /dev/null and b/0c35d18bf06992036b69.woff2 differ diff --git a/219aa9140e099e6c72ed.woff2 b/219aa9140e099e6c72ed.woff2 new file mode 100644 index 00000000..40626852 Binary files /dev/null and b/219aa9140e099e6c72ed.woff2 differ diff --git a/3a4004a46a653d4b2166.woff b/3a4004a46a653d4b2166.woff new file mode 100644 index 00000000..80d8c991 Binary files /dev/null and b/3a4004a46a653d4b2166.woff differ diff --git a/3baa5b8f3469222b822d.woff b/3baa5b8f3469222b822d.woff new file mode 100644 index 00000000..ddf106c4 Binary files /dev/null and b/3baa5b8f3469222b822d.woff differ diff --git a/4d73cb90e394b34b7670.woff b/4d73cb90e394b34b7670.woff new file mode 100644 index 00000000..88fdf4d0 Binary files /dev/null and b/4d73cb90e394b34b7670.woff differ diff --git a/4ef4218c522f1eb6b5b1.woff2 b/4ef4218c522f1eb6b5b1.woff2 new file mode 100644 index 00000000..8f799901 Binary files /dev/null and b/4ef4218c522f1eb6b5b1.woff2 differ diff --git a/5d681e2edae8c60630db.woff b/5d681e2edae8c60630db.woff new file mode 100644 index 00000000..bc0002b3 Binary files /dev/null and b/5d681e2edae8c60630db.woff differ diff --git a/6f420cf17cc0d7676fad.woff2 b/6f420cf17cc0d7676fad.woff2 new file mode 100644 index 00000000..d44b9486 Binary files /dev/null and b/6f420cf17cc0d7676fad.woff2 differ diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..705948c4 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +kmdc.petuska.dev diff --git a/MDCCircularProgress.scss b/MDCCircularProgress.scss new file mode 100644 index 00000000..9e0333b8 --- /dev/null +++ b/MDCCircularProgress.scss @@ -0,0 +1,6 @@ +@use "@material/circular-progress"; + + +.kmdc-circular-progress { + @include circular-progress.indeterminate-colors([#4285F4, #EA4335, #FBBC05, #34A853]); +} diff --git a/MDCImageList.scss b/MDCImageList.scss new file mode 100644 index 00000000..95ff77b3 --- /dev/null +++ b/MDCImageList.scss @@ -0,0 +1,6 @@ +@use "@material/image-list"; + +.kmdc-image-list { + @include image-list.standard-columns(3); + @include image-list.masonry-columns(3); +} diff --git a/c380809fd3677d7d6903.woff2 b/c380809fd3677d7d6903.woff2 new file mode 100644 index 00000000..e9e305f2 Binary files /dev/null and b/c380809fd3677d7d6903.woff2 differ diff --git a/f882956fd323fd322f31.woff b/f882956fd323fd322f31.woff new file mode 100644 index 00000000..edeb9df9 Binary files /dev/null and b/f882956fd323fd322f31.woff differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..349e8c6b --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + KMDC Katalog + + + + + + + + + + + diff --git a/index.html.gz b/index.html.gz new file mode 100644 index 00000000..6614ed48 Binary files /dev/null and b/index.html.gz differ diff --git a/sandbox.js b/sandbox.js new file mode 100644 index 00000000..a350a70f --- /dev/null +++ b/sandbox.js @@ -0,0 +1,3 @@ +/*! For license information please see sandbox.js.LICENSE.txt */ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sandbox=t():e.sandbox=t()}(this,(()=>(()=>{var e={3264:(e,t,n)=>{"use strict";n.d(t,{Z:()=>S});var i=n(7796),r=n.n(i),a=n(1051),o=n.n(a),l=n(2629),s=n.n(l),c=new URL(n(8743),n.b),u=new URL(n(508),n.b),d=new URL(n(5611),n.b),p=new URL(n(8036),n.b),m=new URL(n(1772),n.b),f=new URL(n(9626),n.b),h=new URL(n(278),n.b),g=new URL(n(7108),n.b),$=new URL(n(5106),n.b),A=new URL(n(8844),n.b),y=o()(r()),v=s()(c),b=s()(u),_=s()(d),x=s()(p),w=s()(m),C=s()(f),E=s()(h),T=s()(g),I=s()($),k=s()(A);y.push([e.id,'@font-face {\n font-family: "Material Icons";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url('+v+') format("woff2"), url('+b+') format("woff");\n}\n.material-icons {\n font-family: "Material Icons";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Outlined";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url('+_+') format("woff2"), url('+x+') format("woff");\n}\n.material-icons-outlined {\n font-family: "Material Icons Outlined";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Round";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url('+w+') format("woff2"), url('+C+') format("woff");\n}\n.material-icons-round {\n font-family: "Material Icons Round";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Sharp";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url('+E+') format("woff2"), url('+T+') format("woff");\n}\n.material-icons-sharp {\n font-family: "Material Icons Sharp";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Two Tone";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url('+I+') format("woff2"), url('+k+') format("woff");\n}\n.material-icons-two-tone {\n font-family: "Material Icons Two Tone";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n',"",{version:3,sources:["webpack://./../../node_modules/material-icons/iconfont/material-icons.css"],names:[],mappings:"AAAA;EACE,6BAA6B;EAC7B,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,oHAA+F;AACjG;AACA;EACE,6BAA6B;EAC7B,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,sBAAsB;EACtB,oBAAoB;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EACjB,cAAc;EACd,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,6BAA6B;AAC/B;;AAEA;EACE,sCAAsC;EACtC,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,oHAAiH;AACnH;AACA;EACE,sCAAsC;EACtC,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,sBAAsB;EACtB,oBAAoB;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EACjB,cAAc;EACd,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,6BAA6B;AAC/B;;AAEA;EACE,mCAAmC;EACnC,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,oHAA2G;AAC7G;AACA;EACE,mCAAmC;EACnC,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,sBAAsB;EACtB,oBAAoB;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EACjB,cAAc;EACd,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,6BAA6B;AAC/B;;AAEA;EACE,mCAAmC;EACnC,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,oHAA2G;AAC7G;AACA;EACE,mCAAmC;EACnC,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,sBAAsB;EACtB,oBAAoB;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EACjB,cAAc;EACd,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,6BAA6B;AAC/B;;AAEA;EACE,sCAAsC;EACtC,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,oHAAiH;AACnH;AACA;EACE,sCAAsC;EACtC,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,sBAAsB;EACtB,oBAAoB;EACpB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EACjB,cAAc;EACd,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,6BAA6B;AAC/B",sourcesContent:['@font-face {\n font-family: "Material Icons";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");\n}\n.material-icons {\n font-family: "Material Icons";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Outlined";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");\n}\n.material-icons-outlined {\n font-family: "Material Icons Outlined";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Round";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");\n}\n.material-icons-round {\n font-family: "Material Icons Round";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Sharp";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");\n}\n.material-icons-sharp {\n font-family: "Material Icons Sharp";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n\n@font-face {\n font-family: "Material Icons Two Tone";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");\n}\n.material-icons-two-tone {\n font-family: "Material Icons Two Tone";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: "liga";\n}\n'],sourceRoot:""}]);const S=y},5973:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});var i=n(7796),r=n.n(i),a=n(1051),o=n.n(a)()(r());o.push([e.id,".mdc-banner__graphic{color:#fff;color:var(--mdc-theme-surface, #fff)}.mdc-banner__graphic{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-banner__content,.mdc-banner__fixed{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mdc-banner__content,.mdc-banner__fixed{min-width:100%}}.mdc-banner__content{max-width:720px}.mdc-banner{z-index:1;border-bottom-style:solid;box-sizing:border-box;display:none;flex-shrink:0;height:0;position:relative;width:100%}@media(max-width: 480px){.mdc-banner .mdc-banner__fixed{left:0;right:0}.mdc-banner .mdc-banner__text{margin-left:16px;margin-right:36px}[dir=rtl] .mdc-banner .mdc-banner__text,.mdc-banner .mdc-banner__text[dir=rtl]{margin-left:36px;margin-right:16px}}@media(max-width: 480px){.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__content{flex-wrap:wrap}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__graphic{margin-bottom:12px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text{margin-left:16px;margin-right:8px;padding-bottom:4px}[dir=rtl] .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text,.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text[dir=rtl]{margin-left:8px;margin-right:16px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__actions{margin-left:auto}}.mdc-banner--opening,.mdc-banner--open,.mdc-banner--closing{display:flex}.mdc-banner--open{transition:height 300ms ease}.mdc-banner--open .mdc-banner__content{transition:transform 300ms ease;transform:translateY(0)}.mdc-banner--closing{transition:height 250ms ease}.mdc-banner--closing .mdc-banner__content{transition:transform 250ms ease}.mdc-banner--centered .mdc-banner__content{left:0;margin-left:auto;margin-right:auto;right:0}.mdc-banner__fixed{border-bottom-style:solid;box-sizing:border-box;height:inherit;position:fixed;width:100%}.mdc-banner__content{display:flex;min-height:52px;position:absolute;transform:translateY(-100%);width:100%}.mdc-banner__graphic-text-wrapper{display:flex;width:100%}.mdc-banner__graphic{margin-left:16px;margin-right:0;flex-shrink:0;margin-top:16px;margin-bottom:16px;text-align:center}[dir=rtl] .mdc-banner__graphic,.mdc-banner__graphic[dir=rtl]{margin-left:0;margin-right:16px}.mdc-banner__icon{position:relative;top:50%;transform:translateY(-50%)}.mdc-banner__text{margin-left:24px;margin-right:90px;align-self:center;flex-grow:1;padding-top:16px;padding-bottom:16px}[dir=rtl] .mdc-banner__text,.mdc-banner__text[dir=rtl]{margin-left:90px;margin-right:24px}.mdc-banner__actions{padding-left:0;padding-right:8px;align-self:flex-end;display:flex;flex-shrink:0;padding-bottom:8px;padding-top:8px}[dir=rtl] .mdc-banner__actions,.mdc-banner__actions[dir=rtl]{padding-left:8px;padding-right:0}.mdc-banner__secondary-action{margin-left:0;margin-right:8px}[dir=rtl] .mdc-banner__secondary-action,.mdc-banner__secondary-action[dir=rtl]{margin-left:8px;margin-right:0}.mdc-banner{background-color:#fff;border-bottom-color:rgba(0, 0, 0, 0.12);border-bottom-width:1px;border-radius:0}.mdc-banner .mdc-banner__text{color:#000}.mdc-banner .mdc-banner__text{letter-spacing:0.0178571429em;font-size:0.875rem;font-family:Roboto, sans-serif;font-weight:400;line-height:1.25rem}.mdc-banner .mdc-banner__graphic{border-radius:50%}.mdc-banner .mdc-banner__graphic{height:40px;width:40px}.mdc-banner .mdc-banner__fixed{background-color:#fff}.mdc-banner .mdc-banner__fixed{border-bottom-color:rgba(0, 0, 0, 0.12)}.mdc-banner .mdc-banner__fixed{border-bottom-width:1px}.mdc-banner .mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-text-button-label-text-color, #6200ee)}.mdc-banner .mdc-button .mdc-button__ripple::before,.mdc-banner .mdc-button .mdc-button__ripple::after{background-color:#6200ee;background-color:var(--mdc-text-button-hover-state-layer-color, #6200ee)}.mdc-banner .mdc-button:hover .mdc-button__ripple::before,.mdc-banner .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.04;opacity:var(--mdc-text-button-hover-state-layer-opacity, 0.04)}.mdc-banner .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-banner .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-text-button-focus-state-layer-opacity, 0.12)}.mdc-banner .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-banner .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.1;opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.1)}.mdc-banner .mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.1)}.mdc-banner__secondary-action{margin-left:0;margin-right:8px}[dir=rtl] .mdc-banner__secondary-action,.mdc-banner__secondary-action[dir=rtl]{margin-left:8px;margin-right:0}","",{version:3,sources:["webpack://./../../node_modules/@material/banner/_banner-theme.scss","webpack://./../../node_modules/@material/theme/_css.scss","webpack://./../../node_modules/@material/banner/_banner.scss","webpack://./../../node_modules/@material/rtl/_rtl.scss","webpack://./../../node_modules/@material/button/_button-shared-theme.scss","webpack://./../../node_modules/@material/ripple/_ripple-theme.scss"],names:[],mappings:"AAqQE,qBCnMI,UAAA,CAYF,oCAAA,CDsMF,qBClNI,wBAAA,CAYF,kDAAA,CDkOF,wCAGI,eEhRO,CFsRP,4CATJ,wCAUM,cAAA,CAAA,CAaN,qBAEI,eErSO,CA2CX,YF+SE,SA7UM,CE+CJ,yBAAA,CACA,qBAAA,CACA,YAAA,CACA,aAAA,CACA,QAAA,CACA,iBAAA,CACA,UAAA,CAlBA,yBAEE,+BACE,MAAA,CACA,OAAA,CAGF,8BDbJ,gBAAA,CAAA,iBAAA,CEEE,+EFFF,gBAAA,CAAA,iBAAA,CAAA,CC4BE,yBF2PF,4DACE,cAAA,CAGF,4DACE,kBAAA,CAGF,yDC/RA,gBAAA,CAAA,gBAAA,CDiSE,kBAAA,CG/RA,qIFFF,eAAA,CAAA,iBAAA,CDoSA,4DACE,gBAAA,CAAA,CEnQJ,4DAII,YAAA,CAIJ,kBAEI,4BAAA,CAGF,uCAEI,+BAAA,CAIA,uBAAA,CAKN,qBAEI,4BAAA,CAGF,0CAEI,+BAAA,CFqMN,2CAEI,MAAA,CACA,gBAAA,CACA,iBAAA,CACA,OAAA,CEjMJ,mBAEI,yBAAA,CACA,qBAAA,CACA,cAAA,CACA,cAAA,CACA,UAAA,CAIJ,qBAEI,YAAA,CACA,eAAA,CACA,iBAAA,CACA,2BAAA,CACA,UAAA,CAIJ,kCAEI,YAAA,CACA,UAAA,CAIJ,qBDrGE,gBAAA,CAAA,cAAA,CCyGE,aAAA,CACA,eAAA,CACA,kBAAA,CACA,iBAAA,CC1GA,6DFFF,aAAA,CAAA,iBAAA,CCgHF,kBAEI,iBAAA,CACA,OAAA,CACA,0BAAA,CAIJ,kBDxHE,gBAAA,CAAA,iBAAA,CC4HE,iBAAA,CACA,WAAA,CAEA,gBAtKqB,CAuKrB,mBAvKqB,CCyCrB,uDFFF,gBAAA,CAAA,iBAAA,CCoIF,qBDpIE,cAAA,CAAA,iBAAA,CCwIE,mBAAA,CACA,YAAA,CACA,aAAA,CACA,kBAAA,CACA,eAAA,CC1IA,6DFFF,gBAAA,CAAA,eAAA,CCgJF,8BDhJE,aAAA,CAAA,gBAAA,CEEE,+EFFF,eAAA,CAAA,cAAA,CCjBF,YDiBE,qBAAA,CAAA,uCAAA,CAAA,uBAAA,CAAA,eAAA,CDuIF,8BCvIE,UAAA,CD6UF,8BC7UE,6BAAA,CAAA,kBAAA,CAAA,8BAAA,CAAA,eAAA,CAAA,mBAAA,CDkNF,iCClNE,iBAAA,CD8WF,iCC9WE,WAAA,CAAA,UAAA,CDwHF,+BCxHE,qBAAA,CD0JF,+BC1JE,uCAAA,CDwKF,+BCxKE,uBAAA,CG+RF,uCH3SI,aAAA,CAYF,sDAAA,CI4EA,uGJxFE,wBAAA,CAYF,wEAAA,CIqdF,wIJjeI,YAAA,CAYF,8DAAA,CIqdF,gLA9QI,wBAAA,CJnNA,YAAA,CAYF,8DAAA,CIiOE,6EAEI,+BAAA,CAKF,oFAEI,wBAhRO,CJ0Bb,WAAA,CAYF,+DAAA,CIqPA,4CJrPA,+EAAA,CCVF,8BDUE,aAAA,CAAA,gBAAA,CEEE,+EFFF,eAAA,CAAA,cAAA",sourcesContent:["//\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// Internal styling for Tooltip MDC component.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/button/button-text-theme';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/keys';\n@use '@material/typography/typography';\n@use '@material/tokens/resolvers';\n\n$fill-color: surface;\n$text-color: on-surface;\n$divider-color: rgba(theme-color.prop-value(on-surface), 0.12);\n$graphic-background-color: primary;\n$graphic-color: surface;\n$graphic-shape-radius: 50%;\n$primary-action-text-color: primary;\n$secondary-action-text-color: primary;\n\n$mobile-breakpoint: 480px;\n$z-index: 1;\n\n$light-theme: (\n action-focus-state-layer-color: theme-color.$primary,\n action-focus-state-layer-opacity: 0.12,\n action-focus-label-text-color: null,\n action-hover-state-layer-color: theme-color.$primary,\n action-hover-state-layer-opacity: 0.04,\n action-hover-label-text-color: null,\n action-label-text-color: theme-color.$primary,\n // TODO(b/197004146): Support action label typography.\n action-label-text-font: null,\n action-label-text-size: null,\n action-label-text-tracking: null,\n action-label-text-weight: null,\n action-pressed-state-layer-color: theme-color.$primary,\n action-pressed-state-layer-opacity: 0.1,\n action-pressed-label-text-color: null,\n container-color: theme-color.$surface,\n container-elevation: null,\n container-shadow-color: null,\n container-shape: 0,\n divider-color: $divider-color,\n divider-height: 1px,\n supporting-text-color: theme-color.$on-surface,\n supporting-text-font: typography.get-font(body2),\n supporting-text-line-height: typography.get-line-height(body2),\n supporting-text-size: typography.get-size(body2),\n supporting-text-tracking: typography.get-tracking(body2),\n supporting-text-weight: typography.get-weight(body2),\n with-image-image-shape: $graphic-shape-radius,\n with-image-image-size: 40px,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n @include theme.validate-theme-keys($light-theme, $theme);\n $theme: _resolve-theme($theme, $resolvers);\n @include keys.declare-custom-properties($theme, banner);\n}\n\n@function _resolve-theme($theme, $resolvers) {\n @return map.merge(\n $theme,\n _resolve-theme-elevation(\n $theme,\n map.get($resolvers, elevation),\n container-elevation\n )\n );\n}\n\n@function _resolve-theme-elevation($theme, $resolver, $keys...) {\n @if $resolver == null {\n @return $theme;\n }\n\n @each $key in $keys {\n // Resolve the value for each state key.\n $resolved-value: meta.call(\n $resolver,\n $elevation: map.get($theme, $key),\n $shadow-color: map.get($theme, container-shadow-color)\n );\n\n // Update the theme with the resolved value.\n $theme: map.set($theme, $key, $resolved-value);\n }\n\n @return $theme;\n}\n\n@mixin theme-styles(\n $theme,\n $resolver: resolvers.$material,\n $query: feature-targeting.all()\n) {\n @include theme.validate-theme-keys($light-theme, $theme);\n @include text-color(map.get($theme, supporting-text-color), $query: $query);\n @include _supporting-text-typography(\n (\n font: map.get($theme, supporting-text-font),\n size: map.get($theme, supporting-text-size),\n tracking: map.get($theme, supporting-text-tracking),\n weight: map.get($theme, supporting-text-weight),\n line-height: map.get($theme, supporting-text-line-height),\n ),\n $query: $query\n );\n\n @include graphic-shape-radius(\n map.get($theme, with-image-image-shape),\n $query: $query\n );\n @include _graphic-size(\n map.get($theme, with-image-image-size),\n $query: $query\n );\n\n @include fill-color(map.get($theme, container-color), $query: $query);\n @include divider-color(map.get($theme, divider-color), $query: $query);\n @include _divider-height(map.get($theme, divider-height), $query: $query);\n @include _banner-shape(map.get($theme, container-shape), $query: $query);\n @include _banner-elevation(\n $resolver,\n map.get($theme, container-elevation),\n map.get($theme, container-shadow-color),\n $query\n );\n\n .mdc-button {\n @include button-text-theme.theme-styles(\n (\n focus-label-text-color: map.get($theme, action-focus-label-text-color),\n focus-state-layer-color: map.get($theme, action-focus-state-layer-color),\n focus-state-layer-opacity:\n map.get($theme, action-focus-state-layer-opacity),\n hover-label-text-color: map.get($theme, action-hover-label-text-color),\n hover-state-layer-color: map.get($theme, action-hover-state-layer-color),\n hover-state-layer-opacity:\n map.get($theme, action-hover-state-layer-opacity),\n label-text-color: map.get($theme, action-label-text-color),\n label-text-font: map.get($theme, action-label-text-font),\n label-text-size: map.get($theme, action-label-text-size),\n label-text-tracking: map.get($theme, action-label-text-tracking),\n label-text-weight: map.get($theme, action-label-text-weight),\n pressed-label-text-color:\n map.get($theme, action-pressed-label-text-color),\n pressed-state-layer-color:\n map.get($theme, action-pressed-state-layer-color),\n pressed-state-layer-opacity:\n map.get($theme, action-pressed-state-layer-opacity),\n ),\n $query: $query\n );\n }\n}\n\n///\n/// Customizes fill color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-theme-color.property-values`.\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 .mdc-banner__fixed {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n///\n/// Customizes text color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-theme-color.property-values`.\n///\n@mixin text-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-banner__text {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n///\n/// Customizes divider color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-theme-color.property-values`.\n///\n@mixin divider-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(border-bottom-color, $color);\n }\n\n .mdc-banner__fixed {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-bottom-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 @include feature-targeting.targets($feat-structure) {\n @include theme.property(border-bottom-width, $height);\n }\n\n .mdc-banner__fixed {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(border-bottom-width, $height);\n }\n }\n}\n\n///\n/// Customizes the graphic color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-theme-color.property-values`.\n///\n@mixin graphic-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-banner__graphic {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n///\n/// Customizes the graphic background color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-theme-color.property-values`.\n///\n@mixin graphic-background-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-banner__graphic {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n///\n/// Customizes the graphic shape radius.\n/// @param {Number} $shape-radius Shape radius in length or percentage.\n///\n@mixin graphic-shape-radius($shape-radius, $query: feature-targeting.all()) {\n .mdc-banner__graphic {\n @include shape-mixins.radius($shape-radius, $query: $query);\n }\n}\n\n///\n/// Sets the min-width for the banner content.\n/// @param {Number} $min-width Minimum width value in `px`.\n/// @param {Number} $mobile-breakpoint Mobile breakpoint value in `px`.\n///\n@mixin min-width(\n $min-width,\n $mobile-breakpoint: $mobile-breakpoint,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n .mdc-banner__content,\n .mdc-banner__fixed {\n @include feature-targeting.targets($feat-structure) {\n min-width: $min-width;\n\n // The first media query ensures that banners are always 100% width on\n // mobile devices, as required by the spec. The second media query\n // prevents banners from being wider than the viewport for large min-width\n // values.\n @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n min-width: 100%;\n }\n }\n }\n}\n\n///\n/// Sets the max-width for the banner content.\n/// @param {Number} $max-width Maximum width value in `px`.\n///\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-banner__content {\n @include feature-targeting.targets($feat-structure) {\n max-width: $max-width;\n }\n }\n}\n\n///\n/// Sets the banner content to centered instead of leading.\n///\n@mixin position-centered($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-banner__content {\n @include feature-targeting.targets($feat-structure) {\n left: 0;\n margin-left: auto;\n margin-right: auto;\n right: 0;\n }\n }\n}\n\n///\n/// Sets the banner content to stacked layout.\n///\n@mixin layout-stacked($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n .mdc-banner__content {\n flex-wrap: wrap;\n }\n\n .mdc-banner__graphic {\n margin-bottom: 12px;\n }\n\n .mdc-banner__text {\n @include rtl.reflexive-property(margin, 16px, 8px);\n padding-bottom: 4px;\n }\n\n .mdc-banner__actions {\n margin-left: auto;\n }\n }\n}\n\n// Sets the z-index of the banner.\n// @param {Number} $z-index\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n z-index: $z-index;\n }\n}\n\n// Sets the width of the banner fixed element. Use to adjust the width of the\n// fixed banner in cases where width is not the same as the viewport.\n// @param {Number} $width Width value in `px`.\n@mixin fixed-width($width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-banner__fixed {\n @include feature-targeting.targets($feat-structure) {\n width: $width;\n }\n }\n}\n\n@mixin _supporting-text-typography(\n $typography-map,\n $query: feature-targeting.all()\n) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n $font: map.get($typography-map, font);\n $size: map.get($typography-map, size);\n $tracking: map.get($typography-map, tracking);\n $weight: map.get($typography-map, weight);\n $line-height: map.get($typography-map, line-height);\n\n .mdc-banner__text {\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(letter-spacing, $tracking);\n @include theme.property(font-size, $size);\n @include theme.property(font-family, $font);\n @include theme.property(font-weight, $weight);\n @include theme.property(line-height, $line-height);\n }\n }\n}\n\n@mixin _banner-shape($shape, $query: feature-targeting.all()) {\n @include shape-mixins.radius($shape, $query: $query);\n}\n\n@mixin _banner-elevation(\n $resolver,\n $elevation,\n $shadow-color,\n $query: feature-targeting.all()\n) {\n $elevation-resolver: map.get($resolver, elevation);\n\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $elevation,\n $shadow-color: $shadow-color,\n $query: $query\n );\n}\n\n@mixin _graphic-size($size, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n .mdc-banner__graphic {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(height, $size);\n @include theme.property(width, $size);\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@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 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// Internal styling for Tooltip MDC component.\n\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use '@material/button/button-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use './banner-theme';\n\n$_text-type-scale: body2;\n$_min-width: 344px;\n$_max-width: 720px;\n// Minimum banner height minus standard text height, divided by 2 for both top\n// and bottom padding. This is used to support two/three line banners.\n$_text-padding-top-bottom: math.div(52px - 20px, 2);\n\n$_enter-duration: 300ms;\n$_exit-duration: 250ms;\n\n/// Core styles for banner component.\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 @include banner-theme.graphic-color(\n banner-theme.$graphic-color,\n $query: $query\n );\n @include banner-theme.graphic-background-color(\n banner-theme.$graphic-background-color,\n $query: $query\n );\n @include banner-theme.min-width($_min-width, $query: $query);\n @include banner-theme.max-width($_max-width, $query: $query);\n @include static-styles($query: $query);\n\n .mdc-banner {\n @include banner-theme.theme-styles(\n banner-theme.$light-theme,\n $query: $query\n );\n }\n\n .mdc-banner__secondary-action {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, 0, 8px);\n }\n }\n}\n\n@mixin static-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 .mdc-banner {\n @include banner-theme.z-index(banner-theme.$z-index, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n // Mobile view styles.\n @media (max-width: banner-theme.$mobile-breakpoint) {\n // Span across viewport for fixed mobile view.\n .mdc-banner__fixed {\n left: 0;\n right: 0;\n }\n\n .mdc-banner__text {\n @include rtl.reflexive-property(margin, 16px, 36px);\n }\n }\n\n border-bottom-style: solid;\n box-sizing: border-box;\n display: none;\n flex-shrink: 0;\n height: 0;\n position: relative;\n width: 100%;\n }\n\n &.mdc-banner--mobile-stacked {\n @media (max-width: banner-theme.$mobile-breakpoint) {\n @include banner-theme.layout-stacked($query: $query);\n }\n }\n }\n\n .mdc-banner--opening,\n .mdc-banner--open,\n .mdc-banner--closing {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n }\n }\n\n .mdc-banner--open {\n @include feature-targeting.targets($feat-animation) {\n transition: height $_enter-duration ease;\n }\n\n .mdc-banner__content {\n @include feature-targeting.targets($feat-animation) {\n transition: transform $_enter-duration ease;\n }\n\n @include feature-targeting.targets($feat-structure) {\n transform: translateY(0);\n }\n }\n }\n\n .mdc-banner--closing {\n @include feature-targeting.targets($feat-animation) {\n transition: height $_exit-duration ease;\n }\n\n .mdc-banner__content {\n @include feature-targeting.targets($feat-animation) {\n transition: transform $_exit-duration ease;\n }\n }\n }\n\n .mdc-banner--centered {\n @include banner-theme.position-centered($query: $query);\n }\n\n .mdc-banner__fixed {\n @include feature-targeting.targets($feat-structure) {\n border-bottom-style: solid;\n box-sizing: border-box;\n height: inherit;\n position: fixed;\n width: 100%;\n }\n }\n\n .mdc-banner__content {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n min-height: 52px;\n position: absolute;\n transform: translateY(-100%);\n width: 100%;\n }\n }\n\n .mdc-banner__graphic-text-wrapper {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n width: 100%;\n }\n }\n\n .mdc-banner__graphic {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, 16px, 0);\n\n flex-shrink: 0;\n margin-top: 16px;\n margin-bottom: 16px;\n text-align: center;\n }\n }\n\n .mdc-banner__icon {\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n .mdc-banner__text {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, 24px, 90px);\n\n align-self: center;\n flex-grow: 1;\n\n padding-top: $_text-padding-top-bottom;\n padding-bottom: $_text-padding-top-bottom;\n }\n }\n\n .mdc-banner__actions {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, 0, 8px);\n\n align-self: flex-end;\n display: flex;\n flex-shrink: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n }\n }\n\n .mdc-banner__secondary-action {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, 0, 8px);\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/// \n/// \x3c!-- ... --\x3e\n///
\n///
Styled incorrectly as RTL!
\n///
\n/// \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 -left to and\n// -right to 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 2021 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:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './button-ripple';\n\n$height: 36px !default;\n$horizontal-padding: 8px !default;\n$contained-horizontal-padding: 16px !default;\n// For a contained button with an icon, the padding on the side of the\n// button with the icon.\n$contained-horizontal-padding-icon: 12px !default;\n\n$minimum-height: 24px !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$shape-radius: small !default;\n\n$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-container-color: rgba(\n theme-color.prop-value(on-surface),\n 0.12\n) !default;\n\n@mixin theme($theme, $resolver, $query: feature-targeting.all()) {\n @include _label-text-typography(\n (\n family: map.get($theme, label-text-font),\n size: map.get($theme, label-text-size),\n tracking: map.get($theme, label-text-tracking),\n weight: map.get($theme, label-text-weight),\n transform: map.get($theme, label-text-transform),\n ),\n $query: $query\n );\n\n @include container-fill-color(\n (\n default: map.get($theme, container-color),\n disabled: map.get($theme, disabled-container-color),\n ),\n $query: $query\n );\n\n @include ink-color(\n (\n default: map.get($theme, label-text-color),\n hover: map.get($theme, hover-label-text-color),\n focus: map.get($theme, focus-label-text-color),\n pressed: map.get($theme, pressed-label-text-color),\n disabled: map.get($theme, disabled-label-text-color),\n ),\n $query: $query\n );\n\n @include icon-color(\n (\n default: map.get($theme, with-icon-icon-color),\n hover: map.get($theme, with-icon-hover-icon-color),\n focus: map.get($theme, with-icon-focus-icon-color),\n pressed: map.get($theme, with-icon-pressed-icon-color),\n disabled: map.get($theme, with-icon-disabled-icon-color),\n ),\n $query: $query\n );\n\n $icon-size: map.get($theme, with-icon-icon-size);\n @include _icon-size($icon-size, $query: $query);\n\n @include _states-colors(\n (\n focus: map.get($theme, focus-state-layer-color),\n hover: map.get($theme, hover-state-layer-color),\n pressed: map.get($theme, pressed-state-layer-color),\n ),\n $query: $query\n );\n\n $hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity);\n $focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity);\n $pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity);\n @include ripple-theme.states-opacities(\n $opacity-map: (\n focus: $focus-state-layer-opacity,\n hover: $hover-state-layer-opacity,\n press: $pressed-state-layer-opacity,\n ),\n $ripple-target: button-ripple.$ripple-target,\n $query: $query\n );\n\n $container-height: map.get($theme, container-height);\n @include height($container-height, $query: $query);\n\n $container-height-value: if(\n custom-properties.is-custom-prop($container-height),\n custom-properties.get-fallback($container-height),\n $container-height\n );\n @if $container-height-value != null and $container-height-value != $height {\n @include _touch-target-reset($query: $query);\n }\n\n $shape: map.get($theme, container-shape);\n @if $shape {\n $container-height: if(\n $container-height != null,\n $container-height,\n $height\n );\n @include _shape-radius-with-height(\n $shape,\n $height: $container-height,\n $query: $query\n );\n }\n\n @include _elevation(\n $resolver,\n $elevation-map: (\n default: map.get($theme, container-elevation),\n disabled: map.get($theme, disabled-container-elevation),\n focus: map.get($theme, focus-container-elevation),\n hover: map.get($theme, hover-container-elevation),\n pressed: map.get($theme, pressed-container-elevation)\n ),\n $shadow-color: map.get($theme, container-shadow-color),\n $query: $query\n );\n}\n\n@function resolve-theme-elevation-keys($theme, $resolver) {\n $elevation-resolver: map.get($resolver, elevation);\n $shadow-color: map.get($theme, container-shadow-color);\n @if $elevation-resolver == null or $shadow-color == null {\n @return $theme;\n }\n\n $elevation-keys: (\n container-elevation,\n hover-container-elevation,\n focus-container-elevation,\n pressed-container-elevation,\n disabled-container-elevation\n );\n\n @each $key in $elevation-keys {\n $elevation: map.get($theme, $key);\n @if $elevation != null {\n $resolved-value: meta.call(\n $resolver,\n $elevation: $elevation,\n $shadow-color: $shadow-color\n );\n // Update the key with the resolved value.\n $theme: map.set($theme, $key, $resolved-value);\n }\n }\n @return $theme;\n}\n\n///\n/// Sets ripple color for button.\n///\n@mixin ripple-states(\n $color,\n $opacity-map: null,\n $query: feature-targeting.all()\n) {\n @include ripple-theme.states(\n $color: $color,\n $opacity-map: $opacity-map,\n $query: $query,\n $ripple-target: button-ripple.$ripple-target\n );\n}\n\n@mixin filled-accessible(\n $container-fill-color,\n $query: feature-targeting.all()\n) {\n $fill-tone: theme-color.tone($container-fill-color);\n\n @include container-fill-color($container-fill-color, $query);\n\n @if ($fill-tone == 'dark') {\n @include ink-color(text-primary-on-dark, $query);\n @include ripple-states($color: text-primary-on-dark, $query: $query);\n } @else {\n @include ink-color(text-primary-on-light, $query);\n @include ripple-states($color: text-primary-on-light, $query: $query);\n }\n}\n\n///\n/// Sets the container fill color to the given color for an enabled button.\n/// @param {Color|map} $color-or-map - The desired container fill color,\n/// specified either as a flat value or a map of colors with states\n/// {default, hover, focused, pressed, disabled} as keys.\n///\n@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {\n // :not(:disabled) is used to support link styled as button\n // as link does not support :enabled style\n &:not(:disabled) {\n @include _container-fill-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:hover {\n @include _container-fill-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n\n @include ripple-theme.focus() {\n @include _container-fill-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n\n @include ripple-theme.active {\n @include _container-fill-color(\n state.get-pressed-state($color-or-map),\n $query: $query\n );\n }\n }\n\n &:disabled {\n @include _container-fill-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n///\n/// Sets the container fill color to the given color for a disabled button.\n/// @param {Color} $color - The desired container fill color.\n/// @deprecated - call `container-fill-color` instead with `disabled` as a map\n/// key.\n///\n@mixin disabled-container-fill-color($color, $query: feature-targeting.all()) {\n @include container-fill-color(\n (\n disabled: $color,\n ),\n $query: $query\n );\n}\n\n///\n/// Sets the icon color to the given color for an enabled button.\n/// @param {Color} $color-or-map - The desired icon color, specified either\n/// as a flat value or a map of colors with states\n/// {default, hover, focused, pressed, disabled} as keys.\n///\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n &:not(:disabled) {\n @include _icon-color(\n state.get-default-state($color-or-map),\n $query: $query\n );\n\n &:hover {\n @include _icon-color(\n state.get-hover-state($color-or-map),\n $query: $query\n );\n }\n\n @include ripple-theme.focus() {\n @include _icon-color(\n state.get-focus-state($color-or-map),\n $query: $query\n );\n }\n\n @include ripple-theme.active {\n @include _icon-color(\n state.get-pressed-state($color-or-map),\n $query: $query\n );\n }\n }\n\n &:disabled {\n @include _icon-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n///\n/// Sets the icon color to the given color for a disabled button.\n/// @param {Color} $color - The desired icon color.\n/// @deprecated - call `icon-color` instead with `disabled` as a map key.\n///\n@mixin disabled-icon-color($color, $query: feature-targeting.all()) {\n @include icon-color(\n (\n disabled: $color,\n ),\n $query: $query\n );\n}\n\n///\n/// Sets the ink color to the given color for an enabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color-or-map - The desired ink color, specified either\n/// as a flat value or a map of colors with states\n/// {default, hover, focused, pressed, disabled} as keys.\n///\n@mixin ink-color($color-or-map, $query: feature-targeting.all()) {\n &:not(:disabled) {\n @include _ink-color(state.get-default-state($color-or-map), $query: $query);\n\n &:hover {\n @include _ink-color(state.get-hover-state($color-or-map), $query: $query);\n }\n\n @include ripple-theme.focus() {\n @include _ink-color(state.get-focus-state($color-or-map), $query: $query);\n }\n\n @include ripple-theme.active {\n @include _ink-color(\n state.get-pressed-state($color-or-map),\n $query: $query\n );\n }\n }\n\n &:disabled {\n @include _ink-color(\n state.get-disabled-state($color-or-map),\n $query: $query\n );\n }\n}\n\n///\n/// Sets the ink color to the given color for a disabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color - The desired ink color.\n/// @deprecated - call `ink-color` instead with `disabled` as a map key.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n @include ink-color(\n (\n disabled: $color,\n ),\n $query: $query\n );\n}\n\n///\n/// Sets density scale for button.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-3`,\n/// `-2`, `-1`, `0`.\n///\n@mixin 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 height($height, $query: $query);\n\n @if $density-scale != 0 {\n @include _touch-target-reset($query: $query);\n }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin _touch-target-reset($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .mdc-button__touch {\n @include feature-targeting.targets($feat-structure) {\n // Do not set display: none in case the touch target is element.\n height: 100%;\n }\n }\n}\n\n///\n/// Sets custom height for button.\n/// @param {Number} $height - Height of button in `px`.\n///\n@mixin height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(height, $height);\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: $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 _shape-radius-with-height($radius, $rtl-reflexive, $height, $query);\n}\n\n@mixin _shape-radius-with-height(\n $radius,\n $rtl-reflexive: false,\n $height: $height,\n $query: feature-targeting.all()\n) {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n\n #{button-ripple.$ripple-target} {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n}\n\n///\n/// Sets horizontal padding to the given number.\n/// @param {Number} $padding\n/// @param {Number} $padding-icon [null] For buttons with an icon, the\n/// horizontal padding on the side with the icon, if different from\n/// $padding.\n///\n@mixin horizontal-padding(\n $padding,\n $padding-icon: null,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n // $padding should be a single value; enforce it by specifying all 4 sides in the output\n padding: 0 $padding 0 $padding;\n }\n\n @if $padding-icon != null {\n &.mdc-button--icon-trailing {\n @include feature-targeting.targets($feat-structure) {\n // $padding should be a single value; enforce it by specifying all 4\n // sides in the output.\n padding: 0 $padding-icon 0 $padding;\n }\n }\n\n &.mdc-button--icon-leading {\n @include feature-targeting.targets($feat-structure) {\n // $padding should be a single value; enforce it by specifying all 4\n // sides in the output.\n padding: 0 $padding 0 $padding-icon;\n }\n }\n }\n}\n\n///\n/// Sets the button label to overflow as ellipsis\n///\n@mixin label-overflow-ellipsis($query: feature-targeting.all()) {\n .mdc-button__label {\n @include typography.overflow-ellipsis($query: $query);\n }\n}\n\n///\n/// Add a visible outline to the button in high contrast mode.\n///\n@mixin outline-hcm-shim($query: feature-targeting.all()) {\n &::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n/// @deprecated Use `outline-hcm-shim` for the outline button. The focus ring\n/// is provided by default.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n @include outline-hcm-shim($query: $query);\n\n // Link buttons apply focus to the contained link. Focus is indicated via the\n // link since focus-within isn't supported by IE.\n & .mdc-button__link:focus,\n &:focus {\n &::before {\n @include focus-ring.focus-ring($query: $query);\n }\n }\n}\n\n///\n/// Sets the container fill color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\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 @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n///\n/// Sets the icon color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\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-button__icon {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n }\n}\n\n@mixin _icon-size($size-px, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @if $size-px != null {\n $size-rem: typography.px-to-rem($size-px);\n .mdc-button__icon {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(font-size, $size-rem);\n @include theme.property(width, $size-rem);\n @include theme.property(height, $size-rem);\n }\n }\n }\n}\n\n///\n/// Sets the ink color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _ink-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 @include theme.property(color, $color);\n }\n }\n}\n\n@mixin _states-colors($color-map, $query: feature-targeting.all()) {\n $hover: map.get($color-map, hover);\n\n $hover-value: if(\n custom-properties.is-custom-prop($hover),\n custom-properties.get-fallback($hover),\n $hover\n );\n // TODO(b/191298796): support focused & pressed key colors.\n\n @if $hover-value != null {\n @include ripple-theme.states-base-color(\n $color: $hover,\n $ripple-target: button-ripple.$ripple-target,\n $query: $query\n );\n }\n}\n\n@mixin _label-text-typography(\n $typography-map,\n $query: feature-targeting.all()\n) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n $family: map.get($typography-map, family);\n $size: map.get($typography-map, size);\n $tracking: map.get($typography-map, tracking);\n $weight: map.get($typography-map, weight);\n $transform: map.get($typography-map, transform);\n\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(font-family, $family);\n @include theme.property(font-size, $size);\n @include theme.property(letter-spacing, $tracking);\n @include theme.property(font-weight, $weight);\n @include theme.property(text-transform, $transform);\n }\n}\n\n@mixin _elevation(\n $resolver,\n $elevation-map,\n $shadow-color,\n $query: feature-targeting.all()\n) {\n $elevation-resolver: map.get($resolver, elevation);\n\n @if $shadow-color {\n $default: state.get-default-state($elevation-map);\n @if $default != null {\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $default,\n $shadow-color: $shadow-color,\n $query: $query\n );\n }\n\n $focus: state.get-focus-state($elevation-map);\n @if $focus != null {\n @include ripple-theme.focus {\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $focus,\n $shadow-color: $shadow-color,\n $query: $query\n );\n }\n }\n\n $hover: state.get-hover-state($elevation-map);\n @if $hover != null {\n &:hover {\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $hover,\n $shadow-color: $shadow-color,\n $query: $query\n );\n }\n }\n\n $pressed: state.get-pressed-state($elevation-map);\n @if $pressed != null {\n @include ripple-theme.active {\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $pressed,\n $shadow-color: $shadow-color,\n $query: $query\n );\n }\n }\n\n $disabled: state.get-disabled-state($elevation-map);\n @if $disabled != null {\n &:disabled {\n @include elevation-theme.with-resolver(\n $elevation-resolver,\n $elevation: $disabled,\n $shadow-color: $shadow-color,\n $query: $query\n );\n }\n }\n }\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass: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"],sourceRoot:""}]);const l=o},3170:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});var i=n(7796),r=n.n(i),a=n(1051),o=n.n(a)()(r());o.push([e.id,'.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:rgba(0,0,0,0)}.mdc-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;position:relative;vertical-align:top}[dir=rtl] .mdc-button .mdc-button__icon,.mdc-button .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:0}.mdc-button .mdc-button__label{position:relative}.mdc-button .mdc-button__focus-ring{display:none}@media screen and (forced-colors: active){.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring{pointer-events:none;border:2px solid rgba(0,0,0,0);border-radius:6px;box-sizing:content-box;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n );display:block}}@media screen and (forced-colors: active)and (forced-colors: active){.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring{border-color:CanvasText}}@media screen and (forced-colors: active){.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after{content:"";border:2px solid rgba(0,0,0,0);border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}}@media screen and (forced-colors: active)and (forced-colors: active){.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after{border-color:CanvasText}}.mdc-button .mdc-button__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:0}[dir=rtl] .mdc-button__label+.mdc-button__icon,.mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:0;margin-right:8px}svg.mdc-button__icon{fill:currentColor}.mdc-button--touch{margin-top:6px;margin-bottom:6px}.mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none)}.mdc-button{padding:0 8px 0 8px}.mdc-button--unelevated{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px 0 16px}.mdc-button--unelevated.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--unelevated.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--raised{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px 0 16px}.mdc-button--raised.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--raised.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--outlined{border-style:solid;transition:border 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-button--outlined .mdc-button__ripple{border-style:solid;border-color:rgba(0,0,0,0)}@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-button{--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-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button .mdc-button__ripple::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-button .mdc-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__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-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-button__ripple{position:absolute;box-sizing:content-box;overflow:hidden;z-index:0;top:0;left:0;bottom:0;right:0}.mdc-button{font-family:Roboto, sans-serif;font-family:var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:uppercase;text-transform:var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));height:36px;height:var(--mdc-text-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #6200ee))}.mdc-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-text-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-text-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-text-button-with-icon-icon-size, 1.125rem)}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{background-color:#6200ee;background-color:var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee))}.mdc-button:hover .mdc-button__ripple::before,.mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.04;opacity:var(--mdc-text-button-hover-state-layer-opacity, 0.04)}.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-text-button-focus-state-layer-opacity, 0.12)}.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.12)}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.12)}.mdc-button .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--unelevated{font-family:Roboto, sans-serif;font-family:var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:uppercase;text-transform:var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));height:36px;height:var(--mdc-filled-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #6200ee))}.mdc-button--unelevated:disabled{background-color:rgba(0, 0, 0, 0.12);background-color:var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12))}.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--unelevated:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--unelevated .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-filled-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-filled-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-filled-button-with-icon-icon-size, 1.125rem)}.mdc-button--unelevated .mdc-button__ripple::before,.mdc-button--unelevated .mdc-button__ripple::after{background-color:#fff;background-color:var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--unelevated:hover .mdc-button__ripple::before,.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.08;opacity:var(--mdc-filled-button-hover-state-layer-opacity, 0.08)}.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-filled-button-focus-state-layer-opacity, 0.24)}.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)}.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)}.mdc-button--unelevated .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--raised{font-family:Roboto, sans-serif;font-family:var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:uppercase;text-transform:var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));height:36px;height:var(--mdc-protected-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));--mdc-elevation-box-shadow-for-gss:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mdc-button--raised:not(:disabled){background-color:#6200ee;background-color:var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #6200ee))}.mdc-button--raised:disabled{background-color:rgba(0, 0, 0, 0.12);background-color:var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12))}.mdc-button--raised:not(:disabled){color:#fff;color:var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--raised:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--raised .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-protected-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-protected-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-protected-button-with-icon-icon-size, 1.125rem)}.mdc-button--raised .mdc-button__ripple::before,.mdc-button--raised .mdc-button__ripple::after{background-color:#fff;background-color:var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--raised:hover .mdc-button__ripple::before,.mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.08;opacity:var(--mdc-protected-button-hover-state-layer-opacity, 0.08)}.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-protected-button-focus-state-layer-opacity, 0.24)}.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)}.mdc-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)}.mdc-button--raised .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--raised.mdc-ripple-upgraded--background-focused,.mdc-button--raised:not(.mdc-ripple-upgraded):focus{--mdc-elevation-box-shadow-for-gss:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mdc-button--raised:hover{--mdc-elevation-box-shadow-for-gss:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mdc-button--raised:not(:disabled):active{--mdc-elevation-box-shadow-for-gss:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mdc-button--raised:disabled{--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss))}.mdc-button--outlined{font-family:Roboto, sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));height:36px;height:var(--mdc-outlined-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width, 1px)}.mdc-button--outlined:not(:disabled){color:#6200ee;color:var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #6200ee))}.mdc-button--outlined:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--outlined .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem)}.mdc-button--outlined .mdc-button__ripple::before,.mdc-button--outlined .mdc-button__ripple::after{background-color:#6200ee;background-color:var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee))}.mdc-button--outlined:hover .mdc-button__ripple::before,.mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, 0.04)}.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, 0.12)}.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.mdc-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.mdc-button--outlined .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--outlined:not(:disabled){border-color:rgba(0, 0, 0, 0.12);border-color:var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12))}.mdc-button--outlined:disabled{border-color:rgba(0, 0, 0, 0.12);border-color:var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12))}.mdc-button--outlined.mdc-button--icon-trailing{padding:0 11px 0 15px}.mdc-button--outlined.mdc-button--icon-leading{padding:0 15px 0 11px}.mdc-button--outlined .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width, 1px)}.mdc-button--outlined .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width, 1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px))}.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon,.mdc-button--outlined .mdc-button__icon{margin-left:-4px;margin-right:8px}[dir=rtl] .mdc-button--raised .mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:-4px}.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,.mdc-button--outlined .mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:-4px}[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:-4px;margin-right:8px}',"",{version:3,sources:["webpack://./../../node_modules/@material/touch-target/_touch-target.scss","webpack://./../../node_modules/@material/elevation/_elevation.scss","webpack://./../../node_modules/@material/theme/_css.scss","webpack://./../../node_modules/@material/button/_button-base.scss","webpack://./../../node_modules/@material/elevation/_elevation-theme.scss","webpack://./../../node_modules/@material/rtl/_rtl.scss","webpack://./../../node_modules/@material/dom/_dom.scss","webpack://./../../node_modules/@material/focus-ring/_focus-ring.scss","webpack://./../../node_modules/@material/typography/_typography.scss","webpack://./../../node_modules/@material/button/_button-text.scss","webpack://./../../node_modules/@material/button/_button-shared-theme.scss","webpack://./../../node_modules/@material/button/_button-filled.scss","webpack://./../../node_modules/@material/button/_button-protected.scss","webpack://./../../node_modules/@material/button/_button-outlined.scss","webpack://./../../node_modules/@material/ripple/_ripple.scss","webpack://./../../node_modules/@material/animation/_animation.scss","webpack://./../../node_modules/@material/button/_button-ripple.scss","webpack://./../../node_modules/@material/button/_button.scss","webpack://./../../node_modules/@material/ripple/_ripple-theme.scss","webpack://./../../node_modules/@material/button/_button-outlined-theme.scss"],names:[],mappings:"AAqCE,0BAOM,cAAA,CCgBN,uBAGM,iBAAA,CACA,qBAAA,CACA,mBAAA,CCCF,SAAA,CAYF,+CAAA,CDFI,qDAAA,CCVF,qBAAA,CAYF,yDAAA,CC7BF,YCoQE,iBAAA,CDlJA,mBAAA,CAEA,kBAAA,CACA,sBAAA,CACA,qBAAA,CACA,cAAA,CACA,WAAA,CACA,YAAA,CAEA,mBAAA,CACA,gBAAA,CACA,uBAAA,CAGA,gBAAA,CACA,qBAAA,CACA,wBAAA,CCqJF,mCF1PE,UAAA,CAAA,WAAA,CEgQI,KAAA,CAEA,MAAA,CD1JN,8BAEI,SAAA,CACA,QAAA,CAKJ,mBAEI,YAAA,CAIJ,kBAEI,cAAA,CAIJ,qBAEI,cAAA,CACA,mBAAA,CAtJF,8BDuBA,aAAA,CAAA,gBAAA,CC4IF,oBAAA,CACA,iBAAA,CACA,kBAAA,CE5II,+EHFF,eAAA,CAAA,cAAA,CCjBA,+BAKI,iBAAA,CAIJ,oCAEI,YAAA,CGsBJ,0CHjBE,gJIPF,mBAAA,CACA,8BAAA,CACA,iBAAA,CACA,sBAAA,CACA,iBAAA,CACA,OAAA,CAEA,QAAA,CAEA,+BAAA,CACA;;KAzB0B,CA0B1B;;KApB4B,CJqBpB,aAAA,CAAA,CGYR,qEHjBE,gJIOA,uBAAA,CAAA,CDUF,0CCPA,8JACE,UAAA,CACA,8BAAA,CACA,iBAhEgB,CAiEhB,aAAA,CACA,iBAAA,CACA,OAAA,CAEA,QAAA,CAEA,+BAAA,CACA,uBA/BgB,CAgChB,sBAhCgB,CAAA,CD2BlB,qECPA,8JAeI,uBAAA,CAAA,CJdJ,+BHtBA,iBAAA,CACA,OAAA,CACA,WAtCK,CAkDH,MAAA,CACA,OAAA,CACA,0BAAA,CGWJ,qCDfE,eAAA,CAAA,cAAA,CGEE,6FHFF,aAAA,CAAA,gBAAA,CCqBF,qBAyIA,iBAAA,CAnIA,mBHJE,cAHsB,CAItB,iBAJsB,CGmBxB,YKmNE,iCAAA,CACA,kCAAA,CNvQE,8BAAA,CAYF,2GAAA,CAZE,oBAAA,CAYF,kEAAA,CO7BF,YCmdE,mBAAA,CC9cF,wBRqME,wDAAA,COyQA,qBAAA,CAIA,kDAII,qBAAA,CAIJ,iDAII,qBAAA,CE9dN,oBTqME,wDAAA,COyQA,qBAAA,CAIA,8CAII,qBAAA,CAIJ,6CAII,qBAAA,CGjeN,sBAUE,kBAAA,CAMA,oDAAA,CAGF,0CAEI,kBAAA,CACA,0BAAA,CCuOJ,mCACE,KACE,sDC3R2B,CDgS3B,qEAAA,CAGF,GACE,+FAAA,CAAA,CAKJ,oCACE,KACE,gCAAA,CACA,SAAA,CAGF,GACE,uCAAA,CAAA,CAIJ,qCACE,KACE,gCAAA,CACA,uCAAA,CAGF,GACE,SAAA,CAAA,CE/SJ,YF+EE,uBAAA,CACA,oBAAA,CACA,mBAAA,CACA,wBAAA,CACA,gCAAA,CACA,kCAAA,CAEA,yCAAA,CAGE,6BAAA,CAIJ,+EAGI,iBAAA,CACA,iBAAA,CACA,SAAA,CACA,mBAAA,CACA,UAAA,CAIJ,wCAGI,2DAAA,CZ5EA,SAAA,CAYF,oCAAA,CY6EF,uCZzFI,SAAA,CAYF,oCAAA,CYyFA,4DAEI,8CAAA,CAIJ,2DAEI,KAAA,CAEA,MAAA,CACA,kBAAA,CACA,8BAAA,CAMJ,sEAEI,4BAAA,CAEA,8BAAA,CAMJ,kFAEI,uFAAA,CAQJ,oFAEI,yCAAA,CAKA,+FAAA,CAcN,+EAGI,oBAAA,CAEA,qBAAA,CACA,UAAA,CACA,WAAA,CAKF,2DAEI,qCAAA,CACA,sCAAA,CEtMN,oBAEI,iBAAA,CAGA,sBAAA,CACA,eAAA,CACA,SAAA,CACA,KAAA,CACA,MAAA,CACA,QAAA,CACA,OAAA,CCHJ,YfeI,8BAAA,CAYF,mJAAA,CAZE,kBAAA,CAYF,kGAAA,CAZE,6BAAA,CAYF,sHAAA,CAZE,eAAA,CAYF,mGAAA,CAZE,wBAAA,CAYF,kHAAA,CAZE,WAAA,CAYF,oDAAA,CAZE,iBAAA,CAYF,iFAAA,CQ+RF,2BR3SI,aAAA,CAYF,gFAAA,CQkTF,qBR9TI,yBAAA,CAYF,2EAAA,CQqhBA,8BRjiBE,kBAAA,CAYF,8DAAA,CAZE,cAAA,CAYF,0DAAA,CAZE,eAAA,CAYF,2DAAA,CgB4EA,+EhBxFE,wBAAA,CAYF,kGAAA,CgBqdF,gHhBjeI,YAAA,CAYF,8DAAA,CgBqdF,wJA9QI,wBAAA,ChBnNA,YAAA,CAYF,8DAAA,CgBiOE,iEAEI,+BAAA,CAKF,wEAEI,wBAhRO,ChB0Bb,YAAA,CAYF,gEAAA,CgBqPA,gChBrPA,gFAAA,CQ4ZF,gCRxaI,iBAAA,CAYF,iFAAA,CerBF,wBfSI,8BAAA,CAYF,qJAAA,CAZE,kBAAA,CAYF,oGAAA,CAZE,6BAAA,CAYF,wHAAA,CAZE,eAAA,CAYF,qGAAA,CAZE,wBAAA,CAYF,oHAAA,CAZE,WAAA,CAYF,sDAAA,CAZE,iBAAA,CAYF,mFAAA,CQ0KF,uCRtLI,wBAAA,CAYF,4FAAA,CQsMF,iCRlNI,oCAAA,CAYF,uFAAA,CQ+RF,uCR3SI,UAAA,CAYF,kFAAA,CQkTF,iCR9TI,yBAAA,CAYF,6EAAA,CQqhBA,0CRjiBE,kBAAA,CAYF,gEAAA,CAZE,cAAA,CAYF,4DAAA,CAZE,eAAA,CAYF,6DAAA,CgB4EA,uGhBxFE,qBAAA,CAYF,oGAAA,CgBqdF,wIhBjeI,YAAA,CAYF,gEAAA,CgBqdF,gLA9QI,wBAAA,ChBnNA,YAAA,CAYF,gEAAA,CgBiOE,6EAEI,+BAAA,CAKF,oFAEI,wBAhRO,ChB0Bb,YAAA,CAYF,kEAAA,CgBqPA,4ChBrPA,kFAAA,CQ4ZF,4CRxaI,iBAAA,CAYF,mFAAA,CefF,oBfGI,8BAAA,CAYF,wJAAA,CAZE,kBAAA,CAYF,uGAAA,CAZE,6BAAA,CAYF,2HAAA,CAZE,eAAA,CAYF,wGAAA,CAZE,wBAAA,CAYF,uHAAA,CAZE,WAAA,CAYF,yDAAA,CAZE,iBAAA,CAYF,sFAAA,CAAA,gJAAA,CAZE,wHAAA,CAYF,mGAAA,CQ0KF,mCRtLI,wBAAA,CAYF,+FAAA,CQsMF,6BRlNI,oCAAA,CAYF,0FAAA,CQ+RF,mCR3SI,UAAA,CAYF,qFAAA,CQkTF,6BR9TI,yBAAA,CAYF,gFAAA,CQqhBA,sCRjiBE,kBAAA,CAYF,mEAAA,CAZE,cAAA,CAYF,+DAAA,CAZE,eAAA,CAYF,gEAAA,CgB4EA,+FhBxFE,qBAAA,CAYF,uGAAA,CgBqdF,gIhBjeI,YAAA,CAYF,mEAAA,CgBqdF,wKA9QI,wBAAA,ChBnNA,YAAA,CAYF,mEAAA,CgBiOE,yEAEI,+BAAA,CAKF,gFAEI,wBAhRO,ChB0Bb,YAAA,CAYF,qEAAA,CgBqPA,wChBrPA,qFAAA,CQ4ZF,wCRxaI,iBAAA,CAYF,sFAAA,CgBuZF,gHhBvZE,iJAAA,CAZE,yHAAA,CAYF,yGAAA,CQunBE,0BRvnBF,iJAAA,CAZE,yHAAA,CAYF,yGAAA,CgB8ZF,0ChB9ZE,kJAAA,CAZE,0HAAA,CAYF,2GAAA,CQ+oBE,6BR/oBF,+IAAA,CAZE,uHAAA,CAYF,4GAAA,CeTF,sBfHI,8BAAA,CAYF,uJAAA,CAZE,kBAAA,CAYF,sGAAA,CAZE,6BAAA,CAYF,0HAAA,CAZE,eAAA,CAYF,uGAAA,CAZE,wBAAA,CAYF,sHAAA,CAZE,WAAA,CAYF,wDAAA,CAZE,iBAAA,CAYF,qFAAA,CQsbA,qBAAA,CRlcE,gBAAA,CAYF,0DAAA,CQ+RF,qCR3SI,aAAA,CAYF,oFAAA,CQkTF,+BR9TI,yBAAA,CAYF,+EAAA,CQqhBA,wCRjiBE,kBAAA,CAYF,kEAAA,CAZE,cAAA,CAYF,8DAAA,CAZE,eAAA,CAYF,+DAAA,CgB4EA,mGhBxFE,wBAAA,CAYF,sGAAA,CgBqdF,oIhBjeI,YAAA,CAYF,kEAAA,CgBqdF,4KA9QI,wBAAA,ChBnNA,YAAA,CAYF,kEAAA,CgBiOE,2EAEI,+BAAA,CAKF,kFAEI,wBAhRO,ChB0Bb,YAAA,CAYF,oEAAA,CgBqPA,0ChBrPA,oFAAA,CQ4ZF,0CRxaI,iBAAA,CAYF,qFAAA,CiBkEF,qCjB9EI,gCAAA,CAYF,0EAAA,CiBgGF,+BjB5GI,gCAAA,CAYF,mFAAA,CQ0bA,gDAII,qBAAA,CAIJ,+CAII,qBAAA,CSjTJ,0CjBrJA,QAAA,CAAA,SAAA,CAAA,WAAA,CAAA,UAAA,CAZE,gBAAA,CAYF,0DAAA,CiB8JA,yCjB1KE,mBAAA,CAYF,6DAAA,CAZE,0BAAA,CAYF,oEAAA,Ce0CA,wHf1CA,gBAAA,CAAA,gBAAA,CGEE,ySHFF,eAAA,CAAA,iBAAA,CeiDA,iLfjDA,eAAA,CAAA,iBAAA,CGEE,2ZHFF,gBAAA,CAAA,gBAAA",sourcesContent:["//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n$height: 48px !default;\n$width: $height !default;\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-touch-target-wrapper {\n @include feature-targeting.targets($feat-structure) {\n // Ensure that styles are only emitted once across all components that\n // have increased touch targets.\n @include base-mixins.emit-once('mdc-touch-target/wrapper') {\n // NOTE: Will change to `inline-block` in the future, but keeping as is\n // temporarily for backwards-compatibility.\n display: inline;\n }\n }\n }\n}\n\n/// Styles applied to the component's inner touch target element.\n/// By default, only sets the inner element height to the minimum touch target\n/// height ($mdc-touch-target-height).\n/// @param {Boolean} $set-width [false] - Sets the inner element width to the\n/// minimum touch target width ($mdc-touch-target-width).\n/// @param $height [$mdc-touch-target-height] - Touch target height.\n/// @param $width [$mdc-touch-target-width] - Touch target width.\n@mixin touch-target(\n $set-width: false,\n $query: feature-targeting.all(),\n $height: $height,\n $width: $width\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 50%;\n height: $height;\n }\n\n @if $set-width {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n left: 50%;\n width: $width;\n transform: translate(-50%, -50%);\n }\n } @else {\n @include feature-targeting.targets($feat-structure) {\n left: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n}\n\n/// Applies margin to the component with the increased touch target,\n/// to compensate for the touch target.\n@mixin margin(\n $component-height,\n $component-width: null,\n $touch-target-height: $height,\n $touch-target-width: $width,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $vertical-margin-value: math.div($touch-target-height - $component-height, 2);\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: $vertical-margin-value;\n margin-bottom: $vertical-margin-value;\n }\n\n @if $component-width {\n $horizontal-margin-value: math.div(\n $touch-target-width - $component-width,\n 2\n );\n\n @include feature-targeting.targets($feat-structure) {\n margin-right: $horizontal-margin-value;\n margin-left: $horizontal-margin-value;\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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use './elevation-theme';\n\n@mixin 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 @for $z-value from 0 through 24 {\n .mdc-elevation--z#{$z-value} {\n @include elevation-theme.elevation($z-value, $query: $query);\n }\n }\n\n .mdc-elevation-transition {\n @include feature-targeting.targets($feat-animation) {\n transition: elevation-theme.transition-value();\n }\n\n @include feature-targeting.targets($feat-structure) {\n will-change: elevation-theme.$property;\n }\n }\n}\n\n///\n/// Called once per application to set up the global default elevation styles.\n///\n@mixin overlay-common($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-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include base-mixins.emit-once('mdc-elevation/common/structure') {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n\n @include theme.property(\n opacity,\n custom-properties.create(--mdc-elevation-overlay-opacity, 0)\n );\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-elevation/common/animation') {\n transition: elevation-theme.overlay-transition-value();\n }\n }\n\n @include base-mixins.emit-once('mdc-elevation/common/color') {\n $fill-color: custom-properties.create(\n --mdc-elevation-overlay-color,\n elevation-theme.$overlay-color\n );\n @include elevation-theme.overlay-fill-color($fill-color, $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 '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 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/elevation';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n@use '@material/touch-target/touch-target';\n@use '@material/focus-ring/focus-ring';\n@use '@material/typography/typography';\n@use './button-shared-theme';\n\n@mixin static-styles($query: feature-targeting.all()) {\n @include _static-styles-base($query: $query);\n @include _typography-styles($query: $query);\n}\n\n@mixin _static-styles-base($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include touch-target.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n // prettier-ignore\n @include elevation.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // postcss-bem-linter: define button\n .mdc-button {\n @include _root-structure($query);\n // The icon CSS class overrides styles defined in the .material-icons CSS\n // class, which is loaded separately so the order of CSS definitions is not\n // guaranteed. Therefore, increase specifity by nesting this class to ensure\n // overrides apply.\n .mdc-button__icon {\n @include feature-targeting.targets($feat-structure) {\n @include _icon-structure;\n }\n }\n\n .mdc-button__label {\n @include feature-targeting.targets($feat-structure) {\n // Necessary such that label is stacked on top of ripple\n // (since ripple is a positioned element, non-positioned elements\n // appear under it).\n position: relative;\n }\n }\n\n .mdc-button__focus-ring {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n\n @include ripple-theme.focus {\n .mdc-button__focus-ring {\n @include dom.forced-colors-mode($exclude-ie11: true) {\n @include focus-ring.focus-ring($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: block;\n }\n }\n }\n }\n\n .mdc-button__touch {\n @include touch-target.touch-target($query: $query);\n }\n }\n\n .mdc-button__label + .mdc-button__icon {\n @include feature-targeting.targets($feat-structure) {\n @include icon-trailing;\n }\n }\n\n svg.mdc-button__icon {\n @include feature-targeting.targets($feat-structure) {\n @include icon-svg;\n }\n }\n\n .mdc-button--touch {\n // Touch target doesn't change with height. It simply gets removed if\n // density (height) changes. Therefore, it is a static style.\n @include touch-target.margin(\n $component-height: button-shared-theme.$height,\n $query: $query\n );\n }\n // postcss-bem-linter: end\n}\n\n@mixin _typography-styles($query) {\n .mdc-button {\n // Exclude properties declared in theme styles.\n @include typography.typography(\n button,\n $exclude-props: (\n font-size,\n line-height,\n font-weight,\n letter-spacing,\n text-transform\n ),\n $query: $query\n );\n }\n}\n\n/// @deprecated Contains typography declarations now part of theme-styles.\n@mixin deprecated-static-styles-without-ripple(\n $query: feature-targeting.all()\n) {\n @include _deprecated-typography-styles($query: $query);\n @include _static-styles-base($query: $query);\n}\n\n@mixin _deprecated-typography-styles($query) {\n .mdc-button {\n @include typography.typography(button, $query);\n }\n}\n\n@mixin deprecated-base($query) {\n @include base($query);\n}\n\n@mixin base($query) {\n @include typography.typography(button, $query);\n @include _root-structure($query: $query);\n}\n\n@mixin _root-structure($query) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include elevation-theme.overlay-surface-position($query: $query);\n @include elevation-theme.overlay-dimensions(100%, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n // position: relative; already set in mdc-elevation-overlay-surface-position\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 64px;\n border: none;\n outline: none;\n /* @alternate */\n line-height: inherit;\n user-select: none;\n -webkit-appearance: none;\n // Even though `visible` is the default, IE 11 computes the property as\n // `hidden` in some cases, unless it's explicitly defined here.\n overflow: visible;\n vertical-align: middle;\n background: transparent;\n }\n\n &::-moz-focus-inner {\n @include feature-targeting.targets($feat-structure) {\n padding: 0;\n border: 0;\n }\n }\n\n // postcss-bem-linter: ignore\n &:active {\n @include feature-targeting.targets($feat-structure) {\n outline: none;\n }\n }\n\n &:hover {\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n &:disabled {\n @include feature-targeting.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n@mixin icon {\n @include _icon-structure;\n @include _icon-size(18px);\n}\n\n@mixin _icon-structure {\n @include rtl.reflexive-box(margin, right, 8px);\n\n display: inline-block;\n position: relative;\n vertical-align: top;\n}\n\n@mixin _icon-size($size-px) {\n $icon-size: typography.px-to-rem($size-px);\n\n font-size: $icon-size;\n height: $icon-size;\n width: $icon-size;\n}\n\n@mixin icon-trailing {\n @include rtl.reflexive-box(margin, left, 8px);\n}\n\n@mixin icon-svg {\n fill: currentColor;\n}\n\n@mixin icon-contained {\n @include rtl.reflexive-property(margin, -4px, 8px);\n}\n\n@mixin icon-contained-trailing {\n @include rtl.reflexive-property(margin, 8px, -4px);\n}\n\n@mixin raised-transition($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-animation) {\n transition: elevation-theme.transition-value();\n }\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon {\n @include icon;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-trailing {\n @include icon-trailing;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-svg {\n @include icon-svg;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-contained {\n @include icon-contained;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-contained-trailing {\n @include icon-contained-trailing;\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:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n\n$baseline-color: black !default;\n$umbra-opacity: 0.2 !default;\n$penumbra-opacity: 0.14 !default;\n$ambient-opacity: 0.12 !default;\n\n$umbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 2px 1px -1px',\n 2: '0px 3px 1px -2px',\n 3: '0px 3px 3px -2px',\n 4: '0px 2px 4px -1px',\n 5: '0px 3px 5px -1px',\n 6: '0px 3px 5px -1px',\n 7: '0px 4px 5px -2px',\n 8: '0px 5px 5px -3px',\n 9: '0px 5px 6px -3px',\n 10: '0px 6px 6px -3px',\n 11: '0px 6px 7px -4px',\n 12: '0px 7px 8px -4px',\n 13: '0px 7px 8px -4px',\n 14: '0px 7px 9px -4px',\n 15: '0px 8px 9px -5px',\n 16: '0px 8px 10px -5px',\n 17: '0px 8px 11px -5px',\n 18: '0px 9px 11px -5px',\n 19: '0px 9px 12px -6px',\n 20: '0px 10px 13px -6px',\n 21: '0px 10px 13px -6px',\n 22: '0px 10px 14px -6px',\n 23: '0px 11px 14px -7px',\n 24: '0px 11px 15px -7px',\n) !default;\n\n$penumbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 1px 0px',\n 2: '0px 2px 2px 0px',\n 3: '0px 3px 4px 0px',\n 4: '0px 4px 5px 0px',\n 5: '0px 5px 8px 0px',\n 6: '0px 6px 10px 0px',\n 7: '0px 7px 10px 1px',\n 8: '0px 8px 10px 1px',\n 9: '0px 9px 12px 1px',\n 10: '0px 10px 14px 1px',\n 11: '0px 11px 15px 1px',\n 12: '0px 12px 17px 2px',\n 13: '0px 13px 19px 2px',\n 14: '0px 14px 21px 2px',\n 15: '0px 15px 22px 2px',\n 16: '0px 16px 24px 2px',\n 17: '0px 17px 26px 2px',\n 18: '0px 18px 28px 2px',\n 19: '0px 19px 29px 2px',\n 20: '0px 20px 31px 3px',\n 21: '0px 21px 33px 3px',\n 22: '0px 22px 35px 3px',\n 23: '0px 23px 36px 3px',\n 24: '0px 24px 38px 3px',\n) !default;\n\n$ambient-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 3px 0px',\n 2: '0px 1px 5px 0px',\n 3: '0px 1px 8px 0px',\n 4: '0px 1px 10px 0px',\n 5: '0px 1px 14px 0px',\n 6: '0px 1px 18px 0px',\n 7: '0px 2px 16px 1px',\n 8: '0px 3px 14px 2px',\n 9: '0px 3px 16px 2px',\n 10: '0px 4px 18px 3px',\n 11: '0px 4px 20px 3px',\n 12: '0px 5px 22px 4px',\n 13: '0px 5px 24px 4px',\n 14: '0px 5px 26px 4px',\n 15: '0px 6px 28px 5px',\n 16: '0px 6px 30px 5px',\n 17: '0px 6px 32px 5px',\n 18: '0px 7px 34px 6px',\n 19: '0px 7px 36px 6px',\n 20: '0px 8px 38px 7px',\n 21: '0px 8px 40px 7px',\n 22: '0px 8px 42px 7px',\n 23: '0px 9px 44px 8px',\n 24: '0px 9px 46px 8px',\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$property: box-shadow !default;\n\n// The default color for the elevation overlay.\n$overlay-color: #fff;\n\n// The css property used for elevation overlay transitions. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$overlay-property: opacity !default;\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: animation-variables.$standard-curve-timing-function !default;\n\n///\n/// Sets the elevation transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$property} #{$duration} #{$easing};\n}\n\n///\n/// Sets the elevation overlay transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function overlay-transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$overlay-property} #{$duration} #{$easing};\n}\n\n///\n/// Creates a box-shadow from the Material elevation system.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @param {Number} $opacity-boost [0] - optional opacity boost for the shadow.\n/// @return {List} the complete box shadow.\n///\n@function _box-shadow($level, $color, $opacity-boost: 0) {\n $color: theme-color.prop-value($color);\n $umbra-z-value: map.get($umbra-map, $level);\n $penumbra-z-value: map.get($penumbra-map, $level);\n $ambient-z-value: map.get($ambient-map, $level);\n\n $umbra-color: rgba($color, $umbra-opacity + $opacity-boost);\n $penumbra-color: rgba($color, $penumbra-opacity + $opacity-boost);\n $ambient-color: rgba($color, $ambient-opacity + $opacity-boost);\n\n @return (\n #{'#{$umbra-z-value} #{$umbra-color}'},\n #{'#{$penumbra-z-value} #{$penumbra-color}'},\n #{$ambient-z-value} $ambient-color\n );\n}\n\n// Returns the correct box-shadow specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@function elevation-box-shadow(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0\n) {\n @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {\n @error \"$z-value must be a unitless number, but received '#{$z-value}'\";\n }\n\n @if $z-value < 0 or $z-value > 24 {\n @error \"$z-value must be between 0 and 24, but received '#{$z-value}'\";\n }\n\n @return _box-shadow($z-value, $color, $opacity-boost);\n}\n\n///\n/// Returns a shadow or null if params are invalid.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @return {List|null} the complete box shadow or null.\n///\n@function _shadow($level, $color) {\n @if $level == null and $color == null {\n // Do not emit a warning if both are null, which means the user did not\n // provide tokens.\n @return null;\n }\n\n @if $level == null or $color == null {\n // If one of the tokens is null, emit a warning: the user may not realize\n // that both are required.\n @warn \"both $level and $color are required; received $level: '#{$level}', $color: '#{$color}'\";\n @return null;\n }\n\n @if $level < 0 or $level > 24 {\n @warn \"$level must be between 0 and 24; received '#{$level}'\";\n @return null;\n }\n\n @return _box-shadow($level, $color);\n}\n\n@function get-elevation($level) {\n @return (box-shadow: elevation-box-shadow($level));\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin _box-shadow($shadow, $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(box-shadow, $shadow);\n }\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin shadow($box-shadow, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @if custom-properties.is-custom-prop($box-shadow) {\n // TODO(b/185188458): Use theme.property() once resolved.\n $fallback: custom-properties.get-fallback($box-shadow);\n\n // var(--, var(--m-elevation-box-shadow-for-gss))\n $gss-custom-prop: custom-properties.create(\n custom-properties.get-varname($box-shadow),\n custom-properties.create(elevation-box-shadow-for-gss)\n );\n\n $value: custom-properties.create-var($gss-custom-prop);\n @if $value == null {\n // Custom properties are disabled, since $gss-custom-prop\n // does not have a fallback. Avoid emitting two non-custom\n // prop declarations by setting $fallback to null.\n $value: $fallback;\n $fallback: null;\n }\n\n @include custom-properties.declaration(\n custom-properties.create(elevation-box-shadow-for-gss, $fallback)\n );\n @include css.declaration(box-shadow, $value, $fallback-value: $fallback);\n } @else {\n /* @alternate */\n box-shadow: $box-shadow;\n }\n }\n}\n\n///\n/// Sets the elevation overlay surface required positioning.\n///\n@mixin overlay-surface-position($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n /* @alternate */\n position: relative;\n }\n}\n\n///\n/// Sets the dimensions of the elevation overlay, including positioning and sizing.\n///\n/// @param {Number} $width - The width of the elevation overlay\n/// @param {Number} [$height] - The height of the elevation overlay\n/// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing\n///\n@mixin overlay-dimensions(\n $width,\n $height: $width,\n $has-content-sizing: true,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(width, $width);\n @include theme.property(height, $height);\n\n @if $has-content-sizing {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n } @else {\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n }\n}\n\n///\n/// Sets the elevation overlay fill color.\n/// Expected to be called directly on the elevation overlay element.\n///\n/// @param {Color} $color - The color of the elevation overlay.\n///\n@mixin overlay-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///\n/// Applies the given color to the container of the overlay.\n/// @param {color} $color - the color of the overlay container\n///\n@mixin overlay-container-color($color, $query: feature-targeting.all()) {\n .mdc-elevation-overlay {\n @include overlay-fill-color($color, $query: $query);\n }\n}\n\n///\n/// Sets the elevation overlay opacity.\n/// Expected to be called from a parent element.\n///\n/// @param {Number} $opacity - The opacity of the elevation overlay.\n///\n@mixin overlay-opacity($opacity, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@mixin elevation(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0,\n $query: feature-targeting.all()\n) {\n $box-shadow: elevation-box-shadow(\n $z-value,\n $color: $color,\n $opacity-boost: $opacity-boost\n );\n\n @include shadow($box-shadow, $query: $query);\n}\n\n///\n/// Represents the configurable values of the elevation theme.\n///\n$_theme-values: (\n shadow: null,\n overlay-opacity: null,\n overlay-color: null,\n);\n\n///\n/// Applies the shadow theme with the given $resolver function.\n/// @param {Function} $resolver - a function that returns a valid theme config.\n/// @see resolver for an example and expected arguments and return value.\n/// Accepts the following optional keyword args:\n/// @param {Number} $elevation - the level in the elevation system.\n/// @param {String} $shadow-color - the color used for the shadow.\n///\n@mixin with-resolver($resolver, $query: feature-targeting.all(), $args...) {\n @if $resolver {\n @include _theme(meta.call($resolver, $args...), $query: $query);\n }\n}\n\n///\n/// Applies the given theme with validation.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin theme($theme: (), $query: feature-targeting.all()) {\n @include theme.validate-theme($_theme-values, $theme);\n @include _theme($theme, $query: $query);\n}\n\n///\n/// Applies the given theme.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin _theme($theme: (), $query: feature-targeting.all()) {\n @include shadow(map.get($theme, shadow), $query: $query);\n @include overlay-opacity(map.get($theme, overlay-opacity), $query: $query);\n @include overlay-container-color(\n map.get($theme, overlay-color),\n $query: $query\n );\n}\n\n///\n/// Transforms the following optional parameters into a theme config.\n/// @param {Number} $elevation - the level of the elevation system in Material.\n/// @param {String} $shadow-color - the color to be used by the shadow.\n/// @return {Map} @see $_theme-values for accepted theme properties.\n///\n@function resolver($args...) {\n $opts: meta.keywords($args);\n $elevation: map.get($opts, elevation);\n $shadow-color: map.get($opts, shadow-color);\n @if custom-properties.is-custom-prop($elevation) {\n @return _resolve-custom-props($elevation, $shadow-color);\n }\n\n @return (shadow: _shadow($elevation, $shadow-color));\n}\n\n@function _resolve-custom-props($elevation, $shadow-color) {\n $fallback-dp: custom-properties.get-fallback($elevation);\n $fallback-shadow-color: custom-properties.get-fallback($shadow-color);\n $shadow: custom-properties.set-fallback(\n $elevation,\n _shadow($fallback-dp, $fallback-shadow-color)\n );\n @return (shadow: $shadow);\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/// \n/// \x3c!-- ... --\x3e\n///
\n///
Styled incorrectly as RTL!
\n///
\n/// \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 -left to and\n// -right to 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","// 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","//\n// Copyright 2021 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/dom/dom';\n\n$ring-radius-default: 8px !default;\n$inner-ring-width-default: 2px !default;\n$inner-ring-color-default: transparent !default;\n$outer-ring-width-default: 2px !default;\n$outer-ring-color-default: transparent !default;\n$container-outer-padding-default: 2px !default;\n\n/// Styles applied to the component's inner focus ring element.\n///\n/// @param $ring-radius [$ring-radius-default] - Focus ring radius.\n/// @param $inner-ring-width [$inner-ring-width-default] - Inner focus ring width.\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.\n/// @param $container-outer-padding [$container-outer-padding-default] - The\n/// distance between the focus ring and the container.\n@mixin focus-ring(\n $query: feature-targeting.all(),\n $ring-radius: $ring-radius-default,\n $inner-ring-width: $inner-ring-width-default,\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-width: $outer-ring-width-default,\n $outer-ring-color: $outer-ring-color-default,\n $container-outer-padding-vertical: $container-outer-padding-default,\n $container-outer-padding-horizontal: $container-outer-padding-default\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $container-size-vertical: 100%;\n @if $container-outer-padding-vertical != 0 {\n $container-size-vertical: calc(\n 100% + #{$container-outer-padding-vertical * 2}\n );\n }\n $container-size-horizontal: 100%;\n @if $container-outer-padding-horizontal != 0 {\n $container-size-horizontal: calc(\n 100% + #{$container-outer-padding-horizontal * 2}\n );\n }\n $outer-ring-size: 100%;\n @if $outer-ring-width > 0 {\n $outer-ring-size: calc(100% + #{$outer-ring-width * 2});\n }\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n border: $inner-ring-width solid $inner-ring-color;\n border-radius: $ring-radius - $outer-ring-width;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $container-size-vertical;\n width: $container-size-horizontal;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n\n &::after {\n content: '';\n border: $outer-ring-width solid $outer-ring-color;\n border-radius: $ring-radius;\n display: block;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $outer-ring-size;\n width: $outer-ring-size;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n }\n }\n}\n/// Customizes the color of the button focus ring.\n///\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n@mixin focus-ring-color(\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-color: $outer-ring-color-default\n) {\n border-color: $inner-ring-color;\n\n &::after {\n border-color: $outer-ring-color;\n }\n}\n\n/// Customizes the border radius of the button focus ring.\n///\n/// @param {Number} $ring-radius - The border radius of the focus ring.\n/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer\n/// ring, required to compute the radius for the inner ring.\n@mixin focus-ring-radius(\n $ring-radius,\n $outer-ring-width: $outer-ring-width-default,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n border-radius: $ring-radius - $outer-ring-width;\n\n &::after {\n border-radius: $ring-radius;\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// 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-