{"version":3,"sources":["webpack:///./packages/mdc-button/mdc-button.scss","webpack:///./packages/mdc-button/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/shape/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/mdc-button/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/touch-target/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_keyframes.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_variables.scss"],"names":[],"mappings":";;;;;;;AA+BE;EAOM;CApCP;;ACwDC;ECCM,gCATQ;EASR,mCATQ;EASR,oCATQ;EASR,oBATQ;EASR,qBATQ;EASR,iBATQ;EASR,+BATQ;EASR,sBATQ;EASR,0BATQ;EDmQZ;EAoCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA;EAGA;EACA;EElUA;CHRH;AC6UC;EAEI;EACA;CD5UL;ACiVC;EAEI;CDhVL;ACoVC;EAEI;CDnVL;ACuVC;EG3SI,8BH6S0C;EAE1C,2BIxV0B;EJ4V1B;EACA;CD1VL;AC6PC;EErQE;CHWH;ACqJC;EGlHI,8BHvBuC;CDT5C;ACeG;EKqNA;EAGF;EAHE;EAGF;ELqHA;EACA;EACA;EACA;EACA;CDrVD;AMiBK;EAwMF;EAGF;EAHE;EAGF;CNtND;ACIG;EDxBA;EACA;EACA;EACA;EACA,aO/BsB;EPgCtB;UAAA;CAuBH;ACuJC;EG/GI,eA1BM;EA6CJ;EACA;CJvDP;;ACFC;EKwME;EAGF;EAHE;EAGF;CNlMD;AMTK;EAwMF;EAGF;EAHE;EAGF;CN5LD;;ACRC;EAqUA;CDzTD;;ACHG;;;EKwLA;EAGF;EAHE;EAGF;CN/KD;AM5BK;;;;;EAwMF;EAGF;EAHE;EAGF;CNrKD;ACfG;;;EKiLA;EAGF;EAHE;EAGF;CN7JD;AM9CK;;;;;EAwMF;EAGF;EAHE;EAGF;CNnJD;;AC1BC;;EAuME;CDxKH;AC+SC;;EAEI;EACA,2BIpZ0B;CLuG/B;ACoDC;;EGjFI,0BA1BM;CJ2DX;AIzBS;EAEE;;IACE;IACA;GJ2BX;CACF;ACuEC;;EG/GI,YA1BM;EA6CJ;EACA;CJ0BP;;AC9CC;EO3CE,0HACE;EP6YF;CDhTH;ACkSC;EOhYE,2HACE;CRgGL;ACoSC;EOrYE,4HACE;CRmGL;ACqSC;EOzYE,yHACE;CRsGL;;ACxDC;EAmTE;EAvHA;EAgBA,kBI7R+B;CL+IlC;ACwPC;EAEI,kCItY0B;CL+I/B;AC8IC;EAEI;EACA;EACA;CD7IL;ACiBC;EG3FI,sBA1BM;EA6CJ;EACA;CJ2DP;;ACrEC;ED9DE,gBAHsB;EAItB,mBAJsB;CA2IzB;;AS7KC;EACE;IACE,gECPyC;YDOzC,wDCPyC;IDYzC;YAAA;GT4KH;ESzKC;IACE;YAAA;GT2KH;CACF;;ASvLC;EACE;IACE,gECPyC;YDOzC,wDCPyC;IDYzC;YAAA;GT4KH;ESzKC;IACE;YAAA;GT2KH;CACF;ASxKC;EACE;IACE;YAAA;IACA;GT0KH;ESvKC;IACE;GTyKH;CACF;ASjLC;EACE;IACE;YAAA;IACA;GT0KH;ESvKC;IACE;GTyKH;CACF;AStKC;EACE;IACE;YAAA;IACA;GTwKH;ESrKC;IACE;GTuKH;CACF;AS/KC;EACE;IACE;YAAA;IACA;GTwKH;ESrKC;IACE;GTuKH;CACF;AW9IK;EACE;EAEA;CX+IP;AW7IO;EACE;CX+IT;;AC/FC;EUpCE;EACA;EACA;EACA;EACA;EACA;EAEA;CXsIH;AWlIC;;EAGI;EACA;EACA;EACA;EACA;CXmIL;AW/HC;EAGI,8DACE;EAKF;CX0HL;AWnHG;EAEI;UAAA;CXoHP;AWhHG;EAEI;EACA;EACA;EACA;UAAA;EACA;UAAA;CXiHP;AW3GG;EAEI;EACA;EACA;CX4GP;AWtGG;EAEI,kGACE;UADF,0FACE;CXsGT;AW/FG;EAEI;UAAA;EAKA;UAAA;CX4FP;AW8HC;;EAGI;EACA;EACA;EACA;EACA;CX7HL;AWkIG;EAEI;EACA;CXjIP;AW9FC;EPjFI,0BA1BM;CJ4MX;AI1KS;EAEE;IACE;IACA;GJ2KX;CACF;AW/DG;EAGI,cA0OM;CX3Kb;AW7BK;EAeF;EAIA,cAyLU;CX3Kb;AWFG;EAEI;CXGP;AWEK;EAEI,0BCrSoB;ED0SpB,cAqKI;CX1Kb;AWWC;EAEI;CXVL;AC1KG;EAEI;EAGA;EACA;EACA;EACA;CDyKP;ACnKG;EAEI;EACA;CDoKP;;AWnIC;;;EPjFI,uBA1BM;CJoPX;AIlNS;EAEE;;;IACE;IACA;GJqNX;CACF;AWzGG;;EAGI,cA0OM;CXhIb;AWxEK;;;EAeF;EAIA,cAyLU;CX9Hb;AW/CG;;EAEI;CXiDP;AW5CK;;EAEI,0BCrSoB;ED0SpB,cAqKI;CX3Hb;AWpCC;;EAEI;CXsCL;;AClUC;EA6OE,aAtCO","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@import \"@material/base/mixins\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin mdc-touch-target-wrapper($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-touch-target-wrapper {\n    @include mdc-feature-targets($feat-structure) {\n      // Ensure that styles are only emitted once across all components that\n      // have increased touch targets.\n      @include mdc-base-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@mixin mdc-touch-target($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: $mdc-touch-target-height;\n    transform: translateY(-50%);\n  }\n}\n\n/// Styles applied to the component with the increased touch target.\n@mixin mdc-touch-target-component($component-height, $component-width: null, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  $vertical-margin-value: ($mdc-touch-target-height - $component-height) / 2;\n\n  @include mdc-feature-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: ($mdc-touch-target-width - $component-width) / 2;\n\n    @include mdc-feature-targets($feat-structure) {\n      margin-right: $horizontal-margin-value;\n      margin-left: $horizontal-margin-value;\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@import \"@material/elevation/mixins\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/rtl/mixins\";\n@import \"@material/theme/functions\";\n@import \"@material/theme/mixins\";\n@import \"@material/touch-target/mixins\";\n@import \"@material/typography/mixins\";\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n@import \"@material/density/functions\";\n@import \"./variables\";\n\n$mdc-button-ripple-target: \".mdc-button__ripple\";\n\n@mixin mdc-button-core-styles($query: mdc-feature-all()) {\n  @include mdc-button-without-ripple($query);\n  @include mdc-button-ripple($query);\n}\n\n@mixin mdc-button-theme-baseline($query: mdc-feature-all()) {\n  .mdc-button {\n    @include mdc-button-density($mdc-button-density-scale, $query: $query);\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// button styles. It is recommended that most users use `mdc-button-core-styles` instead.\n@mixin mdc-button-without-ripple($query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-touch-target-wrapper($query);\n\n  // postcss-bem-linter: define button\n  .mdc-button {\n    @include mdc-button-base_($query);\n    @include mdc-button-shape-radius(small, $query: $query);\n    @include mdc-button-container-fill-color(transparent, $query);\n\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 mdc-feature-targets($feat-structure) {\n        @include mdc-button__icon_;\n      }\n    }\n\n    .mdc-button__touch {\n      @include mdc-touch-target($query);\n    }\n\n    @include mdc-button-ink-color(primary, $query);\n  }\n\n  .mdc-button__label + .mdc-button__icon {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-button__icon-trailing_;\n    }\n  }\n\n  // stylelint-disable-next-line selector-no-qualifying-type\n  svg.mdc-button__icon {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-button__icon-svg_;\n    }\n  }\n\n  .mdc-button--raised,\n  .mdc-button--unelevated,\n  .mdc-button--outlined {\n    .mdc-button__icon {\n      @include mdc-feature-targets($feat-structure) {\n        // Icons inside contained buttons have different styles due to increased button padding\n        @include mdc-button__icon-contained_;\n      }\n    }\n\n    .mdc-button__label + .mdc-button__icon {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-button__icon-contained-trailing_;\n      }\n    }\n  }\n\n  .mdc-button--raised,\n  .mdc-button--unelevated {\n    @include mdc-button--filled_($query);\n    @include mdc-button-container-fill-color(primary, $query);\n    @include mdc-button-ink-color(on-primary, $query);\n  }\n\n  .mdc-button--raised {\n    @include mdc-button--raised_($query);\n  }\n\n  .mdc-button--outlined {\n    @include mdc-button--outlined_($query);\n    @include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);\n    @include mdc-button-outline-color(primary, $query);\n  }\n\n  .mdc-button--touch {\n    @include mdc-touch-target-component(\n      $component-height: $mdc-button-height, $query: $query);\n  }\n  // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// button styles. It is recommended that most users use `mdc-button-core-styles` instead.\n@mixin mdc-button-ripple($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-ripple-common($query);\n\n  .mdc-button {\n    @include mdc-ripple-surface($query: $query, $ripple-target: $mdc-button-ripple-target);\n    @include mdc-ripple-radius-bounded(\n      $query: $query, $ripple-target: $mdc-button-ripple-target);\n    @include mdc-states(\n      $color: primary, $query: $query, $ripple-target: $mdc-button-ripple-target);\n\n    #{$mdc-button-ripple-target} {\n      @include mdc-feature-targets($feat-structure) {\n        position: absolute;\n        // Ripple needs content-box as the box sizing and box-sizing: border-box\n        // is often set as a default, so we override that here.\n        box-sizing: content-box;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n    }\n\n    // Ripple targets inside outlined buttons set their own `top`/`left`,\n    // depending on the border width.\n    &:not(.mdc-button--outlined) #{$mdc-button-ripple-target} {\n      @include mdc-feature-targets($feat-structure) {\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  .mdc-button--raised,\n  .mdc-button--unelevated {\n    @include mdc-states(\n      $color: on-primary, $query: $query, $ripple-target: $mdc-button-ripple-target);\n  }\n}\n\n@mixin mdc-button-filled-accessible($container-fill-color, $query: mdc-feature-all()) {\n  $fill-tone: mdc-theme-tone($container-fill-color);\n\n  @include mdc-button-container-fill-color($container-fill-color, $query);\n\n  @if ($fill-tone == \"dark\") {\n    @include mdc-button-ink-color(text-primary-on-dark, $query);\n    @include mdc-states(\n      $color: text-primary-on-dark, $query: $query, $ripple-target: $mdc-button-ripple-target);\n  } @else {\n    @include mdc-button-ink-color(text-primary-on-light, $query);\n    @include mdc-states(\n      $color: text-primary-on-light, $query: $query, $ripple-target: $mdc-button-ripple-target);\n  }\n}\n\n@mixin mdc-button-container-fill-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // :not(:disabled) is used to support link styled as button\n  // as link does not support :enabled style\n  &:not(:disabled) {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\n    }\n  }\n}\n\n@mixin mdc-button-outline-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  &:not(:disabled) {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $color);\n    }\n  }\n}\n\n@mixin mdc-button-icon-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  &:not(:disabled) .mdc-button__icon {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n}\n\n@mixin mdc-button-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  &:not(:disabled) {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\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 mdc-button-density($density-scale, $query: mdc-feature-all()) {\n\n  $height: mdc-density-prop-value(\n    $density-config: $mdc-button-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include mdc-button-height($height, $query: $query);\n\n  @if $density-scale != 0 {\n    @include mdc-button-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 mdc-button-touch-target-reset_($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .mdc-button__touch {\n    @include mdc-feature-targets($feat-structure) {\n      display: none;\n    }\n  }\n}\n\n@mixin mdc-button-height($height, $query: $query) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    height: $height;\n  }\n}\n\n@mixin mdc-button-shape-radius($radius,\n$rtl-reflexive: false,\n$density-scale: $mdc-button-density-scale,\n$query: mdc-feature-all()) {\n\n  $height: mdc-density-prop-value(\n    $density-config: $mdc-button-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n  $resolved-radius: mdc-shape-resolve-percentage-radius($height, $radius);\n\n  @include mdc-shape-radius($resolved-radius, $rtl-reflexive, $query: $query);\n\n  #{$mdc-button-ripple-target} {\n    @include mdc-shape-radius($resolved-radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n@mixin mdc-button-horizontal-padding($padding, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-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\n@mixin mdc-button-outline-width(\n  $outline-width,\n  $padding: $mdc-button-contained-horizontal-padding,\n  $query: mdc-feature-all()\n) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n  // Note: Adjust padding to maintain consistent width with non-outlined buttons\n  $padding-value: max($padding - $outline-width, 0);\n\n  @include mdc-button-horizontal-padding($padding-value, $query);\n\n  @include mdc-feature-targets($feat-structure) {\n    border-width: $outline-width;\n  }\n\n  #{$mdc-button-ripple-target} {\n    @include mdc-feature-targets($feat-structure) {\n      top: -$outline-width;\n      left: -$outline-width;\n      border: $outline-width solid transparent;\n    }\n  }\n}\n\n@mixin mdc-button-base_($query) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-typography(button, $query);\n  @include mdc-button-horizontal-padding($mdc-button-horizontal-padding, $query);\n\n  @include mdc-feature-targets($feat-structure) {\n    display: inline-flex;\n    position: relative;\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  }\n\n  &::-moz-focus-inner {\n    @include mdc-feature-targets($feat-structure) {\n      padding: 0;\n      border: 0;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  &:active {\n    @include mdc-feature-targets($feat-structure) {\n      outline: none;\n    }\n  }\n\n  &:hover {\n    @include mdc-feature-targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  &:disabled {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, transparent);\n\n      color: $mdc-button-disabled-ink-color;\n    }\n\n    @include mdc-feature-targets($feat-structure) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n}\n\n@mixin mdc-button__icon_ {\n  @include mdc-rtl-reflexive-box(margin, right, 8px);\n\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  font-size: 18px;\n  vertical-align: top;\n}\n\n@mixin mdc-button__icon-trailing_ {\n  @include mdc-rtl-reflexive-box(margin, left, 8px);\n}\n\n@mixin mdc-button__icon-svg_ {\n  fill: currentColor;\n}\n\n@mixin mdc-button__icon-contained_ {\n  @include mdc-rtl-reflexive-property(margin, -4px, 8px);\n}\n\n@mixin mdc-button__icon-contained-trailing_ {\n  @include mdc-rtl-reflexive-property(margin, 8px, -4px);\n}\n\n@mixin mdc-button--outlined_($query) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    border-style: solid;\n  }\n\n  &:disabled {\n    @include mdc-feature-targets($feat-color) {\n      border-color: $mdc-button-disabled-ink-color;\n    }\n  }\n}\n\n@mixin mdc-button--filled_($query) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding, $query);\n\n  &:disabled {\n    @include mdc-feature-targets($feat-color) {\n      background-color: rgba(mdc-theme-prop-value(on-surface), .12);\n      color: $mdc-button-disabled-ink-color;\n    }\n  }\n}\n\n@mixin mdc-button--raised_($query) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-color: mdc-feature-create-target($query, color);\n\n  @include mdc-elevation(2, $query: $query);\n\n  &:hover,\n  &:focus {\n    @include mdc-elevation(4, $query: $query);\n  }\n\n  &:active {\n    @include mdc-elevation(8, $query: $query);\n  }\n\n  &:disabled {\n    @include mdc-elevation(0, $query: $query);\n  }\n\n  @include mdc-feature-targets($feat-animation) {\n    transition: mdc-elevation-transition-value();\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@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n\n@mixin mdc-typography-core-styles($query: mdc-feature-all()) {\n  .mdc-typography {\n    @include mdc-typography-base($query: $query);\n  }\n\n  @each $style in map-keys($mdc-typography-styles) {\n    .mdc-typography--#{$style} {\n      @include mdc-typography($style, $query: $query);\n    }\n  }\n}\n\n@mixin mdc-typography-base($query: mdc-feature-all()) {\n  $feat-typography: mdc-feature-create-target($query, typography);\n\n  @include mdc-feature-targets($feat-typography) {\n    @each $key, $value in $mdc-typography-base {\n      #{$key}: $value;\n    }\n  }\n}\n\n@mixin mdc-typography($style, $query: mdc-feature-all(), $exclude-props: ()) {\n  $feat-typography: mdc-feature-create-target($query, typography);\n  $style-props: map-get($mdc-typography-styles, $style);\n\n  @if not map-has-key($mdc-typography-styles, $style) {\n    @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys($mdc-typography-styles)}\";\n  }\n\n  @include mdc-feature-targets($feat-typography) {\n    @each $key, $value in $style-props {\n      @if index($exclude-props, $key) == null {\n        #{$key}: $value;\n      }\n    }\n  }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin mdc-typography-overflow-ellipsis($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n}\n\n@mixin mdc-typography-baseline-top($distance, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    display: block;\n    margin-top: 0;\n    /* @alternate */\n    line-height: normal;\n  }\n\n  &::before {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-typography-baseline-strut_($distance);\n\n      vertical-align: 0;\n    }\n  }\n}\n\n@mixin mdc-typography-baseline-bottom($distance, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    margin-bottom: -1 * $distance;\n  }\n\n  &::after {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-typography-baseline-strut_($distance);\n\n      vertical-align: -1 * $distance;\n    }\n  }\n}\n\n@mixin mdc-typography-baseline-strut_($distance) {\n  display: inline-block;\n  width: 0;\n  height: $distance;\n  content: \"\";\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n@import \"./functions\";\n\n@mixin mdc-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical\n    $needs-flip: $rtl-reflexive and length($radius) > 1;\n\n    @if ($needs-flip) {\n      /* @noflip */\n    }\n\n    border-radius: mdc-shape-prop-value($radius);\n\n    @if ($needs-flip) {\n      @include mdc-rtl {\n        /* @noflip */\n        border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));\n      }\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@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n@import \"./functions\";\n\n@mixin mdc-theme-core-styles($query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  :root {\n    @include mdc-feature-targets($feat-color) {\n      @each $style in map-keys($mdc-theme-property-values) {\n        --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};\n      }\n    }\n  }\n\n  @each $style in map-keys($mdc-theme-property-values) {\n    @if $style != \"background\" and $style != \"surface\" {\n      .mdc-theme--#{$style} {\n        @include mdc-feature-targets($feat-color) {\n          @include mdc-theme-prop(color, $style, true);\n        }\n      }\n    } @else {\n      .mdc-theme--#{$style} {\n        @include mdc-feature-targets($feat-color) {\n          @include mdc-theme-prop(background-color, $style);\n        }\n      }\n    }\n  }\n\n  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.\n  @each $style in (\"primary\", \"secondary\") {\n    .mdc-theme--#{$style}-bg {\n      @include mdc-feature-targets($feat-color) {\n        @include mdc-theme-prop(background-color, $style, true);\n      }\n    }\n  }\n}\n\n// Applies the correct theme color style to the specified property.\n// $property is typically color or background-color, but can be any CSS property that accepts color values.\n// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.\n// $edgeOptOut controls whether to feature-detect around Edge to avoid emitting CSS variables for it,\n// intended for use in cases where interactions with pseudo-element styles cause problems due to Edge bugs.\n@mixin mdc-theme-prop($property, $style, $important: false, $edgeOptOut: false) {\n  @if mdc-theme-is-var-with-fallback_($style) {\n    @if $important {\n      #{$property}: mdc-theme-get-var-fallback_($style) !important;\n      /* @alternate */\n      #{$property}: mdc-theme-var_($style) !important;\n    } @else {\n      #{$property}: mdc-theme-get-var-fallback_($style);\n      /* @alternate */\n      #{$property}: mdc-theme-var_($style);\n    }\n  } @else if mdc-theme-is-valid-theme-prop-value_($style) {\n    @if $important {\n      #{$property}: $style !important;\n    } @else {\n      #{$property}: $style;\n    }\n  } @else {\n    @if not map-has-key($mdc-theme-property-values, $style) {\n      @error \"Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}\";\n    }\n\n    $value: map-get($mdc-theme-property-values, $style);\n\n    @if $important {\n      #{$property}: $value !important;\n\n      @if $edgeOptOut {\n        // stylelint-disable max-nesting-depth\n        @at-root {\n          // IE 11 doesn't understand this syntax and ignores the entire block.\n          // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n          // All other browsers apply the styles within the block.\n          @supports not (-ms-ime-align: auto) {\n            // stylelint-disable scss/selector-no-redundant-nesting-selector\n            & {\n              /* @alternate */\n              #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n            }\n            // stylelint-enable scss/selector-no-redundant-nesting-selector\n          }\n        }\n        // stylelint-enable max-nesting-depth\n      } @else {\n        /* @alternate */\n        #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n      }\n    } @else {\n      #{$property}: $value;\n\n      @if $edgeOptOut {\n        // stylelint-disable max-nesting-depth\n        @at-root {\n          // IE 11 doesn't understand this syntax and ignores the entire block.\n          // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n          // All other browsers apply the styles within the block.\n          @supports not (-ms-ime-align: auto) {\n            // stylelint-disable scss/selector-no-redundant-nesting-selector\n            & {\n              /* @alternate */\n              #{$property}: var(--mdc-theme-#{$style}, $value);\n            }\n            // stylelint-enable scss/selector-no-redundant-nesting-selector\n          }\n        }\n        // stylelint-enable max-nesting-depth\n      } @else {\n        /* @alternate */\n        #{$property}: var(--mdc-theme-#{$style}, $value);\n      }\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@import \"@material/density/variables\";\n@import \"@material/theme/variables\"; // for mdc-theme-prop-value\n\n$mdc-button-height: 36px !default;\n$mdc-button-horizontal-padding: 8px !default;\n$mdc-button-contained-horizontal-padding: 16px !default;\n\n$mdc-button-minimum-height: 24px !default;\n$mdc-button-maximum-height: $mdc-button-height !default;\n$mdc-button-density-scale: $mdc-density-default-scale !default;\n$mdc-button-density-config: (\n  height: (\n    default: $mdc-button-height,\n    maximum: $mdc-button-maximum-height,\n    minimum: $mdc-button-minimum-height,\n  ),\n) !default;\n\n$mdc-button-outlined-border-width: 1px !default;\n$mdc-button-shape-radius: small !default;\n\n$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;\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@import \"./variables\";\n\n// Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.\n//\n// Usage Example:\n//\n// ```scss\n// .mdc-foo {\n//   position: absolute;\n//   left: 0;\n//\n//   @include mdc-rtl {\n//     left: auto;\n//     right: 0;\n//   }\n//\n//   &__bar {\n//     margin-left: 4px;\n//     @include mdc-rtl(\".mdc-foo\") {\n//       margin-left: auto;\n//       margin-right: 4px;\n//     }\n//   }\n// }\n//\n// .mdc-foo--mod {\n//   padding-left: 4px;\n//\n//   @include mdc-rtl {\n//     padding-left: auto;\n//     padding-right: 4px;\n//   }\n// }\n// ```\n//\n// Note that this mixin works by checking for an ancestor element with `[dir=\"rtl\"]`.\n// As a result, nested `dir` values are not supported:\n//\n// ```html\n// <html dir=\"rtl\">\n//   <!-- ... -->\n//   <div dir=\"ltr\">\n//     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n//   </div>\n// </html>\n// ```\n//\n// In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this.\n@mixin mdc-rtl($root-selector: null) {\n  @if ($mdc-rtl-include) {\n    @if ($root-selector) {\n      @at-root {\n        #{$root-selector}[dir=\"rtl\"] &,\n        [dir=\"rtl\"] #{$root-selector} & {\n          @content;\n        }\n      }\n    } @else {\n      [dir=\"rtl\"] &,\n      &[dir=\"rtl\"] {\n        @content;\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 mdc-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 mdc-rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-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 mdc-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 mdc-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 mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {\n  @if (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 mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector);\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-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 mdc-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 mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);\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 mdc-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 mdc-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 mdc-rtl-reflexive-position($position-property, $value, $root-selector: null) {\n  @if (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 mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);\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 mdc-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 mdc-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 mdc-rtl-reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $root-selector: null\n) {\n  @include mdc-rtl-property_($left-property, $left-value);\n  @include mdc-rtl-property_($right-property, $right-value);\n\n  @include mdc-rtl($root-selector) {\n    @include mdc-rtl-property_($left-property, $right-value);\n    @include mdc-rtl-property_($right-property, $left-value);\n  }\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @access private\n///\n@mixin mdc-rtl-property_($property, $value) {\n  @if $mdc-rtl-include {\n    /* @noflip */\n  }\n\n  #{$property}: #{$value};\n}\n","//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$mdc-touch-target-height: 48px !default;\n$mdc-touch-target-width: $mdc-touch-target-height !default;\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@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/variables\";\n@import \"./variables\";\n\n@mixin mdc-elevation-core-styles($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @for $z-value from 0 through 24 {\n    .mdc-elevation--z#{$z-value} {\n      @include mdc-elevation($z-value, $query: $query);\n    }\n  }\n\n  .mdc-elevation-transition {\n    @include mdc-feature-targets($feat-animation) {\n      transition: mdc-elevation-transition-value();\n    }\n\n    @include mdc-feature-targets($feat-structure) {\n      will-change: $mdc-elevation-property;\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 mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0, $query: mdc-feature-all()) {\n  @if type-of($z-value) != number or not 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  $feat-color: mdc-feature-create-target($query, color);\n\n  $color: mdc-theme-prop-value($color);\n\n  $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);\n  $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value);\n  $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value);\n\n  $umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost);\n  $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost);\n  $ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost);\n\n  @include mdc-feature-targets($feat-color) {\n    box-shadow:\n      #{\"#{$umbra-z-value} #{$umbra-color}\"},\n      #{\"#{$penumbra-z-value} #{$penumbra-color}\"},\n      #{$ambient-z-value} $ambient-color;\n  }\n}\n\n// Returns a string that can be used as the value for a `transition` property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// ```scss\n// .foo {\n//   transition: mdc-elevation-transition-value(), opacity 100ms ease;\n//   will-change: $mdc-elevation-property, opacity;\n// }\n// ```\n@function mdc-elevation-transition-value(\n  $duration: $mdc-elevation-transition-duration,\n  $easing: $mdc-elevation-transition-timing-function\n) {\n  @return #{$mdc-elevation-property} #{$duration} #{$easing};\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// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.\n\n@import \"@material/animation/variables\";\n@import \"./variables\";\n\n@mixin mdc-ripple-keyframes_ {\n  @keyframes mdc-ripple-fg-radius-in {\n    from {\n      animation-timing-function: $mdc-animation-standard-curve-timing-function;\n      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n      // that custom properties are supported within the browser before adding this class, we can\n      // safely use them without a fallback.\n      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n    }\n\n    to {\n      transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-in {\n    from {\n      animation-timing-function: linear;\n      opacity: 0;\n    }\n\n    to {\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-out {\n    from {\n      animation-timing-function: linear;\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n\n    to {\n      opacity: 0;\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$mdc-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;\n$mdc-animation-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;\n$mdc-animation-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;\n$mdc-animation-sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/animation/functions\";\n@import \"@material/animation/variables\";\n@import \"@material/base/mixins\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/mixins\";\n@import \"./functions\";\n@import \"./keyframes\";\n@import \"./variables\";\n\n@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {\n  // postcss-bem-linter: define ripple-surface\n\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-ripple-surface {\n    @include mdc-ripple-surface($query: $query);\n    @include mdc-states($query: $query);\n    @include mdc-ripple-radius-bounded($query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      position: relative;\n      outline: none;\n      overflow: hidden;\n    }\n\n    &[data-mdc-ripple-is-unbounded] {\n      @include mdc-ripple-radius-unbounded($query: $query);\n\n      @include mdc-feature-targets($feat-structure) {\n        overflow: visible;\n      }\n    }\n\n    &--primary {\n      @include mdc-states(primary, $query: $query);\n    }\n\n    &--accent {\n      @include mdc-states(secondary, $query: $query);\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n@mixin mdc-ripple-common($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n  // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n  // mdc-ripple.scss.)\n  @include mdc-feature-targets($feat-animation) {\n    @include mdc-base-emit-once(\"mdc-ripple/common/animation\") {\n      @include mdc-ripple-keyframes_;\n    }\n  }\n\n  @include mdc-feature-targets($feat-structure) {\n    @include mdc-base-emit-once(\"mdc-ripple/common/structure\") {\n      // Styles used to detect buggy behavior of CSS custom properties in Edge.\n      // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/\n      // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be\n      // present for other components which rely on ripple as well as mdc-ripple itself.\n      .mdc-ripple-surface--test-edge-var-bug {\n        --mdc-ripple-surface-test-edge-var: 1px solid #000;\n\n        visibility: hidden;\n\n        &::before {\n          border: var(--mdc-ripple-surface-test-edge-var);\n        }\n      }\n    }\n  }\n}\n\n@mixin mdc-ripple-surface($query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    --mdc-ripple-fg-size: 0;\n    --mdc-ripple-left: 0;\n    --mdc-ripple-top: 0;\n    --mdc-ripple-fg-scale: 1;\n    --mdc-ripple-fg-translate-end: 0;\n    --mdc-ripple-fg-translate-start: 0;\n\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    // !!DO NOT REMOVE!! mdc-ripple-will-change-replacer\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include mdc-feature-targets($feat-structure) {\n      position: absolute;\n      border-radius: 50%;\n      opacity: 0;\n      pointer-events: none;\n      content: \"\";\n    }\n  }\n\n  #{$ripple-target}::before {\n    @include mdc-feature-targets($feat-animation) {\n      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n      transition:\n        opacity $mdc-states-wash-duration linear,\n        background-color $mdc-states-wash-duration linear;\n    }\n\n    @include mdc-feature-targets($feat-structure) {\n      z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n    }\n  }\n\n  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before {\n      @include mdc-feature-targets($feat-structure) {\n        transform: scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-structure) {\n        top: 0;\n        /* @noflip */\n        left: 0;\n        transform: scale(0);\n        transform-origin: center center;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--unbounded {\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-structure) {\n        top: var(--mdc-ripple-top, 0);\n        /* @noflip */\n        left: var(--mdc-ripple-left, 0);\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-activation {\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-animation) {\n        animation:\n          mdc-ripple-fg-radius-in $mdc-ripple-translate-duration forwards,\n          mdc-ripple-fg-opacity-in $mdc-ripple-fade-in-duration forwards;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-deactivation {\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-animation) {\n        animation: mdc-ripple-fg-opacity-out $mdc-ripple-fade-out-duration;\n      }\n\n      @include mdc-feature-targets($feat-structure) {\n        // Retain transform from mdc-ripple-fg-radius-in activation\n        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n  }\n}\n\n@mixin mdc-states-base-color(\n  $color, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include mdc-feature-targets($feat-color) {\n      @if alpha(mdc-theme-prop-value($color)) > 0 {\n        @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\n      } @else {\n        // If a color with 0 alpha is specified, don't render the ripple pseudo-elements at all.\n        // This avoids unnecessary transitions and overflow.\n        content: none;\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///\n@mixin mdc-states-opacities($opacity-map: (), $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n  // Ensure sufficient specificity to override base state opacities\n  @if map-has-key($opacity-map, hover) {\n    @include mdc-states-hover-opacity(map-get($opacity-map, hover), $query: $query);\n  }\n\n  @if map-has-key($opacity-map, focus) {\n    @include mdc-states-focus-opacity(map-get($opacity-map, focus), $has-nested-focusable-element, $query: $query);\n  }\n\n  @if map-has-key($opacity-map, press) {\n    @include mdc-states-press-opacity(map-get($opacity-map, press), $query: $query);\n  }\n}\n\n@mixin mdc-states-hover-opacity(\n  $opacity, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover {\n    #{$ripple-target}::before {\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include mdc-feature-targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n  }\n}\n\n@mixin mdc-states-focus-opacity(\n  $opacity,\n  $has-nested-focusable-element: false,\n  $query: mdc-feature-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      #{$ripple-target}::before {\n        @include mdc-states-focus-opacity-properties_(\n          $opacity: $opacity, $query: $query);\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      #{$ripple-target}::before {\n        @include mdc-states-focus-opacity-properties_(\n          $opacity: $opacity, $query: $query);\n      }\n    }\n  }\n}\n\n@mixin mdc-states-focus-opacity-properties_($opacity, $query) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // Note that this duration is only effective on focus, not blur\n  @include mdc-feature-targets($feat-animation) {\n    transition-duration: 75ms;\n  }\n\n  @include mdc-feature-targets($feat-color) {\n    opacity: $opacity;\n  }\n}\n\n@mixin mdc-states-press-opacity($opacity, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // Styles for non-upgraded (CSS-only) stateful surfaces\n\n  &:not(.mdc-ripple-upgraded) {\n    // Apply press additively by using the ::after pseudo-element\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-animation) {\n        transition: opacity $mdc-ripple-fade-out-duration linear;\n      }\n    }\n\n    &:active {\n      #{$ripple-target}::after {\n        @include mdc-feature-targets($feat-animation) {\n          transition-duration: $mdc-ripple-fade-in-duration;\n        }\n\n        // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n        @include mdc-feature-targets($feat-color) {\n          opacity: $opacity;\n        }\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    @include mdc-feature-targets($feat-color) {\n      --mdc-ripple-fg-opacity: #{$opacity};\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 mdc-states(\n  $color: mdc-theme-prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: mdc-feature-all(),\n  $ripple-target: \"&\",\n) {\n  @include mdc-states-interactions_(\n    $color: $color,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target);\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 mdc-states-activated(\n  $color, $has-nested-focusable-element: false, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-color: mdc-feature-create-target($query, color);\n  $activated-opacity: mdc-states-opacity($color, activated);\n\n  &--activated {\n    // Stylelint seems to think that '&' qualifies as a type selector here?\n    // stylelint-disable-next-line selector-max-type\n    #{$ripple-target}::before {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include mdc-feature-targets($feat-color) {\n        opacity: $activated-opacity;\n      }\n    }\n\n    @include mdc-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// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin mdc-states-selected(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: mdc-feature-all(),\n  $ripple-target: \"&\") {\n  $feat-color: mdc-feature-create-target($query, color);\n  $selected-opacity: mdc-states-opacity($color, selected);\n\n  &--selected {\n    // stylelint-disable-next-line selector-max-type\n    #{$ripple-target}::before {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include mdc-feature-targets($feat-color) {\n        opacity: $selected-opacity;\n      }\n    }\n\n    @include mdc-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@mixin mdc-ripple-radius-bounded(\n  $radius: 100%, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-struture: mdc-feature-create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include mdc-feature-targets($feat-struture) {\n      top: calc(50% - #{$radius});\n      /* @noflip */\n      left: calc(50% - #{$radius});\n      width: $radius * 2;\n      height: $radius * 2;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n@mixin mdc-ripple-radius-unbounded(\n  $radius: 100%, $query: mdc-feature-all(), $ripple-target: \"&\") {\n  $feat-struture: mdc-feature-create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include mdc-feature-targets($feat-struture) {\n      top: calc(50% - #{$radius / 2});\n      /* @noflip */\n      left: calc(50% - #{$radius / 2});\n      width: $radius;\n      height: $radius;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-struture) {\n        top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));\n        /* @noflip */\n        left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include mdc-feature-targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n@mixin mdc-states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: mdc-feature-all(),\n  $ripple-target: \"&\",\n) {\n  @include mdc-ripple-target-selector($ripple-target) {\n    @include mdc-states-base-color($color, $query);\n  }\n\n  @include mdc-states-hover-opacity(\n    $opacity: mdc-states-opacity($color, hover) + $opacity-modifier,\n    $query: $query,\n    $ripple-target: $ripple-target);\n  @include mdc-states-focus-opacity(\n    $opacity: mdc-states-opacity($color, focus) + $opacity-modifier,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target,\n  );\n  @include mdc-states-press-opacity(\n    $opacity: mdc-states-opacity($color, press) + $opacity-modifier,\n    $query: $query,\n    $ripple-target: $ripple-target);\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin mdc-ripple-target-selector($ripple-target: \"&\") {\n  @if $ripple-target == \"&\" {\n    @content;\n  } @else {\n    #{$ripple-target} {\n      @content;\n    }\n  }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin mdc-ripple-target-common($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    // Necessary for clicks on other inner elements (e.g. close icon in chip)\n    // to go through.\n    pointer-events: none;\n  }\n}\n","//\n// 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$mdc-ripple-fade-in-duration: 75ms !default;\n$mdc-ripple-fade-out-duration: 150ms !default;\n$mdc-ripple-translate-duration: 225ms !default;\n$mdc-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$mdc-ripple-dark-ink-opacities: (\n  hover: .04,\n  focus: .12,\n  press: .12,\n  selected: .08,\n  activated: .12\n) !default;\n\n$mdc-ripple-light-ink-opacities: (\n  hover: .08,\n  focus: .24,\n  press: .24,\n  selected: .16,\n  activated: .24\n) !default;\n\n// Legacy\n\n$mdc-ripple-pressed-dark-ink-opacity: .16 !default;\n$mdc-ripple-pressed-light-ink-opacity: .32 !default;\n"],"sourceRoot":""}