{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","nomensa-pfe-nav-link.css","../../pfe-sass/variables/_colors.scss","../../pfe-sass/themes/_empirix.scss","nomensa-pfe-nav-link.scss","../../pfe-sass/variables/_crayola.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACvIA,iFAAY;ACGZ;EAME,cAAc;EACd,kBAAkB;AHiBpB;;AGfE;EATF;IAUI,gBAAgB;EHmBlB;AACF;;AG9BA;EAeI,WC0BiC;EDzBjC,qBAAqB;AHmBzB;;AGnCA;EAoBI,SAAS;AHmBb;;AGvCA;;EAyBI,cDAoB;ECCpB,0BAA0B;AHmB9B;;AG7CA;;EA+BI,0CCUiC;EDTjC,cAAc;EAEZ,iCD/BoC;ECgCpC,eAAU;EACV,gBAAW;EAEb,kBAAkB;EAClB,kBAAkB;AHiBtB;;AGbI;EA3CJ;IA6CQ,6BAAkB;IAClB,sBAAW;IAGX,iCD/CkC;ICgDlC,eAAU;IACV,iBAAY;IAEd,mBAAmB;IACnB,iBAAiB;EHarB;AACF;;AGpEA;;;EA6DI,sBDxCsB;AFqD1B;;AGXI;EA/DJ;;;IAiEQ,sBD5CkB;IC6ClB,0BAA0B;IAC1B,WAAW;IACX,WAAW;IACX,OAAO;IACP,kBAAkB;IAClB,SAAS;IACT,WAAW;EHgBjB;AACF;;AGXI;EA9EJ;IA+EM,6BAA6B;IAC7B,eAAe;IACf,eAAe;IACf,UAAU;EHed;AACF;;AGlGA;EAuFI,cAAc;EAEZ,iCDvFoC;ECwFpC,eAAU;EACV,iBAAY;EAEd,gBAAgB;EAChB,oBAAoB;AHaxB;;AGXI;EAhGJ;IAiGM,qBAAqB;IACrB,eAAe;IACf,aAAa;EHejB;AACF;;AGnHA;EAwGI,gBDnFsB;ECoFtB,8BAAsB;UAAtB,sBAAsB;EACtB,YAAY;EACZ,SAAS;EACT,kCAAkC;EAClC,kBAAkB;EAClB,MAAM;EACN,+BAAuB;EAAvB,uBAAuB;EACvB,WAAW;EACX,WAAW;AHef;;AGbI;EAnHJ;IAoHM,aAAa;IACb,YAAY;IACZ,OAAO;IACP,wBAAwB;IACxB,kBAAkB;IAClB,WAAW;IACX,SAAS;EHiBb;AACF;;AG5IA;EA+HI,QAAQ;EACR,yBAAiB;EAAjB,iBAAiB;AHiBrB;;AGbI;EApIJ;IAqIM,cAAc;EHiBlB;AACF;;AGvJA;EA0II,gBAAgB;EAChB,0BAA0B;AHiB9B;;AG5JA;;EAgJI,qBAAqB;AHiBzB;;AGfI;EAlJJ;;IAmJM,aAAa;EHoBjB;AACF;;AGxKA;EAwJI,UAAU;EACV,kBAAkB;EAClB,SAAS;EACT,WAAW;AHoBf;;AG/KA;EAgKM,6BAAkB;EAClB,+DAAoD;EACpD,4BAAiB;EACjB,4BAAiB;EAGjB,kBDjJoB;ECkJpB,uBAAgB;EAElB,cAAc;EACd,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,mBAAmB;EACnB,MAAM;EACN,WAAW;EACX,WAAW;AHgBf;;AGhMA;EAoLI,eAAe;AHgBnB","file":"nomensa-pfe-nav-link.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, 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 THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n@import \"_themes\";\n","/*\n * Copyright 2018 Red Hat, 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 THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n@import url(\"https://fonts.googleapis.com/css?family=Roboto|Ubuntu&display=swap\");\n:host {\n  display: block;\n  position: relative;\n}\n\n@media screen and (min-width: 1025px) {\n  :host {\n    position: static;\n  }\n}\n\n:host ::slotted(a) {\n  color: #fff;\n  text-decoration: none;\n}\n\n:host .sub-menu__wrap {\n  height: 0;\n}\n\n:host ::slotted(a:hover),\n:host ::slotted(a:focus) {\n  color: #8cc63f;\n  text-decoration: underline;\n}\n\n:host ::slotted([slot=\"navLink\"]),\n:host ::slotted([slot=\"subMenuLink\"]) {\n  background-color: rgba(255, 255, 255, 0.1);\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n  font-size: 16px;\n  font-weight: 300;\n  padding: 15px 20px;\n  position: relative;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"navLink\"]) {\n    background-color: transparent;\n    background-image: none;\n    font-family: \"Ubuntu\", sans-serif;\n    font-size: 18px;\n    font-weight: bold;\n    letter-spacing: 2px;\n    padding: 7px 20px;\n  }\n}\n\n:host ::slotted([slot=\"navLink\"]:hover),\n:host ::slotted([slot=\"navLink\"]:focus),\n:host ::slotted([slot=\"navLink\"].active) {\n  background-color: #000;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"navLink\"]:hover):before,\n  :host ::slotted([slot=\"navLink\"]:focus):before,\n  :host ::slotted([slot=\"navLink\"].active):before {\n    background-color: #000;\n    border-radius: 6px 6px 0 0;\n    content: '';\n    height: 5px;\n    left: 0;\n    position: absolute;\n    top: -5px;\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"subMenuLink\"]) {\n    background-color: transparent;\n    display: inline;\n    font-size: 14px;\n    padding: 0;\n  }\n}\n\n:host ::slotted([slot=\"megaMenuHeading\"]) {\n  display: block;\n  font-family: \"Ubuntu\", sans-serif;\n  font-size: 18px;\n  font-weight: bold;\n  margin-top: 50px;\n  padding-bottom: 10px;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"megaMenuHeading\"]) {\n    display: inline-block;\n    font-size: 16px;\n    margin-top: 0;\n  }\n}\n\n:host ::slotted([slot=\"megaMenu\"]) {\n  background: #000;\n  box-sizing: border-box;\n  right: -110%;\n  margin: 0;\n  padding: 50px 15px 50px !important;\n  position: absolute;\n  top: 0;\n  transition: right 0.25s;\n  width: 100%;\n  z-index: 20;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"megaMenu\"]) {\n    display: none;\n    height: auto;\n    left: 0;\n    padding: 30px !important;\n    position: absolute;\n    right: auto;\n    top: auto;\n  }\n}\n\n:host ::slotted([slot=\"megaMenu\"].mega-menu--open) {\n  right: 0;\n  transition: 0.25s;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"megaMenu\"].active) {\n    display: block;\n  }\n}\n\n:host ::slotted([slot=\"subMenu\"]) {\n  list-style: none;\n  padding-left: 0 !important;\n}\n\n:host ::slotted([slot=\"megaMenuBack\"]),\n:host ::slotted([slot=\"megaMenuButton\"]) {\n  display: inline-block;\n}\n\n@media screen and (min-width: 1025px) {\n  :host ::slotted([slot=\"megaMenuBack\"]),\n  :host ::slotted([slot=\"megaMenuButton\"]) {\n    display: none;\n  }\n}\n\n:host ::slotted([slot=\"megaMenuBack\"]) {\n  left: 15px;\n  position: absolute;\n  top: 10px;\n  z-index: 30;\n}\n\n:host ::slotted([slot=\"megaMenuButton\"]) {\n  background-color: transparent;\n  background-image: url(\"../static/svg/arrow-point-to-right.svg\");\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  border-color: #000;\n  border-width: 0 0 0 2px;\n  direction: ltr;\n  height: 48px;\n  position: absolute;\n  right: 0;\n  text-indent: -999em;\n  top: 0;\n  width: 50px;\n  z-index: 20;\n}\n\n:host ::slotted([slot=\"megaMenuButton\"]:hover) {\n  cursor: pointer;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text:                               $pfelements--gray-dark !default;\n$pfe-color--text--on-dark:                      $pfe-color--white !default;\n$pfe-color--text--on-saturated:                 $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link:                            #06c !default;\n$pfe-color--ui-link--visited:                   $pfelements--purple !default;             // Was #7551a6\n$pfe-color--ui-link--hover:                     darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus:                     darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark:                   lighten($pfe-color--ui-link, 40%) !default;          // Was #97daff\n$pfe-color--ui-link--on-dark--visited:          lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover:            lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus:            lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated:              lighten($pfe-color--ui-link, 40%) !default;               // Was #97daff\n$pfe-color--ui-link--on-saturated--visited:     lighten($pfe-color--ui-link--visited, 30%) !default;      // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover:       lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus:       lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base:                            $pfelements--blue !default;\n$pfe-color--ui-base--hover:                     darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text:                      $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover:               $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement:                      $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover:               $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text:                $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover:         $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent:                          $pfelements--orange !default;\n$pfe-color--ui-accent--hover:                   darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text:                    $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover:             $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled:                        $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover:                 $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text:                  $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover:           $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest:                  $pfe-color--white !default;\n$pfe-color--surface--lightest--text:            $pfe-color--text !default;\n$pfe-color--surface--lightest--link:            $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited:   $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover:     $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus:     $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter:                   $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text:             $pfe-color--text !default;\n$pfe-color--surface--lighter--link:             $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited:    $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover:      $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus:      $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base:                      $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text:                $pfe-color--text !default;\n$pfe-color--surface--base--link:                #00538c !default;  // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited:       #7551a6 !default;\n$pfe-color--surface--base--link--hover:         #00305b !default;\n$pfe-color--surface--base--link--focus:         #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker:                    $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text:              $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link:              $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited:     $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover:       $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus:       $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest:                   $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text:             $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link:             $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited:    $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover:      $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus:      $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement:                $pfelements--blue;\n$pfe-color--surface--complement--text:          $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link:          $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover:   $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus:   $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent:                    $pfelements--orange;\n$pfe-color--surface--accent--text:              $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link:              $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited:     $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover:       $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus:       $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border:                    $pfe-color--gray-200 !default;  // Was #ccc\n$pfe-color--surface--border--lightest:          $pfe-color--gray-100 !default;  // Was #e7e7e7\n$pfe-color--surface--border--lighter:           $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest:           $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker:            $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical:                 $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest:       $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest:        $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important:                $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest:      $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest:       $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate:                 $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest:       $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest:        $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success:                  #2e7d32 !default;\n$pfe-color--feedback--success--lightest:        $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest:         #1b5e20 !default;\n\n$pfe-color--feedback--info:                     #0277bd !default;\n$pfe-color--feedback--info--lightest:           $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest:            #01579b !default;\n\n$pfe-color--feedback--default:                  $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest:        $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest:         $pfe-color--gray-800 !default;\n","@import url('https://fonts.googleapis.com/css?family=Roboto|Ubuntu&display=swap');\n\n// ========================================================================\n// Empirix font vars\n// ========================================================================\n$empirix-ubuntu-font: 'Ubuntu', sans-serif;\n$empirix-roboto-font: 'Roboto', sans-serif;\n$empirix-mobile-font-size: 16px;\n$empirix-mobile-line-height: 1.5;\n$empirix-desktop-font-size: 18px;\n$empirix-desktop-line-height: 1.44;\n\n\n// ========================================================================\n// Empirix breakpoint vars\n// ========================================================================\n$emp-lg: 1025px;\n\n$pfe-global--grid-breakpoint--lg: $emp-lg;\n\n// ========================================================================\n// Empirix colour vars\n// ========================================================================\n$empirix--black: #101010;\n$empirix--black-pure: #000;\n$empirix--baby-blue: #b0e1f4;\n$empirix--cerulean: #009ddb;\n$empirix--dark-grey: #545454;\n$empirix--green: #8cc63f;\n$empirix--green-light: #ddffaf;\n$empirix--grey: #404551;\n$empirix--grey-battleship: #6c7278;\n$empirix--light-grey: #a9b2bb;\n$empirix--purple-brown: #231f20;\n\n\n// Base text colours\n$pfe-color--empirix-text:                   $empirix--purple-brown;\n$pfe-color--empirix-text--on-dark:          $pfe-color--white;\n\n$pfe-color--empirix-ui-base:                $empirix--green;\n$pfe-color--empirix-ui-base--hover:         $empirix--green-light;\n$pfe-color--empirix-ui-base--text:          $empirix--purple-brown;\n$pfe-color--empirix-ui-base--text--hover:   $empirix--grey;\n\n$pfe-color--empirix-ui-complement:                $empirix--cerulean;\n$pfe-color--empirix-ui-complement--hover:         $empirix--baby-blue;\n$pfe-color--empirix-ui-complement--text:          $pfe-color--white;\n$pfe-color--empirix-ui-complement--text--hover:   $empirix--grey;\n$pfe-color--empirix-ui-complement--border--hover: $empirix--grey-battleship;\n\n\n\n// ========================================================================\n// Empirix base presets\n// ========================================================================\n$empirix-base-font: $empirix-ubuntu-font;\n$empirix-body-font: $empirix-roboto-font;\n$empirix-base-color: $empirix--purple-brown;","\n@import \"../../pfe-sass/pfe-sass\";\n\n:host {\n  $nav-link-color: $pfe-color--white;\n  $nav-link-background-color--mobile: $pfe-color--white;\n  $nav-link-color--hover--desktop: $empirix--green;\n  $nav-link-background--hover--desktop: $empirix--black-pure;\n\n  display: block;\n  position: relative;\n\n  @media screen and (min-width: $emp-lg) {\n    position: static;\n  }\n\n\n  ::slotted(a) {\n    color: $nav-link-color;\n    text-decoration: none;\n  }\n\n  .sub-menu__wrap {\n    height: 0;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(a:focus) {\n    color: $nav-link-color--hover--desktop;\n    text-decoration: underline;\n  }\n\n  ::slotted([slot=\"navLink\"]),\n  ::slotted([slot=\"subMenuLink\"]) {\n    background-color: rgba($nav-link-background-color--mobile, 0.1);\n    display: block;\n    font: {\n      family: $empirix-body-font;\n      size: 16px;\n      weight: 300;\n    }\n    padding: 15px 20px;\n    position: relative;\n  }\n\n  ::slotted([slot=\"navLink\"]) {\n    @media screen and (min-width: $emp-lg) {\n      background: {\n        color: transparent;\n        image: none;\n      }\n      font: {\n        family: $empirix-base-font;\n        size: 18px;\n        weight: bold;\n      }\n      letter-spacing: 2px;\n      padding: 7px 20px;\n    }\n  }\n\n  ::slotted([slot=\"navLink\"]:hover),\n  ::slotted([slot=\"navLink\"]:focus),\n  ::slotted([slot=\"navLink\"].active) {\n    background-color: $nav-link-background--hover--desktop;\n\n    @media screen and (min-width: $emp-lg) {\n      &:before {\n        background-color: $nav-link-background--hover--desktop;\n        border-radius: 6px 6px 0 0;\n        content: '';\n        height: 5px;\n        left: 0;\n        position: absolute;\n        top: -5px;\n        width: 100%;\n      }\n    }\n  }\n\n  ::slotted([slot=\"subMenuLink\"]) {\n    @media screen and (min-width: $emp-lg) {\n      background-color: transparent;\n      display: inline;\n      font-size: 14px;\n      padding: 0;\n    }\n  }\n\n  ::slotted([slot=\"megaMenuHeading\"]) {\n    display: block;\n    font: {\n      family: $empirix-base-font;\n      size: 18px;\n      weight: bold;\n    }\n    margin-top: 50px;\n    padding-bottom: 10px;\n\n    @media screen and (min-width: $emp-lg) {\n      display: inline-block;\n      font-size: 16px;\n      margin-top: 0;\n    }\n  }\n\n  ::slotted([slot=\"megaMenu\"]) {\n    background: $empirix--black-pure;\n    box-sizing: border-box;\n    right: -110%;\n    margin: 0;\n    padding: 50px 15px 50px !important;\n    position: absolute;\n    top: 0;\n    transition: right 0.25s;\n    width: 100%;\n    z-index: 20;\n\n    @media screen and (min-width: $emp-lg) {\n      display: none;\n      height: auto;\n      left: 0;\n      padding: 30px !important;\n      position: absolute;\n      right: auto;\n      top: auto;\n    }\n  }\n\n  ::slotted([slot=\"megaMenu\"].mega-menu--open) {\n    right: 0;\n    transition: 0.25s;\n  }\n\n  ::slotted([slot=\"megaMenu\"].active) {\n    @media screen and (min-width: $emp-lg) {\n      display: block;\n    }\n  }\n\n  ::slotted([slot=\"subMenu\"]) {\n    list-style: none;\n    padding-left: 0 !important;\n  }\n\n  ::slotted([slot=\"megaMenuBack\"]),\n  ::slotted([slot=\"megaMenuButton\"]) {\n    display: inline-block;\n\n    @media screen and (min-width: $emp-lg) {\n      display: none;\n    }\n  }\n\n  ::slotted([slot=\"megaMenuBack\"]) {\n    left: 15px;\n    position: absolute;\n    top: 10px;\n    z-index: 30;\n  }\n\n  ::slotted([slot=\"megaMenuButton\"]) {\n    background: {\n      color: transparent;\n      image: url('../static/svg/arrow-point-to-right.svg');\n      position: 50% 50%;\n      repeat: no-repeat;\n    }\n    border: {\n      color: $empirix--black-pure;\n      width: 0 0 0 2px;\n    }\n    direction: ltr;\n    height: 48px;\n    position: absolute;\n    right: 0;\n    text-indent: -999em;\n    top: 0;\n    width: 50px;\n    z-index: 20;\n  }\n\n  ::slotted([slot=\"megaMenuButton\"]:hover) {\n    cursor: pointer;\n  }\n}","// ========================================================================\n// CRAYOLA COLORS for PFElements\n//\n// Basic named colors to be assigned to context in _colors.scss\n//\n// While these are available for styling PFElements, it's recommended\n//    that developers try to utilize the context-based colors in\n//    $pfe-colors in _maps.scss first, and _colors.scss second.\n//\n// ========================================================================\n\n\n// ========================================================================\n// PFElement Brand Colors\n// Namespaced with $pfelements-- to separate from colors below, which will\n//    be based on these colors.\n// ========================================================================\n\n$pfelements--orange:            #fe460d !default;\n$pfelements--orange-dark:       #e23b0e !default;\n$pfelements--orange-darkest:    #ad2b0c !default;\n\n$pfelements--blue:              #0477a4 !default;\n$pfelements--blue-dark:         #046a89 !default;\n$pfelements--blue-darkest:      #044554 !default;\n\n$pfelements--green:             #aee339 !default;\n$pfelements--green-dark:        #a2c935 !default;\n$pfelements--green-darkest:     #7c9328 !default;\n\n$pfelements--gray:              #797979 !default;\n$pfelements--gray-light:        #d2d2d2 !default;\n$pfelements--gray-dark:         #333 !default;\n\n// Other tertiary named colors to be used below\n$pfelements--red:               #e00 !default; // Was #c00\n$pfelements--yellow:            #f0ab00 !default;\n$pfelements--cyan:              #007a87 !default;\n$pfelements--purple:            rebeccapurple !default; // Was #703fec\n\n// ========================================================================\n// B&W, Gray Values\n// ========================================================================\n\n$pfe-color--white:               #fff !default;\n$pfe-color--gray-50:             lighten($pfelements--gray, 48%) !default;\n$pfe-color--gray-100:            lighten($pfelements--gray, 45%) !default;\n$pfe-color--gray-200:            lighten($pfelements--gray, 40%) !default;\n$pfe-color--gray-250:            $pfelements--gray-light !default;\n$pfe-color--gray-300:            lighten($pfelements--gray, 30%) !default;\n$pfe-color--gray-400:            lighten($pfelements--gray, 20%) !default;\n$pfe-color--gray-500:            lighten($pfelements--gray, 10%) !default;\n$pfe-color--gray-600:            $pfelements--gray !default;                 // Aliased\n$pfe-color--gray-700:            darken($pfelements--gray, 10%) !default;\n$pfe-color--gray-800:            darken($pfelements--gray, 20%) !default;\n$pfe-color--gray-900:            darken($pfelements--gray, 30%) !default;\n$pfe-color--gray-1000:           darken($pfelements--gray, 40%) !default;\n$pfe-color--black:               $pfe-color--gray-1000 !default;               // Aliased\n\n// ========================================================================\n// Hue Rainbow Values!\n// ========================================================================\n\n$pfe-color--red-50:              lighten($pfelements--red, 50%) !default;\n$pfe-color--red-100:             lighten($pfelements--red, 40%) !default;\n$pfe-color--red-200:             lighten($pfelements--red, 30%) !default;\n$pfe-color--red-300:             lighten($pfelements--red, 20%) !default;\n$pfe-color--red-400:             lighten($pfelements--red, 10%) !default;\n$pfe-color--red-500:             $pfelements--red !default;                // Aliased\n$pfe-color--red-600:             darken($pfelements--red, 10%) !default;\n$pfe-color--red-700:             darken($pfelements--red, 20%) !default;\n$pfe-color--red-800:             darken($pfelements--red, 30%) !default;\n\n$pfe-color--orange-50:           lighten($pfelements--orange, 40%) !default;\n$pfe-color--orange-100:          lighten($pfelements--orange, 30%) !default;\n$pfe-color--orange-200:          lighten($pfelements--orange, 20%) !default;\n$pfe-color--orange-300:          lighten($pfelements--orange, 10%) !default;\n$pfe-color--orange-400:          $pfelements--orange !default;              // Aliased\n$pfe-color--orange-500:          darken($pfelements--orange, 10%) !default;\n$pfe-color--orange-600:          darken($pfelements--orange, 20%) !default;\n$pfe-color--orange-700:          darken($pfelements--orange, 30%) !default;\n$pfe-color--orange-800:          darken($pfelements--orange, 40%) !default;\n\n$pfe-color--yellow-50:           lighten($pfelements--yellow, 50%) !default;\n$pfe-color--yellow-100:          lighten($pfelements--yellow, 40%) !default;\n$pfe-color--yellow-200:          lighten($pfelements--yellow, 30%) !default;\n$pfe-color--yellow-300:          lighten($pfelements--yellow, 20%) !default;\n$pfe-color--yellow-400:          lighten($pfelements--yellow, 10%) !default;\n$pfe-color--yellow-500:          $pfelements--yellow !default;              // Aliased\n$pfe-color--yellow-600:          darken($pfelements--yellow, 10%) !default;\n$pfe-color--yellow-700:          darken($pfelements--yellow, 20%) !default;\n$pfe-color--yellow-800:          darken($pfelements--yellow, 30%) !default;\n\n$pfe-color--green-50:            lighten($pfelements--green, 40%) !default;\n$pfe-color--green-100:           lighten($pfelements--green, 30%) !default;\n$pfe-color--green-200:           lighten($pfelements--green, 20%) !default;\n$pfe-color--green-300:           lighten($pfelements--green, 10%) !default;\n$pfe-color--green-400:           $pfelements--green !default;              // Aliased\n$pfe-color--green-500:           darken($pfelements--green, 10%) !default;\n$pfe-color--green-600:           darken($pfelements--green, 20%) !default;\n$pfe-color--green-700:           darken($pfelements--green, 30%) !default;\n$pfe-color--green-800:           darken($pfelements--green, 40%) !default;\n\n$pfe-color--cyan-50:             lighten($pfelements--cyan, 60%) !default;\n$pfe-color--cyan-100:            lighten($pfelements--cyan, 50%) !default;\n$pfe-color--cyan-200:            lighten($pfelements--cyan, 40%) !default;\n$pfe-color--cyan-300:            lighten($pfelements--cyan, 30%) !default;\n$pfe-color--cyan-400:            lighten($pfelements--cyan, 20%) !default;\n$pfe-color--cyan-500:            lighten($pfelements--cyan, 10%) !default;\n$pfe-color--cyan-600:            $pfelements--cyan !default;              // Aliased\n$pfe-color--cyan-700:            darken($pfelements--cyan, 10%) !default;\n$pfe-color--cyan-800:            darken($pfelements--cyan, 20%) !default;\n\n$pfe-color--blue-50:             lighten($pfelements--blue, 60%) !default;\n$pfe-color--blue-100:            lighten($pfelements--blue, 50%) !default;\n$pfe-color--blue-200:            lighten($pfelements--blue, 40%) !default;\n$pfe-color--blue-300:            lighten($pfelements--blue, 30%) !default;\n$pfe-color--blue-400:            lighten($pfelements--blue, 20%) !default;\n$pfe-color--blue-500:            lighten($pfelements--blue, 10%) !default;\n$pfe-color--blue-600:            $pfelements--blue !default;              // Aliased\n$pfe-color--blue-700:            darken($pfelements--blue, 10%) !default;\n$pfe-color--blue-800:            darken($pfelements--blue, 20%) !default;\n\n$pfe-color--purple-50:           lighten($pfelements--purple, 40%) !default;\n$pfe-color--purple-100:          lighten($pfelements--purple, 30%) !default;\n$pfe-color--purple-200:          lighten($pfelements--purple, 20%) !default;\n$pfe-color--purple-300:          lighten($pfelements--purple, 10%) !default;\n$pfe-color--purple-400:          $pfelements--purple !default;            // Aliased\n$pfe-color--purple-500:          darken($pfelements--purple, 10%) !default;\n$pfe-color--purple-600:          darken($pfelements--purple, 20%) !default;\n$pfe-color--purple-700:          darken($pfelements--purple, 30%) !default;\n$pfe-color--purple-800:          darken($pfelements--purple, 40%) !default;\n"]}