{"version":3,"sources":["pfe-modal.scss","../../pfe-sass/extends/_extends.scss","pfe-modal.css","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_custom-properties.scss"],"names":[],"mappings":"AAuHE;ECtGA,6BAA6B;EAC7B,YAAY;EACZ,SAAS;EACT,UAAU;EACV,gBAAgB;ACflB;;AFkBA;EACC,cAAc;EACd,kBAAkB;AEfnB;;AFmBC;EACC,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,eAAe;EACf,YAAY;EACZ,WAAW;EACX,MAAM;EACN,OAAO;EACP,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,wBAAuB;EAAvB,+BAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,WGHkC;EHGlC,4CGHkC;ADbpC;;AFME;EAaC,aAAa;AEfhB;;AFkBC;EACC,eAAe;EACf,YAAY;EACZ,WAAW;EACX,MAAM;EACN,OAAO;EACP,uCG2BkC;EH3BlC,qHG2BkC;EH1BlC,eAAe;AEfjB;;AFQE;EAUC,aAAa;AEdhB;;AFiBC;EACC,2CAAU;EIKF,+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;EJFvE,kBAAkB;EAClB,eGekC;EHflC,mDGekC;EHdlC,YGckC;EHdlC,wCGckC;EHblC,gBGakC;EHblC,6CGakC;EHZlC,cAAc;EACd,oHG/BkC;UH+BlC,4GG/BkC;EH+BlC,sJG/BkC;UH+BlC,8IG/BkC;EHgClC,sBGhCkC;EHgClC,kEGhCkC;EHiClC,cGjCkC;EHiClC,6CGjCkC;EHkClC,kBGlCkC;EHkClC,uDGlCkC;AD4BpC;;AFQE;EAdD;IAeE,2BAA6D;IAA7D,sFAA6D;EEJ9D;AACF;;AFKE;EACC,2BGEiC;EHFjC,8DGEiC;ADJpC;;AFKE;EACC,6BGFiC;EHEjC,iEGFiC;ADApC;;AFKE;EACC,2BGNiC;EHMjC,8DGNiC;ADIpC;;AFKC;EACC,kBAAkB;EAClB,mBAAmB;AEFrB;;AFAE;EAKC,aAAa;AEDhB;;AFIC;EACC,gBAAgB;EAChB,yBAA4B;MAA5B,4BAA4B;EAC5B,gBGpBkC;EHoBlC,6CGpBkC;EHqBlC,sEGrBkC;EHqBlC,qPGrBkC;EHsBlC,8BAAsB;UAAtB,sBAAsB;AEDxB;;AFGE;EAPD;IAQE,sCGzBiC;IHyBjC,qNGzBiC;ED0BlC;AACF;;AFCE;;EAIE,wBAAwB;AEA5B;;AFfE;EAoBC,wBAAwB;AED3B;;AFIC;EAEC,kBAAkB;EAClB,qBAA+C;EAA/C,0DAA+C;EAC/C,uBAAiD;EAAjD,4DAAiD;EACjD,eAAe;EACf,eAAe;EACf,aGzFkC;EHyFlC,kDGzFkC;ADuFpC;;AFIE;EATD;IAUE,SG5FiC;IH4FjC,8CG5FiC;IH6FjC,WG7FiC;IH6FjC,gDG7FiC;ED6FlC;AACF;;AFEE;EAdD;IAeE,mBAA6C;IAA7C,wDAA6C;IAC7C,qBAA+C;IAA/C,0DAA+C;EEEhD;AACF;;AFnBE;EAoBC,aGtGiC;EHsGjC,4CGtGiC;EHuGjC,YGvGiC;EHuGjC,iDGvGiC;EHwGjC,WGxGiC;EHwGjC,gDGxGiC;EHyGjC,wBG/DiC;EH+DjC,4FG/DiC;EHgEjC,uBGhEiC;EHgEjC,2FGhEiC;ADmEpC","file":"pfe-modal.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: modal;\n\n$pfe-modal--breakpoint--medium: 640px;\n\n$LOCAL-VARIABLES: (\n\tcontext: light,\n\tMaxHeight: 90vh,\n\tMaxWidth: 70vw,\n\tMaxWidth--mobile: 94vw,\n\tMaxWidth--small: #{\"min(35rem, 94vw)\"},\n\tMaxWidth--medium: #{\"min(52.5rem, 94vw)\"},\n\tMaxWidth--large: #{\"min(70rem, 94vw)\"},\n\tMinWidth: 0,\n\tPadding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 3.5) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2),\n\toverlay: (\n\t\tBackgroundColor: pfe-var(overlay)\n\t),\n\tclose: (\n\t\tsize: calc(#{pfe-var(ui--element--size)} - 4px)\n\t)\n);\n\n:host {\n\tdisplay: block;\n\tposition: relative;\n}\n\n.pfe-modal {\n\t&__outer {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: pfe-zindex(modal);\n\n\t\t&[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__overlay {\n\t\tposition: fixed;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: pfe-local(BackgroundColor, $region: overlay);\n\t\tcursor: pointer;\n\n\t\t&[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__window {\n\t\t--context: #{pfe-local(context)};\n\t\t@include pfe-set-broadcast-context(#{pfe-fetch(context)});\n\n\t\tposition: relative;\n\t\tmax-width: pfe-local(MaxWidth--mobile);\n\t\tmin-width: pfe-local(MinWidth);\n\t\tmax-height: pfe-local(MaxHeight);\n\t\tmargin: 0 auto;\n\t\tbox-shadow: pfe-var(box-shadow--lg);\n\t\tbackground-color: pfe-var(surface--lightest);\n\t\tcolor: pfe-var(text);\n\t\tborder-radius: pfe-var(ui--border-radius);\n\n\t\t@media screen and (min-width: $pfe-modal--breakpoint--medium) {\n\t\t\tmax-width: var(--pfe-modal-width, pfe-local(MaxWidth--large));\n\t\t}\n\t\t:host([width=\"small\"]) & {\n\t\t\tmax-width: pfe-local(MaxWidth--small);\n\t\t}\n\n\t\t:host([width=\"medium\"]) & {\n\t\t\tmax-width: pfe-local(MaxWidth--medium);\n\t\t}\n\n\t\t:host([width=\"large\"]) & {\n\t\t\tmax-width: pfe-local(MaxWidth--large);\n\t\t}\n\t}\n\t&__container {\n\t\tposition: relative;\n\t\tmax-height: inherit;\n\n\t\t&[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__content {\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: contain;\n\t\tmax-height: pfe-local(MaxHeight);\n\t\tpadding: pfe-local(Padding);\n\t\tbox-sizing: border-box;\n\n\t\t@media screen and (max-height: $pfe-modal--breakpoint--medium) {\n\t\t\tpadding: pfe-local(Padding, $fallback: pfe-var(container-padding) calc(#{pfe-var(container-padding)} * 3) pfe-var(container-padding) pfe-var(container-padding));\n\t\t}\n\n\t\t:host(:not([has_header])) & {\n\t\t\t// Remove margin-top on the first slotted element that is not the header.\n\t\t\t::slotted(*:nth-child(2)),\n\t\t\t::slotted(*:nth-child(1)) {\n\t\t\t\tmargin-top: 0 !important;\n\t\t\t}\n\t\t}\n\n\t\t::slotted([slot=\"pfe-modal--header\"]) {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\t}\n\t&__close {\n\t\t@extend %reset-button;\n\t\tposition: absolute;\n\t\ttop: \tcalc(#{pfe-var(container-padding)} * .25);\n\t\tright: \tcalc(#{pfe-var(container-padding)} * .25);\n\t\tcursor: pointer;\n\t\tline-height: .5;\n\t\tpadding: pfe-var(container-padding);\n\n\t\t@media screen and (min-width: $pfe-modal--breakpoint--medium) {\n\t\t\ttop: \tpfe-var(container-padding);\n\t\t\tright: \tpfe-var(container-padding);\n\t\t}\n\n\t\t@media screen and (max-height: $pfe-modal--breakpoint--medium) and (min-width: $pfe-modal--breakpoint--medium) {\n\t\t\ttop: \tcalc(#{pfe-var(container-padding)} / 2);\n\t\t\tright: \tcalc(#{pfe-var(container-padding)} / 2);\n\t\t}\n\n\t\t> svg {\n\t\t\tfill: \tpfe-var(text);\n\t\t\theight: pfe-var(ui--element--size);\n\t\t\twidth: \tpfe-var(ui--element--size);\n\t\t\theight: pfe-local(size, $region: close);\n\t\t\twidth: \tpfe-local(size, $region: close);\n\t\t}\n\t}\n}\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n  margin: 0;\n  padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n  background-color: transparent;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\n\n/// Set up a container element\n%container {\n  position: relative;\n  display: block;\n  width: 100%;\n  padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n  @include browser-query(ie11) {\n    background-color: pfe-fetch(surface--lightest) !important;\n    color: pfe-fetch(text) !important;\n  }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n  @include browser-query(ie11) {\n    color: pfe-fetch(text) !important;\n  }\n}\n",".pfe-modal__close {\n  background-color: transparent;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\n\n:host {\n  display: block;\n  position: relative;\n}\n\n.pfe-modal__outer {\n  display: flex;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--pfe-theme--zindex--modal, 99);\n}\n\n.pfe-modal__outer[hidden] {\n  display: none;\n}\n\n.pfe-modal__overlay {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: var(--pfe-modal__overlay--BackgroundColor, var(--pfe-theme--color--overlay, rgba(21, 21, 21, 0.5)));\n  cursor: pointer;\n}\n\n.pfe-modal__overlay[hidden] {\n  display: none;\n}\n\n.pfe-modal__window {\n  --context: var(--pfe-modal--context, light);\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  position: relative;\n  max-width: var(--pfe-modal--MaxWidth--mobile, 94vw);\n  min-width: var(--pfe-modal--MinWidth, 0);\n  max-height: var(--pfe-modal--MaxHeight, 90vh);\n  margin: 0 auto;\n  box-shadow: var(--pfe-theme--box-shadow--lg, 0 0.1875rem 0.4375rem 0.1875rem rgba(3, 3, 3, 0.13), 0 0.6875rem 1.5rem 1rem rgba(3, 3, 3, 0.12));\n  background-color: var(--pfe-theme--color--surface--lightest, #fff);\n  color: var(--pfe-theme--color--text, #151515);\n  border-radius: var(--pfe-theme--ui--border-radius, 2px);\n}\n\n@media screen and (min-width: 640px) {\n  .pfe-modal__window {\n    max-width: var(--pfe-modal-width, var(--pfe-modal--MaxWidth--large, min(70rem, 94vw)));\n  }\n}\n\n:host([width=\"small\"]) .pfe-modal__window {\n  max-width: var(--pfe-modal--MaxWidth--small, min(35rem, 94vw));\n}\n\n:host([width=\"medium\"]) .pfe-modal__window {\n  max-width: var(--pfe-modal--MaxWidth--medium, min(52.5rem, 94vw));\n}\n\n:host([width=\"large\"]) .pfe-modal__window {\n  max-width: var(--pfe-modal--MaxWidth--large, min(70rem, 94vw));\n}\n\n.pfe-modal__container {\n  position: relative;\n  max-height: inherit;\n}\n\n.pfe-modal__container[hidden] {\n  display: none;\n}\n\n.pfe-modal__content {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  max-height: var(--pfe-modal--MaxHeight, 90vh);\n  padding: var(--pfe-modal--Padding, calc(var(--pfe-theme--container-padding, 1rem) * 2) calc(var(--pfe-theme--container-padding, 1rem) * 3.5) calc(var(--pfe-theme--container-padding, 1rem) * 2) calc(var(--pfe-theme--container-padding, 1rem) * 2));\n  box-sizing: border-box;\n}\n\n@media screen and (max-height: 640px) {\n  .pfe-modal__content {\n    padding: var(--pfe-modal--Padding, var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 3) var(--pfe-theme--container-padding, 1rem) var(--pfe-theme--container-padding, 1rem));\n  }\n}\n\n:host(:not([has_header])) .pfe-modal__content ::slotted(*:nth-child(2)),\n:host(:not([has_header])) .pfe-modal__content ::slotted(*:nth-child(1)) {\n  margin-top: 0 !important;\n}\n\n.pfe-modal__content ::slotted([slot=\"pfe-modal--header\"]) {\n  margin-top: 0 !important;\n}\n\n.pfe-modal__close {\n  position: absolute;\n  top: calc(var(--pfe-theme--container-padding, 1rem) * .25);\n  right: calc(var(--pfe-theme--container-padding, 1rem) * .25);\n  cursor: pointer;\n  line-height: .5;\n  padding: var(--pfe-theme--container-padding, 1rem);\n}\n\n@media screen and (min-width: 640px) {\n  .pfe-modal__close {\n    top: var(--pfe-theme--container-padding, 1rem);\n    right: var(--pfe-theme--container-padding, 1rem);\n  }\n}\n\n@media screen and (max-height: 640px) and (min-width: 640px) {\n  .pfe-modal__close {\n    top: calc(var(--pfe-theme--container-padding, 1rem) / 2);\n    right: calc(var(--pfe-theme--container-padding, 1rem) / 2);\n  }\n}\n\n.pfe-modal__close > svg {\n  fill: var(--pfe-theme--color--text, #151515);\n  height: var(--pfe-theme--ui--element--size, 20px);\n  width: var(--pfe-theme--ui--element--size, 20px);\n  height: var(--pfe-modal__close--size, calc(var(--pfe-theme--ui--element--size, 20px) - 4px));\n  width: var(--pfe-modal__close--size, calc(var(--pfe-theme--ui--element--size, 20px) - 4px));\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}","////\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"}