{"version":3,"sources":["pfe-dropdown-item.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-dropdown-item.css","../../../node_modules/@patternfly/patternfly/sass-utilities/colors.scss","../../pfe-sass/mixins/_custom-properties.scss"],"names":[],"mappings":"AAeA;EACE,qFAAiB;EACjB,cAAc;EACd,WAAW;EACX,wCC4DkC;ED5DlC,oRC4DkC;ED3DlC,cC2DkC;ED3DlC,0CC2DkC;ED1DlC,eC0DkC;ED1DlC,8EC0DkC;EDzDlC,gBCyDkC;EDzDlC,iDCyDkC;EDxDlC,gBCwDkC;EDxDlC,gFCwDkC;EDvDlC,gBCuDkC;EDvDlC,gDCuDkC;EDtDlC,mBAAmB;EACnB,8BAAsB;UAAtB,sBAAsB;EACtB,qBAAqB;EACrB,oBCSkC;EDTlC,mDCSkC;EDRlC,eAAe;AEdjB;;AFiBA;EACE,6BC8CkC;ED9ClC,mEC8CkC;ED7ClC,YC6CkC;ED7ClC,yCC6CkC;AC3DpC;;AFiBA;EAII,yBCsCgC;EDtChC,iHCsCgC;EDrChC,cCqCgC;EDrChC,iDCqCgC;ACtDpC;;AFoBE;EACE,WAAW;EACX,yBG5CoC;AD2BxC;;AFoBE;EAKE,oBAAoB;EI6ClB,8BAA8C;AFjEpD","file":"pfe-dropdown-item.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n@import \"_shared-assets\";\n\n$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n  FontSize: pfe-var(FontSize--md),\n  FontWeight: 400,\n  LineHeight: pfe-var(line-height),\n  Color: $pf-color-black-1000,\n  Color--hover: $pf-color-black-900,\n  TextAlign: left,\n  BackgroundColor: transparent,\n  BackgroundColor--hover: pfe-var(surface--lighter),\n  Border: none,\n));\n\n::slotted(*) {\n  --pf-c--FontSize: #{pfe-local(FontSize)};\n  display: block;\n  width: 100%;\n  padding: pfe-local(spacing--vertical) pfe-local(spacing--horizontal);\n  color: pfe-local(Color);\n  font-size: pfe-local(FontSize);\n  font-weight: pfe-local(FontWeight);\n  line-height: pfe-local(LineHeight);\n  text-align: pfe-local(TextAlign);\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-decoration: none;\n  font-family: pfe-var(font-family, $fallback: inherit);\n  cursor: pointer;\n}\n\n::slotted(button) {\n  background-color: pfe-local(BackgroundColor);\n  border: pfe-local(Border);\n}\n\n.pfe-dropdown-item__container {\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: pfe-local(BackgroundColor--hover);\n    color: pfe-local(Color--hover);\n  }\n\n  :host([item-type=\"separator\"]) & {\n    height: 1px;\n    background-color: $pf-color-black-200;\n  }\n\n  :host([disabled]) & {\n    $disabled: (\n      Color: $pf-color-black-600\n    );\n  \n    pointer-events: none;\n    @include pfe-print-local($disabled);\n  }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category  - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map  - Sass map of variables\n/// @param {String} $fallback [null]  - Optional fallback override\n/// @param {Boolean} $use-fallback [true]  - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n    // Start building the variable declaration\n    $var-declaration: \"--#{$prefix}--\";\n    @if $prefix == \"pf-c\" {\n        $var-declaration: \"--#{$prefix}-\";  // one dash at the end\n    }\n    // If the category exists, inject that into the string\n    @if $category != \"\" {\n        $var-declaration: \"#{$var-declaration}#{$category}--\";\n    }\n    // Append the key to the string\n    $var-declaration: \"#{$var-declaration}#{$key}\";\n\n    // If the fallback is not provided but use-fallback is set to true\n    @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n        $fallback: map-get($map, $key);\n    }\n    @if $fallback != null {\n        // Create the variable declaration\n        $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n    }\n\n    // Return the variable declaration string\n    @return var(#{$var-declaration});   \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n///   :host {\n///       padding-top:      #{pfe-local(paddingTop)};\n///       padding-bottom:   #{pfe-local(paddingBottom)};\n///   }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n    // If a fallback is not defined, use the global variables map\n    @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n        @if $region == null {\n            $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n        }\n        @else {\n            $submap: map-get($LOCAL-VARIABLES, $region);\n            @if type-of($submap) == \"map\" {\n                $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n            }\n        }\n    }\n\n    // If a region value exists, build the region string\n    @if $region != null {\n        $region: \"__#{$region}\";\n    }\n\n    // Start building the variable declaration\n    $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n    \n    @if $fallback != null {\n        $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n    }\n\n    // Return the variable declaration string\n    @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n///   :host {\n///     color: pfe-broadcasted(link);\n///   }\n/// @example - css\n///   :host {\n///     color: var(--pfe-broadcasted--link, #06c);\n///   }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n    $fallback: \"\";\n    @if $use-fallback {\n        $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n    }\n    @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n      @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n    }\n    @else {\n      @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n    }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n///   .my-element {\n///     z-index: pfe-zindex( content );\n///   }\n\n@function pfe-zindex($cssvar) {\n    $var-name: to-string($cssvar, \"--\");\n    @if map-get($pfe-zindex, $var-name) != null {\n        @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n    }\n    @else {\n        @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n    }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n///   .my-element {\n///     background-color: pfe-fetch( ui-base );\n///   }\n@function pfe-fetch($name, $region: null) {\n    $var-name: to-string($name, \"--\");\n    @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n        @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n    }\n    @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n        @return map-get($LOCAL-VARIABLES, $var-name);\n    }\n    @else if map-get($pfe-vars, $var-name) != null {\n        @return map-get($pfe-vars, $var-name);\n    }\n    @else if map-get($pfe-colors, $var-name) != null {\n        @return map-get($pfe-colors, $var-name);\n    }\n    @else if map-get($pfe-broadcasted, $var-name) != null {\n        @return map-get($pfe-broadcasted, $var-name);\n    }\n    @else if map-get($pfe-typography-base, $var-name) != null {\n        @return map-get($pfe-typography-base, $var-name);\n    }\n\n    // PATTERNFLY CORE\n    @else if map-get($pf-type-sizing, $var-name) != null {\n        @return map-get($pf-type-sizing, $var-name);\n    }\n    @else if map-get($pf-type-sizing--component, $var-name) != null {\n        @return map-get($pf-type-sizing--component, $var-name);\n    }\n    @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n        @return map-get($pf-type-sizing--modifers, $var-name);\n    }\n    @else if map-get($pf-type-sizing--content, $var-name) != null {\n        @return map-get($pf-type-sizing--content, $var-name);\n    }\n    // DEPRECATED\n    @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n        @return map-get($pfe-typography-base-deprecated, $var-name);\n    }\n    @else if map-get($pfe-typography-deprecated, $var-name) != null {\n        @return map-get($pfe-typography-deprecated, $var-name);\n    }\n    @else {\n        @error \"#{$var-name} could not be found.\";\n    }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n///   .my-element {\n///     padding:     pfe-var( container-spacer );\n///     font-size:   pfe-var( font-size );\n///   }\n/// @example - css Rendered output\n///   .my-element {\n///      padding: var(--pfe-theme--container-spacer, 16px);\n///      font-size: var(--pfe-theme--font-size, 16px);\n///   }\n@function pfe-var($cssvar, $fallback: null) {\n    $var-name: to-string($cssvar, \"--\");\n    @if map-get($pfe-vars, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n    }\n    @else if map-get($pfe-colors, $var-name) != null {\n        @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n    }\n    @else if map-get($pfe-broadcasted, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n    }\n    @else if map-get($pfe-typography-base, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n    }\n    // PATTERNFLY CORE:\n    @else if map-get($pf-type-sizing, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n    }\n    @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n    }\n    @else if map-get($pf-type-sizing--content, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n    }\n    // PFE components (must be below core)\n    @else if map-get($pf-type-sizing--component, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n    }\n\n    // DEPRECATED:\n    @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n    }\n    @else if map-get($pfe-typography-deprecated, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n    }\n\n    @else {\n        @error \"#{$var-name} could not be found.\";\n    }\n}","::slotted(*) {\n  --pf-c--FontSize: var(--pfe-dropdown--FontSize, var(--pf-global--FontSize--md, 1rem));\n  display: block;\n  width: 100%;\n  padding: var(--pfe-dropdown--spacing--vertical, var(--pfe-dropdown--SpacingHorizontal, calc(var(--pfe-theme--container-padding, 1rem) * .5))) var(--pfe-dropdown--spacing--horizontal, var(--pfe-dropdown--SpacingHorizontal, calc(var(--pfe-theme--container-padding, 1rem) * .5)));\n  color: var(--pfe-dropdown--Color, #030303);\n  font-size: var(--pfe-dropdown--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pfe-dropdown--FontWeight, 400);\n  line-height: var(--pfe-dropdown--LineHeight, var(--pfe-theme--line-height, 1.5));\n  text-align: var(--pfe-dropdown--TextAlign, left);\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-decoration: none;\n  font-family: var(--pfe-theme--font-family, inherit);\n  cursor: pointer;\n}\n\n::slotted(button) {\n  background-color: var(--pfe-dropdown--BackgroundColor, transparent);\n  border: var(--pfe-dropdown--Border, none);\n}\n\n.pfe-dropdown-item__container:hover, .pfe-dropdown-item__container:focus, .pfe-dropdown-item__container:active {\n  background-color: var(--pfe-dropdown--BackgroundColor--hover, var(--pfe-theme--color--surface--lighter, #f0f0f0));\n  color: var(--pfe-dropdown--Color--hover, #151515);\n}\n\n:host([item-type=\"separator\"]) .pfe-dropdown-item__container {\n  height: 1px;\n  background-color: #f0f0f0;\n}\n\n:host([disabled]) .pfe-dropdown-item__container {\n  pointer-events: none;\n  --pfe-dropdown--Color: #6a6e73;\n}\n","// Colors\n$pf-color-black-100:             #fafafa !default;\n$pf-color-black-150:             #f5f5f5 !default;\n$pf-color-black-200:             #f0f0f0 !default;\n$pf-color-black-300:             #d2d2d2 !default;\n$pf-color-black-400:             #b8bbbe !default;\n$pf-color-black-500:             #8a8d90 !default;\n$pf-color-black-600:             #6a6e73 !default;\n$pf-color-black-700:             #4f5255 !default;\n$pf-color-black-800:             #3c3f42 !default;\n$pf-color-black-850:             #212427 !default;\n$pf-color-black-900:             #151515 !default;\n$pf-color-black-1000:            #030303 !default;\n$pf-color-blue-50:               #e7f1fa !default;\n$pf-color-blue-100:              #bee1f4 !default;\n$pf-color-blue-200:              #73bcf7 !default;\n$pf-color-blue-300:              #2b9af3 !default;\n$pf-color-blue-400:              #06c !default;\n$pf-color-blue-500:              #004080 !default;\n$pf-color-blue-600:              #002952 !default;\n$pf-color-blue-700:              #001223 !default;\n$pf-color-cyan-50:               #f2f9f9 !default;\n$pf-color-cyan-100:              #a2d9d9 !default;\n$pf-color-cyan-200:              #73c5c5 !default;\n$pf-color-cyan-300:              #009596 !default;\n$pf-color-cyan-400:              #005f60 !default;\n$pf-color-cyan-500:              #003737 !default;\n$pf-color-cyan-600:              #002323 !default;\n$pf-color-cyan-700:              #000f0f !default;\n$pf-color-gold-50:               #fdf7e7 !default;\n$pf-color-gold-100:              #f9e0a2 !default;\n$pf-color-gold-200:              #f6d173 !default;\n$pf-color-gold-300:              #f4c145 !default;\n$pf-color-gold-400:              #f0ab00 !default;\n$pf-color-gold-500:              #c58c00 !default;\n$pf-color-gold-600:              #795600 !default;\n$pf-color-gold-700:              #3d2c00 !default;\n$pf-color-green-50:              #f3faf2 !default;\n$pf-color-green-100:             #bde5b8 !default;\n$pf-color-green-200:             #95d58e !default;\n$pf-color-green-300:             #6ec664 !default;\n$pf-color-green-400:             #5ba352 !default;\n$pf-color-green-500:             #3e8635 !default;\n$pf-color-green-600:             #1e4f18 !default;\n$pf-color-green-700:             #0f280d !default;\n$pf-color-light-blue-100:        #beedf9 !default;\n$pf-color-light-blue-200:        #7cdbf3 !default;\n$pf-color-light-blue-300:        #35caed !default;\n$pf-color-light-blue-400:        #00b9e4 !default;\n$pf-color-light-blue-500:        #008bad !default;\n$pf-color-light-blue-600:        #005c73 !default;\n$pf-color-light-blue-700:        #002d39 !default;\n$pf-color-light-green-100:       #e4f5bc !default;\n$pf-color-light-green-200:       #c8eb79 !default;\n$pf-color-light-green-300:       #ace12e !default;\n$pf-color-light-green-400:       #92d400 !default;\n$pf-color-light-green-500:       #6ca100 !default;\n$pf-color-light-green-600:       #486b00 !default;\n$pf-color-light-green-700:       #253600 !default;\n$pf-color-orange-100:            #f4b678 !default;\n$pf-color-orange-200:            #ef9234 !default;\n$pf-color-orange-300:            #ec7a08 !default;\n$pf-color-orange-400:            #c46100 !default;\n$pf-color-orange-500:            #8f4700 !default;\n$pf-color-orange-600:            #773d00 !default;\n$pf-color-orange-700:            #3b1f00 !default;\n$pf-color-purple-50:             #f2f0fc !default;\n$pf-color-purple-100:            #cbc1ff !default;\n$pf-color-purple-200:            #b2a3ff !default;\n$pf-color-purple-300:            #a18fff !default;\n$pf-color-purple-400:            #8476d1 !default;\n$pf-color-purple-500:            #6753ac !default;\n$pf-color-purple-600:            #40199a !default;\n$pf-color-purple-700:            #1f0066 !default;\n$pf-color-red-50:                #faeae8 !default;\n$pf-color-red-100:               #c9190b !default;\n$pf-color-red-200:               #a30000 !default;\n$pf-color-red-300:               #7d1007 !default;\n$pf-color-red-400:               #470000 !default;\n$pf-color-red-500:               #2c0000 !default;\n$pf-color-white:                 #fff !default;\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] -  Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n///    :host {\n///      @include pfe-set-broadcast-context(dark);\n///    }\n/// @example - css - Rendered output\n///   :host {\n///     --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n///     --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n///     --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n///     --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n///     --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n///     --pfe-broadcasted--link-decoration: none;\n///     --pfe-broadcasted--link-decoration--hover: underline;\n///     --pfe-broadcasted--link-decoration--focus: underline;\n///     --pfe-broadcasted--link-decoration--visited: none;\n///   }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n  @each $type in $broadcast {\n    $list: ();\n    $string: \"\";\n    $context_string: \"\";\n    $state: \"\";\n\n    @if str-starts-with($type, \"link\") {\n      $list: append($list, \"#{$type}\");\n\n      @each $s in (hover, focus, visited) {\n        $state: \"--#{$s}\";\n        $string: \"#{$type}#{$state}\";\n\n        @if not index($list, $string) {\n          $list: append($list, \"#{$type}#{$state}\");\n        }\n      }\n    } @else {\n      @if not index($list, $string) {\n        $list: append($list, \"#{$type}\");\n      }\n    }\n\n    @if index($CONTEXTS, $context) != null {\n      @if $context != \"light\" {\n        $context_string: \"--on-#{$context}\";\n      }\n    }\n\n    @each $item in $list {\n      @if not index($BROADCAST-VARS, $type) {\n        @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n      } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n        @warn \"#{$item}#{$context_string} value does not currently exist.\";\n      } @else {\n        @if index($CONTEXTS, $context) != null {\n          --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n        } @else {\n          @error \"The #{$context} context does not appear to be part of a supported context.\";\n        }\n      }\n    }\n  }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n///   :host {\n///       padding-top:      pfe-local(paddingTop);\n///       padding-bottom:   pfe-local(paddingBottom);\n///   }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n  @each $property, $value in $map {\n    $name: \"--#{$property}\";\n    $styles: $value;\n\n    @if type-of($value) == \"map\" {\n      @each $prop, $v in $value {\n        $name: \"__#{$property}--#{$prop}\";\n        $styles: $v;\n\n        // Print the variable definition\n        --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n      }\n    } @else {\n      // Print the variable definition\n      --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n    }\n  }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n///   $LOCAL: band;\n///   @include pfe-surfaces;\n/// @example - css - Rendered result\n///   :host([color=\"darker\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n///     --context: dark;\n///   }\n///   :host([color=\"darkest\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n///     --context: dark;\n///   }\n///   :host([color=\"base\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n///     --context: light;\n///   }\n///   :host([color=\"lighter\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n///     --context: light;\n///   }\n///   :host([color=\"lightest\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n///     --context: light;\n///   }\n///   :host([color=\"accent\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n///     --context: saturated;\n///   }\n///   :host([color=\"complement\"]) {\n///     --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n///     --context: saturated;\n///   }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n  @each $color in $surfaces {\n    $context: #{pfe-get-context(surface--#{$color}--context)};\n    :host([#{$attr-name}=\"#{$color}\"]) {\n      @include pfe-print-local(\n        (\n          BackgroundColor: pfe-var(surface--#{$color}),\n          context: pfe-var(surface--#{$color}--context, #{$context})\n        )\n      );\n      @extend %fallback-surface;\n    }\n  }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n///   @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n///   :host([on=\"dark\"]) {\n///     --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n///     --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n///     --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n///     --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n///     --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n///     --pfe-broadcasted--link-decoration: none;\n///     --pfe-broadcasted--link-decoration--hover: underline;\n///     --pfe-broadcasted--link-decoration--focus: underline;\n///     --pfe-broadcasted--link-decoration--visited: none;\n///   }\n///   @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n///     :host([on=\"dark\"]) {\n///       color: #fff;\n///       color: var(--pfe-theme--color--text--on-dark, #fff);\n///     }\n///   }\n///   // ...as well as all the values for :host([on=\"saturated\"])  and  :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n  // Helper attributes to aid in theming\n  @each $context in $contexts {\n    :host([on=\"#{$context}\"]) {\n      @include pfe-set-broadcast-context($context);\n    }\n  }\n  @if $ie-fallback {\n    :host {\n      @extend %fallback-text;\n    }\n  }\n}\n"],"sourceRoot":"../src"}