{"version":3,"sources":["webpack:///./packages/mdc-drawer/mdc-drawer.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/shape/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/list/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_mixins.scss","webpack:///./packages/mdc-drawer/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_mixins.scss"],"names":[],"mappings":";;;;;;;AA8CE,YCsCI,mDC9CF,sBF8VA,UAQA,YA/UE,aACA,sBACA,cACA,sBACA,YAEA,uBAEA,yBACA,gBAeA,qHACA,uDG/DyC,CHyR7C,+BC5NI,qBD0NI,CIsFR,uCHhTI,oBDqOI,CAIR,kCCzOI,oBDqOI,CIuCR,oCH5QI,oBD2PI,CAwBR,2BCnRI,qBDiRI,CILR,8DH5QI,aDiQI,CAUR,sCC3QI,wBDyQI,CK7QJ,2CHrCE,sBEuUN,2BF5UE,kBFyWF,+EKpHA,iCA3MI,iLA2MJ,iCA3MI,2CLNE,qBAEA,sBAEA,wBAEA,wBA6UN,2BMnWI,uONuWA,4BAEA,eACA,cAKJ,wCAEI,eAKJ,6CAEI,gBAKJ,uCM7XI,sOAoBF,cACA,aAEA,mBN2WE,SACA,eMzWJ,+CA0BA,qBACA,QACA,YACA,WAzBI,iBN0WJ,8BAEI,mBAMJ,qEAGI,oBAjXJ,qBAEI,gEKdA,6DLiBE,8DAKN,qBAEI,wDASA,yBOlEuB,CFiCvB,6DL4BE,wDASN,qBAEI,gEAQA,yBO/EsB,CFgCtB,6DL0CE,8DASN,oBAEI,cACA,sBACA,gBACA,mBAIJ,mBMlFI,6NAoBF,cACA,aAEA,mBAgBA,oBAbF,2BA0BA,qBACA,QACA,YACA,WAzBI,iBAYJ,0BAUA,qBACA,QACA,YACA,WATI,qBN0CJ,sBMxFI,sOAoBF,cACA,aAEA,mBNsEE,gBMnEJ,8BA0BA,qBACA,QACA,YACA,WAzBI,iBNmEJ,qBAEI,YACA,gBACA,iCAUJ,yBKkHA,qBL9GI,aACA,kBK9FA,qEA2MJ,qBL3GI,0CACE,aAKN,wBKqGA,6BLjGI,kBK1GA,mEA2MJ,6BLxFA,mBQzHE,uHHiNF,qBLjFI,aACA,eA8KJ,qCCrSI,gCDmSI,CKvSJ,yDA2MJ,qBL7EE,oCAEI,aAKN,kBAEI,aACA,eACA,MACA,OACA,WACA,YACA,UAIA,4BACA,uDG3MyC,CH8M3C,oCAEI,cAIJ,uCAEI,UAIJ,uCAEI,0BAIA,UAIJ,uCAEI,0BAIA,U","file":"mdc.drawer.min.css","sourcesContent":["//\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/animation/functions\";\n@import \"@material/animation/variables\";\n@import \"@material/rtl/mixins\";\n@import \"@material/typography/mixins\";\n@import \"@material/typography/variables\";\n@import \"@material/theme/mixins\";\n@import \"@material/theme/variables\";\n@import \"@material/list/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/shape/mixins\";\n@import \"@material/elevation/mixins\";\n@import \"./variables\";\n\n//\n// Public\n//\n\n@mixin mdc-drawer-core-styles($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n  $feat-animation: mdc-feature-create-target($query, animation);\n\n  // postcss-bem-linter: define drawer\n  .mdc-drawer {\n    @include mdc-drawer-title-ink-color($mdc-drawer-title-ink-color, $query: $query);\n    @include mdc-drawer-subtitle-ink-color($mdc-drawer-subtitle-ink-color, $query: $query);\n    @include mdc-drawer-border-color($mdc-drawer-divider-color, $query: $query);\n    @include mdc-drawer-surface-fill-color($mdc-drawer-surface-fill-color, $query: $query);\n    @include mdc-drawer-item-icon-ink-color($mdc-drawer-item-inactive-ink-color, $query: $query);\n    @include mdc-drawer-item-text-ink-color($mdc-drawer-item-inactive-ink-color, $query: $query);\n    @include mdc-drawer-item-activated-icon-ink-color($mdc-drawer-item-activated-ink-color, $query: $query);\n    @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color, $query: $query);\n    @include mdc-drawer-shape-radius(large, $query: $query);\n    @include mdc-drawer-item-shape-radius(4px, $query: $query);\n    @include mdc-drawer-z-index($mdc-drawer-z-index, $query: $query);\n    @include mdc-drawer-width($mdc-drawer-width, $query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      box-sizing: border-box;\n      height: 100%;\n      /* @noflip */\n      border-right-width: 1px;\n      /* @noflip */\n      border-right-style: solid;\n      overflow: hidden;\n\n      @include mdc-rtl {\n        /* @noflip */\n        border-right-width: 0;\n        /* @noflip */\n        border-left-width: 1px;\n        /* @noflip */\n        border-right-style: none;\n        /* @noflip */\n        border-left-style: solid;\n      }\n    }\n\n    @include mdc-feature-targets($feat-animation) {\n      transition-property: transform;\n      transition-timing-function: $mdc-animation-standard-curve-timing-function;\n    }\n\n    @include mdc-drawer-list-item_($query);\n  }\n\n  .mdc-drawer--animate {\n    @include mdc-feature-targets($feat-structure) {\n      transform: translateX(-100%);\n\n      @include mdc-rtl {\n        transform: translateX(100%);\n      }\n    }\n  }\n\n  .mdc-drawer--opening {\n    @include mdc-feature-targets($feat-structure) {\n      transform: translateX(0);\n\n      // Required to level the specificity with animate class.\n      @include mdc-rtl {\n        transform: translateX(0);\n      }\n    }\n\n    @include mdc-feature-targets($feat-animation) {\n      transition-duration: $mdc-drawer-animation-enter;\n    }\n  }\n\n  .mdc-drawer--closing {\n    @include mdc-feature-targets($feat-structure) {\n      transform: translateX(-100%);\n\n      @include mdc-rtl {\n        transform: translateX(100%);\n      }\n    }\n\n    @include mdc-feature-targets($feat-animation) {\n      transition-duration: $mdc-drawer-animation-exit;\n    }\n  }\n\n  .mdc-drawer__header {\n    @include mdc-feature-targets($feat-structure) {\n      flex-shrink: 0;\n      box-sizing: border-box;\n      min-height: 64px; // same as $mdc-top-app-bar-row-height\n      padding: 0 $mdc-drawer-surface-padding 4px;\n    }\n  }\n\n  .mdc-drawer__title {\n    @include mdc-typography(headline6, $query: $query);\n    @include mdc-typography-baseline-top(36px, $query: $query);\n    @include mdc-typography-baseline-bottom(20px, $query: $query);\n  }\n\n  .mdc-drawer__subtitle {\n    @include mdc-typography(body2, $query: $query);\n    @include mdc-typography-baseline-top(20px, $query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      margin-bottom: 0;\n    }\n  }\n\n  .mdc-drawer__content {\n    @include mdc-feature-targets($feat-structure) {\n      height: 100%;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n@mixin mdc-drawer-dismissible-core-styles($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-drawer--dismissible {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-position(left, 0);\n\n      display: none;\n      position: absolute;\n\n      &.mdc-drawer--open {\n        display: flex;\n      }\n    }\n  }\n\n  .mdc-drawer-app-content {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-box(margin, left, 0);\n\n      position: relative;\n    }\n  }\n}\n\n@mixin mdc-drawer-modal-core-styles($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n  $feat-animation: mdc-feature-create-target($query, animation);\n\n  .mdc-drawer--modal {\n    @include mdc-drawer-scrim-fill-color($mdc-drawer-modal-scrim-color, $query: $query);\n    @include mdc-elevation($mdc-drawer-modal-elevation, $query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-position(left, 0);\n\n      display: none;\n      position: fixed;\n    }\n\n    &.mdc-drawer--open {\n      @include mdc-feature-targets($feat-structure) {\n        display: flex;\n      }\n    }\n  }\n\n  .mdc-drawer-scrim {\n    @include mdc-feature-targets($feat-structure) {\n      display: none;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: $mdc-drawer-z-index - 1;\n    }\n\n    @include mdc-feature-targets($feat-animation) {\n      transition-property: opacity;\n      transition-timing-function: $mdc-animation-standard-curve-timing-function;\n    }\n\n    .mdc-drawer--open + & {\n      @include mdc-feature-targets($feat-structure) {\n        display: block;\n      }\n    }\n\n    .mdc-drawer--animate + & {\n      @include mdc-feature-targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n\n    .mdc-drawer--opening + & {\n      @include mdc-feature-targets($feat-animation) {\n        transition-duration: $mdc-drawer-animation-enter;\n      }\n\n      @include mdc-feature-targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n\n    .mdc-drawer--closing + & {\n      @include mdc-feature-targets($feat-animation) {\n        transition-duration: $mdc-drawer-animation-exit;\n      }\n\n      @include mdc-feature-targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n@mixin mdc-drawer-activated-overlay-color($color, $query: mdc-feature-all()) {\n  :not(.mdc-list--non-interactive) > .mdc-list-item {\n    @include mdc-states-activated($color, $query: $query);\n  }\n}\n\n@mixin mdc-drawer-border-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-divider-opacity);\n\n  @include mdc-feature-targets($feat-color) {\n    @include mdc-theme-prop(border-color, $value);\n  }\n}\n\n@mixin mdc-drawer-item-shape-radius($radius, $rtl-reflexive: true, $query: mdc-feature-all()) {\n  @include mdc-list-item-shape-radius($radius, $rtl-reflexive, $query: $query);\n}\n\n@mixin mdc-drawer-shape-radius($radius, $query: mdc-feature-all()) {\n  @if length($radius) > 2 {\n    @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n  } @else if length($radius) == 2 {\n    $radius: 0 nth($radius, 1) nth($radius, 2) 0;\n  } @else {\n    $radius: 0 $radius $radius 0;\n  }\n\n  @include mdc-shape-radius($radius, $rtl-reflexive: true, $query: $query);\n}\n\n@mixin mdc-drawer-divider-color($color, $query: mdc-feature-all()) {\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-divider-opacity);\n\n  @include mdc-list-divider-color($value, $query: $query);\n}\n\n@mixin mdc-drawer-title-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-title-ink-opacity);\n\n  .mdc-drawer__title {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $value);\n    }\n  }\n}\n\n@mixin mdc-drawer-subtitle-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-subtitle-ink-opacity);\n\n  @include mdc-list-group-subheader-ink-color($value, $query: $query);\n\n  .mdc-drawer__subtitle {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $value);\n    }\n  }\n}\n\n@mixin mdc-drawer-fill-color-accessible($color, $query: mdc-feature-all()) {\n  $accessibleColor: mdc-theme-accessible-ink-color($color);\n\n  @include mdc-drawer-title-ink-color($accessibleColor, $query: $query);\n  @include mdc-drawer-subtitle-ink-color($accessibleColor, $query: $query);\n  @include mdc-drawer-item-text-ink-color($accessibleColor, $query: $query);\n  @include mdc-drawer-item-icon-ink-color($accessibleColor, $query: $query);\n  @include mdc-drawer-surface-fill-color($color, $query: $query);\n}\n\n@mixin mdc-drawer-item-icon-ink-color($color, $query: mdc-feature-all()) {\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-inactive-icon-ink-opacity);\n\n  @include mdc-list-item-graphic-ink-color($value, $query: $query);\n}\n\n@mixin mdc-drawer-item-activated-icon-ink-color($color, $query: mdc-feature-all()) {\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-active-icon-ink-opacity);\n\n  .mdc-list-item--activated {\n    @include mdc-list-item-graphic-ink-color($value, $query: $query);\n  }\n}\n\n@mixin mdc-drawer-item-activated-text-ink-color($color, $query: mdc-feature-all()) {\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-active-text-ink-opacity);\n\n  .mdc-list-item--activated {\n    @include mdc-list-item-primary-text-ink-color($value, $query: $query);\n  }\n}\n\n@mixin mdc-drawer-item-text-ink-color($color, $query: mdc-feature-all()) {\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-inactive-text-ink-opacity);\n\n  .mdc-list-item {\n    @include mdc-list-item-primary-text-ink-color($value, $query: $query);\n  }\n}\n\n@mixin mdc-drawer-surface-fill-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $value: mdc-theme-prop-value($color);\n\n  @include mdc-feature-targets($feat-color) {\n    @include mdc-theme-prop(background-color, $value);\n  }\n}\n\n@mixin mdc-drawer-scrim-fill-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-modal-scrim-opacity);\n\n  + .mdc-drawer-scrim {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, $value);\n    }\n  }\n}\n\n@mixin mdc-drawer-z-index($value, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    z-index: $value;\n  }\n}\n\n@mixin mdc-drawer-width($width, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    width: $width;\n  }\n\n  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-box(margin, left, $width);\n    }\n  }\n}\n\n//\n// Private\n//\n@mixin mdc-drawer-list-item_($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  // postcss-bem-linter: ignore\n  .mdc-list-item {\n    @include mdc-typography(subtitle2, $query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      height: calc(48px - 2 * #{$mdc-drawer-list-item-spacing});\n      // To accomodate margin conflict.\n      margin: ($mdc-drawer-list-item-spacing * 2) 8px;\n      padding: 0 $mdc-drawer-surface-padding / 2;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-list-item:nth-child(1) {\n    @include mdc-feature-targets($feat-structure) {\n      margin-top: 2px;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-list-item:nth-last-child(1) {\n    @include mdc-feature-targets($feat-structure) {\n      margin-bottom: 0;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-list-group__subheader {\n    @include mdc-typography(body2, $query: $query);\n    @include mdc-typography-baseline-top(24px, $query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      margin: 0;\n      padding: 0 $mdc-drawer-surface-padding;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-list-divider {\n    @include mdc-feature-targets($feat-structure) {\n      margin: 3px 0 4px 0;\n    }\n  }\n\n  // Prevents list item children from being included in the click target.\n  // postcss-bem-linter: ignore\n  .mdc-list-item__text,\n  .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      pointer-events: none;\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 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$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","// 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@import \"@material/rtl/mixins\";\n@import \"@material/theme/mixins\";\n@import \"@material/shape/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/theme/functions\";\n@import \"@material/typography/mixins\";\n@import \"@material/typography/variables\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n\n//\n// Public\n//\n\n@mixin mdc-list-core-styles($query: mdc-feature-all()) {\n  @include mdc-list-without-ripple($query);\n  @include mdc-list-ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// list styles. It is recommended that most users use `mdc-list-core-styles` instead.\n@mixin mdc-list-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  $feat-typography: mdc-feature-create-target($query, typography);\n\n  $item-primary-text-baseline-height: 32px;\n  $item-secondary-text-baseline-height: 20px;\n  $dense-item-primary-text-baseline-height: 24px;\n  $divider-color: if(\n    mdc-theme-tone($mdc-theme-background) == \"dark\",\n    $mdc-list-divider-color-on-dark-bg,\n    $mdc-list-divider-color-on-light-bg\n  );\n\n  .mdc-list {\n    @include mdc-list-base_($query);\n  }\n\n  @include mdc-list-item-secondary-text-ink-color(text-secondary-on-background, $query);\n  @include mdc-list-item-graphic-fill-color(transparent, $query);\n  @include mdc-list-item-graphic-ink-color(text-icon-on-background, $query);\n  @include mdc-list-item-meta-ink-color(text-hint-on-background, $query);\n  @include mdc-list-group-subheader-ink-color(text-primary-on-background, $query);\n\n  .mdc-list--dense {\n    @include mdc-feature-targets($feat-structure) {\n      padding-top: 4px;\n      padding-bottom: 4px;\n      font-size: .812rem;\n    }\n  }\n\n  .mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-list-item-base_;\n    }\n  }\n\n  // \"Selected\" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.\n  // \"Activated\" is more permanent. E.g., the currently highlighted navigation destination in a drawer.\n  .mdc-list-item--selected,\n  .mdc-list-item--activated {\n    @include mdc-list-item-primary-text-ink-color(primary, $query);\n    @include mdc-list-item-graphic-ink-color(primary, $query);\n  }\n\n  .mdc-list-item--disabled {\n    @include mdc-list-item-primary-text-ink-color(text-disabled-on-background, $query);\n  }\n\n  .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-list-graphic-size_(24px);\n\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      fill: currentColor;\n    }\n  }\n\n  // Extra specificity is to override .material-icons display style if used in\n  // conjunction with mdc-list-item__graphic\n  // stylelint-disable plugin/selector-bem-pattern\n  .mdc-list .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      display: inline-flex;\n    }\n  }\n  // stylelint-enable plugin/selector-bem-pattern\n\n  .mdc-list-item__meta {\n    // stylelint-disable selector-class-pattern\n    &:not(.material-icons) {\n      @include mdc-typography(caption, $query);\n    }\n    // stylelint-enable selector-class-pattern\n\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-property(margin, auto, 0, \".mdc-list-item\");\n    }\n  }\n\n  .mdc-list-item__text {\n    @include mdc-typography-overflow-ellipsis($query);\n  }\n\n  // Disable interaction on label elements that may automatically\n  // toggle corresponding checkbox / radio input.\n  .mdc-list-item__text[for] {\n    @include mdc-feature-targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n\n  .mdc-list-item__primary-text {\n    @include mdc-typography-overflow-ellipsis($query);\n    @include mdc-typography-baseline-top($item-primary-text-baseline-height, $query);\n    @include mdc-typography-baseline-bottom($item-secondary-text-baseline-height, $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: block;\n    }\n\n    // stylelint-disable plugin/selector-bem-pattern\n    .mdc-list--dense & {\n      @include mdc-typography-baseline-top($dense-item-primary-text-baseline-height, $query);\n      @include mdc-typography-baseline-bottom($item-secondary-text-baseline-height, $query);\n    }\n    // stylelint-enable plugin/selector-bem-pattern\n  }\n\n  .mdc-list-item__secondary-text {\n    @include mdc-typography(body2, $query);\n    @include mdc-typography-overflow-ellipsis($query);\n    @include mdc-typography-baseline-top($item-secondary-text-baseline-height, $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: block;\n    }\n\n    // stylelint-disable plugin/selector-bem-pattern\n    .mdc-list--dense & {\n      @include mdc-typography-baseline-top($item-secondary-text-baseline-height, $query);\n\n      @include mdc-feature-targets($feat-structure) {\n        font-size: inherit;\n      }\n    }\n    // stylelint-enable plugin/selector-bem-pattern\n  }\n\n  // stylelint-disable plugin/selector-bem-pattern\n  .mdc-list--dense .mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      height: 40px;\n    }\n  }\n\n  .mdc-list--dense .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-list-graphic-size_(20px);\n    }\n  }\n\n  .mdc-list--avatar-list .mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      height: 56px;\n    }\n  }\n\n  .mdc-list--avatar-list .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-list-graphic-size_(40px);\n\n      border-radius: 50%;\n    }\n  }\n\n  .mdc-list--two-line .mdc-list-item__text {\n    @include mdc-feature-targets($feat-structure) {\n      align-self: flex-start;\n    }\n  }\n\n  .mdc-list--two-line .mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      height: 72px;\n    }\n  }\n\n  .mdc-list--two-line.mdc-list--dense .mdc-list-item,\n  .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      height: 60px;\n    }\n  }\n\n  .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-list-graphic-size_(36px);\n    }\n  }\n\n  // Only change mouse cursor for interactive list items which are not disabled.\n  :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  // Override anchor tag styles for the use-case of a list being used for navigation\n  // stylelint-disable selector-max-type,selector-no-qualifying-type\n  a.mdc-list-item {\n    @include mdc-feature-targets($feat-structure) {\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  // stylelint-enable selector-max-type,selector-no-qualifying-type\n\n  .mdc-list-divider {\n    @include mdc-feature-targets($feat-structure) {\n      height: 0;\n      margin: 0;\n      border: none;\n      border-bottom-width: 1px;\n      border-bottom-style: solid;\n    }\n  }\n\n  // Note: ideally we'd be able to hoist this to the top-level `$feat-color`, but doing so\n  // will cause the `border` declaration on `.mdc-list-divider` above to override it.\n  @include mdc-list-divider-color($divider-color, $query);\n\n  .mdc-list-divider--padded {\n    @include mdc-feature-targets($feat-structure) {\n      // Leave gaps on each side to match the padding on list items\n      margin: 0 $mdc-list-side-padding;\n    }\n  }\n\n  .mdc-list-divider--inset {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-box(margin, left, $mdc-list-text-offset, \".mdc-list-group\");\n\n      width: calc(100% - #{$mdc-list-text-offset});\n    }\n  }\n\n  .mdc-list-divider--inset.mdc-list-divider--padded {\n    @include mdc-feature-targets($feat-structure) {\n      width: calc(100% - #{$mdc-list-text-offset} - #{$mdc-list-side-padding});\n    }\n  }\n\n  .mdc-list-group {\n    @include mdc-feature-targets($feat-structure) {\n      // Cancel top/bottom padding on individual lists within group\n      .mdc-list {\n        padding: 0;\n      }\n    }\n  }\n\n  .mdc-list-group__subheader {\n    $mdc-list-subheader-virtual-height: 3rem;\n    $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body1), line-height);\n    $mdc-list-subheader-margin: ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;\n\n    @include mdc-typography(subtitle1, $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      margin: $mdc-list-subheader-margin $mdc-list-side-padding;\n    }\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// list styles. It is recommended that most users use `mdc-list-core-styles` instead.\n@mixin mdc-list-ripple($query: mdc-feature-all()) {\n  @include mdc-ripple-common($query);\n\n  // List items should support states by default, but it should be possible to opt out.\n  // Direct child combinator is necessary for non-interactive modifier on parent to not\n  // match this selector.\n  :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item {\n    @include mdc-list-item-interactive-ripple_($query);\n  }\n\n  // Set styles only for focus state on disabled list item.\n  :not(.mdc-list--non-interactive) > .mdc-list-item--disabled {\n    @include mdc-ripple-surface($query: $query);\n    @include mdc-ripple-radius-bounded($query: $query);\n    @include mdc-states-base-color(mdc-theme-prop-value(on-surface), $query: $query);\n    @include mdc-states-focus-opacity(mdc-states-opacity(primary, focus), $query: $query);\n  }\n}\n\n@mixin mdc-list-item-primary-text-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  @include mdc-feature-targets($feat-color) {\n    @include mdc-theme-prop(color, $color);\n  }\n}\n\n@mixin mdc-list-item-secondary-text-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-item__secondary-text {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n}\n\n@mixin mdc-list-item-graphic-fill-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, $color);\n    }\n  }\n}\n\n@mixin mdc-list-item-graphic-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-item__graphic {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n}\n\n@mixin mdc-list-item-meta-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-item__meta {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n}\n\n@mixin mdc-list-item-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {\n  .mdc-list-item {\n    @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n@mixin mdc-list-divider-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-divider {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin mdc-list-group-subheader-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-list-group__subheader {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n}\n\n//\n// Private\n//\n\n@mixin mdc-list-base_($query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n  $feat-typography: mdc-feature-create-target($query, typography);\n\n  @include mdc-typography(subtitle1, $query);\n\n  @include mdc-feature-targets($feat-typography) {\n    // According to the mocks and stickersheet, the line-height is\n    // adjusted to 24px for text content, same as for body1.\n    /* @alternate */\n    line-height: map-get(map-get($mdc-typography-styles, body1), line-height);\n  }\n\n  @include mdc-feature-targets($feat-structure) {\n    margin: 0;\n    padding: 8px 0;\n    list-style-type: none;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  @include mdc-list-item-primary-text-ink-color(text-primary-on-background, $query);\n}\n\n@mixin mdc-list-item-base_ {\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  height: 48px;\n  padding: 0 $mdc-list-side-padding;\n  overflow: hidden;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ripple styles for an interactive list item (one that is enabled and inside an interactive list).\n@mixin mdc-list-item-interactive-ripple_($query: mdc-feature-all()) {\n  @include mdc-ripple-surface($query);\n  @include mdc-ripple-radius-bounded($query: $query);\n  @include mdc-states(mdc-theme-prop-value(on-surface), false, $query);\n  @include mdc-states-activated(primary, false, $query);\n  @include mdc-states-selected(primary, false, $query);\n}\n\n// Sets the width and height of the graphic element, as well as calculates the margins for\n// the graphic element such that the text is always offset by 72px, which is defined within\n// the spec.\n@mixin mdc-list-graphic-size_($size) {\n  $text-offset: 72px;\n  $side-padding: $mdc-list-side-padding;\n  $margin-value: $text-offset - $side-padding - $size;\n\n  @include mdc-rtl-reflexive-box(margin, right, $margin-value, \".mdc-list-item\");\n\n  width: $size;\n  height: $size;\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 \"./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 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()) {\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      #{$key}: $value;\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 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/theme/variables\";\n\n// Colors\n$mdc-drawer-title-ink-color: mdc-theme-prop-value(on-surface) !default;\n$mdc-drawer-subtitle-ink-color: mdc-theme-prop-value(on-surface) !default;\n$mdc-drawer-item-inactive-ink-color: mdc-theme-prop-value(on-surface) !default;\n$mdc-drawer-item-activated-ink-color: mdc-theme-prop-value(primary) !default;\n$mdc-drawer-divider-color: mdc-theme-prop-value(on-surface) !default;\n$mdc-drawer-surface-fill-color: mdc-theme-prop-value(surface) !default;\n\n// Opacity\n$mdc-drawer-title-ink-opacity: mdc-theme-text-emphasis(high) !default;\n$mdc-drawer-subtitle-ink-opacity: mdc-theme-text-emphasis(medium) !default;\n$mdc-drawer-item-inactive-icon-ink-opacity: mdc-theme-text-emphasis(medium) !default;\n$mdc-drawer-item-inactive-text-ink-opacity: mdc-theme-text-emphasis(high) !default;\n$mdc-drawer-item-active-icon-ink-opacity: 1 !default;\n$mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high) !default;\n$mdc-drawer-divider-opacity: .12 !default;\n\n// Widths\n$mdc-drawer-width: 256px !default;\n$mdc-drawer-list-item-spacing: 4px !default;\n$mdc-drawer-surface-padding: 16px !default;\n\n// Animations\n$mdc-drawer-animation-enter: 250ms !default;\n$mdc-drawer-animation-exit: 200ms !default;\n\n// Scrim\n$mdc-drawer-modal-scrim-color: mdc-theme-prop-value(on-surface) !default;\n$mdc-drawer-modal-scrim-opacity: .32 !default;\n\n$mdc-drawer-z-index: 6 !default;\n$mdc-drawer-modal-elevation: 16 !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"],"sourceRoot":""}