@material/grid-list/dist/mdc.grid-list.css.map

The Material Components for the web grid list component

{"version":3,"sources":["webpack:///./packages/mdc-grid-list/mdc-grid-list.scss","webpack:///./packages/mdc-grid-list/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_mixins.scss"],"names":[],"mappings":";;;;;;;AA6NE;EAEI;CA7NL;;AAqOC;EAEI;EACA;CAnOL;;AAuOC;EAEI;EACA;CArOL;;AAyOC;EAEI;CAvOL;;AAsBC;EAEI;EACA;EACA;CApBL;;AAiNC;EAEI;EACA;CA/ML;AAmNC;EAEI;EACA;CAlNL;AAsNC;EAEI;CArNL;;AA2LC;EAEI;CAzLL;;AAuLC;EAEI;CArLL;;AAmLC;EAEI;CAjLL;;AA+KC;EAEI;CA7KL;;AA2KC;EAEI;CAzKL;;AAkBC;EAEI;EACA;EACA;EACA,aCvDqB;EDwDrB;CAhBL;;AAoBC;EEmCI,uBA1BM;EA6CJ;EACA;EApBF,2BA1BM;EA6CJ;EACA;EFhDF;EACA;CAjBL;;AAqBC;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAnBL;;AAuBC;EEQI,0BA1BM;EA6CJ;EACA;EApBF,YA1BM;EA6CJ;EACA;EFrBF;EACA;EACA;EACA,aC9FuC;ED+FvC,cCjGiC;CD6EtC;;AAwBC;EGtDE;EACA;EACA;EHwDE;EACA;EACA;EACA;EACA;EAIA;CAxBL;;AA4BC;EGjFM,gCATQ;EASR,mCATQ;EASR,oCATQ;EASR,gBATQ;EASR,qBATQ;EASR,iBATQ;EASR,2BATQ;EASR,yBATQ;EASR,wBATQ;EAoBZ;EACA;EACA;EHyEE;EACA;EACA;EACA;CAjBL;;AAqBC;EAEI;EACA;EACA;CAnBL;;AAyBC;EAEI,aC1IuC;CDmH5C;;AA2BC;EAEI;EACA;CAzBL;;AA8BG;EIwGA;EAGF;EAHE;EAGF;CJlID;AI/EO;EA8MJ;EAGF;EAHE;EAGF;CJ5HD;;AA4BG;EI6FA;EAGF;EAHE;EAGF;EJ5FM,gBCpKiC;CD4IxC;AI7FO;EA8MJ;EAGF;EAHE;EAGF;CJ9GD;;AAwBG;EImFA;EAGF;EAHE;EAGF;CJvGD;AI1GO;EA8MJ;EAGF;EAHE;EAGF;CJjGD;;AAsBG;EIwEA;EAGF;EAHE;EAGF;EJvEM,gBCzLiC;CDuKxC;AIxHO;EA8MJ;EAGF;EAHE;EAGF","file":"mdc.grid-list.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/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/rtl/mixins\";\n@import \"@material/theme/mixins\";\n@import \"@material/typography/mixins\";\n@import \"./variables\";\n\n@mixin mdc-grid-list-core-styles($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  // postcss-bem-linter: define grid-list\n  @include mdc-grid-list-tile-aspect(1, $query: $query);\n  @include mdc-grid-list-tile-gutter(4px, $query: $query);\n\n  .mdc-grid-list__tiles {\n    @include mdc-feature-targets($feat-structure) {\n      display: flex;\n      flex-flow: row wrap;\n      padding: 0;\n    }\n  }\n\n  .mdc-grid-list--tile-gutter-1 {\n    @include mdc-grid-list-tile-gutter(1px, $query: $query);\n  }\n\n  .mdc-grid-list--tile-aspect-16x9 {\n    @include mdc-grid-list-tile-aspect(16 / 9, $query: $query);\n  }\n\n  .mdc-grid-list--tile-aspect-3x2 {\n    @include mdc-grid-list-tile-aspect(3 / 2, $query: $query);\n  }\n\n  .mdc-grid-list--tile-aspect-2x3 {\n    @include mdc-grid-list-tile-aspect(2 / 3, $query: $query);\n  }\n\n  .mdc-grid-list--tile-aspect-4x3 {\n    @include mdc-grid-list-tile-aspect(4 / 3, $query: $query);\n  }\n\n  .mdc-grid-list--tile-aspect-3x4 {\n    @include mdc-grid-list-tile-aspect(3 / 4, $query: $query);\n  }\n  // postcss-bem-linter: end\n\n  // postcss-bem-linter: define grid-tile\n  .mdc-grid-tile {\n    @include mdc-feature-targets($feat-structure) {\n      display: block;\n      position: relative;\n      /* @alternate */\n      width: $mdc-grid-list-tile-width;\n      width: var(--mdc-grid-list-tile-width, $mdc-grid-list-tile-width);\n    }\n  }\n\n  .mdc-grid-tile__primary {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, background);\n      @include mdc-theme-prop(color, text-primary-on-background);\n    }\n\n    @include mdc-feature-targets($feat-structure) {\n      position: relative;\n      height: 0;\n    }\n  }\n\n  .mdc-grid-tile__primary-content {\n    @include mdc-feature-targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: cover;\n    }\n  }\n\n  .mdc-grid-tile__secondary {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, primary);\n      @include mdc-theme-prop(color, on-primary);\n    }\n\n    @include mdc-feature-targets($feat-structure) {\n      position: absolute;\n      bottom: 0;\n      box-sizing: border-box;\n      height: $mdc-grid-list-oneline-cap-secondary-height;\n      padding: $mdc-grid-list-tile-secondary-padding;\n    }\n  }\n\n  .mdc-grid-tile__title {\n    @include mdc-typography-overflow-ellipsis($query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: block;\n      margin: 0;\n      padding: 0;\n      font-size: 1rem;\n      line-height: 1rem;\n    }\n\n    @include mdc-feature-targets($feat-typography) {\n      font-weight: #{map-get($mdc-typography-font-weight-values, medium)};\n    }\n  }\n\n  .mdc-grid-tile__support-text {\n    @include mdc-typography(subtitle1, $query: $query);\n    @include mdc-typography-overflow-ellipsis($query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: block;\n      margin: 0;\n      margin-top: 4px;\n      padding: 0;\n    }\n  }\n\n  .mdc-grid-tile__icon {\n    @include mdc-feature-targets($feat-structure) {\n      position: absolute;\n      top: calc(50% - #{$mdc-grid-list-tile-secondary-icon-size} / 2);\n      font-size: 0;\n    }\n  }\n  // postcss-bem-linter: end\n\n  // Linter disabled because we are nesting grid-tile under grid-list.\n  .mdc-grid-list--twoline-caption .mdc-grid-tile__secondary {\n    @include mdc-feature-targets($feat-structure) {\n      height: $mdc-grid-list-twoline-cap-secondary-height;\n    }\n  }\n\n  .mdc-grid-list--header-caption .mdc-grid-tile__secondary {\n    @include mdc-feature-targets($feat-structure) {\n      top: 0;\n      bottom: auto;\n    }\n  }\n\n  .mdc-grid-list--with-icon-align-start {\n    .mdc-grid-tile__secondary {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-rtl-reflexive-property(\n          padding,\n          $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size,\n          $mdc-grid-list-tile-secondary-padding-narrow,\n          \".mdc-grid-list\"\n        );\n      }\n    }\n\n    .mdc-grid-tile__icon {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-rtl-reflexive-position(left, $mdc-grid-list-tile-secondary-padding, \".mdc-grid-list\");\n\n        font-size: $mdc-grid-list-tile-secondary-icon-size;\n      }\n    }\n  }\n\n  .mdc-grid-list--with-icon-align-end {\n    .mdc-grid-tile__secondary {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-rtl-reflexive-property(\n          padding,\n          $mdc-grid-list-tile-secondary-padding,\n          $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size,\n          \".mdc-grid-list\"\n        );\n      }\n    }\n\n    .mdc-grid-tile__icon {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-rtl-reflexive-position(right, $mdc-grid-list-tile-secondary-padding, \".mdc-grid-list\");\n\n        font-size: $mdc-grid-list-tile-secondary-icon-size;\n      }\n    }\n  }\n}\n\n@mixin mdc-grid-list-tile-aspect($width-height-ratio, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-grid-tile__primary {\n    @include mdc-feature-targets($feat-structure) {\n      padding-bottom: calc(100% / #{$width-height-ratio});\n    }\n  }\n}\n\n@mixin mdc-grid-list-tile-gutter($gutter-width, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-grid-tile {\n    @include mdc-feature-targets($feat-structure) {\n      margin: $gutter-width/2 0;\n      padding: 0 $gutter-width/2;\n    }\n  }\n\n  .mdc-grid-tile__secondary {\n    @include mdc-feature-targets($feat-structure) {\n      left: $gutter-width/2;\n      width: calc(100% - #{$gutter-width});\n    }\n  }\n\n  .mdc-grid-list__tiles {\n    @include mdc-feature-targets($feat-structure) {\n      margin: $gutter-width/2 auto;\n    }\n  }\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-grid-list-tile-width: 200px !default;\n$mdc-grid-list-tile-secondary-padding: 16px !default;\n$mdc-grid-list-tile-secondary-padding-narrow: 8px !default;\n$mdc-grid-list-oneline-cap-secondary-height: 48px !default;\n$mdc-grid-list-twoline-cap-secondary-height: 68px !default;\n$mdc-grid-list-tile-secondary-icon-size: 24px !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 \"./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/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 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"],"sourceRoot":""}