{"version":3,"sources":["pfelement.scss","../../pfe-sass/mixins/_custom-properties.scss","pfelement.css"],"names":[],"mappings":"AAGA;EACE,8BAAsB;EACtB,sBAAmB;EAEnB,kEAA0D;EAA1D,0DAA0D;EC0DlD,+DAA+D;EAA/D,6EAA+D;EAA/D,4DAA+D;EAA/D,6EAA+D;EAA/D,6EAA+D;EAA/D,iFAA+D;EAA/D,2EAA+D;EAA/D,8FAA+D;EAA/D,8FAA+D;EAA/D,6FAA+D;ACnDzE;;AFFA;EACE,UAAU;EACV,kBAAkB;EAClB,uFACU;UADV,+EACU;AEIZ;;AFDA;EACE;IACE,kBAAkB;IAClB,UAAU;EEIZ;EFFA;IACE,mBAAmB;EEIrB;EFFA;IACE,UAAU;IACV,mBAAmB;EEIrB;AACF;;AFfA;EACE;IACE,kBAAkB;IAClB,UAAU;EEIZ;EFFA;IACE,mBAAmB;EEIrB;EFFA;IACE,UAAU;IACV,mBAAmB;EEIrB;AACF","file":"pfelement.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n$LOCAL: pfelement;\n\nbody {\n  --pfe-reveal-duration: 0.1618s;\n  --pfe-reveal-delay: 2s;\n\n  transition: opacity var(--pfe-reveal-duration) ease-in-out;\n\n  @include pfe-set-broadcast-context(light);\n}\n\nbody[unresolved] {\n  opacity: 0;\n  visibility: hidden;\n  animation: reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1\n    forwards;\n}\n\n@keyframes reveal {\n  0% {\n    visibility: hidden;\n    opacity: 0;\n  }\n  1% {\n    visibility: visible;\n  }\n  100% {\n    opacity: 1;\n    visibility: visible;\n  }\n}\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","body {\n  --pfe-reveal-duration: 0.1618s;\n  --pfe-reveal-delay: 2s;\n  transition: opacity var(--pfe-reveal-duration) ease-in-out;\n  --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n  --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\nbody[unresolved] {\n  opacity: 0;\n  visibility: hidden;\n  animation: reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1 forwards;\n}\n\n@keyframes reveal {\n  0% {\n    visibility: hidden;\n    opacity: 0;\n  }\n  1% {\n    visibility: visible;\n  }\n  100% {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n"],"sourceRoot":"../src"}