{"version":3,"sources":["00_helpers/mixins/_media-queries.scss","../scss/03_molecules/_breadcrumb.scss","00_helpers/mixins/_text-ellipsis.scss","00_helpers/mixins/_svg-base64.scss","00_helpers/variables/_colors.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss","00_helpers/variables/_icons.scss","00_tools/_background-variants.scss","00_helpers/mixins/_breadcrumb.scss","../scss/00_tools/cssVartoSass.scss","../scss/03_molecules/_language-dropdown.scss","00_helpers/variables/_spacing.scss","00_helpers/mixins/_language-dropdown.scss","../scss/03_molecules/_top-links.scss","00_helpers/mixins/_colors.scss","04_organisms/_navigation.scss","00_helpers/variables/_transitions.scss"],"names":[],"mappings":"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","file":"navigation.css","sourcesContent":["// @viewport--x($reversed)\n\n// viewport s\n@mixin viewport--s($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--s}) {\n      @content;\n    }\n  }\n}\n\n// viewport m\n@mixin viewport--m($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--m - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--m}) {\n      @content;\n    }\n  }\n}\n\n// viewport l\n@mixin viewport--l($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--l}) {\n      @content;\n    }\n  }\n}\n\n// viewport xl\n@mixin viewport--xl($type: null) {\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xl}) {\n      @content;\n    }\n  }\n}\n\n// viewport xxl\n@mixin viewport--xxl($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xxl}) {\n      @content;\n    }\n  }\n}\n\n// viewport range\n@mixin viewport--range($viewport1, $viewport2) {\n  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {\n    @content;\n  }\n}\n\n// Internet Explorer 10 + 11\n@mixin internet-explorer-10-11 {\n  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n    @content;\n  }\n}\n",".navigation__bottom {\n  @include viewport--l('inversed') {\n    .breadcrumb {\n      margin-right: auto;\n      overflow: hidden;\n    }\n\n    .breadcrumb__link {\n      @include text-ellipsis($display: block);\n      padding-left: 15px;\n      position: relative;\n      transition: none;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &::before {\n        @include svgMask('chevron-left-8');\n        background-color: $color-brand--white;\n        content: '';\n        height: 8px;\n        left: 0;\n        position: absolute;\n        top: 10px;\n        width: 8px;\n      }\n    }\n  }\n\n  // viewport large\n  @include viewport--l {\n    .breadcrumb {\n      @include font-style('body--xs');\n      height: $baseline * 1.5;\n      margin-top: $baseline * 1.5;\n\n      &__list {\n        display: flex;\n      }\n\n      &__link {\n        color: $color-alpha--four-50;\n      }\n\n      &__item {\n        & + .breadcrumb__item {\n          margin-left: 10px;\n        }\n\n        & + .breadcrumb__item::before {\n          @include svgMask('chevron-right-8');\n          content: '';\n          background-color: $navigation-bottom-breadcrumb-color;\n          display: inline-block;\n          height: $icon-size--xs;\n          margin-right: 7px;\n          position: relative;\n          width: $icon-size--xs;\n        }\n      }\n    }\n  }\n\n  // background mappings\n  @include breadcrumb-background-mapping;\n}\n","// @text-ellipsis($width, $display)\n\n@mixin text-ellipsis($width: 100%, $display: inline-block) {\n  display: $display;\n  max-width: $width;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","// @svg-base64($icon, $color)\n\n@mixin svg-base64($icon, $color) {\n  // remove the hexadecimal character from string\n  $color-clean: str-replace('#{$color}', '#', '');\n\n  @if ($icon == 'add') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M18 9h-7V2a1 1 0 1 0-2 0v7H2a1 1 0 1 0 0 2h7v7a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'check') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-right-8') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8' fill='%23#{$color-clean}'%3E%3Cpath d='M2.50025,0 C2.75625,0 3.01225,0.098 3.20725,0.293 L6.20725,3.293 C6.59825,3.684 6.59825,4.316 6.20725,4.707 L3.20725,7.707 C2.81625,8.098 2.18425,8.098 1.79325,7.707 C1.40225,7.316 1.40225,6.684 1.79325,6.293 L4.08625,4 L1.79325,1.707 C1.40225,1.316 1.40225,0.684 1.79325,0.293 C1.98825,0.098 2.24425,0 2.50025,0'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-left-8') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8' fill='%23#{$color-clean}'%3E%3Cpath d='M5.5,8 C5.244,8 4.988,7.902 4.793,7.707 L1.793,4.707 C1.402,4.316 1.402,3.684 1.793,3.293 L4.793,0.293 C5.184,-0.098 5.816,-0.098 6.207,0.293 C6.598,0.684 6.598,1.316 6.207,1.707 L3.914,4 L6.207,6.293 C6.598,6.684 6.598,7.316 6.207,7.707 C6.012,7.902 5.756,8 5.5,8'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'arrow-right-30') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30' fill='%23#{$color-clean}'%3E%3Cpath d='M3,15.8965 L24.605,15.8965 L17.29,23.2975 C16.901,23.6905 16.905,24.3235 17.298,24.7125 C17.691,25.1005 18.324,25.0965 18.712,24.7045 L27.711,15.5995 C28.1,15.2065 28.096,14.5735 27.703,14.1855 L18.704,5.2895 C18.509,5.0965 18.255,5.0005 18.001,5.0005 C17.743,5.0005 17.485,5.0995 17.29,5.2965 C16.901,5.6895 16.905,6.3225 17.298,6.7105 L24.566,13.8965 L3,13.8965 C2.447,13.8965 2,14.3445 2,14.8965 C2,15.4485 2.447,15.8965 3,15.8965'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'minus') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M18 11H2a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'star-filled') {\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M29.951 10.817a1.002 1.002 0 00-.808-.68l-9.153-1.33L15.896.511c-.336-.683-1.457-.683-1.793 0L10.01 8.806l-9.154 1.33a1 1 0 00-.554 1.706L6.926 18.3l-1.564 9.117a1 1 0 001.451 1.054L15 24.167l8.186 4.304a1.006 1.006 0 001.054-.076 1 1 0 00.398-.978L23.074 18.3l6.624-6.458a1 1 0 00.253-1.025'/%3E%3C/svg%3E%0A\");\n  }\n}\n\n@mixin svgMask($icon) {\n  mask-repeat: no-repeat;\n\n  @if ($icon == 'check') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' %3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'star-filled') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='20' height='20' %3E%3Cpath d='M29.951 10.817a1.002 1.002 0 00-.808-.68l-9.153-1.33L15.896.511c-.336-.683-1.457-.683-1.793 0L10.01 8.806l-9.154 1.33a1 1 0 00-.554 1.706L6.926 18.3l-1.564 9.117a1 1 0 001.451 1.054L15 24.167l8.186 4.304a1.006 1.006 0 001.054-.076 1 1 0 00.398-.978L23.074 18.3l6.624-6.458a1 1 0 00.253-1.025'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-left-8') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg id='chevron-left-8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5,8 C5.244,8 4.988,7.902 4.793,7.707 L1.793,4.707 C1.402,4.316 1.402,3.684 1.793,3.293 L4.793,0.293 C5.184,-0.098 5.816,-0.098 6.207,0.293 C6.598,0.684 6.598,1.316 6.207,1.707 L3.914,4 L6.207,6.293 C6.598,6.684 6.598,7.316 6.207,7.707 C6.012,7.902 5.756,8 5.5,8'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-right-8') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg id='chevron-right-8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.50025,0 C2.75625,0 3.01225,0.098 3.20725,0.293 L6.20725,3.293 C6.59825,3.684 6.59825,4.316 6.20725,4.707 L3.20725,7.707 C2.81625,8.098 2.18425,8.098 1.79325,7.707 C1.40225,7.316 1.40225,6.684 1.79325,6.293 L4.08625,4 L1.79325,1.707 C1.40225,1.316 1.40225,0.684 1.79325,0.293 C1.98825,0.098 2.24425,0 2.50025,0'/%3E%3C/svg%3E%0A\");\n  }\n}\n","$color-brand--one: #2175d9;\n$color-brand--two: #0f1941;\n$color-brand--three: #6ba5b4;\n$color-brand--four: #f7f5f0;\n$color-brand--five: #e74536;\n$color-brand--six: #ffb511;\n$color-brand--white: #fff;\n\n// user interface colors\n//\n// additional colors, such as surface, background and error colors, typically don't\n// represent the brand but can be applied sparingly to accent select parts of your UI.\n//\n\n$color--one-7: #ecf3fc;\n$color--one-80: #4d91e1;\n$color--one-130: #175197;\n\n$color--two-50: #878ca0;\n$color--two-60: #6c738d;\n$color--two-80: #3c4464;\n$color--two-180: #03050d;\n\n$color--grey: #d7d7d7;\n$color--grey-10: #f7f7f7;\n\n$color--white: #fff;\n\n$color--four-80: #f9f7f3;\n$color--four-110: #dedcd8;\n\n$color--negative: #e00f0f;\n$color--negative-5: #fdf3f3;\n\n$color--positive: #257f56;\n$color--positive-5: #f4f8f6;\n\n$color--warning: #e9a204;\n$color--warning-10: #fcf5e5;\n\n// user interface opacities\n//\n// opacity colors are only used on modal backgrounds. HEX colors would not be\n// used due to the colors' alpha layers.\n//\n\n$color-alpha--one-10: rgba(33, 117, 217, 0.1);\n$color-alpha--one-30: rgba(33, 117, 217, 0.3);\n\n$color-alpha--two-10: rgba(15, 25, 65, 0.1);\n$color-alpha--two-30: rgba(15, 25, 65, 0.3);\n$color-alpha--two-70: rgba(15, 25, 65, 0.7);\n$color-alpha--two-80: rgba(15, 25, 65, 0.8);\n\n// ! This needs to be changed to the new white colors in story (DF909-751)\n$color-alpha--four-30: rgba(247, 245, 240, 0.3);\n$color-alpha--four-50: rgba(247, 245, 240, 0.5);\n\n// set color values\n$color--disabled: $color--two-60;\n$color--text: $color-brand--two;\n$color--one-light: $color--one-7;\n\n// degree brand colors\n// used in the charts as extra color scheme\n\n$color-brand--one-65: #7aace8;\n$color-brand--one-45: #a6c8f0;\n$color-brand--one-25: #bbd4f1;\n$color-brand--two-65: #636983;\n$color-brand--two-45: #999aa8;\n$color-brand--two-25: #8a8caf;\n$color-brand--three-65: #020202;\n$color-brand--three-45: #c4dbe1;\n$color-brand--five-65: #f18f86;\n$color-brand--five-45: #f5b5af;\n$color-brand--five-25: #f7beb9;\n$color-brand--six-65: #ffd370;\n$color-brand--six-45: #ffe1a0;\n$color-brand--six-25: #fce8b5;\n \n\n// notice colors\n$color-notice--warning: #fff2f2;\n","// @font-style($font-style-small, $font-style-large)\n\n// $font-style-small - Desired type size for small/medium viewport.\n// $font-style-large - Desired type size for large viewport. This includes default fallback\n//                     for the S/M viewport.\n\n//\n// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// import variables needed for the mixins\n@import '../variables/__variables.scss';\n\n// mixin to get applicable properties for chosen type size\n@mixin typeset($type) {\n  $type: map-get($types, $type);\n\n  font-size: (map-get($type, font-size));\n  letter-spacing: (map-get($type, letter-spacing));\n  line-height: (map-get($type, line-height));\n}\n\n// get correct font characteristics based on font\n@mixin type-size($size) {\n  $size: map-get($type-sizes, $size);\n  @include typeset($size);\n}\n\n// mixin to get font-size\n@mixin font-style($font-style-small: 'body--l', $font-style-large: null) {\n  // if both arguments are added\n  @if ($font-style-large != null) {\n    // make sure $font-style-small & $font-style-large are not equal\n    @if ($font-style-small != $font-style-large) {\n      @include type-size($font-style-small);\n\n      @include viewport--l {\n        @include type-size($font-style-large);\n      }\n    } @else {\n      @include type-size($font-style-small);\n    }\n  } @else {\n    @include type-size($font-style-small);\n    // default font style mappings\n    @if ($font-style-small == 'title--l') {\n      @include viewport--l {\n        @include type-size('title--xxl');\n      }\n    } @else if ($font-style-small == 'title--m') {\n      @include viewport--l {\n        @include type-size('title--xl');\n      }\n    } @else if ($font-style-small == 'title--s') {\n      @include viewport--l {\n        @include type-size('title--m');\n      }\n    }\n  }\n}\n","// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 14  | body s     | 14  | body s     | 14 |                 |\n// | body xs    | 12  | body xs    | 12  | body xs    | 12 |                 |\n\n// font family\n$font-family-theme: Graphik, Tahoma, 'sans-serif';\n\n// font mappings - font-size / line-height / letter-spacing\n$types: (\n  12: (\n    font-size: 12px,\n    line-height: 15px,\n    letter-spacing: 0\n  ),\n  14: (\n    font-size: 14px,\n    line-height: 25px,\n    letter-spacing: 0\n  ),\n  16: (\n    font-size: 16px,\n    line-height: 25px,\n    letter-spacing: 0\n  ),\n  18: (\n    font-size: 18px,\n    line-height: 30px,\n    letter-spacing: 0\n  ),\n  20: (\n    font-size: 20px,\n    line-height: 30px,\n    letter-spacing: 0\n  ),\n  26: (\n    font-size: 26px,\n    line-height: 30px,\n    letter-spacing: -1px\n  ),\n  32: (\n    font-size: 32px,\n    line-height: 40px,\n    letter-spacing: -1px\n  ),\n  40: (\n    font-size: 40px,\n    line-height: 45px,\n    letter-spacing: -2px\n  ),\n  60: (\n    font-size: 60px,\n    line-height: 60px,\n    letter-spacing: -3px\n  ),\n  80: (\n    font-size: 80px,\n    line-height: 80px,\n    letter-spacing: -4px\n  )\n);\n\n// type-sizes - links the type-size to correct font mapping\n$type-sizes: (\n  title--xxl: 80,\n  title--xl: 60,\n  title--l: 40,\n  title--m: 32,\n  title--s: 26,\n  title--xs: 20,\n  title--xxs: 18,\n  body--l: 18,\n  body--m: 16,\n  body--s: 14,\n  body--xs: 12\n);\n","// icons\n$icon-size: $baseline * 2;\n$icon-size--xs: $baseline * 0.8;\n$icon-size--s: $baseline * 1.6;\n$icon-size--l: $baseline * 3;\n$icon-size--xl: $baseline * 4;\n$icon-size--xxl: $baseline * 6;\n$icon-size--xxxl: $baseline * 12;\n","@import '../00_settings/background-variants-color-map';\n// Creates the .bg-variant-#{$variant} classes with the right background-color property from the background-variants-color-map\n// Use only once to set up the utilities\n// e.g.\n//\n// @include bg-variant-classes();\n@mixin bg-variant-classes($backgroundmap: $backgrounds) {\n  @each $variant, $value in $backgroundmap {\n    $backgroundColor: map-get($value, 'background');\n    $defaultTextColor: map-get($value, 'bodyPrimary');\n\n    .bg-variant-#{$variant} {\n      background-color: returnColorCSSVar($backgroundColor);\n      color: returnColorCSSVar($defaultTextColor);\n    }\n  }\n}\n\n// Iterates over all backgrounds mapped in background-variants-color-map and outputs whatever is wrapped inside it with a .bg-variant-#{$variant} class selector before it\n// .bg-variant-#{$variant} &\n// Use together with varient-property function\n// Pass the $supportedBackgrounds as a list, if you only want to create classes for certain backgrounds\n// Set the $isChained to true, if you need to have a class that is chained to the parent e.g. .block.bg-variant-brand-primary\n// e.g.\n//\n// .divider {\n//   @include bg-variants(\n//     $supportedBackgrounds: (\n//       'brand-primary',\n//       'brand-senary'\n//     )\n//   ) {\n//     color: variant-property('divider');\n//   }\n// }\n//\n// .divider {\n//   @include bg-variants() {\n//     border-color: variant-property('divider');\n//   }\n// }\n@mixin bg-variants(\n  $backgroundmap: $backgrounds,\n  $supportedBackgrounds: null,\n  $isChained: false\n) {\n  @if ($supportedBackgrounds != null) {\n    @each $variant in $supportedBackgrounds {\n      $className: if(\n        $isChained==true,\n        '.bg-variant-#{$variant}#{&}',\n        '.bg-variant-#{$variant} &'\n      );\n\n      @at-root #{$className} {\n        $variant-map: () !global;\n\n        $supportedMap: if(\n          map-has-key($backgroundmap, $variant),\n          map-get($backgroundmap, $variant),\n          null\n        );\n\n        @each $key, $value in $supportedMap {\n          $variant-map: map-merge(\n            $variant-map,\n            (\n              $key: returnColorCSSVar($value)\n            )\n          ) !global;\n        }\n\n        @content;\n        $variant-map: null !global;\n      }\n    }\n  } @else {\n    @each $variant, $map in $backgroundmap {\n      $className: if(\n        $isChained==true,\n        '.bg-variant-#{$variant}#{&}',\n        '.bg-variant-#{$variant} &'\n      );\n\n      @at-root #{$className} {\n        // Makes a global map that can be accessed by the variant-property function\n        $variant-map: () !global;\n\n        @each $key, $submap in $map {\n          $value: map-get(map-get($backgroundmap, $variant), '#{$key}');\n          $variant-map: map-merge(\n            $variant-map,\n            (\n              $key: returnColorCSSVar($value)\n            )\n          ) !global;\n        }\n\n        @content;\n        $variant-map: null !global;\n      }\n    }\n  }\n}\n\n// function to use inside the wrapped content and access the\n// Use together with bg-varients mixin\n// e.g.\n//\n// .divider {\n//   @include bg-variants() {\n//     border-color: variant-property('divider');\n//   }\n// }\n@function variant-property($key) {\n  $value: map-get($variant-map, $key);\n\n  @if ($value != null) {\n    @return map-get($variant-map, $key);\n  } @else {\n    @return null;\n  }\n}\n","@mixin breadcrumb-background-mapping {\n\n  @include bg-variants {\n    .breadcrumb__link {\n      &:before {\n        background-color: variant-property('linkIdle');\n      }\n    }\n    @include viewport--l {\n      .breadcrumb__item {\n        &:before {\n          background-color: variant-property('iconInformativeAlternative');\n        }\n      }\n    }\n  }\n\n    // ! Deprecation warning use new colors instead\n\n    .bg-brand--off-white &,\n    .bg-brand--white &,\n    .bg-brand--yellow &,\n    .bg-brand--turquoise & {\n      .breadcrumb__link {\n        color: $color-brand--two;\n      }\n\n      @include viewport--l('inversed') {\n        .breadcrumb__link:before {\n          @include svg-base64('chevron-left-8', $color-brand--two);\n          opacity: 0.7; // add opacity to simulate alpha channel\n          background-color: $color-brand--two;\n        }\n      }\n    }\n\n    .bg-brand--red & {\n      .breadcrumb__link {\n        color: $color--two-180;\n      }\n\n      @include viewport--l('inversed') {\n        .breadcrumb__link:before {\n          @include svg-base64('chevron-left-8', $color--two-180);\n          opacity: 0.7; // add opacity to simulate alpha channel\n          background-color: $color--two-180;\n        }\n      }\n    }\n\n    @include viewport--l {\n\n      .bg-brand--blue &,\n      .bg-brand--dark-blue & {\n        .breadcrumb__item + .breadcrumb__item:before {\n          background-color: $color-brand--white;\n          opacity: 0.5;\n        }\n      }\n\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--yellow &,\n      .bg-brand--turquoise &,\n      .navigation--dark-from-l & {\n        .breadcrumb__item + .breadcrumb__item:before {\n          background-color: $color-brand--two;\n          opacity: 0.5;\n        }\n      }\n\n      .bg-brand--red & .breadcrumb__item + .breadcrumb__item::before {\n        background-color: $color--two-180;\n        opacity: 0.5;\n      }\n    }\n    // ! //\n\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\n}\n",".language__dropdown {\n  align-items: center;\n  display: flex;\n  margin-left: auto;\n  position: relative;\n  width: 60px;\n\n  & .icon--language {\n    left: 0;\n    z-index: 0;\n\n    & svg {\n      height: $spacing--s;\n      width: 20px;\n    }\n  }\n\n  & select,\n  & select:active,\n  & select:focus {\n    padding: 0 25px;\n  }\n\n  select {\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: currentColor;\n    min-height: unset;\n    text-overflow: initial;\n    width: auto;\n    z-index: 2;\n\n    //hide native arrow for dropdown so only styled chevron is visible\n    &::-ms-expand {\n      display: none;\n    }\n\n    option {\n      color: $color-brand--two;\n    }\n  }\n\n  .select--status {\n    height: $baseline * 0.8;\n    width: 8px;\n  }\n\n  // background mappings mobile\n  @include language-dropdown-background-mapping;\n\n  @include viewport--l {\n    height: $baseline * 6;\n    cursor: pointer;\n\n    select {\n      @include font-style('body--m');\n    }\n\n    select,\n    .select--status {\n      cursor: pointer;\n    }\n  }\n}\n","// | variable      | size  | calculation     |\n// |---------------|-------|-----------------|\n// | $spacing--xxs |  5px  | $baseline * 0.5 |\n// | $spacing--xs  | 10px  | $baseline * 1   |\n// | $spacing--s   | 20px  | $baseline * 2   |\n// | $spacing--m   | 30px  | $baseline * 3   |\n// | $spacing--l   | 50px  | $baseline * 5   |\n// | $spacing--xl  | 80px  | $baseline * 8   |\n// | $spacing--xxl | 130px | $baseline * 13  |\n\n$spacing--xxs: $baseline * 0.5;\n$spacing--xs: $baseline * 1;\n$spacing--s: $baseline * 2;\n$spacing--m: $baseline * 3;\n$spacing--l: $baseline * 5;\n$spacing--xl: $baseline * 8;\n$spacing--xxl: $baseline * 13;\n\n// grid spacings\n$grid-margin--s: 25px;\n$grid-margin--m: 50px;\n$grid-margin--l: 100px;\n","@mixin language-dropdown-background-mapping {\n  // viewport s - m\n  @include viewport--l('inversed') {\n    .icon--language svg {\n      .bg-brand--dark-blue &,\n      .bg-brand--blue & {\n        color: $color-alpha--four-50;\n      }\n\n      .bg-brand--yellow &,\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--turquoise &,\n      .bg-brand--red & {\n        color: $color-alpha--two-30;\n      }\n    }\n  }\n}\n",".top-link {\n  display: flex;\n\n  &__item {\n    @include font-style('body--m');\n  }\n\n  @include viewport--l('inversed') {\n    li + li {\n      margin-left: 20px;\n    }\n\n    a {\n      @include color-dark-shade-main;\n    }\n\n    .accordion + & {\n      margin-top: $spacing--s;\n    }\n  }\n\n  @include viewport--l {\n    &__item {\n      @include font-style('body--xs');\n    }\n\n    li + li {\n      margin-left: 10px;\n    }\n  }\n}\n","@mixin color-dark-shade-main {\n  color: returnColorCSSVar('brand-secondary-tint-60');\n  fill: returnColorCSSVar('brand-secondary-tint-60');\n}\n\n@mixin color-dark-shade-alternative {\n  color: returnColorCSSVar('brand-secondary-tint-80');\n  fill: returnColorCSSVar('brand-secondary-tint-80');\n}\n\n",".navigation {\n  .logo {\n    display: inline-block;\n    flex-shrink: 0;\n    width: 130px;\n\n    svg {\n      height: $baseline * 1.942; // provide SVG height to fix IE issues\n      width: 130px; // added for 5.2\n    }\n  }\n\n  &__top {\n    align-items: flex-start;\n    border-bottom: 1px solid $color-alpha--four-50;\n    display: flex;\n    height: $baseline * 7;\n    padding-top: $spacing--s;\n\n    // new color mapping\n    @include bg-variants() {\n      border-color: variant-property('divider');\n    }\n\n    // background color mapping\n    // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.\n    .bg-brand--yellow &,\n    .bg-brand--turquoise &,\n    .bg-brand--red & {\n      border-color: $color-alpha--two-30;\n    }\n\n    .bg-brand--off-white & {\n      border-color: $color--grey;\n    }\n\n    .my-environment & {\n      border-bottom: none;\n    }\n  }\n\n  // service menu\n  &__service {\n    align-items: center;\n    display: flex;\n    margin-left: auto;\n\n    &-item {\n      line-height: $icon-size;\n      margin-left: $spacing--xs;\n\n      .icon--xs {\n        margin-left: 5px;\n      }\n    }\n\n    .favorites__counter {\n      margin-left: 10px;\n    }\n\n    .person__initials {\n      align-items: center;\n      box-sizing: content-box;\n      border: 2px solid $color-brand--four;\n      border-radius: 50%;\n      display: flex;\n      height: $spacing--s;\n      justify-content: center;\n      margin-bottom: 0;\n      width: 20px;\n\n      span {\n        @include font-style('body--xs');\n        color: $color-brand--four;\n        left: initial;\n        margin-top: -1px;\n        position: initial;\n        top: initial;\n        transform: initial;\n      }\n    }\n\n    a {\n      @include bg-variants() {\n        color: variant-property('navigationLinkHover');\n      }\n    }\n  }\n\n  &__service-my-randstad.active {\n    position: relative;\n    z-index: 3;\n  }\n}\n\n// viewport s - m\n@include viewport--l('inversed') {\n  .modal--navigation {\n    transition: visibility;\n    visibility: hidden;\n    z-index: 3;\n\n    .bg-brand--off-white,\n    .bg-brand--white {\n      opacity: 0;\n      transition: all $transition-duration--fast $transition-duration;\n    }\n\n    .modal__dialog {\n      &::before {\n        opacity: 0;\n      }\n    }\n\n    .modal__header {\n      border-bottom: 1px solid transparent;\n      height: $baseline * 7;\n      opacity: 1;\n      transform: translateY(0);\n      transition-duration: 0.4s; // 0.4s is the menu duration\n\n      &--divider-out {\n        transition: border $transition-duration--fast;\n      }\n\n      &--divider-in {\n        transition: border $transition-duration--fast;\n      }\n    }\n\n    .modal__main {\n      padding-left: 25px;\n      padding-right: 25px;\n      transition: all $transition-duration--fast ease-in;\n    }\n\n    .modal__footer {\n      transition: all $transition-duration--fast ease-in;\n    }\n\n    // Active\n    &.modal--active {\n      transition: all;\n      visibility: visible;\n      z-index: 2;\n\n      .bg-brand--off-white,\n      .bg-brand--white {\n        opacity: 1;\n        transition: all $transition-duration;\n      }\n\n      .modal__main {\n        padding-top: $spacing--xs;\n        transform: translateY(0px);\n        transition: transform $transition-duration ease-out 0.15s,\n          opacity $transition-duration ease-out 0.15s;\n      }\n\n      .modal__footer {\n        transition: transform $transition-duration--fast ease-out 0.25s;\n      }\n    }\n  }\n\n  .navigation {\n    .logo {\n      position: relative;\n      z-index: 7;\n\n      svg {\n        transition: fill 0.25s 0.15s;\n      }\n    }\n\n    &__service {\n      margin-top: $baseline * 0.2;\n\n      &-link {\n        align-items: center;\n        display: flex;\n\n        .icon {\n          @include bg-variants() {\n            color: variant-property('iconInteractivePrimaryIdle');\n          }\n        }\n      }\n    }\n\n    &__service-my-randstad,\n    &__service-my-randstad:hover {\n      text-decoration: none;\n    }\n\n    &__service-my-randstad {\n      .icon--xs {\n        transform-origin: center;\n        transition: transform $transition-duration--fast;\n      }\n\n      &.active .icon--xs {\n        transform: rotate(180deg);\n      }\n    }\n\n    &__bottom {\n      display: flex;\n      padding-bottom: $spacing--s;\n\n      & .breadcrumb,\n      & .language__dropdown {\n        @include font-style('body--m');\n        height: $baseline * 2.5;\n        margin-top: $spacing--xs;\n      }\n\n      .language__dropdown {\n        .icon {\n          @include bg-variants() {\n            color: variant-property('iconInteractiveSecondaryIdle');\n          }\n        }\n      }\n    }\n\n    // accordion\n    &-accordion {\n      &__sub {\n        margin-bottom: $spacing--m;\n        margin-top: $baseline * 0.3;\n\n        li + li {\n          margin-top: $spacing--xs;\n        }\n      }\n\n      .collapsible__button {\n        cursor: pointer;\n      }\n\n      .collapsible__trigger,\n      .link-list__link {\n        cursor: auto;\n      }\n\n      .collapsible__trigger .icon,\n      .collapsible__trigger .icon__toggler--active .icon /// not on hover\n      {\n        color: $color-brand--one;\n        transition: all 0.2s ease-in-out;\n\n        &:hover svg {\n          fill: $color-brand--one;\n        }\n      }\n    }\n    // popover\n    .popover {\n      position: absolute;\n      right: 0;\n      top: $baseline * 6.9;\n    }\n  }\n\n  .navigation__service-item {\n    .person__initials {\n      .bg-brand--yellow &,\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--turquoise &,\n      .bg-brand--red & {\n        border-color: $color-brand--two;\n\n        span {\n          color: $color-brand--two;\n        }\n      }\n    }\n\n    .favorites__counter {\n      .bg-brand--yellow &,\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--turquoise &,\n      .bg-brand--red & {\n        color: $color-brand--two;\n        margin-left: 10px;\n      }\n\n      .bg-brand--blue &,\n      .bg-brand--dark-blue & {\n        color: $color-brand--four;\n        margin-left: 10px;\n      }\n    }\n  }\n\n  // accordion\n  .navigation-accordion {\n    &__sub {\n      margin-bottom: $spacing--m;\n      margin-top: $baseline * 0.3;\n\n      li + li {\n        margin-top: $spacing--xs;\n      }\n    }\n\n    .collapsible__button {\n      cursor: pointer;\n    }\n\n    .collapsible__trigger,\n    .link-list__link {\n      cursor: auto;\n    }\n  }\n}\n\n.header .navigation-accordion .collapsible__button {\n  &::before,\n  &::after {\n    background: $color-brand--one; //overrule accordion with color background\n  }\n}\n\n// viewport s - m : styling changes when nav modal opens\n@include viewport--l('inversed') {\n  .modal-nav-open {\n    .navigation {\n      // remove element from stacking context\n      position: static;\n    }\n\n    .modal--navigation .modal__header--divider {\n      border-bottom: 1px solid $color--grey;\n    }\n\n    .logo {\n      position: relative;\n      z-index: 7;\n\n      svg {\n        fill: $color-brand--one;\n        transition: fill ease-in 0.25s 0.15s;\n      }\n    }\n  }\n}\n\n// M included because navigation adapts to tablet view showing only initials and no full name.\n@include viewport--m {\n\n  .navigation__service-my-randstad {\n    align-items: center;\n    display: flex;\n    max-width: 130px;\n\n    span.hidden-until--l {\n      display: none;\n    }\n\n    .icon + span,\n    .person__initials + span,\n    .avatar + span {\n      @include text-ellipsis;\n      display: flex;\n      flex: 1;\n      margin-left: $spacing--xs;\n    }\n  }\n\n  // align modal with logo and hamburger.\n  // no padding bottom because that is a general modal css rule.\n\n  .modal--navigation {\n    .modal__main,\n    .modal__footer {\n      padding-left: 50px;\n      padding-right: 50px;\n    }\n  }\n\n  // popover without language toggle next to it\n  .navigation__service--minimal ~ .popover::before {\n    right: 80px; //was 66px\n  }\n}\n\n// viewport l\n@include viewport--l {\n  .navigation {\n    min-height: $baseline * 16.6; // make navigation 166px tall even if sub nav is not available\n    position: relative;\n    z-index: 3;\n\n    &__menu a,\n    &__link-bar a,\n    &__service a,\n    .breadcrumb a {\n      color: $color-alpha--four-50;\n      transition: color $transition-duration--fast;\n      text-decoration: none;\n\n      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.\n      // background color mapping\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--yellow &,\n      .bg-brand--turquoise &,\n      .bg-brand--red & {\n        color: $color-alpha--two-70;\n      }\n      // ! //\n\n      @include bg-variants() {\n        color: variant-property('navigationLinkIdle');\n      }\n    }\n\n    // ! deprecated\n    &__menu a:hover,\n    &__link-bar a:hover,\n    &__service a:hover,\n    .breadcrumb a:hover,\n    &__menu-item--active,\n    &__menu-item--active a,\n    &__service-item--active a {\n      color: $color-brand--four;\n      text-decoration: none;\n      // background color mapping\n      .bg-brand--off-white &,\n      .bg-brand--white &,\n      .bg-brand--yellow &,\n      .bg-brand--turquoise &,\n      .bg-brand--red & {\n        color: $color-brand--two;\n      }\n      // ! //\n\n      // new color mapping\n      @include bg-variants() {\n        color: variant-property('navigationLinkHover');\n      }\n    }\n\n    // wrapper\n    &__wrapper {\n      position: relative;\n    }\n\n    // top\n    &__top {\n      height: $baseline * 12.1;\n      align-items: flex-end;\n      position: relative;\n    }\n\n    .logo {\n      left: 0;\n      position: absolute;\n      top: $spacing--m;\n      width: 150px;\n\n      svg {\n        height: $baseline * 2.241; // provide SVG height to fix IE issues\n        width: 150px;\n      }\n    }\n\n    // menu\n    &__menu {\n      @include font-style('body--m');\n      align-items: flex-end;\n      display: flex;\n\n      &-item {\n        position: relative;\n      }\n\n      li + li {\n        margin-left: 25px;\n      }\n    }\n\n    // main\n    &__menu--main {\n      margin-bottom: -1px; // make border of active items align with divider\n      overflow: hidden;\n\n      .navigation__menu-item {\n        min-height: $baseline * 4.5;\n        max-height: $baseline * 5.9; // allow for only two lines of text\n        padding-bottom: $spacing--xs;\n      }\n\n      .navigation__menu-item--active::after {\n        background: currentColor;\n        bottom: 0;\n        content: '';\n        height: $baseline * 0.2;\n        left: 0;\n        position: absolute;\n        width: 100%;\n\n        .my-environment & {\n          bottom: 2px;\n        }\n      }\n    }\n\n    // sub\n    &__menu--sub {\n      padding: $spacing--xs 0;\n    }\n\n    // service menu\n    &__service {\n      @include font-style('body--m');\n      margin-bottom: -1px;\n\n      &-item {\n        line-height: 60px;\n        margin-left: $spacing--s;\n        position: relative;\n      }\n\n      &-item--active a::after {\n        background: currentColor;\n        bottom: 0;\n        content: '';\n        height: $baseline * 0.2;\n        left: 0;\n        position: absolute;\n        width: 100%;\n      }\n\n      &-link {\n        display: flex;\n      }\n\n      .icon {\n        align-self: center;\n        color: currentColor;\n        flex-shrink: 0;\n\n        &:hover {\n          color: currentColor;\n        }\n      }\n\n      .icon + span,\n      .person__initials + span,\n      .avatar + span {\n        display: none;\n      }\n\n      span.favorites__counter {\n        display: block;\n        margin-left: $spacing--xs;\n      }\n\n      .person__initials {\n        border-color: currentColor;\n        height: $baseline * 2.6;\n        width: 26px;\n      }\n\n      .person__initials span {\n        color: currentColor;\n      }\n    }\n\n    // utility bar\n    &__link-bar {\n      position: absolute;\n      right: 0;\n      top: $baseline * 0.5;\n    }\n\n    // min-height exception for My Environment nav\n    &.my-environment {\n      min-height: unset;\n    }\n\n    // light from viewport l\n    &.navigation--light-from-l {\n      color: returnColorCSSVar('white-alpha-50');\n\n      .navigation__menu a,\n      .navigation__link-bar a,\n      .navigation__service a,\n      .breadcrumb a {\n        color: returnColorCSSVar('white-alpha-50');\n\n        &:hover {\n          color: returnColorCSSVar('white');\n        }\n      }\n\n      .navigation__menu-item.navigation__menu-item--active,\n      .navigation__menu-item.navigation__menu-item--active a {\n        color: returnColorCSSVar('white');\n      }\n\n      .navigation__top {\n        border-bottom-color: returnColorCSSVar('white-alpha-50');\n      }\n\n      .logo svg {\n        fill: returnColorCSSVar('white');\n      }\n\n      .breadcrumb__item:before {\n        background-color: returnColorCSSVar('white');\n      }\n    }\n\n    &.navigation--dark-from-l {\n      color: returnColorCSSVar('brand-secondary-alpha-70');\n\n      .navigation__menu a,\n      .navigation__link-bar a,\n      .navigation__service a,\n      .breadcrumb a {\n        color: returnColorCSSVar('brand-secondary-alpha-70');\n\n        &:hover {\n          color: returnColorCSSVar('brand-secondary');\n        }\n      }\n\n      .navigation__menu-item.navigation__menu-item--active,\n      .navigation__menu-item.navigation__menu-item--active a {\n        color: returnColorCSSVar('brand-secondary');\n      }\n\n      .navigation__top {\n        border-bottom-color: returnColorCSSVar('brand-secondary-alpha-70');\n      }\n\n      .logo svg {\n        fill: returnColorCSSVar('brand-primary');\n      }\n\n      .breadcrumb__item:before {\n        background-color: returnColorCSSVar('brand-secondary-alpha-70');\n      }\n    }\n\n    // popover\n    .popover {\n      color: $color-brand--two;\n      position: absolute;\n      right: -20px;\n      top: $baseline * 12;\n      z-index: 3;\n\n      &::before {\n        right: $baseline * 10;\n      }\n    }\n\n    // popover without language toggle next to it\n    .navigation__service--minimal ~ .popover::before {\n      right: 20px; // was 18\n    }\n  }\n}\n\n// viewport xl\n@include viewport--xl {\n  .navigation {\n    min-height: $baseline * 13.5; // make navigation 135px even if sub nav is not available\n    &__top {\n      height: $baseline * 9;\n    }\n\n    .logo {\n      position: static;\n      margin-bottom: $baseline * 2.4;\n      margin-right: $spacing--m;\n    }\n\n    &__service {\n      &-item {\n        margin-left: $spacing--m;\n      }\n\n      .icon + span,\n      .person__initials + span,\n      .avatar + span {\n        display: block;\n        margin-left: $spacing--xs;\n      }\n    }\n\n    .popover {\n      right: 0;\n      top: $baseline * 9;\n\n      &::before {\n        right: $baseline * 16;\n      }\n    }\n\n    // popover without language toggle next to it\n    .navigation__service--minimal ~ .popover::before {\n      right: 80px; // was 60px\n    }\n  }\n}\n\n// viewport xxl\n@include viewport--xxl {\n  .navigation {\n    &__top {\n      margin: 0 -30px;\n      padding: ($baseline * 2.6) $spacing--m 0;\n    }\n\n    .logo {\n      margin-right: $baseline * 4;\n      width: 160px;\n\n      svg {\n        height: $baseline * 2.689; // provide SVG height to fix IE issues\n        width: 160px;\n      }\n    }\n\n    &__menu li + li {\n      margin-left: $spacing--m;\n    }\n\n    &__link-bar {\n      right: $spacing--m;\n    }\n  }\n}\n","$transition-duration--faster: 0.1s;\n$transition-duration--fast: 0.2s;\n$transition-duration: 0.3s;\n$transition-duration--slow: 0.5s;\n$transition-duration--slower: 0.7s;\n$transition-duration--slowest: 0.9s;\n"]}