@material/button
Version:
The Material Components for the web button component
1 lines • 187 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-button/mdc-button.scss","webpack:///mdc-button.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/mdc-button/_button-base.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/mdc-button/_button-text.scss","webpack:///./packages/mdc-button/_button-shared-theme.scss","webpack:///./packages/mdc-button/_button-filled.scss","webpack:///./packages/mdc-button/_button-protected.scss","webpack:///./packages/mdc-button/_button-outlined.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/mdc-button/_button-ripple.scss","webpack:///./packages/mdc-button/_button.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/mdc-button/_button-outlined-theme.scss"],"names":[],"mappings":";;;;;;;AAqCE;EAOM;AC1CR;;AC0DE;EAGM;EACA;EACA;ECCF;ECZF;EDwBA;EDFI;ECVF;ECZF;EDwBA;AF/DJ;;AIkCE;ECmQE;EACA;EDlJA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA;EAGA;EACA;EACA;AJjJJ;AKsSE;EH1PE;EAAA;EGgQI;EFnRJ;EAAc;EEqRV;ALtSR;AI4IE;EAEI;EACA;AJ3IN;AIgJE;EAEI;AJ/IN;AImJE;EAEI;AJlJN;AIsJE;EAEI;EACA;AJrJN;AIDI;EDIA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EE4IF;EACA;EACA;AJzJF;AMaM;EACE;EHtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EIKI;ANNR;;AIhBI;EAKI;AJeR;AIXI;EAEI;AJYR;AOUI;EHjBE;IIPF;IACA;IACA;IACA;IACA;IACA;ILhBA;IAAc;IKkBd;ILlBA;IAAc;IKoBd;YAAA;IACA;;KAzB0B;IA0B1B;;KApB4B;IJqBpB;EJwBV;AACF;AObI;EHjBE;IIOA;ER2BJ;AACF;AOlBI;ECPA;IACE;IACA;IACA,kBAhEgB;IAiEhB;IACA;IACA;ILlCF;IAAc;IKoCZ;ILpCF;IAAc;IKsCZ;YAAA;IACA,wBA/BgB;IAgChB,uBAhCgB;ER8DpB;AACF;AOpCI;ECPA;IAeI;ERgCN;AACF;AI/CI;ELtBA;EACA;EACA,YAtCK;EAkDH;EACA;EACA;UAAA;AC6DN;;AIlDE;EDlCE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AF0EJ;AMxEM;EACE;EHtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EIKI;AN+ER;;AI/DE;EAyIA;AJtEF;;AI7DE;ELJE,eAHsB;EAItB,kBAJsB;ACyE1B;;AItDE;EKmNE;EACA;EPvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;AFwGJ;;AUrIE;ECmdE;AX1UJ;;AYpIE;ERqME;EOyQA;AXrUJ;AWyUI;EAII;AX1UR;AW8UI;EAII;AX/UR;;Aa/IE;ETqME;EOyQA;AX1TJ;AW8TI;EAII;AX/TR;AWmUI;EAII;AXpUR;;Ac7JE;EAUE;EAMA;AdkJJ;Ac/IE;EAEI;EACA;AdgJN;;AeuFE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EfxFJ;Ee2FE;IACE;YAAA;EfzFJ;AACF;;Ae6EE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EfxFJ;Ee2FE;IACE;YAAA;EfzFJ;AACF;Ae6FE;EACE;IACE;YAAA;IACA;Ef3FJ;Ee8FE;IACE;Ef5FJ;AACF;AeoFE;EACE;IACE;YAAA;IACA;Ef3FJ;Ee8FE;IACE;Ef5FJ;AACF;Ae+FE;EACE;IACE;YAAA;IACA;Ef7FJ;EegGE;IACE;Ef9FJ;AACF;AesFE;EACE;IACE;YAAA;IACA;Ef7FJ;EegGE;IACE;Ef9FJ;AACF;AiBlNE;EF+EE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;AfmIN;Ae/HE;;EAGI;EACA;EACA;EACA;EACA;AfgIN;Ae5HE;EAGI;Eb5EA;ECZF;EDwBA;AF+LJ;AelHE;EbzFI;ECZF;EDwBA;AFoMJ;Ae3GI;EAEI;UAAA;Af4GR;AexGI;EAEI;EZpHJ;EAAc;EYsHV;EACA;UAAA;EACA;UAAA;Af0GR;AepGI;EAEI;EZhIJ;EAAc;EYkIV;AfsGR;AehGI;EAEI;UAAA;AfiGR;AezFI;EAEI;UAAA;EAKA;UAAA;AfsFR;AexEE;;EAGI;EZ1KF;EAAc;EY4KZ;EACA;EACA;Af0EN;AerEI;EAEI;EACA;AfsER;;AiB5QE;EAEI;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;AjB4QN;;AkB/QE;EhBeI;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AF4QJ;AWmBE;ET3SI;ECZF;EDwBA;AFiRJ;AWiCE;ET9TI;ECZF;EDwBA;AFsRJ;AW+PI;ETjiBE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFiSJ;AmBrNI;;EjBxFE;ECZF;EDwBA;AFuSJ;AmB8KE;EjBjeI;ECZF;EDwBA;AF4SJ;AmByKE;EA9QI;EjBnNA;ECZF;EDwBA;AFkTJ;AmBjFM;EAEI;AnBkFV;AmB7EQ;EAEI,yBAhRO;EjB0Bb;ECZF;EDwBA;AF2TJ;AmBtEI;EjBrPA;AF8TJ;AW8FE;ETxaI;ECZF;EDwBA;AFmUJ;;AkBxVE;EhBSI;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AF2VJ;AWjLE;ETtLI;ECZF;EDwBA;AFgWJ;AW1JE;ETlNI;ECZF;EDwBA;AFqWJ;AWtEE;ET3SI;ECZF;EDwBA;AF0WJ;AWxDE;ET9TI;ECZF;EDwBA;AF+WJ;AWsKI;ETjiBE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AF0XJ;AmB9SI;;EjBxFE;ECZF;EDwBA;AFgYJ;AmBqFE;EjBjeI;ECZF;EDwBA;AFqYJ;AmBgFE;EA9QI;EjBnNA;ECZF;EDwBA;AF2YJ;AmB1KM;EAEI;AnB2KV;AmBtKQ;EAEI,yBAhRO;EjB0Bb;ECZF;EDwBA;AFoZJ;AmB/JI;EjBrPA;AFuZJ;AWKE;ETxaI;ECZF;EDwBA;AF4ZJ;;AkB3aE;EhBGI;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAAA;EAZE;ECZF;EDwBA;AFwbJ;AW9QE;ETtLI;ECZF;EDwBA;AF6bJ;AWvPE;ETlNI;ECZF;EDwBA;AFkcJ;AWnKE;ET3SI;ECZF;EDwBA;AFucJ;AWrJE;ET9TI;ECZF;EDwBA;AF4cJ;AWyEI;ETjiBE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFudJ;AmB3YI;;EjBxFE;ECZF;EDwBA;AF6dJ;AmBRE;EjBjeI;ECZF;EDwBA;AFkeJ;AmBbE;EA9QI;EjBnNA;ECZF;EDwBA;AFweJ;AmBvQM;EAEI;AnBwQV;AmBnQQ;EAEI,yBAhRO;EjB0Bb;ECZF;EDwBA;AFifJ;AmB5PI;EjBrPA;AFofJ;AWxFE;ETxaI;ECZF;EDwBA;AFyfJ;AmBlGE;EjBvZE;EAZE;ECZF;EDwBA;AF+fJ;AWwHM;ETvnBF;EAZE;ECZF;EDwBA;AFqgBJ;AmBvGE;EjB9ZE;EAZE;ECZF;EDwBA;AF2gBJ;AWoIM;ET/oBF;EAZE;ECZF;EDwBA;AFihBJ;AkB1hBE;EhBHI;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;ESsbA;ETlcE;ECZF;EDwBA;AF4iBJ;AW7QE;ET3SI;ECZF;EDwBA;AFijBJ;AW/PE;ET9TI;ECZF;EDwBA;AFsjBJ;AWjCI;ETjiBE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFikBJ;AmBrfI;;EjBxFE;ECZF;EDwBA;AFukBJ;AmBlHE;EjBjeI;ECZF;EDwBA;AF4kBJ;AmBvHE;EA9QI;EjBnNA;ECZF;EDwBA;AFklBJ;AmBjXM;EAEI;AnBkXV;AmB7WQ;EAEI,yBAhRO;EjB0Bb;ECZF;EDwBA;AF2lBJ;AmBtWI;EjBrPA;AF8lBJ;AWlME;ETxaI;ECZF;EDwBA;AFmmBJ;AoBjiBE;ElB9EI;ECZF;EDwBA;AFwmBJ;AoBxgBE;ElB5GI;ECZF;EDwBA;AF6mBJ;AWnLI;EAII;AXkLR;AW9KI;EAII;AX6KR;AoB9dI;ElBrJA;EAAA;EAAA;EAAA;EAZE;ECZF;EDwBA;AF4nBJ;AoB9dI;ElB1KE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFooBJ;;AkB1lBI;;;Ef7DA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AF+oBJ;AM7oBM;EACE;EHtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EIKI;ANopBR;;AkBxmBI;;;EfpEA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AFoqBJ;AMlqBM;EACE;EHtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EIKI;ANyqBR,C","file":"mdc.button.css","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",".mdc-touch-target-wrapper {\n display: inline;\n}\n\n.mdc-elevation-overlay {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n opacity: 0;\n /* @alternate */\n opacity: var(--mdc-elevation-overlay-opacity, 0);\n transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-elevation-overlay-color, #fff);\n}\n\n.mdc-button {\n /* @alternate */\n position: relative;\n display: inline-flex;\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 overflow: visible;\n vertical-align: middle;\n background: transparent;\n}\n.mdc-button .mdc-elevation-overlay {\n width: 100%;\n height: 100%;\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n}\n.mdc-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n.mdc-button:active {\n outline: none;\n}\n.mdc-button:hover {\n cursor: pointer;\n}\n.mdc-button:disabled {\n cursor: default;\n pointer-events: none;\n}\n.mdc-button .mdc-button__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 8px;\n display: inline-block;\n position: relative;\n vertical-align: top;\n}\n[dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-button .mdc-button__label {\n position: relative;\n}\n.mdc-button .mdc-button__focus-ring {\n display: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {\n pointer-events: none;\n border: 2px solid transparent;\n border-radius: 6px;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(\n 100% + 4px\n );\n width: calc(\n 100% + 4px\n );\n display: block;\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {\n border-color: CanvasText;\n }\n}\n@media screen and (forced-colors: active) {\n .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after {\n content: \"\";\n border: 2px solid transparent;\n border-radius: 8px;\n display: block;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after {\n border-color: CanvasText;\n }\n}\n.mdc-button .mdc-button__touch {\n position: absolute;\n top: 50%;\n height: 48px;\n left: 0;\n right: 0;\n transform: translateY(-50%);\n}\n\n.mdc-button__label + .mdc-button__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n}\n[dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 8px;\n /*rtl:end:ignore*/\n}\n\nsvg.mdc-button__icon {\n fill: currentColor;\n}\n\n.mdc-button--touch {\n margin-top: 6px;\n margin-bottom: 6px;\n}\n\n.mdc-button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n text-decoration: none;\n /* @alternate */\n text-decoration: var(--mdc-typography-button-text-decoration, none);\n}\n\n.mdc-button {\n padding: 0 8px 0 8px;\n}\n\n.mdc-button--unelevated {\n transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0 16px 0 16px;\n}\n.mdc-button--unelevated.mdc-button--icon-trailing {\n padding: 0 12px 0 16px;\n}\n.mdc-button--unelevated.mdc-button--icon-leading {\n padding: 0 16px 0 12px;\n}\n\n.mdc-button--raised {\n transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0 16px 0 16px;\n}\n.mdc-button--raised.mdc-button--icon-trailing {\n padding: 0 12px 0 16px;\n}\n.mdc-button--raised.mdc-button--icon-leading {\n padding: 0 16px 0 12px;\n}\n\n.mdc-button--outlined {\n border-style: solid;\n transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mdc-button--outlined .mdc-button__ripple {\n border-style: solid;\n border-color: transparent;\n}\n\n@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-button {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n.mdc-button .mdc-button__ripple::before,\n.mdc-button .mdc-button__ripple::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-button .mdc-button__ripple::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-button .mdc-button__ripple::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-button .mdc-button__ripple::before,\n.mdc-button .mdc-button__ripple::after {\n top: calc(50% - 100%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 100%);\n width: 200%;\n height: 200%;\n}\n.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n\n.mdc-button__ripple {\n position: absolute;\n box-sizing: content-box;\n overflow: hidden;\n z-index: 0;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n\n.mdc-button {\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));\n letter-spacing: 0.0892857143em;\n /* @alternate */\n letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));\n text-transform: uppercase;\n /* @alternate */\n text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));\n height: 36px;\n /* @alternate */\n height: var(--mdc-text-button-container-height, 36px);\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));\n}\n.mdc-button:not(:disabled) {\n color: #6200ee;\n /* @alternate */\n color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button:disabled {\n color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));\n}\n.mdc-button .mdc-button__icon {\n font-size: 1.125rem;\n /* @alternate */\n font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem);\n width: 1.125rem;\n /* @alternate */\n width: var(--mdc-text-button-with-icon-icon-size, 1.125rem);\n height: 1.125rem;\n /* @alternate */\n height: var(--mdc-text-button-with-icon-icon-size, 1.125rem);\n}\n.mdc-button .mdc-button__ripple::before,\n.mdc-button .mdc-button__ripple::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button:hover .mdc-button__ripple::before, .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04);\n}\n.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12);\n}\n.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);\n}\n.mdc-button.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);\n}\n.mdc-button .mdc-button__ripple {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));\n}\n\n.mdc-button--unelevated {\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));\n letter-spacing: 0.0892857143em;\n /* @alternate */\n letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));\n text-transform: uppercase;\n /* @alternate */\n text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));\n height: 36px;\n /* @alternate */\n height: var(--mdc-filled-button-container-height, 36px);\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));\n}\n.mdc-button--unelevated:not(:disabled) {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button--unelevated:disabled {\n background-color: rgba(0, 0, 0, 0.12);\n /* @alternate */\n background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12));\n}\n.mdc-button--unelevated:not(:disabled) {\n color: #fff;\n /* @alternate */\n color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-button--unelevated:disabled {\n color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));\n}\n.mdc-button--unelevated .mdc-button__icon {\n font-size: 1.125rem;\n /* @alternate */\n font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);\n width: 1.125rem;\n /* @alternate */\n width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);\n height: 1.125rem;\n /* @alternate */\n height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);\n}\n.mdc-button--unelevated .mdc-button__ripple::before,\n.mdc-button--unelevated .mdc-button__ripple::after {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-filled-button-hover-state-layer-opacity, 0.08);\n}\n.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-filled-button-focus-state-layer-opacity, 0.24);\n}\n.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);\n}\n.mdc-button--unelevated.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);\n}\n.mdc-button--unelevated .mdc-button__ripple {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));\n}\n\n.mdc-button--raised {\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));\n letter-spacing: 0.0892857143em;\n /* @alternate */\n letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));\n text-transform: uppercase;\n /* @alternate */\n text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));\n height: 36px;\n /* @alternate */\n height: var(--mdc-protected-button-container-height, 36px);\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));\n --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);\n 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);\n /* @alternate */\n box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-button--raised:not(:disabled) {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button--raised:disabled {\n background-color: rgba(0, 0, 0, 0.12);\n /* @alternate */\n background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12));\n}\n.mdc-button--raised:not(:disabled) {\n color: #fff;\n /* @alternate */\n color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-button--raised:disabled {\n color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));\n}\n.mdc-button--raised .mdc-button__icon {\n font-size: 1.125rem;\n /* @alternate */\n font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);\n width: 1.125rem;\n /* @alternate */\n width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);\n height: 1.125rem;\n /* @alternate */\n height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);\n}\n.mdc-button--raised .mdc-button__ripple::before,\n.mdc-button--raised .mdc-button__ripple::after {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-protected-button-hover-state-layer-opacity, 0.08);\n}\n.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-protected-button-focus-state-layer-opacity, 0.24);\n}\n.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);\n}\n.mdc-button--raised.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);\n}\n.mdc-button--raised .mdc-button__ripple {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));\n}\n.mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus {\n --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);\n 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);\n /* @alternate */\n box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-button--raised:hover {\n --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);\n 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);\n /* @alternate */\n box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-button--raised:not(:disabled):active {\n --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);\n 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);\n /* @alternate */\n box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-button--raised:disabled {\n --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);\n 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);\n /* @alternate */\n box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-button--outlined {\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));\n letter-spacing: 0.0892857143em;\n /* @alternate */\n letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));\n text-transform: uppercase;\n /* @alternate */\n text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));\n height: 36px;\n /* @alternate */\n height: var(--mdc-outlined-button-container-height, 36px);\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));\n padding: 0 15px 0 15px;\n border-width: 1px;\n /* @alternate */\n border-width: var(--mdc-outlined-button-outline-width, 1px);\n}\n.mdc-button--outlined:not(:disabled) {\n color: #6200ee;\n /* @alternate */\n color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button--outlined:disabled {\n color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));\n}\n.mdc-button--outlined .mdc-button__icon {\n font-size: 1.125rem;\n /* @alternate */\n font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);\n width: 1.125rem;\n /* @alternate */\n width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);\n height: 1.125rem;\n /* @alternate */\n height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);\n}\n.mdc-button--outlined .mdc-button__ripple::before,\n.mdc-button--outlined .mdc-button__ripple::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-outlined-button-hover-state-layer-opacity, 0.04);\n}\n.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-outlined-button-focus-state-layer-opacity, 0.12);\n}\n.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);\n}\n.mdc-button--outlined.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);\n}\n.mdc-button--outlined .mdc-button__ripple {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));\n}\n.mdc-button--outlined:not(:disabled) {\n border-color: rgba(0, 0, 0, 0.12);\n /* @alternate */\n border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12));\n}\n.mdc-button--outlined:disabled {\n border-color: rgba(0, 0, 0, 0.12);\n /* @alternate */\n border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12));\n}\n.mdc-button--outlined.mdc-button--icon-trailing {\n padding: 0 11px 0 15px;\n}\n.mdc-button--outlined.mdc-button--icon-leading {\n padding: 0 15px 0 11px;\n}\n.mdc-button--outlined .mdc-button__ripple {\n top: -1px;\n left: -1px;\n bottom: -1px;\n right: -1px;\n border-width: 1px;\n /* @alternate */\n border-width: var(--mdc-outlined-button-outline-width, 1px);\n}\n.mdc-button--outlined .mdc-button__touch {\n left: calc(-1 * 1px);\n /* @alternate */\n left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));\n width: calc(100% + 2 * 1px);\n /* @alternate */\n width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px));\n}\n\n.mdc-button--raised .mdc-button__icon,\n.mdc-button--unelevated .mdc-button__icon,\n.mdc-button--outlined .mdc-button__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: -4px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 8px;\n}\n[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] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: -4px;\n /*rtl:end:ignore*/\n}\n\n.mdc-button--raised .mdc-button__label + .mdc-button__icon,\n.mdc-button--unelevated .mdc-button__label + .mdc-button__icon,\n.mdc-button--outlined .mdc-button__label + .mdc-button__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: -4px;\n}\n[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] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: -4px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 8px;\n /*rtl:end:ignore*/\n}","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// 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@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n/// @include annotate((noflip: true));\n/// left: 0;\n///\n/// @example - scss\n/// @include annotate($noflip: true);\n/// left: 0;\n///\n/// @example - css\n/// /* @noflip */ /*rtl:ignore*/\n/// left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n/// for an annotation to be added.\n@mixin annotate($annotations...) {\n $keywords: meta.keywords($annotations);\n @if list.length($annotations) > 0 {\n $annotations: list.nth($annotations, 1);\n } @else {\n $annotations: $keywords;\n }\n\n @if (map.get($annotations, alternate) == true) {\n /* @alternate */\n }\n\n // noflip must be the last tag right before the property\n @if (map.get($annotations, noflip) == true) {\n /* @noflip */ /*rtl:ignore*/\n }\n}\n","//\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