@ilo-org/react 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/.storybook/manager-head.html +1 -6
  2. package/.storybook/preview.tsx +7 -0
  3. package/.turbo/turbo-build.log +78 -77
  4. package/.turbo/turbo-check.log +1 -1
  5. package/.turbo/turbo-test.log +28 -28
  6. package/CHANGELOG.md +38 -0
  7. package/README.md +183 -5
  8. package/package.json +6 -6
  9. package/src/components/Video/VideoPlayer.tsx +11 -2
  10. package/src/stories/Introduction.stories.mdx +252 -6
  11. package/src/stories/Welcome.stories.mdx +63 -0
  12. package/storybook-static/212.faba6ad0.iframe.bundle.js +7 -0
  13. package/storybook-static/{804.292f3e06.iframe.bundle.js.LICENSE.txt → 212.faba6ad0.iframe.bundle.js.LICENSE.txt} +0 -0
  14. package/storybook-static/212.faba6ad0.iframe.bundle.js.map +1 -0
  15. package/storybook-static/iframe.html +2 -2
  16. package/storybook-static/index.html +1 -1
  17. package/storybook-static/{main.2a251da6.iframe.bundle.js → main.22c1d441.iframe.bundle.js} +1 -1
  18. package/storybook-static/project.json +1 -1
  19. package/storybook-static/static/css/main.d45ebb04.css +3 -0
  20. package/storybook-static/static/css/main.d45ebb04.css.map +1 -0
  21. package/src/public/favicon.ico +0 -0
  22. package/src/public/index.html +0 -43
  23. package/src/public/logo192.png +0 -0
  24. package/src/public/logo512.png +0 -0
  25. package/src/public/manifest.json +0 -25
  26. package/src/public/robots.txt +0 -3
  27. package/storybook-static/804.292f3e06.iframe.bundle.js +0 -2
  28. package/storybook-static/static/css/main.23626b74.css +0 -3
  29. package/storybook-static/static/css/main.23626b74.css.map +0 -1
package/storybook-static/static/css/main.d45ebb04.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"static/css/main.d45ebb04.css","mappings":"AAWA","sources":["webpack://@ilo-org/react/../styles/scss/_reset.scss","webpack://@ilo-org/react/../fonts/index.scss","webpack://@ilo-org/react/../styles/scss/_typographymonorepo.scss","webpack://@ilo-org/react/../themes/build/scss/_tokens.scss","webpack://@ilo-org/react/../styles/scss/components/_accordion.scss","webpack://@ilo-org/react/../styles/scss/_mixins.scss","webpack://@ilo-org/react/../styles/scss/_animations.scss","webpack://@ilo-org/react/../styles/scss/components/_breadcrumb.scss","webpack://@ilo-org/react/../styles/scss/components/_button.scss","webpack://@ilo-org/react/../styles/scss/components/_callout.scss","webpack://@ilo-org/react/../styles/scss/components/_card.scss","webpack://@ilo-org/react/../styles/scss/components/_cardgroup.scss","webpack://@ilo-org/react/../styles/scss/components/_checkbox.scss","webpack://@ilo-org/react/../styles/scss/components/_contextmenu.scss","webpack://@ilo-org/react/../styles/scss/components/_credit.scss","webpack://@ilo-org/react/../styles/scss/components/_datepicker.scss","webpack://@ilo-org/react/../styles/scss/components/_dropdown.scss","webpack://@ilo-org/react/../styles/scss/components/_empty.scss","webpack://@ilo-org/react/../styles/scss/components/_fieldset.scss","webpack://@ilo-org/react/../styles/scss/components/_file-upload.scss","webpack://@ilo-org/react/../styles/scss/components/_form.scss","webpack://@ilo-org/react/../styles/scss/components/_formgroup.scss","webpack://@ilo-org/react/../styles/scss/components/_footer.scss","webpack://@ilo-org/react/../styles/scss/components/_heading.scss","webpack://@ilo-org/react/../styles/scss/components/_hero.scss","webpack://@ilo-org/react/../styles/scss/components/_image.scss","webpack://@ilo-org/react/../styles/scss/components/_input.scss","webpack://@ilo-org/react/../styles/scss/components/_link.scss","webpack://@ilo-org/react/../styles/scss/components/_linklist.scss","webpack://@ilo-org/react/../styles/scss/components/_list.scss","webpack://@ilo-org/react/../styles/scss/components/_loading.scss","webpack://@ilo-org/react/../styles/scss/components/_modal.scss","webpack://@ilo-org/react/../styles/scss/components/_navigation.scss","webpack://@ilo-org/react/../styles/scss/components/_notification.scss","webpack://@ilo-org/react/../styles/scss/components/_pagination.scss","webpack://@ilo-org/react/../styles/scss/components/_profile.scss","webpack://@ilo-org/react/../styles/scss/components/_radio.scss","webpack://@ilo-org/react/../styles/scss/components/_readmore.scss","webpack://@ilo-org/react/../styles/scss/components/_richtext.scss","webpack://@ilo-org/react/../styles/scss/components/_searchfield.scss","webpack://@ilo-org/react/../styles/scss/components/_tabs.scss","webpack://@ilo-org/react/../styles/scss/components/_table.scss","webpack://@ilo-org/react/../styles/scss/components/_tableofcontents.scss","webpack://@ilo-org/react/../styles/scss/components/_textarea.scss","webpack://@ilo-org/react/../styles/scss/components/_tag.scss","webpack://@ilo-org/react/../styles/scss/components/_tooltip.scss","webpack://@ilo-org/react/../styles/scss/components/_video.scss"],"sourcesContent":["//\n// Copyright IBM Corp. 2018, 2018\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// http://meyerweb.com/eric/tools/css/reset/\n/// v2.0 | 20110126\n/// License: none (public domain)\n/// Start vendor reset\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n padding: 0;\n border: 0;\n margin: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote::before,\nblockquote::after,\nq::before,\nq::after {\n content: \"\";\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n/// End vendor reset\n\nhtml {\n box-sizing: border-box;\n}\n\nselect {\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\n/// Makes SVGs accessible in high contrast mode\n/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345\n@media screen and (-ms-high-contrast: active) {\n svg {\n fill: ButtonText;\n }\n}\n","/* -------------------------- */\n/* -------- Overpass -------- */\n/* -------------------------- */\n\n/* --- Overpass Medium --- */\n\n@font-face {\n font-family: \"Overpass\";\n src: url(\"~@ilo-org/fonts/assets/Overpass-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Overpass\";\n src: url(\"~@ilo-org/fonts/assets/Overpass-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n\n/* --- Overpass Light --- */\n\n@font-face {\n font-family: \"Overpass\";\n src: url(\"~@ilo-org/fonts/assets/Overpass-Light.eot\");\n src: url(\"~@ilo-org/fonts/assets/Overpass-Light.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Light.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Light.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Light.ttf\") format(\"truetype\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n\n/* --- Overpass Bold --- */\n\n@font-face {\n font-family: \"Overpass\";\n src: url(\"~@ilo-org/fonts/assets/Overpass-Bold.eot\");\n src: url(\"~@ilo-org/fonts/assets/Overpass-Bold.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Bold.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Bold.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/Overpass-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Overpass\";\n src: url(\"~@ilo-org/fonts/assets/Overpass-BoldItalic.eot\");\n src: url(\"~@ilo-org/fonts/assets/Overpass-BoldItalic.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/Overpass-BoldItalic.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/Overpass-BoldItalic.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/Overpass-BoldItalic.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n}\n\n/* --------------------------- */\n/* -------- Noto Sans -------- */\n/* --------------------------- */\n\n/* --- Noto Sans Normal --- */\n\n@font-face {\n font-family: \"Noto Sans\";\n src: url(\"~@ilo-org/fonts/assets/NotoSans.eot\");\n src: url(\"~@ilo-org/fonts/assets/NotoSans.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/NotoSans.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/NotoSans.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/NotoSans.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Noto Sans\";\n src: url(\"~@ilo-org/fonts/assets/NotoSans-Italic.eot\");\n src: url(\"~@ilo-org/fonts/assets/NotoSans-Italic.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Italic.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Italic.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Italic.ttf\") format(\"truetype\");\n font-weight: normal;\n font-style: italic;\n font-display: swap;\n}\n\n/* --- Noto Sans 700 --- */\n\n@font-face {\n font-family: \"Noto Sans\";\n src: url(\"~@ilo-org/fonts/assets/NotoSans-Bold.eot\");\n src: url(\"~@ilo-org/fonts/assets/NotoSans-Bold.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Bold.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Bold.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Noto Sans\";\n src: url(\"~@ilo-org/fonts/assets/NotoSans-BoldItalic.eot\");\n src: url(\"~@ilo-org/fonts/assets/NotoSans-BoldItalic.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-BoldItalic.woff2\") format(\"woff2\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-BoldItalic.woff\") format(\"woff\"),\n url(\"~@ilo-org/fonts/assets/NotoSans-BoldItalic.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n}\n","// Adapted from Carbon Library\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n// Load the theme vars and fonts\n@use \"@ilo-org/themes/build/scss/tokens\" as *;\n@forward \"@ilo-org/fonts/index\";\n\nhtml,\nbody {\n color: $color-font-base;\n font: #{$type-base-size}/#{$type-base-line-height} $fonts-copy;\n letter-spacing: $type-base-letter-spacing;\n -webkit-font-smoothing: antialiased;\n}\n\n/// Font family fallbacks for: Overpass, Noto Sans\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$font-families: (\n \"display\": unquote(\"#{$fonts-display}, sans-serif\"),\n \"copy\": unquote(\"#{$fonts-copy}, sans-serif\"),\n) !default;\n\n/// Get the font-family for a font\n/// @param {String} $name\n/// @return {String}\n/// @access public\n/// @group @carbon/type\n@function font-family($name) {\n @return map-get($font-families, $name);\n}\n\n/// Include the `font-family` definition for the given name in your selector\n/// @param {String} $name\n/// @access public\n/// @group @carbon/type\n@mixin font-family($name) {\n font-family: font-family($name);\n}\n\n/// Suggested font weights to be used in product\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$font-weights: (\n \"light\": 300,\n \"regular\": 400,\n \"semibold\": 600,\n \"bold\": 700,\n \"extrabold\": 800,\n) !default;\n\n/// Retrieve the font-weight value for a given name\n/// @param {String} $weight\n/// @return {Number}\n/// @access public\n/// @group @carbon/type\n@function font-weight($weight) {\n @return map-get($font-weights, $weight);\n}\n\n/// Set the `font-weight` property with the value for a given name\n/// @param {String} $weight\n/// @access public\n/// @group @carbon/type\n@mixin font-weight($weight) {\n font-weight: font-weight($weight);\n}\n","/**\n * Do not edit directly\n * Generated on Tue, 22 Nov 2022 22:22:44 GMT\n */\n\n/**\n* TOKENS:\n*/\n\n$borders-small: 1.5px !default;\n$borders-base: 2px !default;\n$borders-thick: 6px !default;\n$brand-ilo-blue: rgba(30, 45, 190, 1) !default;\n$brand-ilo-red: rgba(250, 60, 75, 1) !default;\n$brand-ilo-dark-blue: rgba(35, 0, 80, 1) !default;\n$brand-ilo-yellow: rgba(255, 205, 45, 1) !default;\n$brand-ilo-green: rgba(140, 225, 100, 1) !default;\n$brand-ilo-purple: rgba(150, 10, 85, 1) !default;\n$brand-ilo-purple-light: rgba(116, 96, 145, 1) !default;\n$brand-ilo-turquoise: rgba(5, 210, 210, 1) !default;\n$brand-ilo-dark-red: rgba(200, 48, 60, 1) !default;\n$brand-ilo-lighter-blue: rgba(235, 245, 253, 1) !default;\n$brand-ilo-light-blue: rgba(235, 245, 253, 1) !default;\n$brand-ilo-grey-light-alternate: rgba(246, 247, 248, 1) !default;\n$brand-ilo-grey-light: rgba(237, 240, 242, 1) !default;\n$brand-ilo-grey-ui: rgba(184, 196, 204, 1) !default;\n$brand-ilo-grey-accessible: rgba(109, 109, 109, 1) !default;\n$brand-ilo-grey-charcoal: rgba(45, 45, 45, 1) !default;\n$brand-ilo-black: rgba(45, 45, 45, 1) !default;\n$brand-ilo-white: rgba(255, 255, 255, 1) !default;\n$brand-ilo-ramp-blue: rgba(190, 220, 250, 1) !default;\n$brand-ilo-ramp-red: rgba(254, 216, 219, 1) !default;\n$brand-ilo-ramp-green: rgba(232, 249, 224, 1) !default;\n$brand-ilo-ramp-yellow: rgba(255, 245, 200, 1) !default;\n$breakpoints-x-small: 320px !default;\n$breakpoints-small: 414px !default;\n$breakpoints-medium: 610px !default;\n$breakpoints-large: 1024px !default;\n$breakpoints-x-large: 1168px !default;\n$breakpoints-xx-large: 1440px !default;\n$color-base-blue-lighter: $brand-ilo-lighter-blue !default;\n$color-base-blue-light: $brand-ilo-light-blue !default;\n$color-base-blue-intermediate: $brand-ilo-ramp-blue !default;\n$color-base-blue-medium: $brand-ilo-blue !default;\n$color-base-blue-dark: $brand-ilo-dark-blue !default;\n$color-base-green: $brand-ilo-green !default;\n$color-base-neutrals-white: $brand-ilo-white !default;\n$color-base-neutrals-alternate: $brand-ilo-grey-light-alternate !default;\n$color-base-neutrals-lighter: $brand-ilo-grey-light !default;\n$color-base-neutrals-light: $brand-ilo-grey-ui !default;\n$color-base-neutrals-medium: $brand-ilo-grey-accessible !default;\n$color-base-neutrals-dark: $brand-ilo-grey-charcoal !default;\n$color-base-neutrals-black: $brand-ilo-black !default;\n$color-base-purple-light: $brand-ilo-purple-light !default;\n$color-base-purple-medium: $brand-ilo-purple !default;\n$color-base-red-light: $brand-ilo-blue !default;\n$color-base-red-medium: $brand-ilo-red !default;\n$color-base-red-dark: $brand-ilo-dark-red !default;\n$color-base-turquoise: $brand-ilo-turquoise !default;\n$color-base-yellow: $brand-ilo-yellow !default;\n$color-ramp-blue: $brand-ilo-ramp-blue !default;\n$color-ramp-green: $brand-ilo-ramp-green !default;\n$color-ramp-red: $brand-ilo-ramp-red !default;\n$color-ramp-yellow: $brand-ilo-ramp-yellow !default;\n$color-accordion-border: $color-base-neutrals-lighter !default;\n$color-font-base: $color-base-neutrals-black !default;\n$color-font-blockquote: $color-base-purple-medium !default;\n$color-font-cite: $color-base-neutrals-medium !default;\n$color-font-caption: $color-base-neutrals-medium !default;\n$color-formelements-input-default-background: $color-base-neutrals-white !default;\n$color-formelements-input-default-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-input-default-border-left: $color-base-neutrals-light !default;\n$color-formelements-input-default-border-right: $color-base-neutrals-light !default;\n$color-formelements-input-default-border-top: $color-base-neutrals-light !default;\n$color-formelements-input-default-color: $color-base-neutrals-medium !default;\n$color-formelements-input-hover-background: $color-base-blue-light !default;\n$color-formelements-input-hover-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-input-hover-border-left: $color-base-blue-medium !default;\n$color-formelements-input-hover-border-right: $color-base-neutrals-light !default;\n$color-formelements-input-hover-border-top: $color-base-neutrals-light !default;\n$color-formelements-input-hover-color: $color-base-neutrals-dark !default;\n$color-formelements-input-focus-background: $color-base-blue-light !default;\n$color-formelements-input-focus-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-input-focus-border-left: $color-base-blue-medium !default;\n$color-formelements-input-focus-border-right: $color-base-neutrals-light !default;\n$color-formelements-input-focus-border-top: $color-base-neutrals-light !default;\n$color-formelements-input-focus-color: $color-base-neutrals-dark !default;\n$color-formelements-input-error-background: $color-base-neutrals-white !default;\n$color-formelements-input-error-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-input-error-border-left: $color-base-red-dark !default;\n$color-formelements-input-error-border-right: $color-base-neutrals-light !default;\n$color-formelements-input-error-border-top: $color-base-neutrals-light !default;\n$color-formelements-input-error-color: $color-base-neutrals-medium !default;\n$color-formelements-input-disabled-background: $color-base-neutrals-white !default;\n$color-formelements-input-disabled-border-bottom: $color-base-neutrals-lighter !default;\n$color-formelements-input-disabled-border-left: $color-base-neutrals-lighter !default;\n$color-formelements-input-disabled-border-right: $color-base-neutrals-lighter !default;\n$color-formelements-input-disabled-border-top: $color-base-neutrals-lighter !default;\n$color-formelements-input-disabled-color: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-default-background: $color-base-neutrals-lighter !default;\n$color-formelements-inputbutton-default-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-default-border-left: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-default-border-right: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-default-border-top: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-default-color: $color-base-blue-dark !default;\n$color-formelements-inputbutton-hover-background: $color-base-blue-light !default;\n$color-formelements-inputbutton-hover-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-hover-border-left: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-hover-border-right: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-hover-border-top: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-hover-color: $color-base-blue-medium !default;\n$color-formelements-inputbutton-focus-background: $color-base-blue-light !default;\n$color-formelements-inputbutton-focus-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-focus-border-left: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-focus-border-right: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-focus-border-top: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-focus-color: $color-base-blue-medium !default;\n$color-formelements-inputbutton-active-background: $color-base-blue-medium !default;\n$color-formelements-inputbutton-active-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-active-border-left: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-active-border-right: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-active-border-top: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-active-color: $color-base-blue-light !default;\n$color-formelements-inputbutton-error-background: $color-base-neutrals-white !default;\n$color-formelements-inputbutton-error-border-bottom: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-error-border-left: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-error-border-right: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-error-border-top: $color-base-neutrals-light !default;\n$color-formelements-inputbutton-error-color: $color-base-neutrals-medium !default;\n$color-formelements-inputbutton-disabled-background: $color-base-neutrals-white !default;\n$color-formelements-inputbutton-disabled-border-bottom: $color-base-neutrals-lighter !default;\n$color-formelements-inputbutton-disabled-border-left: $color-base-neutrals-lighter !default;\n$color-formelements-inputbutton-disabled-border-right: $color-base-neutrals-lighter !default;\n$color-formelements-inputbutton-disabled-border-top: $color-base-neutrals-lighter !default;\n$color-formelements-inputbutton-disabled-color: $color-base-neutrals-light !default;\n$color-formelements-uploadedfile-default-background: $color-base-neutrals-lighter !default;\n$color-formelements-uploadedfile-default-border-bottom: $color-base-neutrals-lighter !default;\n$color-formelements-uploadedfile-default-border-left: $color-base-blue-dark !default;\n$color-formelements-uploadedfile-default-border-right: $color-base-neutrals-lighter !default;\n$color-formelements-uploadedfile-default-border-top: $color-base-neutrals-lighter !default;\n$color-formelements-uploadedfile-default-color: $color-base-neutrals-dark !default;\n$color-hero-article: $color-base-blue-light !default;\n$color-hero-image: rgba(0, 0, 0, 0) !default;\n$color-hero-project: $color-base-blue-light !default;\n$color-hero-portal-background: $color-base-blue-dark !default;\n$color-hero-portal-color: $color-base-neutrals-white !default;\n$color-hero-card-dark-background: $color-base-blue-dark !default;\n$color-hero-card-dark-color: $color-base-neutrals-white !default;\n$color-hero-card-dark-icon-color: $color-base-neutrals-white !default;\n$color-hero-card-dark-iconhover-color: $color-base-blue-medium !default;\n$color-hero-card-dark-iconhover-background: $color-base-neutrals-white !default;\n$color-hero-card-dark-eyebrow-color: $color-base-neutrals-white !default;\n$color-hero-card-dark-datecopy-color: $color-base-neutrals-white !default;\n$color-hero-card-light-background: $color-base-neutrals-white !default;\n$color-hero-card-light-color: $color-base-neutrals-dark !default;\n$color-hero-card-light-eyebrow-color: $color-base-purple-medium !default;\n$color-hero-card-light-datecopy-color: $color-base-neutrals-medium !default;\n$color-hero-card-light-link-color: $color-base-neutrals-white !default;\n$color-hero-card-light-icon-color: $color-base-neutrals-medium !default;\n$color-hero-card-light-iconhover-background: $color-base-blue-light !default;\n$color-hero-card-light-iconhover-color: $color-base-blue-medium !default;\n$color-link-background-default: rgba(0, 0, 0, 0) !default;\n$color-link-background-hover: $color-base-neutrals-white !default;\n$color-link-background-focus: $color-base-yellow !default;\n$color-link-background-active: $color-base-yellow !default;\n$color-link-background-visited: rgba(0, 0, 0, 0) !default;\n$color-link-background-dark-default: rgba(0, 0, 0, 0) !default;\n$color-link-background-dark-hover: $color-base-neutrals-white !default;\n$color-link-background-dark-focus: $color-base-yellow !default;\n$color-link-background-dark-active: $color-base-yellow !default;\n$color-link-background-dark-visited: rgba(0, 0, 0, 0) !default;\n$color-link-background-footer-default: rgba(0, 0, 0, 0) !default;\n$color-link-background-footer-hover: $color-base-neutrals-white !default;\n$color-link-background-footer-focus: $color-base-yellow !default;\n$color-link-background-footer-active: $color-base-yellow !default;\n$color-link-background-footer-visited: rgba(0, 0, 0, 0) !default;\n$color-link-text-default: $color-base-blue-dark !default;\n$color-link-text-hover: $color-base-blue-medium !default;\n$color-link-text-focus: $color-base-blue-dark !default;\n$color-link-text-active: $color-base-blue-dark !default;\n$color-link-text-visited: $color-base-purple-medium !default;\n$color-link-text-dark-default: $color-base-neutrals-lighter !default;\n$color-link-text-dark-hover: $color-base-blue-medium !default;\n$color-link-text-dark-focus: $color-base-blue-dark !default;\n$color-link-text-dark-active: $color-base-blue-dark !default;\n$color-link-text-dark-visited: $color-base-neutrals-light !default;\n$color-link-text-footer-default: $color-base-neutrals-medium !default;\n$color-link-text-footer-hover: $color-base-blue-medium !default;\n$color-link-text-footer-focus: $color-base-blue-dark !default;\n$color-link-text-footer-active: $color-base-blue-dark !default;\n$color-link-text-footer-visited: $color-base-purple-medium !default;\n$color-link-underline-default: $color-base-blue-medium !default;\n$color-link-underline-hover: $color-base-blue-medium !default;\n$color-link-underline-focus: $color-base-blue-dark !default;\n$color-link-underline-active: $color-base-blue-dark !default;\n$color-link-underline-visited: $color-base-purple-medium !default;\n$color-link-underline-dark-default: $color-base-neutrals-white !default;\n$color-link-underline-dark-hover: $color-base-blue-medium !default;\n$color-link-underline-dark-focus: $color-base-blue-dark !default;\n$color-link-underline-dark-active: $color-base-blue-dark !default;\n$color-link-underline-dark-visited: $color-base-neutrals-light !default;\n$color-link-underline-footer-default: $color-base-neutrals-medium !default;\n$color-link-underline-footer-hover: $color-base-blue-medium !default;\n$color-link-underline-footer-focus: $color-base-blue-dark !default;\n$color-link-underline-footer-active: $color-base-blue-dark !default;\n$color-link-underline-footer-visited: $color-base-purple-medium !default;\n$color-tag-background-default: $color-base-neutrals-lighter !default;\n$color-tag-background-hover: $color-base-blue-light !default;\n$color-tag-background-focus: $color-base-blue-light !default;\n$color-tag-background-active: $color-base-neutrals-lighter !default;\n$color-tag-background-visited: $color-base-neutrals-lighter !default;\n$color-tag-text-default: $color-base-neutrals-medium !default;\n$color-tag-text-hover: $color-base-blue-medium !default;\n$color-tag-text-focus: $color-base-blue-medium !default;\n$color-tag-text-active: $color-base-blue-dark !default;\n$color-tag-text-visited: $color-base-neutrals-medium !default;\n$color-tooltip-default-background: $color-base-neutrals-white !default;\n$color-tooltip-default-dropshadow: $color-base-blue-dark !default;\n$color-tooltip-default-text: $color-base-neutrals-dark !default;\n$color-tooltip-dark-background: $color-base-neutrals-dark !default;\n$color-tooltip-dark-dropshadow: $color-base-blue-dark !default;\n$color-tooltip-dark-text: $color-base-neutrals-lighter !default;\n$color-ux-background-default: $color-base-neutrals-white !default;\n$color-ux-background-disabled: $color-base-neutrals-lighter !default;\n$color-ux-background-highlight: $color-base-neutrals-lighter !default;\n$color-ux-background-hover: $color-base-blue-light !default;\n$color-ux-background-focus: $color-base-neutrals-white !default;\n$color-ux-background-active: $color-base-blue-medium !default;\n$color-ux-background-alert: $color-base-red-dark !default;\n$color-ux-background-attention: $color-base-yellow !default;\n$color-ux-borders-default: $color-base-neutrals-light !default;\n$color-ux-borders-error: $color-base-red-dark !default;\n$color-ux-borders-highlight: $color-base-purple-medium !default;\n$color-ux-borders-hover: $color-base-blue-medium !default;\n$color-ux-borders-focus: $color-base-yellow !default;\n$color-ux-borders-active: $color-base-blue-medium !default;\n$color-ux-borders-alert: $color-base-red-dark !default;\n$color-ux-borders-attention: $color-base-yellow !default;\n$color-ux-labels-actionable: $color-base-blue-dark !default;\n$color-ux-labels-darkbg: $color-base-neutrals-white !default;\n$color-ux-labels-default: $color-base-neutrals-medium !default;\n$color-ux-labels-error: $color-base-red-dark !default;\n$color-ux-labels-focus: $color-base-blue-dark !default;\n$color-ux-labels-hover: $color-base-blue-medium !default;\n$color-ux-labels-active: $color-base-blue-light !default;\n$color-ux-labels-alert: $color-base-neutrals-white !default;\n$color-ux-caption-background: rgba(0, 0, 0, 0) !default;\n$color-ux-caption-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-caption-border-left: $color-base-neutrals-light !default;\n$color-ux-caption-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-caption-border-top: rgba(0, 0, 0, 0) !default;\n$color-ux-caption-text: $color-base-neutrals-black !default;\n$color-ux-credit-background: $color-base-neutrals-dark !default;\n$color-ux-credit-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-credit-border-left: rgba(0, 0, 0, 0) !default;\n$color-ux-credit-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-credit-border-top: rgba(0, 0, 0, 0) !default;\n$color-ux-credit-text: $color-base-neutrals-white !default;\n$color-ux-horizontal-rule-default: $color-base-neutrals-lighter !default;\n$color-ux-notification-background: $color-base-neutrals-white !default;\n$color-ux-notification-icon: $color-base-neutrals-white !default;\n$color-ux-notification-text: $color-base-neutrals-dark !default;\n$color-ux-notification-type-error: $color-base-red-medium !default;\n$color-ux-notification-type-info: $color-base-blue-medium !default;\n$color-ux-notification-type-success: $color-base-green !default;\n$color-ux-notification-type-warning: $color-base-yellow !default;\n$color-ux-pagination-default-background: $color-base-neutrals-lighter !default;\n$color-ux-pagination-default-icon: $color-base-blue-dark !default;\n$color-ux-pagination-hover-background: $color-base-blue-light !default;\n$color-ux-pagination-hover-icon: $color-base-blue-medium !default;\n$color-ux-readmore-default-background: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-default-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-default-border-left: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-default-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-default-border-top: $color-base-neutrals-lighter !default;\n$color-ux-readmore-hover-background: $color-base-blue-light !default;\n$color-ux-readmore-hover-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-hover-border-left: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-hover-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-readmore-hover-border-top: $color-base-blue-medium !default;\n$color-ux-table-background: $color-base-blue-intermediate !default;\n$color-ux-table-content-background: $color-base-neutrals-white !default;\n$color-ux-table-cell-background: $color-base-neutrals-white !default;\n$color-ux-table-zebra-background: $color-base-neutrals-alternate !default;\n$color-ux-table-hover-background: $color-base-blue-lighter !default;\n$color-ux-table-selected-background: $color-base-blue-intermediate !default;\n$color-ux-tableofcontents-items-default-background: $color-base-neutrals-lighter !default;\n$color-ux-tableofcontents-items-default-border: $color-base-neutrals-white !default;\n$color-ux-tableofcontents-items-default-color: $color-base-blue-dark !default;\n$color-ux-tableofcontents-items-default-icon: $color-base-blue-dark !default;\n$color-ux-tableofcontents-items-hover-background: $color-base-blue-light !default;\n$color-ux-tableofcontents-items-hover-border: $color-base-blue-medium !default;\n$color-ux-tableofcontents-items-hover-color: $color-base-blue-medium !default;\n$color-ux-tableofcontents-items-hover-icon: $color-base-blue-medium !default;\n$color-ux-tableofcontents-items-active-background: $color-base-neutrals-white !default;\n$color-ux-tableofcontents-items-active-border: $color-base-blue-dark !default;\n$color-ux-tableofcontents-items-active-color: $color-base-blue-dark !default;\n$color-ux-tableofcontents-items-active-icon: $color-base-blue-dark !default;\n$color-ux-video-controls-default-background: $color-base-neutrals-dark !default;\n$color-ux-video-controls-default-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-default-border-left: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-default-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-default-border-top: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-default-icon: $color-base-neutrals-lighter !default;\n$color-ux-video-controls-hover-background: $color-base-blue-light !default;\n$color-ux-video-controls-hover-border-bottom: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-hover-border-left: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-hover-border-right: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-hover-border-top: rgba(0, 0, 0, 0) !default;\n$color-ux-video-controls-hover-icon: $color-base-blue-medium !default;\n$fonts-display: Overpass !default;\n$fonts-copy: Noto Sans !default;\n$opacity-disabled: 45% !default;\n$radius-button-bottom-left: 2px !default;\n$radius-button-bottom-right: 2px !default;\n$radius-button-top-left: 2px !default;\n$radius-button-top-right: 2px !default;\n$spacing-base: 8px !default;\n$spacing-padding-0-5: 4px !default;\n$spacing-padding-1: 8px !default;\n$spacing-padding-1-5: 12px !default;\n$spacing-padding-2: 16px !default;\n$spacing-padding-3: 24px !default;\n$spacing-padding-4: 32px !default;\n$spacing-padding-5: 40px !default;\n$spacing-padding-6: 48px !default;\n$spacing-padding-7: 56px !default;\n$spacing-padding-8: 64px !default;\n$spacing-padding-9: 72px !default;\n$spacing-padding-10: 80px !default;\n$spacing-padding-11: 88px !default;\n$spacing-padding-12: 96px !default;\n$spacing-padding-13: 104px !default;\n$spacing-padding-14: 112px !default;\n$spacing-padding-15: 120px !default;\n$spacing-horizontal-rule: 3px !default;\n$spacing-label-padding: 3px !default;\n$spacing-ui-padding-sm: 12px !default;\n$spacing-ui-padding: 18px !default;\n$spacing-ui-padding-lg: 24px !default;\n$spacing-ui-padding-xl: 32px !default;\n$spacing-ui-padding-xxl: 40px !default;\n$spacing-boxpadding-button-small-bottom: 3px !default;\n$spacing-boxpadding-button-small-left: 13px !default;\n$spacing-boxpadding-button-small-right: 13px !default;\n$spacing-boxpadding-button-small-top: 3px !default;\n$spacing-boxpadding-button-medium-bottom: 7px !default;\n$spacing-boxpadding-button-medium-left: 18px !default;\n$spacing-boxpadding-button-medium-right: 18px !default;\n$spacing-boxpadding-button-medium-top: 7px !default;\n$spacing-boxpadding-button-large-bottom: 10px !default;\n$spacing-boxpadding-button-large-left: 22px !default;\n$spacing-boxpadding-button-large-right: 22px !default;\n$spacing-boxpadding-button-large-top: 10px !default;\n$spacing-boxpadding-button-icon-small-bottom: 5px !default;\n$spacing-boxpadding-button-icon-small-left: 34px !default;\n$spacing-boxpadding-button-icon-small-right: 34px !default;\n$spacing-boxpadding-button-icon-small-top: 5px !default;\n$spacing-boxpadding-button-icon-medium-bottom: 9px !default;\n$spacing-boxpadding-button-icon-medium-left: 42px !default;\n$spacing-boxpadding-button-icon-medium-right: 42px !default;\n$spacing-boxpadding-button-icon-medium-top: 9px !default;\n$spacing-boxpadding-button-icon-large-bottom: 10px !default;\n$spacing-boxpadding-button-icon-large-left: 46px !default;\n$spacing-boxpadding-button-icon-large-right: 46px !default;\n$spacing-boxpadding-button-icon-large-top: 10px !default;\n$spacing-boxpadding-caption-small-bottom: 0 !default;\n$spacing-boxpadding-caption-small-left: 8px !default;\n$spacing-boxpadding-caption-small-right: 0 !default;\n$spacing-boxpadding-caption-small-top: 0 !default;\n$spacing-boxpadding-caption-medium-bottom: 0 !default;\n$spacing-boxpadding-caption-medium-left: 8px !default;\n$spacing-boxpadding-caption-medium-right: 0 !default;\n$spacing-boxpadding-caption-medium-top: 0 !default;\n$spacing-boxpadding-caption-large-bottom: 0 !default;\n$spacing-boxpadding-caption-large-left: 8px !default;\n$spacing-boxpadding-caption-large-right: 0 !default;\n$spacing-boxpadding-caption-large-top: 0 !default;\n$spacing-boxpadding-credit-small-bottom: 4px !default;\n$spacing-boxpadding-credit-small-left: 12px !default;\n$spacing-boxpadding-credit-small-right: 8px !default;\n$spacing-boxpadding-credit-small-top: 4px !default;\n$spacing-boxpadding-credit-medium-bottom: 4px !default;\n$spacing-boxpadding-credit-medium-left: 12px !default;\n$spacing-boxpadding-credit-medium-right: 8px !default;\n$spacing-boxpadding-credit-medium-top: 4px !default;\n$spacing-boxpadding-credit-large-bottom: 4px !default;\n$spacing-boxpadding-credit-large-left: 12px !default;\n$spacing-boxpadding-credit-large-right: 8px !default;\n$spacing-boxpadding-credit-large-top: 4px !default;\n$spacing-formelements-input-default-height: 48px !default;\n$spacing-formelements-input-default-border-bottom: 2px !default;\n$spacing-formelements-input-default-border-left: 2px !default;\n$spacing-formelements-input-default-border-right: 2px !default;\n$spacing-formelements-input-default-border-top: 2px !default;\n$spacing-formelements-input-default-margin-bottom: 0 !default;\n$spacing-formelements-input-default-margin-left: 0 !default;\n$spacing-formelements-input-default-margin-right: 0 !default;\n$spacing-formelements-input-default-margin-top: 0 !default;\n$spacing-formelements-input-default-padding-bottom: 16px !default;\n$spacing-formelements-input-default-padding-left: 12px !default;\n$spacing-formelements-input-default-padding-right: 12px !default;\n$spacing-formelements-input-default-padding-top: 16px !default;\n$spacing-formelements-input-default-width: 100% !default;\n$spacing-formelements-input-focus-border-bottom: 2px !default;\n$spacing-formelements-input-focus-border-left: 3px !default;\n$spacing-formelements-input-focus-border-right: 2px !default;\n$spacing-formelements-input-focus-border-top: 2px !default;\n$spacing-formelements-input-hover-border-bottom: 2px !default;\n$spacing-formelements-input-hover-border-left: 3px !default;\n$spacing-formelements-input-hover-border-right: 2px !default;\n$spacing-formelements-input-hover-border-top: 2px !default;\n$spacing-formelements-input-error-border-bottom: 2px !default;\n$spacing-formelements-input-error-border-left: 3px !default;\n$spacing-formelements-input-error-border-right: 2px !default;\n$spacing-formelements-input-error-border-top: 2px !default;\n$spacing-formelements-inputbutton-default-height: 48px !default;\n$spacing-formelements-inputbutton-default-border-bottom: 2px !default;\n$spacing-formelements-inputbutton-default-border-left: 0 !default;\n$spacing-formelements-inputbutton-default-border-right: 2px !default;\n$spacing-formelements-inputbutton-default-border-top: 2px !default;\n$spacing-formelements-inputbutton-default-borderrtl-bottom: 2px !default;\n$spacing-formelements-inputbutton-default-borderrtl-left: 2px !default;\n$spacing-formelements-inputbutton-default-borderrtl-right: 0 !default;\n$spacing-formelements-inputbutton-default-borderrtl-top: 2px !default;\n$spacing-formelements-inputbutton-default-margin-bottom: 0 !default;\n$spacing-formelements-inputbutton-default-margin-left: 0 !default;\n$spacing-formelements-inputbutton-default-margin-right: 0 !default;\n$spacing-formelements-inputbutton-default-margin-top: 0 !default;\n$spacing-formelements-inputbutton-default-padding-bottom: 16px !default;\n$spacing-formelements-inputbutton-default-padding-left: 12px !default;\n$spacing-formelements-inputbutton-default-padding-right: 12px !default;\n$spacing-formelements-inputbutton-default-padding-top: 16px !default;\n$spacing-formelements-inputbutton-default-width: 48px !default;\n$spacing-formelements-uploadedfile-default-height: 48px !default;\n$spacing-formelements-uploadedfile-default-border-bottom: 2px !default;\n$spacing-formelements-uploadedfile-default-border-left: 3px !default;\n$spacing-formelements-uploadedfile-default-border-right: 2px !default;\n$spacing-formelements-uploadedfile-default-border-top: 2px !default;\n$spacing-formelements-uploadedfile-default-margin-bottom: 0 !default;\n$spacing-formelements-uploadedfile-default-margin-left: 0 !default;\n$spacing-formelements-uploadedfile-default-margin-right: 0 !default;\n$spacing-formelements-uploadedfile-default-margin-top: 24px !default;\n$spacing-formelements-uploadedfile-default-padding-bottom: 16px !default;\n$spacing-formelements-uploadedfile-default-padding-left: 11px !default;\n$spacing-formelements-uploadedfile-default-padding-right: 12px !default;\n$spacing-formelements-uploadedfile-default-padding-top: 13px !default;\n$spacing-formelements-uploadedfile-default-width: 100% !default;\n$spacing-hero-article-padding-desktop-top: 112px !default;\n$spacing-hero-article-padding-mobile-top: 88px !default;\n$spacing-hero-article-position-top: 80px !default;\n$spacing-hero-portal-padding-top: 128px !default;\n$spacing-hero-portal-height: 80px !default;\n$spacing-hero-project-padding-desktop-top: 112px !default;\n$spacing-hero-project-padding-mobile-top: 88px !default;\n$spacing-hero-project-position-top: 80px !default;\n$spacing-hero-image-padding-desktop-top: 128px !default;\n$spacing-hero-image-padding-mobile-top: 88px !default;\n$spacing-hero-image-position-top: 80px !default;\n$spacing-hero-image-height: 592px !default;\n$spacing-hero-card-padding-mobile-top: 16px !default;\n$spacing-hero-card-padding-mobile-right: 16px !default;\n$spacing-hero-card-padding-mobile-bottom: 40px !default;\n$spacing-hero-card-padding-mobile-left: 16px !default;\n$spacing-hero-card-padding-desktop-top: 0 !default;\n$spacing-hero-card-padding-desktop-right: 70px !default;\n$spacing-hero-card-padding-desktop-bottom: 70px !default;\n$spacing-hero-card-padding-desktop-left: 56px !default;\n$spacing-hero-card-before-mobile-height: 40px !default;\n$spacing-hero-card-before-mobile-top: -39.7px !default;\n$spacing-hero-card-before-desktop-height: 64px !default;\n$spacing-hero-card-before-desktop-top: -63.7px !default;\n$spacing-hero-graphic-width: 856px !default;\n$spacing-hero-publication-mobile-margin-top: -64px !default;\n$spacing-hero-publication-mobile-padding-top: 24px !default;\n$spacing-hero-publication-mobile-padding-right: 24px !default;\n$spacing-hero-publication-mobile-padding-bottom: 24px !default;\n$spacing-hero-publication-mobile-padding-left: 24px !default;\n$spacing-hero-publication-desktop-padding-top: 0 !default;\n$spacing-hero-publication-desktop-padding-right: 48px !default;\n$spacing-hero-publication-desktop-padding-bottom: 48px !default;\n$spacing-hero-publication-desktop-padding-left: 72px !default;\n$spacing-hero-datecopy-margin-bottom: 40px !default;\n$spacing-hero-eyebrow-margin-bottom: 32px !default;\n$spacing-hero-intro-margin-bottom: 40px !default;\n$spacing-hero-title-margin-bottom: 40px !default;\n$spacing-hero-list-item-margin-right: 32px !default;\n$spacing-hero-link-padding-top: 0 !default;\n$spacing-hero-link-padding-right: 5px !default;\n$spacing-hero-link-padding-bottom: 0 !default;\n$spacing-hero-link-padding-left: 5px !default;\n$spacing-hero-icon-backgroundsize: 16px !default;\n$spacing-hero-icon-borderradius: 2px !default;\n$spacing-hero-icon-height: 24px !default;\n$spacing-hero-icon-width: 24px !default;\n$spacing-icons-icon-height-sm: 14px !default;\n$spacing-icons-icon-height-m: 15px !default;\n$spacing-icons-icon-height-lg: 16px !default;\n$spacing-icons-icon-padding-sm: 15px !default;\n$spacing-icons-icon-padding-m: 19px !default;\n$spacing-icons-icon-padding-lg: 22px !default;\n$spacing-tooltip-tooltip-arrow-height: 12px !default;\n$spacing-tooltip-tooltip-arrow-width: 7px !default;\n$spacing-ux-caption-border-bottom: 0 !default;\n$spacing-ux-caption-border-left: 3px !default;\n$spacing-ux-caption-border-right: 0 !default;\n$spacing-ux-caption-border-top: 0 !default;\n$spacing-ux-caption-height: auto !default;\n$spacing-ux-caption-width: auto !default;\n$spacing-ux-credit-border-bottom: 0 !default;\n$spacing-ux-credit-border-left: 0 !default;\n$spacing-ux-credit-border-right: 0 !default;\n$spacing-ux-credit-border-top: 0 !default;\n$spacing-ux-credit-height: 24px !default;\n$spacing-ux-credit-width: auto !default;\n$spacing-ux-pagination-padding-bottom: 0 !default;\n$spacing-ux-pagination-padding-left: 8px !default;\n$spacing-ux-pagination-padding-right: 8px !default;\n$spacing-ux-pagination-padding-top: 40px !default;\n$spacing-ux-pagination-width: 40px !default;\n$spacing-ux-readmore-default-height: 56px !default;\n$spacing-ux-readmore-default-border-bottom: 0 !default;\n$spacing-ux-readmore-default-border-left: 0 !default;\n$spacing-ux-readmore-default-border-right: 0 !default;\n$spacing-ux-readmore-default-border-top: 2px !default;\n$spacing-ux-readmore-default-margin-bottom: 0 !default;\n$spacing-ux-readmore-default-margin-left: 0 !default;\n$spacing-ux-readmore-default-margin-right: 0 !default;\n$spacing-ux-readmore-default-margin-top: 32px !default;\n$spacing-ux-readmore-default-padding-bottom: 16px !default;\n$spacing-ux-readmore-default-padding-left: 2px !default;\n$spacing-ux-readmore-default-padding-right: 30px !default;\n$spacing-ux-readmore-default-padding-top: 16px !default;\n$spacing-ux-readmore-default-width: auto !default;\n$spacing-ux-readmore-hover-height: 56px !default;\n$spacing-ux-readmore-hover-border-bottom: 0 !default;\n$spacing-ux-readmore-hover-border-left: 0 !default;\n$spacing-ux-readmore-hover-border-right: 0 !default;\n$spacing-ux-readmore-hover-border-top: 2px !default;\n$spacing-ux-readmore-hover-margin-bottom: 0 !default;\n$spacing-ux-readmore-hover-margin-left: 0 !default;\n$spacing-ux-readmore-hover-margin-right: 0 !default;\n$spacing-ux-readmore-hover-margin-top: 32px !default;\n$spacing-ux-readmore-hover-padding-bottom: 16px !default;\n$spacing-ux-readmore-hover-padding-left: 2px !default;\n$spacing-ux-readmore-hover-padding-right: 2px !default;\n$spacing-ux-readmore-hover-padding-top: 16px !default;\n$spacing-ux-readmore-hover-width: 120px !default;\n$spacing-ux-video-controls-height: 40px !default;\n$spacing-ux-video-controls-border-bottom: 0 !default;\n$spacing-ux-video-controls-border-left: 0 !default;\n$spacing-ux-video-controls-border-right: 0 !default;\n$spacing-ux-video-controls-border-top: 0 !default;\n$spacing-ux-video-controls-margin-bottom: 0 !default;\n$spacing-ux-video-controls-margin-left: 0 !default;\n$spacing-ux-video-controls-margin-right: 0 !default;\n$spacing-ux-video-controls-margin-top: 0 !default;\n$spacing-ux-video-controls-padding-bottom: 0 !default;\n$spacing-ux-video-controls-padding-left: 0 !default;\n$spacing-ux-video-controls-padding-right: 0 !default;\n$spacing-ux-video-controls-padding-top: 0 !default;\n$spacing-ux-video-controls-width: 100% !default;\n$spacing-ux-video-buttonicon-height: 24px !default;\n$spacing-ux-video-buttonicon-border-bottom: 0 !default;\n$spacing-ux-video-buttonicon-border-left: 0 !default;\n$spacing-ux-video-buttonicon-border-right: 0 !default;\n$spacing-ux-video-buttonicon-border-top: 0 !default;\n$spacing-ux-video-buttonicon-margin-bottom: 0 !default;\n$spacing-ux-video-buttonicon-margin-left: 0 !default;\n$spacing-ux-video-buttonicon-margin-right: 0 !default;\n$spacing-ux-video-buttonicon-margin-top: 0 !default;\n$spacing-ux-video-buttonicon-padding-bottom: 0 !default;\n$spacing-ux-video-buttonicon-padding-left: 0 !default;\n$spacing-ux-video-buttonicon-padding-right: 0 !default;\n$spacing-ux-video-buttonicon-padding-top: 0 !default;\n$spacing-ux-video-buttonicon-width: 24px !default;\n$spacing-ux-video-bigplaybutton-height: 48px !default;\n$spacing-ux-video-bigplaybutton-border-bottom: 0 !default;\n$spacing-ux-video-bigplaybutton-border-left: 0 !default;\n$spacing-ux-video-bigplaybutton-border-right: 0 !default;\n$spacing-ux-video-bigplaybutton-border-top: 0 !default;\n$spacing-ux-video-bigplaybutton-margin-bottom: 0 !default;\n$spacing-ux-video-bigplaybutton-margin-left: 0 !default;\n$spacing-ux-video-bigplaybutton-margin-right: 0 !default;\n$spacing-ux-video-bigplaybutton-margin-top: 0 !default;\n$spacing-ux-video-bigplaybutton-padding-bottom: 0 !default;\n$spacing-ux-video-bigplaybutton-padding-left: 0 !default;\n$spacing-ux-video-bigplaybutton-padding-right: 0 !default;\n$spacing-ux-video-bigplaybutton-padding-top: 0 !default;\n$spacing-ux-video-bigplaybutton-width: 48px !default;\n$spacing-ux-table-padding-bottom: 80px !default;\n$spacing-ux-table-padding-left: 80px !default;\n$spacing-ux-table-padding-right: 80px !default;\n$spacing-ux-table-padding-top: 80px !default;\n$spacing-ux-table-content-padding-bottom: 18px !default;\n$spacing-ux-table-content-padding-left: 8px !default;\n$spacing-ux-table-content-padding-right: 8px !default;\n$spacing-ux-table-content-padding-top: 19px !default;\n$spacing-ux-table-head-padding-bottom: 18px !default;\n$spacing-ux-table-head-padding-left: 6px !default;\n$spacing-ux-table-head-padding-right: 36px !default;\n$spacing-ux-table-head-padding-top: 18px !default;\n$spacing-ux-table-cell-padding-bottom: 22px !default;\n$spacing-ux-table-cell-padding-left: 11px !default;\n$spacing-ux-table-cell-padding-right: 11px !default;\n$spacing-ux-table-cell-padding-top: 22px !default;\n$spacing-ux-table-smallhead-padding-bottom: 10px !default;\n$spacing-ux-table-smallhead-padding-left: 7px !default;\n$spacing-ux-table-smallhead-padding-right: 36px !default;\n$spacing-ux-table-smallhead-padding-top: 10px !default;\n$spacing-ux-table-smallcell-padding-bottom: 13px !default;\n$spacing-ux-table-smallcell-padding-left: 11px !default;\n$spacing-ux-table-smallcell-padding-right: 11px !default;\n$spacing-ux-table-smallcell-padding-top: 13px !default;\n$spacing-ux-tableofcontents-border-bottom: 0 !default;\n$spacing-ux-tableofcontents-border-left: 0 !default;\n$spacing-ux-tableofcontents-border-right: 0 !default;\n$spacing-ux-tableofcontents-border-top: 0 !default;\n$spacing-ux-tableofcontents-borderradius: 4px !default;\n$spacing-ux-tableofcontents-margin-bottom: 0 !default;\n$spacing-ux-tableofcontents-margin-left: 0 !default;\n$spacing-ux-tableofcontents-margin-right: 0 !default;\n$spacing-ux-tableofcontents-margin-top: 0 !default;\n$spacing-ux-tableofcontents-padding-bottom: 0 !default;\n$spacing-ux-tableofcontents-padding-left: 8px !default;\n$spacing-ux-tableofcontents-padding-right: 8px !default;\n$spacing-ux-tableofcontents-padding-top: 0 !default;\n$spacing-ux-tableofcontents-items-border-bottom: 2px !default;\n$spacing-ux-tableofcontents-items-border-left: 0 !default;\n$spacing-ux-tableofcontents-items-border-right: 0 !default;\n$spacing-ux-tableofcontents-items-border-top: 0 !default;\n$spacing-ux-tableofcontents-items-margin-bottom: 0 !default;\n$spacing-ux-tableofcontents-items-margin-left: 0 !default;\n$spacing-ux-tableofcontents-items-margin-right: 0 !default;\n$spacing-ux-tableofcontents-items-margin-top: 0 !default;\n$spacing-ux-tableofcontents-items-padding-bottom: 18px !default;\n$spacing-ux-tableofcontents-items-padding-left: 10px !default;\n$spacing-ux-tableofcontents-items-padding-right: 10px !default;\n$spacing-ux-tableofcontents-items-padding-top: 18px !default;\n$themeprefix: ilo !default;\n$type-descenders-display: 0.37 !default;\n$type-descenders-copy: 0.20 !default;\n$type-base-size: 18.66px !default;\n$type-base-letter-spacing: normal !default;\n$type-base-line-height: 27.24px !default;\n$type-body-eyebrow-size: 14.93px !default;\n$type-body-eyebrow-letter-spacing: normal !default;\n$type-body-eyebrow-line-height: 19.71px !default;\n$type-body-small-size: 16px !default;\n$type-body-small-letter-spacing: normal !default;\n$type-body-small-line-height: 23.36px !default;\n$type-body-large-size: 23.32px !default;\n$type-body-large-letter-spacing: normal !default;\n$type-body-large-line-height: 34.05px !default;\n$type-body-xs-size: 14.93px !default;\n$type-body-xs-letter-spacing: normal !default;\n$type-body-xs-line-height: 20.3px !default;\n$type-body-xxs-size: 11.94px !default;\n$type-body-xxs-letter-spacing: normal !default;\n$type-body-xxs-line-height: 16.24px !default;\n$type-body-xxxs-size: 9.55px !default;\n$type-body-xxxs-letter-spacing: normal !default;\n$type-body-xxxs-line-height: 14.33px !default;\n$type-button-small-size: 14.93px !default;\n$type-button-small-letter-spacing: -0.02em !default;\n$type-button-small-line-height: 120% !default;\n$type-button-medium-size: 16px !default;\n$type-button-medium-letter-spacing: -0.02em !default;\n$type-button-medium-line-height: 120% !default;\n$type-button-large-size: 18.66px !default;\n$type-button-large-letter-spacing: -0.02em !default;\n$type-button-large-line-height: 120% !default;\n$type-headline-1-size: 56.95px !default;\n$type-headline-1-letter-spacing: -0.035em !default;\n$type-headline-1-line-height: 65.49px !default;\n$type-headline-2-size: 45.56px !default;\n$type-headline-2-letter-spacing: -0.035em !default;\n$type-headline-2-line-height: 52.39px !default;\n$type-headline-3-size: 36.45px !default;\n$type-headline-3-letter-spacing: -0.035em !default;\n$type-headline-3-line-height: 43.74px !default;\n$type-headline-4-size: 29.16px !default;\n$type-headline-4-letter-spacing: -0.035em !default;\n$type-headline-4-line-height: 36.45px !default;\n$type-headline-5-size: 23.32px !default;\n$type-headline-5-letter-spacing: -0.035em !default;\n$type-headline-5-line-height: 29.15px !default;\n$type-headline-6-size: 18.66px !default;\n$type-headline-6-letter-spacing: -0.035em !default;\n$type-headline-6-line-height: 24.26px !default;\n$type-language-switcher-size: 11.94px !default;\n$type-language-switcher-letter-spacing: -0.02em !default;\n$type-language-switcher-line-height: 16.12px !default;\n$type-label-small-size: 14.93px !default;\n$type-label-small-letter-spacing: -0.02em !default;\n$type-label-small-line-height: 20.16px !default;\n$type-label-medium-size: 16px !default;\n$type-label-medium-letter-spacing: -0.02em !default;\n$type-label-medium-line-height: 21.6px !default;\n$type-label-large-size: 18.66px !default;\n$type-label-large-letter-spacing: -0.02em !default;\n$type-label-large-line-height: 24.26px !default;\n$type-legend-size: 23.32px !default;\n$type-legend-letter-spacing: -3.5% !default;\n$type-legend-line-height: 29.15px !default;\n$type-nav-md-size: 16px !default;\n$type-nav-md-letter-spacing: -0.02em !default;\n$type-nav-md-line-height: 21.6px !default;\n$type-nav-md-sm-size: 14.93px !default;\n$type-nav-md-sm-letter-spacing: -0.02em !default;\n$type-nav-md-sm-line-height: 20.16px !default;\n$type-nav-bold-b-sm-size: 14.93px !default;\n$type-nav-bold-b-sm-letter-spacing: -0.02em !default;\n$type-nav-bold-b-sm-line-height: 20.16px !default;\n$type-nav-bold-b-size: 16px !default;\n$type-nav-bold-b-letter-spacing: -0.02em !default;\n$type-nav-bold-b-line-height: 21.6px !default;\n$type-pull-quote-sm-size: 29.16px !default;\n$type-pull-quote-sm-letter-spacing: -0.035em !default;\n$type-pull-quote-sm-line-height: 36.45px !default;\n$type-pull-quote-lg-size: 36.45px !default;\n$type-pull-quote-lg-letter-spacing: -0.035em !default;\n$type-pull-quote-lg-line-height: 43.74px !default;\n$type-pull-quote-cite-size: 14.93px !default;\n$type-pull-quote-cite-letter-spacing: -0.02em !default;\n$type-pull-quote-cite-line-height: 20.16px !default;\n$type-image-caption-size: 14.93px !default;\n$type-image-caption-letter-spacing: -0.02em !default;\n$type-image-caption-line-height: 20.16px !default;\n$type-image-credit-size: 11.94px !default;\n$type-image-credit-letter-spacing: -0.02em !default;\n$type-image-credit-line-height: 16.24px !default;\n$type-tagline-size: 11.9px !default;\n$type-tagline-letter-spacing: -0.02em !default;\n$type-tagline-line-height: 19.4px !default;\n$type-weights-section: 500 !default;\n$type-weights-label: 700 !default;\n$widths-border-xsm: 1px !default;\n$widths-border-sm: 1.5px !default;\n$widths-border-med-sm: 2.5px !default;\n$widths-border-med: 3px !default;\n$widths-border-lg: 4px !default;\n\n/**\n* MAPS:\n*/\n\n// BORDERS MAP:\n\n$borders: (\n 'small': $borders-small,\n 'base': $borders-base,\n 'thick': $borders-thick\n);\n\n// BRAND MAP:\n\n$brand: (\n 'ilo-blue': $brand-ilo-blue,\n 'ilo-red': $brand-ilo-red,\n 'ilo-dark-blue': $brand-ilo-dark-blue,\n 'ilo-yellow': $brand-ilo-yellow,\n 'ilo-green': $brand-ilo-green,\n 'ilo-purple': $brand-ilo-purple,\n 'ilo-purple-light': $brand-ilo-purple-light,\n 'ilo-turquoise': $brand-ilo-turquoise,\n 'ilo-dark-red': $brand-ilo-dark-red,\n 'ilo-lighter-blue': $brand-ilo-lighter-blue,\n 'ilo-light-blue': $brand-ilo-light-blue,\n 'ilo-grey-light-alternate': $brand-ilo-grey-light-alternate,\n 'ilo-grey-light': $brand-ilo-grey-light,\n 'ilo-grey-ui': $brand-ilo-grey-ui,\n 'ilo-grey-accessible': $brand-ilo-grey-accessible,\n 'ilo-grey-charcoal': $brand-ilo-grey-charcoal,\n 'ilo-black': $brand-ilo-black,\n 'ilo-white': $brand-ilo-white,\n 'ilo-ramp-blue': $brand-ilo-ramp-blue,\n 'ilo-ramp-red': $brand-ilo-ramp-red,\n 'ilo-ramp-green': $brand-ilo-ramp-green,\n 'ilo-ramp-yellow': $brand-ilo-ramp-yellow\n);\n\n// BREAKPOINTS MAP:\n\n$breakpoints: (\n 'x-small': $breakpoints-x-small,\n 'small': $breakpoints-small,\n 'medium': $breakpoints-medium,\n 'large': $breakpoints-large,\n 'x-large': $breakpoints-x-large,\n 'xx-large': $breakpoints-xx-large\n);\n\n// COLOR MAP:\n\n$color: (\n 'base': (\n 'blue': (\n 'lighter': $color-base-blue-lighter,\n 'light': $color-base-blue-light,\n 'intermediate': $color-base-blue-intermediate,\n 'medium': $color-base-blue-medium,\n 'dark': $color-base-blue-dark\n ),\n 'green': $color-base-green,\n 'neutrals': (\n 'white': $color-base-neutrals-white,\n 'alternate': $color-base-neutrals-alternate,\n 'lighter': $color-base-neutrals-lighter,\n 'light': $color-base-neutrals-light,\n 'medium': $color-base-neutrals-medium,\n 'dark': $color-base-neutrals-dark,\n 'black': $color-base-neutrals-black\n ),\n 'purple': (\n 'light': $color-base-purple-light,\n 'medium': $color-base-purple-medium\n ),\n 'red': (\n 'light': $color-base-red-light,\n 'medium': $color-base-red-medium,\n 'dark': $color-base-red-dark\n ),\n 'turquoise': $color-base-turquoise,\n 'yellow': $color-base-yellow\n ),\n 'ramp': (\n 'blue': $color-ramp-blue,\n 'green': $color-ramp-green,\n 'red': $color-ramp-red,\n 'yellow': $color-ramp-yellow\n ),\n 'accordion': (\n 'border': $color-accordion-border\n ),\n 'font': (\n 'base': $color-font-base,\n 'blockquote': $color-font-blockquote,\n 'cite': $color-font-cite,\n 'caption': $color-font-caption\n ),\n 'formelements': (\n 'input': (\n 'default': (\n 'background': $color-formelements-input-default-background,\n 'border': (\n 'bottom': $color-formelements-input-default-border-bottom,\n 'left': $color-formelements-input-default-border-left,\n 'right': $color-formelements-input-default-border-right,\n 'top': $color-formelements-input-default-border-top\n ),\n 'color': $color-formelements-input-default-color\n ),\n 'hover': (\n 'background': $color-formelements-input-hover-background,\n 'border': (\n 'bottom': $color-formelements-input-hover-border-bottom,\n 'left': $color-formelements-input-hover-border-left,\n 'right': $color-formelements-input-hover-border-right,\n 'top': $color-formelements-input-hover-border-top\n ),\n 'color': $color-formelements-input-hover-color\n ),\n 'focus': (\n 'background': $color-formelements-input-focus-background,\n 'border': (\n 'bottom': $color-formelements-input-focus-border-bottom,\n 'left': $color-formelements-input-focus-border-left,\n 'right': $color-formelements-input-focus-border-right,\n 'top': $color-formelements-input-focus-border-top\n ),\n 'color': $color-formelements-input-focus-color\n ),\n 'error': (\n 'background': $color-formelements-input-error-background,\n 'border': (\n 'bottom': $color-formelements-input-error-border-bottom,\n 'left': $color-formelements-input-error-border-left,\n 'right': $color-formelements-input-error-border-right,\n 'top': $color-formelements-input-error-border-top\n ),\n 'color': $color-formelements-input-error-color\n ),\n 'disabled': (\n 'background': $color-formelements-input-disabled-background,\n 'border': (\n 'bottom': $color-formelements-input-disabled-border-bottom,\n 'left': $color-formelements-input-disabled-border-left,\n 'right': $color-formelements-input-disabled-border-right,\n 'top': $color-formelements-input-disabled-border-top\n ),\n 'color': $color-formelements-input-disabled-color\n )\n ),\n 'inputbutton': (\n 'default': (\n 'background': $color-formelements-inputbutton-default-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-default-border-bottom,\n 'left': $color-formelements-inputbutton-default-border-left,\n 'right': $color-formelements-inputbutton-default-border-right,\n 'top': $color-formelements-inputbutton-default-border-top\n ),\n 'color': $color-formelements-inputbutton-default-color\n ),\n 'hover': (\n 'background': $color-formelements-inputbutton-hover-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-hover-border-bottom,\n 'left': $color-formelements-inputbutton-hover-border-left,\n 'right': $color-formelements-inputbutton-hover-border-right,\n 'top': $color-formelements-inputbutton-hover-border-top\n ),\n 'color': $color-formelements-inputbutton-hover-color\n ),\n 'focus': (\n 'background': $color-formelements-inputbutton-focus-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-focus-border-bottom,\n 'left': $color-formelements-inputbutton-focus-border-left,\n 'right': $color-formelements-inputbutton-focus-border-right,\n 'top': $color-formelements-inputbutton-focus-border-top\n ),\n 'color': $color-formelements-inputbutton-focus-color\n ),\n 'active': (\n 'background': $color-formelements-inputbutton-active-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-active-border-bottom,\n 'left': $color-formelements-inputbutton-active-border-left,\n 'right': $color-formelements-inputbutton-active-border-right,\n 'top': $color-formelements-inputbutton-active-border-top\n ),\n 'color': $color-formelements-inputbutton-active-color\n ),\n 'error': (\n 'background': $color-formelements-inputbutton-error-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-error-border-bottom,\n 'left': $color-formelements-inputbutton-error-border-left,\n 'right': $color-formelements-inputbutton-error-border-right,\n 'top': $color-formelements-inputbutton-error-border-top\n ),\n 'color': $color-formelements-inputbutton-error-color\n ),\n 'disabled': (\n 'background': $color-formelements-inputbutton-disabled-background,\n 'border': (\n 'bottom': $color-formelements-inputbutton-disabled-border-bottom,\n 'left': $color-formelements-inputbutton-disabled-border-left,\n 'right': $color-formelements-inputbutton-disabled-border-right,\n 'top': $color-formelements-inputbutton-disabled-border-top\n ),\n 'color': $color-formelements-inputbutton-disabled-color\n )\n ),\n 'uploadedfile': (\n 'default': (\n 'background': $color-formelements-uploadedfile-default-background,\n 'border': (\n 'bottom': $color-formelements-uploadedfile-default-border-bottom,\n 'left': $color-formelements-uploadedfile-default-border-left,\n 'right': $color-formelements-uploadedfile-default-border-right,\n 'top': $color-formelements-uploadedfile-default-border-top\n ),\n 'color': $color-formelements-uploadedfile-default-color\n )\n )\n ),\n 'hero': (\n 'article': $color-hero-article,\n 'image': $color-hero-image,\n 'project': $color-hero-project,\n 'portal': (\n 'background': $color-hero-portal-background,\n 'color': $color-hero-portal-color\n ),\n 'card': (\n 'dark': (\n 'background': $color-hero-card-dark-background,\n 'color': $color-hero-card-dark-color,\n 'icon': (\n 'color': $color-hero-card-dark-icon-color\n ),\n 'iconhover': (\n 'color': $color-hero-card-dark-iconhover-color,\n 'background': $color-hero-card-dark-iconhover-background\n ),\n 'eyebrow': (\n 'color': $color-hero-card-dark-eyebrow-color\n ),\n 'datecopy': (\n 'color': $color-hero-card-dark-datecopy-color\n )\n ),\n 'light': (\n 'background': $color-hero-card-light-background,\n 'color': $color-hero-card-light-color,\n 'eyebrow': (\n 'color': $color-hero-card-light-eyebrow-color\n ),\n 'datecopy': (\n 'color': $color-hero-card-light-datecopy-color\n ),\n 'link': (\n 'color': $color-hero-card-light-link-color\n ),\n 'icon': (\n 'color': $color-hero-card-light-icon-color\n ),\n 'iconhover': (\n 'background': $color-hero-card-light-iconhover-background,\n 'color': $color-hero-card-light-iconhover-color\n )\n )\n )\n ),\n 'link': (\n 'background': (\n 'default': $color-link-background-default,\n 'hover': $color-link-background-hover,\n 'focus': $color-link-background-focus,\n 'active': $color-link-background-active,\n 'visited': $color-link-background-visited\n ),\n 'background-dark': (\n 'default': $color-link-background-dark-default,\n 'hover': $color-link-background-dark-hover,\n 'focus': $color-link-background-dark-focus,\n 'active': $color-link-background-dark-active,\n 'visited': $color-link-background-dark-visited\n ),\n 'background-footer': (\n 'default': $color-link-background-footer-default,\n 'hover': $color-link-background-footer-hover,\n 'focus': $color-link-background-footer-focus,\n 'active': $color-link-background-footer-active,\n 'visited': $color-link-background-footer-visited\n ),\n 'text': (\n 'default': $color-link-text-default,\n 'hover': $color-link-text-hover,\n 'focus': $color-link-text-focus,\n 'active': $color-link-text-active,\n 'visited': $color-link-text-visited\n ),\n 'text-dark': (\n 'default': $color-link-text-dark-default,\n 'hover': $color-link-text-dark-hover,\n 'focus': $color-link-text-dark-focus,\n 'active': $color-link-text-dark-active,\n 'visited': $color-link-text-dark-visited\n ),\n 'text-footer': (\n 'default': $color-link-text-footer-default,\n 'hover': $color-link-text-footer-hover,\n 'focus': $color-link-text-footer-focus,\n 'active': $color-link-text-footer-active,\n 'visited': $color-link-text-footer-visited\n ),\n 'underline': (\n 'default': $color-link-underline-default,\n 'hover': $color-link-underline-hover,\n 'focus': $color-link-underline-focus,\n 'active': $color-link-underline-active,\n 'visited': $color-link-underline-visited\n ),\n 'underline-dark': (\n 'default': $color-link-underline-dark-default,\n 'hover': $color-link-underline-dark-hover,\n 'focus': $color-link-underline-dark-focus,\n 'active': $color-link-underline-dark-active,\n 'visited': $color-link-underline-dark-visited\n ),\n 'underline-footer': (\n 'default': $color-link-underline-footer-default,\n 'hover': $color-link-underline-footer-hover,\n 'focus': $color-link-underline-footer-focus,\n 'active': $color-link-underline-footer-active,\n 'visited': $color-link-underline-footer-visited\n )\n ),\n 'tag': (\n 'background': (\n 'default': $color-tag-background-default,\n 'hover': $color-tag-background-hover,\n 'focus': $color-tag-background-focus,\n 'active': $color-tag-background-active,\n 'visited': $color-tag-background-visited\n ),\n 'text': (\n 'default': $color-tag-text-default,\n 'hover': $color-tag-text-hover,\n 'focus': $color-tag-text-focus,\n 'active': $color-tag-text-active,\n 'visited': $color-tag-text-visited\n )\n ),\n 'tooltip': (\n 'default': (\n 'background': $color-tooltip-default-background,\n 'dropshadow': $color-tooltip-default-dropshadow,\n 'text': $color-tooltip-default-text\n ),\n 'dark': (\n 'background': $color-tooltip-dark-background,\n 'dropshadow': $color-tooltip-dark-dropshadow,\n 'text': $color-tooltip-dark-text\n )\n ),\n 'ux': (\n 'background': (\n 'default': $color-ux-background-default,\n 'disabled': $color-ux-background-disabled,\n 'highlight': $color-ux-background-highlight,\n 'hover': $color-ux-background-hover,\n 'focus': $color-ux-background-focus,\n 'active': $color-ux-background-active,\n 'alert': $color-ux-background-alert,\n 'attention': $color-ux-background-attention\n ),\n 'borders': (\n 'default': $color-ux-borders-default,\n 'error': $color-ux-borders-error,\n 'highlight': $color-ux-borders-highlight,\n 'hover': $color-ux-borders-hover,\n 'focus': $color-ux-borders-focus,\n 'active': $color-ux-borders-active,\n 'alert': $color-ux-borders-alert,\n 'attention': $color-ux-borders-attention\n ),\n 'labels': (\n 'actionable': $color-ux-labels-actionable,\n 'darkbg': $color-ux-labels-darkbg,\n 'default': $color-ux-labels-default,\n 'error': $color-ux-labels-error,\n 'focus': $color-ux-labels-focus,\n 'hover': $color-ux-labels-hover,\n 'active': $color-ux-labels-active,\n 'alert': $color-ux-labels-alert\n ),\n 'caption': (\n 'background': $color-ux-caption-background,\n 'border': (\n 'bottom': $color-ux-caption-border-bottom,\n 'left': $color-ux-caption-border-left,\n 'right': $color-ux-caption-border-right,\n 'top': $color-ux-caption-border-top\n ),\n 'text': $color-ux-caption-text\n ),\n 'credit': (\n 'background': $color-ux-credit-background,\n 'border': (\n 'bottom': $color-ux-credit-border-bottom,\n 'left': $color-ux-credit-border-left,\n 'right': $color-ux-credit-border-right,\n 'top': $color-ux-credit-border-top\n ),\n 'text': $color-ux-credit-text\n ),\n 'horizontal-rule': (\n 'default': $color-ux-horizontal-rule-default\n ),\n 'notification': (\n 'background': $color-ux-notification-background,\n 'icon': $color-ux-notification-icon,\n 'text': $color-ux-notification-text,\n 'type': (\n 'error': $color-ux-notification-type-error,\n 'info': $color-ux-notification-type-info,\n 'success': $color-ux-notification-type-success,\n 'warning': $color-ux-notification-type-warning\n )\n ),\n 'pagination': (\n 'default': (\n 'background': $color-ux-pagination-default-background,\n 'icon': $color-ux-pagination-default-icon\n ),\n 'hover': (\n 'background': $color-ux-pagination-hover-background,\n 'icon': $color-ux-pagination-hover-icon\n )\n ),\n 'readmore': (\n 'default': (\n 'background': $color-ux-readmore-default-background,\n 'border': (\n 'bottom': $color-ux-readmore-default-border-bottom,\n 'left': $color-ux-readmore-default-border-left,\n 'right': $color-ux-readmore-default-border-right,\n 'top': $color-ux-readmore-default-border-top\n )\n ),\n 'hover': (\n 'background': $color-ux-readmore-hover-background,\n 'border': (\n 'bottom': $color-ux-readmore-hover-border-bottom,\n 'left': $color-ux-readmore-hover-border-left,\n 'right': $color-ux-readmore-hover-border-right,\n 'top': $color-ux-readmore-hover-border-top\n )\n )\n ),\n 'table': (\n 'background': $color-ux-table-background,\n 'content': (\n 'background': $color-ux-table-content-background\n ),\n 'cell': (\n 'background': $color-ux-table-cell-background\n ),\n 'zebra': (\n 'background': $color-ux-table-zebra-background\n ),\n 'hover': (\n 'background': $color-ux-table-hover-background\n ),\n 'selected': (\n 'background': $color-ux-table-selected-background\n )\n ),\n 'tableofcontents': (\n 'items': (\n 'default': (\n 'background': $color-ux-tableofcontents-items-default-background,\n 'border': $color-ux-tableofcontents-items-default-border,\n 'color': $color-ux-tableofcontents-items-default-color,\n 'icon': $color-ux-tableofcontents-items-default-icon\n ),\n 'hover': (\n 'background': $color-ux-tableofcontents-items-hover-background,\n 'border': $color-ux-tableofcontents-items-hover-border,\n 'color': $color-ux-tableofcontents-items-hover-color,\n 'icon': $color-ux-tableofcontents-items-hover-icon\n ),\n 'active': (\n 'background': $color-ux-tableofcontents-items-active-background,\n 'border': $color-ux-tableofcontents-items-active-border,\n 'color': $color-ux-tableofcontents-items-active-color,\n 'icon': $color-ux-tableofcontents-items-active-icon\n )\n )\n ),\n 'video': (\n 'controls': (\n 'default': (\n 'background': $color-ux-video-controls-default-background,\n 'border': (\n 'bottom': $color-ux-video-controls-default-border-bottom,\n 'left': $color-ux-video-controls-default-border-left,\n 'right': $color-ux-video-controls-default-border-right,\n 'top': $color-ux-video-controls-default-border-top\n ),\n 'icon': $color-ux-video-controls-default-icon\n ),\n 'hover': (\n 'background': $color-ux-video-controls-hover-background,\n 'border': (\n 'bottom': $color-ux-video-controls-hover-border-bottom,\n 'left': $color-ux-video-controls-hover-border-left,\n 'right': $color-ux-video-controls-hover-border-right,\n 'top': $color-ux-video-controls-hover-border-top\n ),\n 'icon': $color-ux-video-controls-hover-icon\n )\n )\n )\n )\n);\n\n// FONTS MAP:\n\n$fonts: (\n 'display': $fonts-display,\n 'copy': $fonts-copy\n);\n\n// OPACITY MAP:\n\n$opacity: (\n 'disabled': $opacity-disabled\n);\n\n// RADIUS MAP:\n\n$radius: (\n 'button': (\n 'bottom-left': $radius-button-bottom-left,\n 'bottom-right': $radius-button-bottom-right,\n 'top-left': $radius-button-top-left,\n 'top-right': $radius-button-top-right\n )\n);\n\n// SPACING MAP:\n\n$spacing: (\n 'base': $spacing-base,\n 'padding-0-5': $spacing-padding-0-5,\n 'padding-1': $spacing-padding-1,\n 'padding-1-5': $spacing-padding-1-5,\n 'padding-2': $spacing-padding-2,\n 'padding-3': $spacing-padding-3,\n 'padding-4': $spacing-padding-4,\n 'padding-5': $spacing-padding-5,\n 'padding-6': $spacing-padding-6,\n 'padding-7': $spacing-padding-7,\n 'padding-8': $spacing-padding-8,\n 'padding-9': $spacing-padding-9,\n 'padding-10': $spacing-padding-10,\n 'padding-11': $spacing-padding-11,\n 'padding-12': $spacing-padding-12,\n 'padding-13': $spacing-padding-13,\n 'padding-14': $spacing-padding-14,\n 'padding-15': $spacing-padding-15,\n 'horizontal-rule': $spacing-horizontal-rule,\n 'label-padding': $spacing-label-padding,\n 'ui-padding-sm': $spacing-ui-padding-sm,\n 'ui-padding': $spacing-ui-padding,\n 'ui-padding-lg': $spacing-ui-padding-lg,\n 'ui-padding-xl': $spacing-ui-padding-xl,\n 'ui-padding-xxl': $spacing-ui-padding-xxl,\n 'boxpadding': (\n 'button': (\n 'small': (\n 'bottom': $spacing-boxpadding-button-small-bottom,\n 'left': $spacing-boxpadding-button-small-left,\n 'right': $spacing-boxpadding-button-small-right,\n 'top': $spacing-boxpadding-button-small-top\n ),\n 'medium': (\n 'bottom': $spacing-boxpadding-button-medium-bottom,\n 'left': $spacing-boxpadding-button-medium-left,\n 'right': $spacing-boxpadding-button-medium-right,\n 'top': $spacing-boxpadding-button-medium-top\n ),\n 'large': (\n 'bottom': $spacing-boxpadding-button-large-bottom,\n 'left': $spacing-boxpadding-button-large-left,\n 'right': $spacing-boxpadding-button-large-right,\n 'top': $spacing-boxpadding-button-large-top\n )\n ),\n 'button-icon': (\n 'small': (\n 'bottom': $spacing-boxpadding-button-icon-small-bottom,\n 'left': $spacing-boxpadding-button-icon-small-left,\n 'right': $spacing-boxpadding-button-icon-small-right,\n 'top': $spacing-boxpadding-button-icon-small-top\n ),\n 'medium': (\n 'bottom': $spacing-boxpadding-button-icon-medium-bottom,\n 'left': $spacing-boxpadding-button-icon-medium-left,\n 'right': $spacing-boxpadding-button-icon-medium-right,\n 'top': $spacing-boxpadding-button-icon-medium-top\n ),\n 'large': (\n 'bottom': $spacing-boxpadding-button-icon-large-bottom,\n 'left': $spacing-boxpadding-button-icon-large-left,\n 'right': $spacing-boxpadding-button-icon-large-right,\n 'top': $spacing-boxpadding-button-icon-large-top\n )\n ),\n 'caption': (\n 'small': (\n 'bottom': $spacing-boxpadding-caption-small-bottom,\n 'left': $spacing-boxpadding-caption-small-left,\n 'right': $spacing-boxpadding-caption-small-right,\n 'top': $spacing-boxpadding-caption-small-top\n ),\n 'medium': (\n 'bottom': $spacing-boxpadding-caption-medium-bottom,\n 'left': $spacing-boxpadding-caption-medium-left,\n 'right': $spacing-boxpadding-caption-medium-right,\n 'top': $spacing-boxpadding-caption-medium-top\n ),\n 'large': (\n 'bottom': $spacing-boxpadding-caption-large-bottom,\n 'left': $spacing-boxpadding-caption-large-left,\n 'right': $spacing-boxpadding-caption-large-right,\n 'top': $spacing-boxpadding-caption-large-top\n )\n ),\n 'credit': (\n 'small': (\n 'bottom': $spacing-boxpadding-credit-small-bottom,\n 'left': $spacing-boxpadding-credit-small-left,\n 'right': $spacing-boxpadding-credit-small-right,\n 'top': $spacing-boxpadding-credit-small-top\n ),\n 'medium': (\n 'bottom': $spacing-boxpadding-credit-medium-bottom,\n 'left': $spacing-boxpadding-credit-medium-left,\n 'right': $spacing-boxpadding-credit-medium-right,\n 'top': $spacing-boxpadding-credit-medium-top\n ),\n 'large': (\n 'bottom': $spacing-boxpadding-credit-large-bottom,\n 'left': $spacing-boxpadding-credit-large-left,\n 'right': $spacing-boxpadding-credit-large-right,\n 'top': $spacing-boxpadding-credit-large-top\n )\n )\n ),\n 'formelements': (\n 'input': (\n 'default': (\n 'height': $spacing-formelements-input-default-height,\n 'border': (\n 'bottom': $spacing-formelements-input-default-border-bottom,\n 'left': $spacing-formelements-input-default-border-left,\n 'right': $spacing-formelements-input-default-border-right,\n 'top': $spacing-formelements-input-default-border-top\n ),\n 'margin': (\n 'bottom': $spacing-formelements-input-default-margin-bottom,\n 'left': $spacing-formelements-input-default-margin-left,\n 'right': $spacing-formelements-input-default-margin-right,\n 'top': $spacing-formelements-input-default-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-formelements-input-default-padding-bottom,\n 'left': $spacing-formelements-input-default-padding-left,\n 'right': $spacing-formelements-input-default-padding-right,\n 'top': $spacing-formelements-input-default-padding-top\n ),\n 'width': $spacing-formelements-input-default-width\n ),\n 'focus': (\n 'border': (\n 'bottom': $spacing-formelements-input-focus-border-bottom,\n 'left': $spacing-formelements-input-focus-border-left,\n 'right': $spacing-formelements-input-focus-border-right,\n 'top': $spacing-formelements-input-focus-border-top\n )\n ),\n 'hover': (\n 'border': (\n 'bottom': $spacing-formelements-input-hover-border-bottom,\n 'left': $spacing-formelements-input-hover-border-left,\n 'right': $spacing-formelements-input-hover-border-right,\n 'top': $spacing-formelements-input-hover-border-top\n )\n ),\n 'error': (\n 'border': (\n 'bottom': $spacing-formelements-input-error-border-bottom,\n 'left': $spacing-formelements-input-error-border-left,\n 'right': $spacing-formelements-input-error-border-right,\n 'top': $spacing-formelements-input-error-border-top\n )\n )\n ),\n 'inputbutton': (\n 'default': (\n 'height': $spacing-formelements-inputbutton-default-height,\n 'border': (\n 'bottom': $spacing-formelements-inputbutton-default-border-bottom,\n 'left': $spacing-formelements-inputbutton-default-border-left,\n 'right': $spacing-formelements-inputbutton-default-border-right,\n 'top': $spacing-formelements-inputbutton-default-border-top\n ),\n 'borderrtl': (\n 'bottom': $spacing-formelements-inputbutton-default-borderrtl-bottom,\n 'left': $spacing-formelements-inputbutton-default-borderrtl-left,\n 'right': $spacing-formelements-inputbutton-default-borderrtl-right,\n 'top': $spacing-formelements-inputbutton-default-borderrtl-top\n ),\n 'margin': (\n 'bottom': $spacing-formelements-inputbutton-default-margin-bottom,\n 'left': $spacing-formelements-inputbutton-default-margin-left,\n 'right': $spacing-formelements-inputbutton-default-margin-right,\n 'top': $spacing-formelements-inputbutton-default-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-formelements-inputbutton-default-padding-bottom,\n 'left': $spacing-formelements-inputbutton-default-padding-left,\n 'right': $spacing-formelements-inputbutton-default-padding-right,\n 'top': $spacing-formelements-inputbutton-default-padding-top\n ),\n 'width': $spacing-formelements-inputbutton-default-width\n )\n ),\n 'uploadedfile': (\n 'default': (\n 'height': $spacing-formelements-uploadedfile-default-height,\n 'border': (\n 'bottom': $spacing-formelements-uploadedfile-default-border-bottom,\n 'left': $spacing-formelements-uploadedfile-default-border-left,\n 'right': $spacing-formelements-uploadedfile-default-border-right,\n 'top': $spacing-formelements-uploadedfile-default-border-top\n ),\n 'margin': (\n 'bottom': $spacing-formelements-uploadedfile-default-margin-bottom,\n 'left': $spacing-formelements-uploadedfile-default-margin-left,\n 'right': $spacing-formelements-uploadedfile-default-margin-right,\n 'top': $spacing-formelements-uploadedfile-default-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-formelements-uploadedfile-default-padding-bottom,\n 'left': $spacing-formelements-uploadedfile-default-padding-left,\n 'right': $spacing-formelements-uploadedfile-default-padding-right,\n 'top': $spacing-formelements-uploadedfile-default-padding-top\n ),\n 'width': $spacing-formelements-uploadedfile-default-width\n )\n )\n ),\n 'hero': (\n 'article': (\n 'padding': (\n 'desktop': (\n 'top': $spacing-hero-article-padding-desktop-top\n ),\n 'mobile': (\n 'top': $spacing-hero-article-padding-mobile-top\n )\n ),\n 'position': (\n 'top': $spacing-hero-article-position-top\n )\n ),\n 'portal': (\n 'padding': (\n 'top': $spacing-hero-portal-padding-top\n ),\n 'height': $spacing-hero-portal-height\n ),\n 'project': (\n 'padding': (\n 'desktop': (\n 'top': $spacing-hero-project-padding-desktop-top\n ),\n 'mobile': (\n 'top': $spacing-hero-project-padding-mobile-top\n )\n ),\n 'position': (\n 'top': $spacing-hero-project-position-top\n )\n ),\n 'image': (\n 'padding': (\n 'desktop': (\n 'top': $spacing-hero-image-padding-desktop-top\n ),\n 'mobile': (\n 'top': $spacing-hero-image-padding-mobile-top\n )\n ),\n 'position': (\n 'top': $spacing-hero-image-position-top\n ),\n 'height': $spacing-hero-image-height\n ),\n 'card': (\n 'padding': (\n 'mobile': (\n 'top': $spacing-hero-card-padding-mobile-top,\n 'right': $spacing-hero-card-padding-mobile-right,\n 'bottom': $spacing-hero-card-padding-mobile-bottom,\n 'left': $spacing-hero-card-padding-mobile-left\n ),\n 'desktop': (\n 'top': $spacing-hero-card-padding-desktop-top,\n 'right': $spacing-hero-card-padding-desktop-right,\n 'bottom': $spacing-hero-card-padding-desktop-bottom,\n 'left': $spacing-hero-card-padding-desktop-left\n )\n ),\n 'before': (\n 'mobile': (\n 'height': $spacing-hero-card-before-mobile-height,\n 'top': $spacing-hero-card-before-mobile-top\n ),\n 'desktop': (\n 'height': $spacing-hero-card-before-desktop-height,\n 'top': $spacing-hero-card-before-desktop-top\n )\n )\n ),\n 'graphic': (\n 'width': $spacing-hero-graphic-width\n ),\n 'publication': (\n 'mobile': (\n 'margin': (\n 'top': $spacing-hero-publication-mobile-margin-top\n ),\n 'padding': (\n 'top': $spacing-hero-publication-mobile-padding-top,\n 'right': $spacing-hero-publication-mobile-padding-right,\n 'bottom': $spacing-hero-publication-mobile-padding-bottom,\n 'left': $spacing-hero-publication-mobile-padding-left\n )\n ),\n 'desktop': (\n 'padding': (\n 'top': $spacing-hero-publication-desktop-padding-top,\n 'right': $spacing-hero-publication-desktop-padding-right,\n 'bottom': $spacing-hero-publication-desktop-padding-bottom,\n 'left': $spacing-hero-publication-desktop-padding-left\n )\n )\n ),\n 'datecopy': (\n 'margin': (\n 'bottom': $spacing-hero-datecopy-margin-bottom\n )\n ),\n 'eyebrow': (\n 'margin': (\n 'bottom': $spacing-hero-eyebrow-margin-bottom\n )\n ),\n 'intro': (\n 'margin': (\n 'bottom': $spacing-hero-intro-margin-bottom\n )\n ),\n 'title': (\n 'margin': (\n 'bottom': $spacing-hero-title-margin-bottom\n )\n ),\n 'list-item': (\n 'margin': (\n 'right': $spacing-hero-list-item-margin-right\n )\n ),\n 'link': (\n 'padding': (\n 'top': $spacing-hero-link-padding-top,\n 'right': $spacing-hero-link-padding-right,\n 'bottom': $spacing-hero-link-padding-bottom,\n 'left': $spacing-hero-link-padding-left\n )\n ),\n 'icon': (\n 'backgroundsize': $spacing-hero-icon-backgroundsize,\n 'borderradius': $spacing-hero-icon-borderradius,\n 'height': $spacing-hero-icon-height,\n 'width': $spacing-hero-icon-width\n )\n ),\n 'icons': (\n 'icon-height-sm': $spacing-icons-icon-height-sm,\n 'icon-height-m': $spacing-icons-icon-height-m,\n 'icon-height-lg': $spacing-icons-icon-height-lg,\n 'icon-padding-sm': $spacing-icons-icon-padding-sm,\n 'icon-padding-m': $spacing-icons-icon-padding-m,\n 'icon-padding-lg': $spacing-icons-icon-padding-lg\n ),\n 'tooltip': (\n 'tooltip-arrow-height': $spacing-tooltip-tooltip-arrow-height,\n 'tooltip-arrow-width': $spacing-tooltip-tooltip-arrow-width\n ),\n 'ux': (\n 'caption': (\n 'border': (\n 'bottom': $spacing-ux-caption-border-bottom,\n 'left': $spacing-ux-caption-border-left,\n 'right': $spacing-ux-caption-border-right,\n 'top': $spacing-ux-caption-border-top\n ),\n 'height': $spacing-ux-caption-height,\n 'width': $spacing-ux-caption-width\n ),\n 'credit': (\n 'border': (\n 'bottom': $spacing-ux-credit-border-bottom,\n 'left': $spacing-ux-credit-border-left,\n 'right': $spacing-ux-credit-border-right,\n 'top': $spacing-ux-credit-border-top\n ),\n 'height': $spacing-ux-credit-height,\n 'width': $spacing-ux-credit-width\n ),\n 'pagination': (\n 'padding': (\n 'bottom': $spacing-ux-pagination-padding-bottom,\n 'left': $spacing-ux-pagination-padding-left,\n 'right': $spacing-ux-pagination-padding-right,\n 'top': $spacing-ux-pagination-padding-top\n ),\n 'width': $spacing-ux-pagination-width\n ),\n 'readmore': (\n 'default': (\n 'height': $spacing-ux-readmore-default-height,\n 'border': (\n 'bottom': $spacing-ux-readmore-default-border-bottom,\n 'left': $spacing-ux-readmore-default-border-left,\n 'right': $spacing-ux-readmore-default-border-right,\n 'top': $spacing-ux-readmore-default-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-readmore-default-margin-bottom,\n 'left': $spacing-ux-readmore-default-margin-left,\n 'right': $spacing-ux-readmore-default-margin-right,\n 'top': $spacing-ux-readmore-default-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-readmore-default-padding-bottom,\n 'left': $spacing-ux-readmore-default-padding-left,\n 'right': $spacing-ux-readmore-default-padding-right,\n 'top': $spacing-ux-readmore-default-padding-top\n ),\n 'width': $spacing-ux-readmore-default-width\n ),\n 'hover': (\n 'height': $spacing-ux-readmore-hover-height,\n 'border': (\n 'bottom': $spacing-ux-readmore-hover-border-bottom,\n 'left': $spacing-ux-readmore-hover-border-left,\n 'right': $spacing-ux-readmore-hover-border-right,\n 'top': $spacing-ux-readmore-hover-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-readmore-hover-margin-bottom,\n 'left': $spacing-ux-readmore-hover-margin-left,\n 'right': $spacing-ux-readmore-hover-margin-right,\n 'top': $spacing-ux-readmore-hover-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-readmore-hover-padding-bottom,\n 'left': $spacing-ux-readmore-hover-padding-left,\n 'right': $spacing-ux-readmore-hover-padding-right,\n 'top': $spacing-ux-readmore-hover-padding-top\n ),\n 'width': $spacing-ux-readmore-hover-width\n )\n ),\n 'video': (\n 'controls': (\n 'height': $spacing-ux-video-controls-height,\n 'border': (\n 'bottom': $spacing-ux-video-controls-border-bottom,\n 'left': $spacing-ux-video-controls-border-left,\n 'right': $spacing-ux-video-controls-border-right,\n 'top': $spacing-ux-video-controls-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-video-controls-margin-bottom,\n 'left': $spacing-ux-video-controls-margin-left,\n 'right': $spacing-ux-video-controls-margin-right,\n 'top': $spacing-ux-video-controls-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-video-controls-padding-bottom,\n 'left': $spacing-ux-video-controls-padding-left,\n 'right': $spacing-ux-video-controls-padding-right,\n 'top': $spacing-ux-video-controls-padding-top\n ),\n 'width': $spacing-ux-video-controls-width\n ),\n 'buttonicon': (\n 'height': $spacing-ux-video-buttonicon-height,\n 'border': (\n 'bottom': $spacing-ux-video-buttonicon-border-bottom,\n 'left': $spacing-ux-video-buttonicon-border-left,\n 'right': $spacing-ux-video-buttonicon-border-right,\n 'top': $spacing-ux-video-buttonicon-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-video-buttonicon-margin-bottom,\n 'left': $spacing-ux-video-buttonicon-margin-left,\n 'right': $spacing-ux-video-buttonicon-margin-right,\n 'top': $spacing-ux-video-buttonicon-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-video-buttonicon-padding-bottom,\n 'left': $spacing-ux-video-buttonicon-padding-left,\n 'right': $spacing-ux-video-buttonicon-padding-right,\n 'top': $spacing-ux-video-buttonicon-padding-top\n ),\n 'width': $spacing-ux-video-buttonicon-width\n ),\n 'bigplaybutton': (\n 'height': $spacing-ux-video-bigplaybutton-height,\n 'border': (\n 'bottom': $spacing-ux-video-bigplaybutton-border-bottom,\n 'left': $spacing-ux-video-bigplaybutton-border-left,\n 'right': $spacing-ux-video-bigplaybutton-border-right,\n 'top': $spacing-ux-video-bigplaybutton-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-video-bigplaybutton-margin-bottom,\n 'left': $spacing-ux-video-bigplaybutton-margin-left,\n 'right': $spacing-ux-video-bigplaybutton-margin-right,\n 'top': $spacing-ux-video-bigplaybutton-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-video-bigplaybutton-padding-bottom,\n 'left': $spacing-ux-video-bigplaybutton-padding-left,\n 'right': $spacing-ux-video-bigplaybutton-padding-right,\n 'top': $spacing-ux-video-bigplaybutton-padding-top\n ),\n 'width': $spacing-ux-video-bigplaybutton-width\n )\n ),\n 'table': (\n 'padding': (\n 'bottom': $spacing-ux-table-padding-bottom,\n 'left': $spacing-ux-table-padding-left,\n 'right': $spacing-ux-table-padding-right,\n 'top': $spacing-ux-table-padding-top\n ),\n 'content': (\n 'padding': (\n 'bottom': $spacing-ux-table-content-padding-bottom,\n 'left': $spacing-ux-table-content-padding-left,\n 'right': $spacing-ux-table-content-padding-right,\n 'top': $spacing-ux-table-content-padding-top\n )\n ),\n 'head': (\n 'padding': (\n 'bottom': $spacing-ux-table-head-padding-bottom,\n 'left': $spacing-ux-table-head-padding-left,\n 'right': $spacing-ux-table-head-padding-right,\n 'top': $spacing-ux-table-head-padding-top\n )\n ),\n 'cell': (\n 'padding': (\n 'bottom': $spacing-ux-table-cell-padding-bottom,\n 'left': $spacing-ux-table-cell-padding-left,\n 'right': $spacing-ux-table-cell-padding-right,\n 'top': $spacing-ux-table-cell-padding-top\n )\n ),\n 'smallhead': (\n 'padding': (\n 'bottom': $spacing-ux-table-smallhead-padding-bottom,\n 'left': $spacing-ux-table-smallhead-padding-left,\n 'right': $spacing-ux-table-smallhead-padding-right,\n 'top': $spacing-ux-table-smallhead-padding-top\n )\n ),\n 'smallcell': (\n 'padding': (\n 'bottom': $spacing-ux-table-smallcell-padding-bottom,\n 'left': $spacing-ux-table-smallcell-padding-left,\n 'right': $spacing-ux-table-smallcell-padding-right,\n 'top': $spacing-ux-table-smallcell-padding-top\n )\n )\n ),\n 'tableofcontents': (\n 'border': (\n 'bottom': $spacing-ux-tableofcontents-border-bottom,\n 'left': $spacing-ux-tableofcontents-border-left,\n 'right': $spacing-ux-tableofcontents-border-right,\n 'top': $spacing-ux-tableofcontents-border-top\n ),\n 'borderradius': $spacing-ux-tableofcontents-borderradius,\n 'margin': (\n 'bottom': $spacing-ux-tableofcontents-margin-bottom,\n 'left': $spacing-ux-tableofcontents-margin-left,\n 'right': $spacing-ux-tableofcontents-margin-right,\n 'top': $spacing-ux-tableofcontents-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-tableofcontents-padding-bottom,\n 'left': $spacing-ux-tableofcontents-padding-left,\n 'right': $spacing-ux-tableofcontents-padding-right,\n 'top': $spacing-ux-tableofcontents-padding-top\n ),\n 'items': (\n 'border': (\n 'bottom': $spacing-ux-tableofcontents-items-border-bottom,\n 'left': $spacing-ux-tableofcontents-items-border-left,\n 'right': $spacing-ux-tableofcontents-items-border-right,\n 'top': $spacing-ux-tableofcontents-items-border-top\n ),\n 'margin': (\n 'bottom': $spacing-ux-tableofcontents-items-margin-bottom,\n 'left': $spacing-ux-tableofcontents-items-margin-left,\n 'right': $spacing-ux-tableofcontents-items-margin-right,\n 'top': $spacing-ux-tableofcontents-items-margin-top\n ),\n 'padding': (\n 'bottom': $spacing-ux-tableofcontents-items-padding-bottom,\n 'left': $spacing-ux-tableofcontents-items-padding-left,\n 'right': $spacing-ux-tableofcontents-items-padding-right,\n 'top': $spacing-ux-tableofcontents-items-padding-top\n )\n )\n )\n )\n);\n\n// THEMEPREFIX MAP:\n\n$themeprefix: $themeprefix;\n\n// TYPE MAP:\n\n$type: (\n 'descenders': (\n 'display': $type-descenders-display,\n 'copy': $type-descenders-copy\n ),\n 'base': (\n 'size': $type-base-size,\n 'letter-spacing': $type-base-letter-spacing,\n 'line-height': $type-base-line-height\n ),\n 'body-eyebrow': (\n 'size': $type-body-eyebrow-size,\n 'letter-spacing': $type-body-eyebrow-letter-spacing,\n 'line-height': $type-body-eyebrow-line-height\n ),\n 'body-small': (\n 'size': $type-body-small-size,\n 'letter-spacing': $type-body-small-letter-spacing,\n 'line-height': $type-body-small-line-height\n ),\n 'body-large': (\n 'size': $type-body-large-size,\n 'letter-spacing': $type-body-large-letter-spacing,\n 'line-height': $type-body-large-line-height\n ),\n 'body-xs': (\n 'size': $type-body-xs-size,\n 'letter-spacing': $type-body-xs-letter-spacing,\n 'line-height': $type-body-xs-line-height\n ),\n 'body-xxs': (\n 'size': $type-body-xxs-size,\n 'letter-spacing': $type-body-xxs-letter-spacing,\n 'line-height': $type-body-xxs-line-height\n ),\n 'body-xxxs': (\n 'size': $type-body-xxxs-size,\n 'letter-spacing': $type-body-xxxs-letter-spacing,\n 'line-height': $type-body-xxxs-line-height\n ),\n 'button-small': (\n 'size': $type-button-small-size,\n 'letter-spacing': $type-button-small-letter-spacing,\n 'line-height': $type-button-small-line-height\n ),\n 'button-medium': (\n 'size': $type-button-medium-size,\n 'letter-spacing': $type-button-medium-letter-spacing,\n 'line-height': $type-button-medium-line-height\n ),\n 'button-large': (\n 'size': $type-button-large-size,\n 'letter-spacing': $type-button-large-letter-spacing,\n 'line-height': $type-button-large-line-height\n ),\n 'headline-1': (\n 'size': $type-headline-1-size,\n 'letter-spacing': $type-headline-1-letter-spacing,\n 'line-height': $type-headline-1-line-height\n ),\n 'headline-2': (\n 'size': $type-headline-2-size,\n 'letter-spacing': $type-headline-2-letter-spacing,\n 'line-height': $type-headline-2-line-height\n ),\n 'headline-3': (\n 'size': $type-headline-3-size,\n 'letter-spacing': $type-headline-3-letter-spacing,\n 'line-height': $type-headline-3-line-height\n ),\n 'headline-4': (\n 'size': $type-headline-4-size,\n 'letter-spacing': $type-headline-4-letter-spacing,\n 'line-height': $type-headline-4-line-height\n ),\n 'headline-5': (\n 'size': $type-headline-5-size,\n 'letter-spacing': $type-headline-5-letter-spacing,\n 'line-height': $type-headline-5-line-height\n ),\n 'headline-6': (\n 'size': $type-headline-6-size,\n 'letter-spacing': $type-headline-6-letter-spacing,\n 'line-height': $type-headline-6-line-height\n ),\n 'language-switcher': (\n 'size': $type-language-switcher-size,\n 'letter-spacing': $type-language-switcher-letter-spacing,\n 'line-height': $type-language-switcher-line-height\n ),\n 'label-small': (\n 'size': $type-label-small-size,\n 'letter-spacing': $type-label-small-letter-spacing,\n 'line-height': $type-label-small-line-height\n ),\n 'label-medium': (\n 'size': $type-label-medium-size,\n 'letter-spacing': $type-label-medium-letter-spacing,\n 'line-height': $type-label-medium-line-height\n ),\n 'label-large': (\n 'size': $type-label-large-size,\n 'letter-spacing': $type-label-large-letter-spacing,\n 'line-height': $type-label-large-line-height\n ),\n 'legend': (\n 'size': $type-legend-size,\n 'letter-spacing': $type-legend-letter-spacing,\n 'line-height': $type-legend-line-height\n ),\n 'nav-md': (\n 'size': $type-nav-md-size,\n 'letter-spacing': $type-nav-md-letter-spacing,\n 'line-height': $type-nav-md-line-height\n ),\n 'nav-md-sm': (\n 'size': $type-nav-md-sm-size,\n 'letter-spacing': $type-nav-md-sm-letter-spacing,\n 'line-height': $type-nav-md-sm-line-height\n ),\n 'nav-bold-b-sm': (\n 'size': $type-nav-bold-b-sm-size,\n 'letter-spacing': $type-nav-bold-b-sm-letter-spacing,\n 'line-height': $type-nav-bold-b-sm-line-height\n ),\n 'nav-bold-b': (\n 'size': $type-nav-bold-b-size,\n 'letter-spacing': $type-nav-bold-b-letter-spacing,\n 'line-height': $type-nav-bold-b-line-height\n ),\n 'pull-quote-sm': (\n 'size': $type-pull-quote-sm-size,\n 'letter-spacing': $type-pull-quote-sm-letter-spacing,\n 'line-height': $type-pull-quote-sm-line-height\n ),\n 'pull-quote-lg': (\n 'size': $type-pull-quote-lg-size,\n 'letter-spacing': $type-pull-quote-lg-letter-spacing,\n 'line-height': $type-pull-quote-lg-line-height\n ),\n 'pull-quote-cite': (\n 'size': $type-pull-quote-cite-size,\n 'letter-spacing': $type-pull-quote-cite-letter-spacing,\n 'line-height': $type-pull-quote-cite-line-height\n ),\n 'image-caption': (\n 'size': $type-image-caption-size,\n 'letter-spacing': $type-image-caption-letter-spacing,\n 'line-height': $type-image-caption-line-height\n ),\n 'image-credit': (\n 'size': $type-image-credit-size,\n 'letter-spacing': $type-image-credit-letter-spacing,\n 'line-height': $type-image-credit-line-height\n ),\n 'tagline': (\n 'size': $type-tagline-size,\n 'letter-spacing': $type-tagline-letter-spacing,\n 'line-height': $type-tagline-line-height\n ),\n 'weights': (\n 'section': $type-weights-section,\n 'label': $type-weights-label\n )\n);\n\n// WIDTHS MAP:\n\n$widths: (\n 'border-xsm': $widths-border-xsm,\n 'border-sm': $widths-border-sm,\n 'border-med-sm': $widths-border-med-sm,\n 'border-med': $widths-border-med,\n 'border-lg': $widths-border-lg\n);\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--accordion {\n $transition-timing: 150ms;\n $transition-timing-long: 225ms;\n\n &--button {\n align-items: center;\n background-color: $color-ux-background-default;\n background-position: calc(100% - px-to-rem(6px)) center;\n background-repeat: no-repeat;\n background-size: px-to-rem(24px) px-to-rem(24px);\n border: none;\n border-top: 2px solid map-get($color, \"accordion\", \"border\");\n color: $color-ux-labels-actionable;\n display: flex;\n fill: $color-ux-labels-actionable;\n flex-direction: row;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"label-medium\");\n justify-content: space-between;\n margin: 0;\n padding: px-to-rem(calc($spacing-ui-padding-lg - 6px)) px-to-rem(36px)\n px-to-rem(calc($spacing-ui-padding-lg - 6px)) 0;\n text-align: left;\n transition: border $transition-timing ease-out,\n background $transition-timing ease-out, color $transition-timing ease-out;\n width: 100%;\n @include dataurlicon(\"add\", $color-ux-labels-actionable);\n\n &--large {\n @include font-styles(\"headline-6\");\n padding: px-to-rem(calc($spacing-ui-padding-lg - 3px)) px-to-rem(36px)\n px-to-rem(calc($spacing-ui-padding-lg - 3px)) 0;\n }\n\n &:hover,\n &:focus {\n background-color: $color-ux-background-hover;\n border-top-color: $color-ux-borders-hover;\n color: $color-ux-labels-hover;\n cursor: pointer;\n fill: $color-ux-labels-hover;\n\n &[aria-expanded=\"true\"] {\n @include dataurlicon(\"minus\", $color-ux-labels-hover);\n }\n\n &[aria-expanded=\"false\"] {\n @include dataurlicon(\"add\", $color-ux-labels-hover);\n }\n }\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"label-medium\");\n padding: px-to-rem(calc($spacing-ui-padding-xl - 14px)) px-to-rem(36px)\n px-to-rem(calc($spacing-ui-padding-xl - 14px)) 0;\n\n &--large {\n @include font-styles(\"headline-6\");\n padding: px-to-rem(calc($spacing-ui-padding-lg - 3px)) px-to-rem(36px)\n px-to-rem(calc($spacing-ui-padding-lg - 3px)) 0;\n }\n }\n\n &[aria-expanded=\"true\"] {\n @include dataurlicon(\"minus\", $color-ux-labels-actionable);\n }\n\n &[aria-expanded=\"false\"] {\n @include dataurlicon(\"add\", $color-ux-labels-actionable);\n }\n }\n\n &--panel {\n --height: auto;\n color: $color-ux-labels-default;\n font-family: $fonts-copy;\n height: 0px;\n overflow: hidden;\n transition: height $transition-timing-long ease-out,\n padding $transition-timing-long ease-out;\n\n .ilo--accordion--innerpanel {\n padding-bottom: px-to-rem($spacing-ui-padding-xxl);\n padding-top: px-to-rem(8px);\n }\n\n @include font-styles(\"label-medium\");\n\n &--open {\n height: var(--height);\n transition: height $transition-timing-long ease-out,\n padding $transition-timing-long ease-out;\n }\n\n &.collapsing,\n &.expanding {\n height: 0;\n position: relative;\n overflow: hidden;\n visibility: visible;\n -webkit-transition-property: height, padding, visibility;\n transition-property: height, padding, visibility;\n transition-duration: attr(data-transition);\n -webkit-transition-duration: attr(data-transition);\n transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n }\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"label-large\");\n }\n }\n}\n","//*------------------------------------*\\\n// $MIXINS\n//*------------------------------------*/\n@use \"tokens\" as *;\n@use \"functions\" as *;\n\n// ======================================\n// Output font styles\n// ======================================\n/// Retrieve the usual font styles for a given type styling\n/// @param {String} $stylename - the name of the style to get\n/// @return {CSS} font size, line-height, and letter-spacing for this type style\n@mixin font-styles($stylename) {\n font-size: map-get($type, $stylename, \"size\");\n letter-spacing: map-get($type, $stylename, \"letter-spacing\");\n line-height: map-get($type, $stylename, \"line-height\");\n}\n\n// ======================================\n// Vertical Align\n// ======================================\n\n@mixin vertical-align {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n// ======================================\n// Horizontal Align\n// ======================================\n\n@mixin horizontal-align {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n@mixin vertical-horizontal-align {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n// ======================================\n// Visually Hidden\n//\n// Visually hide the element from the\n// screen but still have it accessible\n// via screenreaders\n//\n// ======================================\n@mixin isVisuallyHidden() {\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n clip: rect(0 0 0 0);\n overflow: hidden;\n}\n\n// ======================================\n// Ellipsis\n// ======================================\n\n@mixin ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n// ======================================\n// Breakpoint\n// ======================================\n\n@mixin breakpoint($breakpoint, $max: false) {\n @if map-has-key($breakpoints, $breakpoint) {\n @if not $max {\n @media screen and (min-width: map-get($breakpoints, $breakpoint)) {\n @content;\n }\n }\n\n @if $max {\n @media screen and (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {\n @content;\n }\n }\n }\n}\n\n// ======================================\n// Text Margin\n//\n// calculates reduced margin to account\n// for line-height and descenders\n// ======================================\n\n@mixin textmargin(\n $margin,\n $marginval,\n $stylename,\n $descender,\n $stylename2: false,\n $descender2: false\n) {\n @if $stylename2 != false {\n #{$margin}: px-to-rem(\n margin-adjust(\n $marginval,\n map-get($type, \"descenders\", $descender),\n map-get($type, $stylename, \"size\"),\n map-get($type, $stylename, \"line-height\")\n )\n );\n } @else {\n #{$margin}: px-to-rem(\n margin-adjust(\n $marginval,\n map-get($type, \"descenders\", $descender),\n map-get($type, $stylename, \"size\"),\n map-get($type, $stylename, \"line-height\"),\n map-get($type, \"descenders\", $descender2),\n map-get($type, $stylename2, \"size\"),\n map-get($type, $stylename2, \"line-height\")\n )\n );\n }\n}\n\n// ======================================\n// Spacing Values\n// ======================================\n\n@mixin spacingvalues($type, $mappath, $location, $state: \"default\") {\n #{$type}: px-to-rem(\n map-get($spacing, $location, $mappath, $state, $type, \"top\")\n )\n px-to-rem(map-get($spacing, $location, $mappath, $state, $type, \"right\"))\n px-to-rem(map-get($spacing, $location, $mappath, $state, $type, \"bottom\"))\n px-to-rem(map-get($spacing, $location, $mappath, $state, $type, \"left\"));\n}\n\n// ======================================\n// Border Values\n// ======================================\n\n@mixin bordervalues($mappath, $location, $state: \"default\") {\n border-bottom: px-to-rem(\n map-get($spacing, $location, $mappath, $state, \"border\", \"bottom\")\n )\n solid map-get($color, $location, $mappath, $state, \"border\", \"bottom\");\n border-left: px-to-rem(\n map-get($spacing, $location, $mappath, $state, \"border\", \"left\")\n )\n solid map-get($color, $location, $mappath, $state, \"border\", \"left\");\n border-right: px-to-rem(\n map-get($spacing, $location, $mappath, $state, \"border\", \"right\")\n )\n solid map-get($color, $location, $mappath, $state, \"border\", \"right\");\n border-top: px-to-rem(\n map-get($spacing, $location, $mappath, $state, \"border\", \"top\")\n )\n solid map-get($color, $location, $mappath, $state, \"border\", \"top\");\n}\n\n// ======================================\n// Border Radius Values\n// ======================================\n\n@mixin borderradius($mappath) {\n border-bottom-left-radius: map-get($radius, $mappath, \"bottom-left\");\n border-bottom-right-radius: map-get($radius, $mappath, \"bottom-right\");\n border-top-left-radius: map-get($radius, $mappath, \"top-left\");\n border-top-right-radius: map-get($radius, $mappath, \"top-right\");\n}\n\n// ======================================\n// Box Padding Values\n// ======================================\n\n@mixin boxpadding($mappath, $size) {\n padding-bottom: map-get($spacing, \"boxpadding\", $mappath, $size, \"bottom\");\n padding-left: map-get($spacing, \"boxpadding\", $mappath, $size, \"left\");\n padding-right: map-get($spacing, \"boxpadding\", $mappath, $size, \"right\");\n padding-top: map-get($spacing, \"boxpadding\", $mappath, $size, \"top\");\n}\n\n// ======================================\n// Data URL Icon\n// ======================================\n\n@mixin dataurlicon($name, $color: $color-base-neutrals-black) {\n background-image: url(\"#{colortodataurlicon($name, $color)}\");\n}\n\n// ======================================\n// Icon Button\n// ======================================\n\n@mixin iconbutton($name, $height, $width, $color: $color-base-neutrals-black) {\n background-position: center center;\n background-repeat: no-repeat;\n background-size: $width $height;\n @include dataurlicon($name, $color);\n}\n\n// ======================================\n// Link styles\n// ======================================\n\n@mixin linkstyles() {\n background: map-get($color, \"link\", \"background\", \"default\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"default\");\n color: map-get($color, \"link\", \"text\", \"default\");\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n\n &:visited {\n background: map-get($color, \"link\", \"background\", \"visited\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"visited\");\n color: map-get($color, \"link\", \"text\", \"visited\");\n }\n\n &:hover {\n background: map-get($color, \"link\", \"background\", \"hover\");\n border-bottom: $widths-border-med solid\n map-get($color, \"link\", \"underline\", \"hover\");\n color: map-get($color, \"link\", \"text\", \"hover\");\n text-decoration: none;\n }\n\n &:active {\n background: map-get($color, \"link\", \"background\", \"active\");\n border-bottom: $widths-border-med solid\n map-get($color, \"link\", \"underline\", \"active\");\n color: map-get($color, \"link\", \"text\", \"active\");\n outline: none;\n }\n\n &:focus {\n background: map-get($color, \"link\", \"background\", \"focus\");\n border-bottom: $widths-border-lg solid\n map-get($color, \"link\", \"underline\", \"focus\");\n color: map-get($color, \"link\", \"text\", \"focus\");\n outline: none;\n }\n\n &--dark {\n background: map-get($color, \"link\", \"background-dark\", \"default\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline-dark\", \"default\");\n color: map-get($color, \"link\", \"text-dark\", \"default\");\n\n &:visited {\n background: map-get($color, \"link\", \"background-dark\", \"visited\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline-dark\", \"visited\");\n color: map-get($color, \"link\", \"text-dark\", \"visited\");\n }\n\n &:hover {\n background: map-get($color, \"link\", \"background-dark\", \"hover\");\n border-bottom: $widths-border-med solid\n map-get($color, \"link\", \"underline-dark\", \"hover\");\n color: map-get($color, \"link\", \"text-dark\", \"hover\");\n }\n\n &:active {\n background: map-get($color, \"link\", \"background-dark\", \"active\");\n border-bottom: $widths-border-med solid\n map-get($color, \"link\", \"underline-dark\", \"active\");\n color: map-get($color, \"link\", \"text-dark\", \"active\");\n outline: none;\n }\n\n &:focus {\n background: map-get($color, \"link\", \"background-dark\", \"focus\");\n border-bottom: $widths-border-lg solid\n map-get($color, \"link\", \"underline-dark\", \"focus\");\n color: map-get($color, \"link\", \"text-dark\", \"focus\");\n outline: none;\n }\n }\n\n &--footer {\n @include font-styles(\"body-xxs\");\n\n background: map-get($color, \"link\", \"background-footer\", \"default\");\n border-bottom: $widths-border-xsm solid\n map-get($color, \"link\", \"underline-footer\", \"default\");\n color: map-get($color, \"link\", \"text-footer\", \"default\");\n\n &:visited {\n background: map-get($color, \"link\", \"background-footer\", \"visited\");\n border-bottom: $widths-border-xsm solid\n map-get($color, \"link\", \"underline-footer\", \"visited\");\n color: map-get($color, \"link\", \"text-footer\", \"visited\");\n }\n\n &:hover {\n background: map-get($color, \"link\", \"background-footer\", \"hover\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline-footer\", \"hover\");\n color: map-get($color, \"link\", \"text-footer\", \"hover\");\n }\n\n &:active {\n background: map-get($color, \"link\", \"background-footer\", \"active\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline-footer\", \"active\");\n color: map-get($color, \"link\", \"text-footer\", \"active\");\n outline: none;\n }\n\n &:focus {\n background: map-get($color, \"link\", \"background-footer\", \"focus\");\n border-bottom: $widths-border-med-sm solid\n map-get($color, \"link\", \"underline-footer\", \"focus\");\n color: map-get($color, \"link\", \"text-footer\", \"focus\");\n outline: none;\n }\n }\n}\n","//*------------------------------------*\\\n// $ANIMATIONS\n//*------------------------------------*/\n@use \"tokens\" as *;\n@import \"mixins\";\n\n// ======================================\n// Global transition\n// ======================================\n/// Applies the global transition to any transitionable property\n/// @param {String} $properties - the name of the property on which to transition\n/// @return {CSS} transition for the given properties\n@mixin globaltransition($properties) {\n transition-property: unquote($properties);\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n}\n\n// ======================================\n// Animation of empty gradient\n// ======================================\n@keyframes emptygradient {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n// ======================================\n// Animation of loading graphic\n// ======================================\n@keyframes spin {\n 100% {\n -moz-transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@use \"../animations\" as *;\n@import \"../mixins\";\n\n.ilo--breadcrumb {\n position: relative;\n z-index: 10;\n\n &--items {\n align-items: center;\n background-color: $color-base-neutrals-white;\n display: inline-flex;\n justify-content: flex-start;\n padding: px-to-rem(16px) 0 px-to-rem(16px) px-to-rem($spacing-padding-1-5);\n position: relative;\n\n &.context--menu {\n padding: 0;\n }\n }\n\n &--link {\n align-items: center;\n background-position: right 52%;\n background-repeat: no-repeat;\n color: map-get($color, \"link\", \"text\", \"default\");\n display: inline-flex;\n height: px-to-rem($spacing-padding-2);\n padding: 0 px-to-rem($spacing-padding-3) 0 px-to-rem(10px);\n text-decoration: none;\n text-decoration-thickness: px-to-rem($borders-base);\n @include dataurlicon(\"breadcrumbdivider\", $color-link-text-default);\n\n &--label {\n font-family: $fonts-copy;\n font-weight: 400;\n @include font-styles(\"body-xxs\");\n }\n\n &:hover,\n &:focus {\n color: map-get($color, \"link\", \"text\", \"hover\");\n text-decoration: underline;\n text-decoration-thickness: px-to-rem($borders-base);\n @include dataurlicon(\"breadcrumbdivider\", $color-link-text-hover);\n }\n }\n\n &--item {\n align-items: center;\n display: flex;\n height: px-to-rem($spacing-padding-2);\n\n &.home {\n align-items: center;\n display: flex;\n position: relative;\n width: px-to-rem($spacing-padding-4);\n\n .ilo--breadcrumb--link {\n padding-left: 0;\n width: px-to-rem(38px);\n\n &--label {\n @include isVisuallyHidden();\n }\n\n &:before {\n background-position: center center;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-2);\n left: 0;\n position: absolute;\n top: 0;\n width: px-to-rem($spacing-padding-2);\n @include dataurlicon(\"home\", $color-link-text-default);\n }\n }\n\n &:hover,\n &:focus {\n .ilo--breadcrumb--link {\n &:before {\n @include dataurlicon(\"home\", $color-link-text-hover);\n }\n }\n }\n }\n\n &.final {\n .ilo--breadcrumb--link {\n background-image: none;\n }\n }\n }\n\n .ilo--breadcrumb--item--context {\n align-items: flex-start;\n display: flex;\n height: px-to-rem($spacing-padding-2);\n }\n\n &.contextmenu {\n .ilo--breadcrumb--item--context {\n background-position: center center;\n background-repeat: no-repeat;\n background-size: 16px 4px;\n position: relative;\n width: px-to-rem(42px);\n @include dataurlicon(\"elipsis\", $color-link-text-default);\n\n &:hover {\n cursor: pointer;\n @include dataurlicon(\"elipsis\", $color-base-blue-medium);\n }\n\n &:after {\n background-position: center center;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-2);\n right: -7px;\n position: absolute;\n top: 0;\n width: px-to-rem($spacing-padding-2);\n @include dataurlicon(\"breadcrumbdivider\", $color-link-text-default);\n }\n\n .context--menu {\n border-radius: px-to-rem(2px);\n background-color: $color-ux-background-highlight;\n display: inline-block;\n left: px-to-rem(-40px);\n opacity: 0;\n position: absolute;\n top: calc(100% + 24px);\n width: px-to-rem(120px);\n z-index: 10;\n @include globaltransition(\"opacity\");\n\n &.open {\n opacity: 1;\n @include globaltransition(\"opacity\");\n }\n\n &:before {\n background-position: top center;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\n \"halfsquaretriangle\",\n $color-ux-background-highlight\n );\n content: \"\";\n height: px-to-rem($spacing-padding-1-5);\n position: absolute;\n left: 50%;\n top: -#{px-to-rem(6px)};\n transform: translateX(-50%) rotate(135deg);\n width: px-to-rem($spacing-padding-1-5);\n }\n\n &:hover {\n cursor: pointer;\n }\n\n .ilo--breadcrumb--item {\n display: inline-block;\n height: auto;\n padding: 0 px-to-rem($spacing-padding-1);\n position: relative;\n width: 100%;\n\n &:last-of-type a {\n border-bottom: none;\n }\n\n &:hover,\n &:focus {\n background-color: $color-base-blue-light;\n text-decoration: none;\n\n .ilo--breadcrumb--link {\n text-decoration: underline;\n text-decoration-thickness: px-to-rem($borders-base);\n }\n }\n\n &.endsection {\n border-bottom: px-to-rem($borders-base) solid\n $color-base-neutrals-white;\n\n .ilo--context-menu--link {\n border-bottom: none;\n }\n }\n }\n\n .ilo--breadcrumb--link {\n background: none;\n border-bottom: px-to-rem($borders-base) solid\n $color-base-neutrals-white;\n color: map-get($color, \"link\", \"text\", \"default\");\n display: inline-block;\n font-family: $fonts-copy;\n font-weight: map-get($type, \"weights\", \"section\");\n height: auto;\n padding: px-to-rem($spacing-padding-2) 0;\n text-decoration: none;\n width: 100%;\n @include font-styles(\"body-xxs\");\n\n &:visited {\n color: map-get($color, \"link\", \"text\", \"default\");\n }\n\n &:active {\n color: map-get($color, \"link\", \"text\", \"active\");\n outline: none;\n }\n\n &:hover,\n &:focus {\n color: map-get($color, \"link\", \"text\", \"hover\");\n outline: none;\n text-decoration: underline;\n text-decoration-thickness: px-to-rem($borders-base);\n }\n }\n }\n }\n }\n\n @include breakpoint(\"medium\") {\n &--items {\n &:after {\n background: linear-gradient(\n to bottom right,\n white 50%,\n transparent 50%\n );\n content: \"\";\n display: inline-block;\n height: 47px;\n position: absolute;\n right: -47px;\n top: 0;\n width: 47px;\n }\n\n &.context--menu {\n &:after {\n content: none;\n }\n }\n }\n }\n\n &.storybook {\n background-color: $brand-ilo-grey-ui;\n height: 100vh;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../animations\";\n@import \"../mixins\";\n\n.ilo--button {\n display: inline-block;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n padding: 0;\n @include borderradius(\"button\");\n\n .link__label,\n .button__label {\n display: inline-block;\n }\n\n &.icon {\n position: relative;\n\n .ilo--icon {\n height: 100%;\n max-height: calc($spacing-icons-icon-height-lg * 2);\n max-width: calc($spacing-icons-icon-height-lg * 2);\n position: absolute;\n width: 100%;\n }\n\n &.icon__position--left {\n .link__label,\n .button__label {\n padding-left: $spacing-boxpadding-button-icon-large-left;\n }\n\n .ilo--icon {\n left: calc($spacing-icons-icon-padding-lg - 9px);\n top: calc($spacing-boxpadding-button-icon-large-top - 3px);\n }\n }\n\n &.icon__position--right {\n .link__label,\n .button__label {\n padding-right: $spacing-boxpadding-button-icon-large-right;\n }\n\n .ilo--icon {\n right: calc($spacing-icons-icon-padding-lg - 9px);\n top: calc($spacing-boxpadding-button-icon-large-top - 3px);\n }\n }\n\n &--only {\n .button__label {\n @include isVisuallyHidden();\n }\n }\n }\n\n &--large {\n .link__label,\n .button__label {\n @include boxpadding(\"button\", \"large\");\n @include font-styles(\"button-large\");\n }\n\n &.icon--only {\n height: px-to-rem(45px);\n width: px-to-rem(45px);\n\n .ilo--icon {\n left: px-to-rem(4.5px);\n top: px-to-rem(4.5px);\n }\n }\n }\n\n &--medium {\n .link__label,\n .button__label {\n @include boxpadding(\"button\", \"medium\");\n @include font-styles(\"button-medium\");\n }\n\n &.icon {\n .ilo--icon {\n max-height: calc($spacing-icons-icon-height-m * 2);\n max-width: calc($spacing-icons-icon-height-m * 2);\n position: absolute;\n }\n\n &.icon__position--left {\n .link__label,\n .button__label {\n padding-left: $spacing-boxpadding-button-icon-medium-left;\n }\n\n .ilo--icon {\n left: calc($spacing-icons-icon-padding-m - 9px);\n top: calc($spacing-boxpadding-button-icon-medium-top - 6px);\n }\n }\n\n &.icon__position--right {\n .link__label,\n .button__label {\n padding-right: $spacing-boxpadding-button-icon-medium-right;\n }\n\n .ilo--icon {\n right: calc($spacing-icons-icon-padding-m - 9px);\n top: calc($spacing-boxpadding-button-icon-medium-top - 6px);\n }\n }\n }\n\n &.icon--only {\n height: px-to-rem(36px);\n width: px-to-rem(36px);\n\n .ilo--icon {\n left: px-to-rem(2px);\n top: px-to-rem(2px);\n }\n }\n }\n\n &--small {\n .link__label,\n .button__label {\n @include boxpadding(\"button\", \"small\");\n @include font-styles(\"button-small\");\n }\n\n &.icon {\n .ilo--icon {\n max-height: calc($spacing-icons-icon-height-sm * 2);\n max-width: calc($spacing-icons-icon-height-sm * 2);\n position: absolute;\n }\n\n &.icon__position--left {\n .link__label,\n .button__label {\n padding-left: $spacing-boxpadding-button-icon-small-left;\n }\n\n .ilo--icon {\n left: calc($spacing-icons-icon-padding-sm - 9px);\n top: calc($spacing-boxpadding-button-icon-small-top - 4px);\n }\n }\n\n &.icon__position--right {\n .link__label,\n .button__label {\n padding-right: $spacing-boxpadding-button-icon-small-right;\n }\n\n .ilo--icon {\n right: calc($spacing-icons-icon-padding-sm - 9px);\n top: calc($spacing-boxpadding-button-icon-small-top - 4px);\n }\n }\n }\n\n &.icon--only {\n height: px-to-rem(26px);\n width: px-to-rem(26px);\n\n .ilo--icon {\n left: px-to-rem(0.5px);\n top: px-to-rem(0.5px);\n }\n }\n }\n\n &--primary {\n background-color: map-get($color, \"ux\", \"background\", \"attention\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"borders\", \"attention\") solid;\n color: map-get($color, \"ux\", \"labels\", \"actionable\");\n }\n\n &:focus {\n background-color: map-get($color, \"ux\", \"background\", \"focus\");\n border: map-get($borders, \"base\") map-get($color, \"ux\", \"borders\", \"focus\")\n solid;\n box-shadow: 4px 4px 0 1px map-get($color, \"ux\", \"borders\", \"focus\") inset,\n -4px -4px 0 1px map-get($color, \"ux\", \"borders\", \"focus\") inset;\n color: map-get($color, \"ux\", \"labels\", \"focus\");\n outline: none;\n @include globaltransition(\"color, background-color, border-color\");\n\n &.ilo--button--small {\n box-shadow: 3px 3px 0 1px map-get($color, \"ux\", \"borders\", \"focus\") inset,\n -3px -3px 0 1px map-get($color, \"ux\", \"borders\", \"focus\") inset;\n }\n }\n\n &:hover {\n background-color: map-get($color, \"ux\", \"background\", \"hover\");\n border: map-get($borders, \"base\") map-get($color, \"ux\", \"borders\", \"hover\")\n solid;\n box-shadow: none;\n color: map-get($color, \"ux\", \"labels\", \"hover\");\n cursor: pointer;\n @include globaltransition(\"color, background-color, border-color\");\n\n &.ilo--button--small {\n box-shadow: none;\n }\n }\n\n &:active {\n background-color: map-get($color, \"ux\", \"background\", \"active\");\n border: map-get($borders, \"base\") map-get($color, \"ux\", \"borders\", \"active\")\n solid;\n box-shadow: none;\n color: map-get($color, \"ux\", \"labels\", \"active\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &.ilo--button--small {\n box-shadow: none;\n }\n }\n\n &:disabled {\n opacity: map-get($opacity, \"disabled\");\n pointer-events: none;\n }\n\n &--secondary {\n background-color: map-get($color, \"ux\", \"background\", \"default\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"default\") solid;\n color: map-get($color, \"ux\", \"labels\", \"actionable\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &:hover {\n background-color: map-get($color, \"ux\", \"background\", \"hover\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"hover\") solid;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &:active {\n background-color: map-get($color, \"ux\", \"background\", \"active\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"borders\", \"active\") solid;\n box-shadow: none;\n color: map-get($color, \"ux\", \"labels\", \"active\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &.ilo--button--small {\n box-shadow: none;\n }\n }\n }\n\n &--tertiary {\n background-color: map-get($color, \"ux\", \"background\", \"highlight\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"background\", \"highlight\") solid;\n color: map-get($color, \"ux\", \"labels\", \"actionable\");\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &--alert {\n background-color: map-get($color, \"ux\", \"background\", \"alert\");\n border: map-get($borders, \"small\") map-get($color, \"ux\", \"borders\", \"alert\")\n solid;\n color: map-get($color, \"ux\", \"labels\", \"alert\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &:hover {\n background-color: map-get($color, \"ux\", \"background\", \"hover\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"hover\") solid;\n color: map-get($color, \"ux\", \"labels\", \"hover\");\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &:focus {\n background-color: map-get($color, \"ux\", \"background\", \"focus\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"borders\", \"focus\") solid;\n color: map-get($color, \"ux\", \"labels\", \"focus\");\n outline: none;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &:active {\n background-color: map-get($color, \"ux\", \"background\", \"active\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"borders\", \"active\") solid;\n box-shadow: none;\n color: map-get($color, \"ux\", \"labels\", \"active\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &.ilo--button--small {\n box-shadow: none;\n }\n }\n }\n}\n\n[id*=\"story--components-button\"] div {\n .ilo--button {\n margin-right: 10px;\n margin-bottom: 10px;\n\n &--large.icon--only {\n transform: translateY(-6px);\n }\n\n &--medium.icon--only {\n transform: translateY(-5px);\n }\n\n &--small.icon--only {\n transform: translateY(-5px);\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--callout {\n display: flex;\n transition: max-height 225ms ease-out;\n $self: &;\n\n &--collapse:not(.ilo--callout--open) {\n max-height: 78px;\n overflow: hidden;\n }\n\n &--open {\n max-height: 300px;\n overflow: hidden;\n\n #{$self}--toggle--icon {\n transform: translateY(-50%) rotate(180deg);\n }\n }\n\n &--sidebar {\n padding: px-to-rem($spacing-padding-3 + 2) px-to-rem(12px);\n width: px-to-rem(40px);\n }\n\n &--content {\n padding: px-to-rem($spacing-padding-3 + 2) px-to-rem($spacing-padding-3 - 2)\n px-to-rem($spacing-padding-3);\n width: 100%;\n }\n\n &--copy {\n @include font-styles(\"body-xs\");\n\n &:not(:last-child) {\n margin-bottom: px-to-rem($spacing-padding-3);\n }\n }\n\n &--header {\n display: flex;\n justify-content: space-between;\n padding: 0 0 px-to-rem(24px);\n }\n\n &--headline {\n @include font-styles(\"nav-bold-b\");\n\n font-family: $fonts-display;\n font-weight: 700;\n }\n\n &--toggle {\n @include font-styles(\"nav-bold-b\");\n\n background: none;\n border: none;\n color: $brand-ilo-dark-blue;\n cursor: pointer;\n font-family: $fonts-display;\n font-weight: 500;\n padding-right: 36px;\n position: relative;\n\n &--icon {\n @include dataurlicon(\"arrow\", $brand-ilo-dark-blue);\n\n background-position: right;\n background-repeat: no-repeat;\n display: inline-block;\n height: 24px;\n position: absolute;\n right: -3px;\n top: 50%;\n transform: translateY(-50%) rotate(0);\n transition: transform 225ms ease-out;\n width: 23px;\n }\n }\n\n &--footer {\n padding: px-to-rem(24px) 0 0 0;\n }\n\n .icon {\n background-repeat: no-repeat;\n background-size: contain;\n display: block;\n height: 16px;\n width: 16px;\n\n &--error {\n background-color: $color-ux-notification-type-error;\n\n @include dataurlicon(\"error\", $color-ux-notification-icon);\n }\n\n &--info {\n background-color: $color-ux-notification-type-info;\n\n @include dataurlicon(\"info\", $color-ux-notification-icon);\n }\n\n &--success {\n background-color: $color-ux-notification-type-success;\n\n @include dataurlicon(\"success\", $color-ux-notification-icon);\n }\n\n &--warning {\n background-color: $color-ux-notification-type-warning;\n\n @include dataurlicon(\"warning\", $color-ux-notification-icon);\n }\n }\n\n &--error {\n background: $brand-ilo-ramp-red;\n\n #{$self}--sidebar {\n background: $brand-ilo-red;\n }\n }\n\n &--info {\n background: $brand-ilo-ramp-blue;\n\n #{$self}--sidebar {\n background: $brand-ilo-blue;\n }\n }\n\n &--success {\n background: $brand-ilo-ramp-green;\n\n #{$self}--sidebar {\n background: $brand-ilo-green;\n }\n }\n\n &--warning {\n background: $brand-ilo-ramp-yellow;\n\n #{$self}--sidebar {\n background: $brand-ilo-yellow;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@use \"../animations\" as *;\n@import \"../mixins\";\n\n.ilo--card {\n $self: &;\n $transition-timing: 150ms;\n margin: 0;\n max-width: px-to-rem(920px);\n\n .right-to-left & {\n text-align: right;\n }\n\n &--action:hover:not(#{$self}--data),\n &--action:focus:not(#{$self}--data) {\n background: $brand-ilo-white;\n color: $brand-ilo-blue;\n text-decoration: none;\n\n &#{$self}--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(#{$self}--factlist) {\n background: $brand-ilo-white;\n }\n\n #{$self}--eyebrow {\n color: $brand-ilo-blue;\n }\n\n #{$self}--title {\n color: $brand-ilo-blue;\n }\n\n #{$self}--intro {\n color: $brand-ilo-blue;\n }\n\n #{$self}--date {\n color: $brand-ilo-blue;\n }\n\n #{$self}--eventdate {\n color: $brand-ilo-blue;\n }\n }\n\n &--link {\n background: none;\n color: transparent;\n height: 100%;\n left: 0;\n position: absolute;\n text-decoration: none;\n top: 0;\n width: 100%;\n z-index: 2;\n @include globaltransition(\"color, background-color, border-color, opacity\");\n\n &:hover,\n &:focus {\n @include globaltransition(\n \"color, background-color, border-color, opacity\"\n );\n }\n\n &--text {\n @include isVisuallyHidden();\n }\n }\n\n &--light {\n background: $brand-ilo-white;\n }\n\n &--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(:hover):not(:focus) {\n background: $brand-ilo-dark-blue;\n transition: background $transition-timing ease-out;\n\n #{$self}--eyebrow {\n color: $brand-ilo-grey-light;\n transition: color $transition-timing ease-out;\n }\n\n #{$self}--title {\n color: $brand-ilo-white;\n transition: color $transition-timing ease-out;\n }\n\n #{$self}--intro {\n color: $brand-ilo-grey-light;\n transition: color $transition-timing ease-out;\n }\n\n #{$self}--date {\n color: $brand-ilo-grey-light;\n transition: color $transition-timing ease-out;\n }\n\n #{$self}--eventdate {\n color: $brand-ilo-grey-light;\n transition: color $transition-timing ease-out;\n }\n }\n\n &--cornercut:not(#{$self}--multilink):not(#{$self}--detail):not(#{$self}--feature) {\n margin-top: px-to-rem(40px);\n padding-top: 0;\n position: relative;\n\n @include breakpoint(\"medium\") {\n margin-top: px-to-rem(48px);\n }\n\n @include breakpoint(\"large\") {\n margin-top: px-to-rem(64px);\n }\n\n &::before {\n background: inherit;\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n content: \"\";\n display: block;\n height: px-to-rem(30px);\n left: 0;\n position: absolute;\n top: px-to-rem(-29.7px);\n width: 100%;\n\n .right-to-left & {\n clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);\n }\n\n @include breakpoint(\"medium\") {\n height: px-to-rem(38px);\n top: px-to-rem(-37.7px);\n }\n\n @include breakpoint(\"large\") {\n height: px-to-rem(58px);\n top: px-to-rem(-57.7px);\n }\n }\n }\n\n &--eyebrow {\n color: $brand-ilo-purple;\n @include font-styles(\"body-small\");\n @include textmargin(\n \"margin-bottom\",\n 16px,\n \"headline-5\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include globaltransition(\"color\");\n\n #{$self}--link:hover &,\n #{$self}--link:focus & {\n color: $brand-ilo-blue;\n @include globaltransition(\"color\");\n }\n }\n\n &--title {\n color: $brand-ilo-dark-blue;\n font-family: $fonts-display;\n font-weight: 700;\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 10px,\n \"headline-5\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include globaltransition(\"color\");\n\n #{$self}--link:hover &,\n #{$self}--link:focus & {\n color: $brand-ilo-blue;\n @include globaltransition(\"color\");\n }\n }\n\n &--intro {\n color: $brand-ilo-grey-charcoal;\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 30px, \"body-small\", \"copy\", 0, 0);\n @include globaltransition(\"color\");\n\n #{$self}--link:hover &,\n #{$self}--link:focus & {\n color: $brand-ilo-blue;\n @include globaltransition(\"color\");\n }\n }\n\n &--date {\n color: $brand-ilo-grey-accessible;\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 30px, \"body-small\", \"copy\", 0, 0);\n @include globaltransition(\"color\");\n\n #{$self}--link:hover &,\n #{$self}--link:focus & {\n color: $brand-ilo-blue;\n @include globaltransition(\"color\");\n }\n }\n\n &--event-date {\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 30px, \"body-small\", \"copy\", 0, 0);\n }\n\n &--image {\n max-width: 100%;\n width: 100%;\n }\n\n &--cta {\n position: relative;\n z-index: 2;\n }\n\n &--isvideo {\n #{$self}--image--wrapper {\n position: relative;\n\n &::before {\n @include dataurlicon(\"play\", $brand-ilo-grey-light);\n background-color: $brand-ilo-grey-charcoal;\n background-position: center;\n background-size: 18px 20px;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n height: 40px;\n left: 0;\n position: absolute;\n top: 0;\n width: 40px;\n z-index: 1;\n }\n }\n }\n\n // CARD VARIANTS\n &--multilink {\n padding: px-to-rem(24px);\n\n #{$self}--image--wrapper {\n display: none;\n }\n\n #{$self}--content {\n #{$self}--image--wrapper {\n display: block;\n }\n }\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(40px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(56px) px-to-rem(48px);\n }\n\n #{$self}--title {\n @include font-styles(\"headline-5\");\n @include textmargin(\"margin-bottom\", 24px, \"headline-5\", \"display\", 0, 0);\n color: $brand-ilo-grey-charcoal;\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-4\");\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"headline-4\",\n \"display\",\n 0,\n 0\n );\n }\n }\n\n #{$self}--intro {\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 40px, \"body-small\", \"copy\", 0, 0);\n color: $brand-ilo-grey-charcoal;\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"base\");\n @include textmargin(\"margin-bottom\", 40px, \"base\", \"copy\", 0, 0);\n }\n }\n\n &#{$self}--dark {\n background: $brand-ilo-white;\n\n #{$self}--title {\n color: $brand-ilo-grey-charcoal;\n }\n\n #{$self}--intro {\n color: $brand-ilo-grey-charcoal;\n }\n }\n\n &#{$self}--wide {\n padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(56px) px-to-rem(48px);\n\n &#{$self}--right {\n #{$self}--wrap {\n flex-direction: row-reverse;\n\n .right-to-left & {\n flex-direction: row;\n }\n }\n }\n\n #{$self}--wrap {\n display: flex;\n column-gap: px-to-rem(32px);\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n }\n\n #{$self}--image--wrapper {\n display: block;\n width: 50%;\n }\n\n #{$self}--content {\n width: 50%;\n\n #{$self}--image--wrapper {\n display: none;\n }\n }\n }\n }\n\n &#{$self}--standard {\n padding: px-to-rem(48px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(48px) px-to-rem(40px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(48px) px-to-rem(40px);\n }\n }\n\n &#{$self}--narrow {\n padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);\n }\n\n #{$self}--image--wrapper {\n display: none;\n }\n\n #{$self}--content {\n #{$self}--image--wrapper {\n display: block;\n margin-bottom: px-to-rem(24px);\n }\n }\n\n #{$self}--title {\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"headline-5\",\n \"display\",\n 0,\n 0\n );\n }\n }\n\n #{$self}--intro {\n @include breakpoint(\"medium\") {\n @include font-styles(\"body-small\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"body-small\",\n \"copy\",\n 0,\n 0\n );\n }\n }\n }\n\n .ilo--link-list {\n margin-top: px-to-rem(35px);\n }\n }\n\n &--detail {\n border-bottom: px-to-rem(3px) solid $brand-ilo-grey-light;\n padding: px-to-rem(24px) 0;\n position: relative;\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(32px) 0;\n }\n\n &:hover,\n &:focus {\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))\n drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));\n\n picture::before {\n opacity: 0.4;\n z-index: 2;\n }\n\n #{$self}--event-date {\n &::before {\n @include dataurlicon(\"equilateraltriangle\", $brand-ilo-blue);\n }\n }\n }\n\n picture {\n display: flex;\n position: relative;\n\n &::before {\n background-color: $brand-ilo-blue;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: -1;\n @include globaltransition(\"opacity\");\n }\n }\n\n #{$self}--wrap {\n display: flex;\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n }\n\n #{$self}--image {\n object-fit: contain;\n width: px-to-rem(77px);\n\n @include breakpoint(\"large\") {\n width: px-to-rem(200px);\n }\n\n &--wrapper {\n max-width: px-to-rem(77px);\n width: 100%;\n\n @include breakpoint(\"large\") {\n max-width: px-to-rem(200px);\n }\n }\n }\n\n #{$self}--content {\n padding: 0 px-to-rem(24px);\n }\n\n #{$self}--title {\n @include font-styles(\"headline-6\");\n\n @include breakpoint(\"large\") {\n @include font-styles(\"headline-5\");\n }\n }\n\n #{$self}--event-date {\n @include font-styles(\"body-small\");\n margin-bottom: 0;\n padding-left: px-to-rem(24px);\n position: relative;\n\n &::before {\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: px-to-rem(14px);\n left: 0;\n position: absolute;\n top: 50%;\n transform: rotate(-90deg) translateX(50%);\n width: px-to-rem(12px);\n @include dataurlicon(\"equilateraltriangle\", $brand-ilo-grey-charcoal);\n }\n }\n\n #{$self}--date {\n @include font-styles(\"body-small\");\n }\n }\n\n &--graphic {\n border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;\n margin-top: px-to-rem(40px);\n padding: 0 px-to-rem(24px) px-to-rem(40px);\n position: relative;\n\n &::before {\n background: inherit;\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n content: \"\";\n display: block;\n height: 40px;\n left: 0;\n position: absolute;\n top: -39.7px;\n width: 100%;\n }\n\n .ilo--profile--contents * {\n color: $color-base-neutrals-white;\n }\n\n &:hover,\n &:focus {\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))\n drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));\n\n .ilo--profile--contents * {\n color: $color-base-blue-medium;\n }\n }\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(32px) px-to-rem(40px);\n }\n\n &#{$self}--wide {\n padding: 0 px-to-rem(32px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(32px) px-to-rem(40px);\n }\n }\n\n &#{$self}--standard {\n padding: 0 px-to-rem(32px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(32px) px-to-rem(40px);\n }\n }\n\n &#{$self}--narrow {\n padding: 0 px-to-rem(24px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(24px) px-to-rem(40px);\n }\n\n #{$self}--title {\n @include font-styles(\"headline-6\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-6\",\n \"display\",\n \"base\",\n \"copy\"\n );\n }\n }\n\n &#{$self}--dark {\n border-bottom: px-to-rem(3px) solid $color-base-red-medium;\n }\n\n #{$self}--eyebrow {\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"base\",\n \"copy\",\n \"headline-5\",\n \"display\"\n );\n }\n\n #{$self}--title {\n @include font-styles(\"headline-6\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-6\",\n \"display\",\n \"base\",\n \"copy\"\n );\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-5\",\n \"display\",\n \"base\",\n \"copy\"\n );\n }\n }\n\n #{$self}--date {\n display: block;\n @include textmargin(\"margin-bottom\", 32px, \"base\", \"copy\", 0, 0);\n }\n }\n\n &--graphicpromo {\n max-width: px-to-rem(920px);\n padding: px-to-rem(40px) px-to-rem(24px);\n width: 100%;\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n height: px-to-rem(40px);\n top: px-to-rem(-39.7px);\n }\n\n &:hover,\n &:focus {\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))\n drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));\n }\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(48px);\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n height: px-to-rem(64px);\n top: px-to-rem(-63.7px);\n }\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(64px) px-to-rem(72px);\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n height: px-to-rem(64px);\n top: px-to-rem(-63.7px);\n }\n }\n\n &#{$self}--wide {\n padding: px-to-rem(64px) px-to-rem(72px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(64px) px-to-rem(72px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(64px) px-to-rem(72px);\n }\n }\n\n &#{$self}--standard {\n padding: px-to-rem(48px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);\n }\n }\n\n &#{$self}--narrow {\n padding: px-to-rem(40px) px-to-rem(24px);\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(40px) px-to-rem(24px);\n }\n\n @include breakpoint(\"large\") {\n padding: px-to-rem(40px) px-to-rem(24px);\n }\n\n #{$self}--title {\n @include font-styles(\"headline-4\");\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"headline-4\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-3\");\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"headline-3\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n }\n }\n\n #{$self}--intro {\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 40px, \"body-small\", \"copy\", 0, 0);\n }\n }\n\n &#{$self}--light:not(:hover) #{$self}--title {\n color: $brand-ilo-grey-charcoal;\n @include globaltransition(\"color\");\n }\n\n #{$self}--title {\n @include font-styles(\"headline-4\");\n @include textmargin(\n \"margin-bottom\",\n 24px,\n \"headline-4\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-3\");\n @include textmargin(\n \"margin-bottom\",\n 32px,\n \"headline-3\",\n \"display\",\n \"base\",\n \"copy\"\n );\n }\n }\n\n #{$self}--intro {\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 40px, \"body-small\", \"copy\", 0, 0);\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"base\");\n @include textmargin(\"margin-bottom\", 40px, \"base\", \"copy\", 0, 0);\n }\n }\n }\n\n &--factlist {\n border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;\n max-width: px-to-rem(856px);\n padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);\n pointer-events: none;\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n height: px-to-rem(40px);\n top: px-to-rem(-39.7px);\n }\n\n &#{$self}--dark {\n background: $brand-ilo-dark-blue;\n }\n\n @include breakpoint(\"large\") {\n padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n height: px-to-rem(41px);\n top: px-to-rem(-40.7px);\n }\n }\n\n &#{$self}--wide {\n padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);\n }\n }\n\n &#{$self}--standard {\n padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);\n }\n }\n\n &#{$self}--narrow {\n padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);\n\n @include breakpoint(\"medium\") {\n padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);\n }\n }\n\n &#{$self}--dark {\n border-bottom: px-to-rem(3px) solid $color-base-red-medium;\n\n #{$self}--title {\n color: $brand-ilo-white;\n @include globaltransition(\"color\");\n }\n\n .ilo--list__item {\n color: $brand-ilo-white;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n &:hover,\n &:focus {\n #{$self}--title {\n color: $brand-ilo-white;\n @include globaltransition(\"color\");\n }\n\n .ilo--list__item {\n color: $brand-ilo-white;\n }\n }\n }\n\n #{$self}--title {\n color: $brand-ilo-grey-charcoal;\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 32px,\n \"headline-5\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n\n @include breakpoint(\"large\") {\n @include font-styles(\"headline-4\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-4\",\n \"display\",\n \"base\",\n \"copy\"\n );\n }\n }\n }\n\n &--stat {\n border-bottom: px-to-rem(3px) solid $brand-ilo-purple;\n padding: 0 px-to-rem(24px) px-to-rem(40px) px-to-rem(22px);\n width: 100%;\n\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n height: px-to-rem(40px);\n top: px-to-rem(-39.7px);\n }\n\n &#{$self}--blue {\n background: $brand-ilo-light-blue;\n }\n\n &#{$self}--yellow {\n background: $brand-ilo-yellow;\n }\n\n &#{$self}--green {\n background: $brand-ilo-green;\n }\n\n &#{$self}--turquoise {\n background: $brand-ilo-turquoise;\n }\n\n #{$self}--content {\n display: flex;\n flex-wrap: wrap;\n height: 100%;\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n }\n\n #{$self}--title {\n color: $brand-ilo-dark-blue;\n @include font-styles(\"headline-3\");\n @include textmargin(\"margin-bottom\", 24px, \"headline-3\", \"display\", 0, 0);\n width: 100%;\n }\n\n #{$self}--intro {\n color: $brand-ilo-dark-blue;\n @include font-styles(\"nav-md-sm\");\n @include textmargin(\"margin-bottom\", 35px, \"nav-md-sm\", \"copy\", 0, 0);\n width: 100%;\n }\n\n .ilo--link {\n @include font-styles(\"image-credit\");\n align-self: flex-end;\n }\n\n @include breakpoint(\"large\") {\n &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {\n height: px-to-rem(48px);\n top: px-to-rem(-47.7px);\n }\n }\n }\n\n &--data {\n background: $brand-ilo-light-blue;\n border-bottom: px-to-rem(3px) solid #82afdc;\n max-width: px-to-rem(600px);\n padding: 0 px-to-rem(24px) px-to-rem(56px);\n\n &:hover,\n &:focus {\n background: $brand-ilo-light-blue;\n }\n\n &::before {\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n height: px-to-rem(40px);\n top: px-to-rem(-39.7px);\n }\n\n @include breakpoint(\"large\") {\n &::before {\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n height: px-to-rem(48px);\n top: px-to-rem(-47.7px);\n }\n }\n\n #{$self}--image--wrapper {\n display: none;\n width: max(px-to-rem(205px), 50%);\n }\n\n #{$self}--content {\n #{$self}--image--wrapper {\n display: block;\n }\n }\n\n &--content-label {\n @include font-styles(\"body-xs\");\n @include textmargin(\n \"margin-bottom\",\n 16px,\n \"body-xs\",\n \"copy\",\n \"headline-5\",\n \"display\"\n );\n color: $brand-ilo-grey-accessible;\n }\n\n &--content-copy {\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-5\",\n \"display\",\n \"body-xs\",\n \"copy\"\n );\n color: $brand-ilo-grey-charcoal;\n font-family: $fonts-display;\n font-weight: 500;\n }\n\n &--content-files {\n margin-bottom: px-to-rem(40px);\n }\n\n .ilo--link {\n @include font-styles(\"headline-6\");\n }\n\n &--file {\n margin: px-to-rem(4px) px-to-rem(8px) px-to-rem(4px) 0;\n\n &:last-of-type {\n margin-right: 0;\n }\n }\n }\n\n &--feature {\n border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;\n display: flex;\n margin-top: 0;\n position: relative;\n\n &::before {\n display: none;\n }\n\n &#{$self}--dark {\n border-bottom: px-to-rem(3px) solid $color-base-red-medium;\n\n .ilo--link-list {\n border-top: 2px solid rgba($brand-ilo-grey-light, 0.25);\n\n &--link {\n color: $brand-ilo-white;\n @include dataurlicon(\"arrowright\", $brand-ilo-white);\n }\n }\n\n &:hover,\n &:focus {\n .ilo--link-list {\n &--link {\n color: $brand-ilo-blue;\n @include dataurlicon(\"arrowright\", $brand-ilo-blue);\n }\n }\n }\n }\n\n picture::before {\n @include globaltransition(\"opacity\");\n }\n\n &:hover,\n &:focus {\n background-color: $brand-ilo-white;\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))\n drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));\n border-bottom: px-to-rem(3px) solid $brand-ilo-blue;\n\n picture::before {\n opacity: 0.4;\n z-index: 1;\n @include globaltransition(\"opacity\");\n }\n\n #{$self}--image {\n filter: saturate(0);\n }\n }\n\n .ilo--link-list {\n border-top: px-to-rem(2px) solid $brand-ilo-grey-light;\n margin-left: px-to-rem(-24px);\n margin-right: px-to-rem(-24px);\n margin-top: px-to-rem(34px);\n position: relative;\n z-index: 2;\n\n &--link,\n &--link:hover {\n border-bottom: none;\n padding-left: px-to-rem(24px);\n padding-right: px-to-rem(24px);\n }\n }\n\n &#{$self}--narrow,\n &#{$self}--standard {\n #{$self}--wrap {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n }\n\n #{$self}--content {\n width: 100%;\n }\n\n #{$self}--image--wrapper {\n width: 100%;\n }\n }\n\n &#{$self}--wide {\n @include breakpoint(\"medium\") {\n #{$self}--wrap {\n display: flex;\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n }\n\n #{$self}--content {\n display: flex;\n flex-wrap: wrap;\n width: 50%;\n }\n\n #{$self}--image--wrapper {\n width: 50%;\n }\n\n #{$self}--image {\n object-fit: cover;\n }\n\n #{$self}--date {\n align-self: flex-end;\n }\n\n #{$self}--eyebrow {\n width: 100%;\n }\n\n #{$self}--title {\n width: 100%;\n }\n }\n }\n\n #{$self}--wrap {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n picture {\n display: flex;\n height: 100%;\n position: relative;\n\n &::before {\n background-color: $brand-ilo-blue;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 150ms ease-in-out;\n width: 100%;\n z-index: -1;\n }\n }\n\n #{$self}--content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n padding: px-to-rem(24px) px-to-rem(24px) px-to-rem(40px);\n }\n\n &#{$self}--linklist {\n #{$self}--content {\n padding-bottom: 0;\n }\n }\n\n #{$self}--title {\n @include font-styles(\"headline-5\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-5\",\n \"display\",\n \"body-eyebrow\",\n \"copy\"\n );\n font-family: $fonts-display;\n font-weight: 700;\n }\n\n #{$self}--eyebrow {\n @include font-styles(\"body-eyebrow\");\n @include textmargin(\n \"margin-bottom\",\n 10px,\n \"body-eyebrow\",\n \"copy\",\n \"headline-5\",\n \"display\"\n );\n }\n\n #{$self}--date {\n margin-bottom: 0;\n margin-top: auto;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--cardgroup {\n $card: \".ilo--card\";\n\n &--inner {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n margin: auto;\n row-gap: px-to-rem(32px);\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n\n #{$card} {\n width: 100%;\n }\n }\n\n &--two {\n @include breakpoint(\"large\") {\n #{$card} {\n width: calc(50% - 32px);\n }\n }\n }\n\n &--three {\n @include breakpoint(\"large\") {\n #{$card} {\n width: calc(33.333% - 32px);\n }\n }\n }\n\n &--four {\n @include breakpoint(\"large\") {\n #{$card} {\n width: calc(25% - 32px);\n }\n }\n }\n\n &--button-wrap {\n display: flex;\n justify-content: center;\n margin-top: px-to-rem(64px);\n width: 100%;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n border: none;\n display: grid;\n height: px-to-rem(24px);\n margin: 0;\n order: 1;\n position: relative;\n place-content: center;\n width: px-to-rem(24px);\n transform: none;\n\n &:before {\n content: \"\";\n background-color: $color-base-neutrals-light;\n height: px-to-rem(16px);\n left: px-to-rem(4px);\n position: absolute;\n top: px-to-rem(4px);\n width: px-to-rem(16px);\n z-index: 1;\n }\n\n &:after {\n content: \"\";\n background-color: $color-base-neutrals-light;\n border: px-to-rem(4px) solid $color-base-neutrals-light;\n height: px-to-rem(24px);\n left: 0;\n position: absolute;\n top: 0;\n width: px-to-rem(24px);\n z-index: 0;\n }\n\n &:checked {\n &:before {\n background-color: $color-base-blue-dark;\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n @include dataurlicon(\"checkmark\", $color-base-neutrals-lighter);\n }\n\n &:after {\n background-color: $color-base-blue-dark;\n border-color: $color-base-blue-dark;\n }\n }\n\n &:focus {\n &:after {\n background-color: $color-base-yellow;\n border-color: $color-base-yellow;\n }\n\n &:checked {\n &:after {\n border-color: $color-base-yellow;\n }\n }\n\n outline: none;\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n &:after {\n background-color: $color-base-red-medium;\n }\n\n &:checked {\n &:after {\n border-color: $color-base-blue-dark;\n }\n }\n }\n}\n\n.ilo--fieldset--input--checkbox {\n align-items: center;\n clear: both;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-bottom: px-to-rem(22px);\n\n .ilo--fieldset--label {\n color: $color-base-neutrals-black;\n font-family: $fonts-copy;\n font-size: 14.9px;\n font-weight: 400;\n line-height: 1;\n margin-left: px-to-rem($spacing-padding-1);\n margin-bottom: 0;\n margin-top: 1px;\n order: 2;\n\n .right-to-left & {\n margin-left: 0;\n margin-right: px-to-rem($spacing-padding-1);\n }\n }\n\n .ilo--fieldset--error,\n .ilo--fieldset--helper {\n order: 3;\n width: 100%;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--context-menu {\n border-radius: px-to-rem(2px);\n background-color: $color-ux-background-highlight;\n display: inline-block;\n position: relative;\n width: auto;\n\n &:before {\n background-position: top center;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\"halfsquaretriangle\", $color-ux-background-highlight);\n content: \"\";\n height: px-to-rem($spacing-padding-1-5);\n position: absolute;\n left: 50%;\n top: -#{px-to-rem(6px)};\n transform: translateX(-50%) rotate(135deg);\n width: px-to-rem($spacing-padding-1-5);\n }\n\n &--item {\n padding: 0 px-to-rem($spacing-padding-1);\n\n &:first-of-type {\n border-radius: 2px 2px 0 0;\n }\n\n &:last-of-type {\n border-radius: 0 0 2px 2px;\n\n a {\n border-bottom: none;\n }\n }\n\n &:hover,\n &:focus {\n background-color: $color-base-blue-light;\n }\n\n &.endsection {\n border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;\n\n .ilo--context-menu--link {\n border-bottom: none;\n }\n }\n }\n\n &--link {\n border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-white;\n color: map-get($color, \"link\", \"text\", \"default\");\n display: inline-block;\n font-family: $fonts-copy;\n font-weight: map-get($type, \"weights\", \"section\");\n padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-1);\n text-decoration: none;\n width: 100%;\n @include font-styles(\"body-xxs\");\n letter-spacing: -0.1px;\n\n &:visited {\n color: map-get($color, \"link\", \"text\", \"default\");\n }\n\n &:active {\n color: map-get($color, \"link\", \"text\", \"active\");\n outline: none;\n }\n\n &:hover,\n &:focus {\n color: map-get($color, \"link\", \"text\", \"hover\");\n outline: none;\n text-decoration: underline;\n text-decoration-thickness: px-to-rem($borders-base);\n }\n }\n}\n","@use \"../tokens\" as *;\n@import \"../functions\";\n@import \"../mixins\";\n@import \"../animations\";\n\n.ilo--credit {\n color: #ffffff;\n display: inline-block;\n height: px-to-rem($spacing-ux-credit-height);\n padding: 0;\n position: relative;\n @include font-styles(\"image-credit\");\n\n &--label {\n background-color: $color-ux-credit-background;\n @include boxpadding(\"credit\", \"large\");\n }\n\n &:after {\n background-position: top right;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\"halfsquaretriangle\", $color-ux-credit-background);\n content: \"\";\n height: px-to-rem($spacing-ux-credit-height);\n position: absolute;\n left: 100%;\n top: -#{px-to-rem(map-get($spacing, \"padding-0-5\"))};\n width: px-to-rem($spacing-ux-credit-height);\n }\n\n @include breakpoint(\"large\", true) {\n width: 75%;\n\n &--label {\n bottom: calc(100% + 1px);\n display: none;\n left: 0;\n margin-bottom: px-to-rem(map-get($spacing, \"padding-1-5\"));\n position: absolute;\n\n &:after {\n background-position: top left;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\"equilateraltriangle\", $color-base-neutrals-dark);\n content: \"\";\n height: px-to-rem(map-get($spacing, \"padding-1-5\"));\n position: absolute;\n left: calc(#{px-to-rem(map-get($spacing, \"padding-1-5\"))} / 2);\n bottom: -#{px-to-rem(map-get($spacing, \"padding-1-5\"))};\n width: px-to-rem(map-get($spacing, \"padding-1-5\"));\n }\n }\n\n &:before {\n background-color: $color-base-neutrals-dark;\n background-position: calc(100% - 4px) center;\n background-repeat: no-repeat;\n background-size: px-to-rem(map-get($spacing, \"padding-1-5\"))\n px-to-rem(map-get($spacing, \"padding-1-5\"));\n @include dataurlicon(\"info\", $color-base-neutrals-white);\n content: \"\";\n height: px-to-rem(map-get($spacing, \"padding-3\"));\n position: absolute;\n left: 0;\n top: 0;\n width: px-to-rem(29px);\n }\n\n &:after {\n left: px-to-rem(29px);\n top: 0;\n }\n\n &:hover {\n .ilo--credit--label {\n display: inline-block;\n }\n }\n }\n\n .right-to-left & {\n &:after {\n background-position: top left;\n left: auto;\n right: 100%;\n transform: scaleX(-1);\n }\n\n @include breakpoint(\"large\", true) {\n &--label {\n left: auto;\n right: 0;\n\n &:after {\n background-position: top right;\n @include dataurlicon(\n \"equilateraltriangle\",\n $color-base-neutrals-dark\n );\n left: auto;\n right: calc(#{px-to-rem(map-get($spacing, \"padding-1-5\"))} / 2);\n }\n }\n\n &:before {\n background-position: 4px center;\n left: auto;\n right: 0;\n }\n\n &:after {\n left: auto;\n right: px-to-rem(29px);\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--datepicker {\n &--range {\n display: flex;\n\n & > .ilo--fieldset {\n width: 50%;\n\n &:nth-of-type(1) {\n .ilo--input {\n border-right: none;\n }\n }\n }\n }\n\n .right-to-left & {\n direction: rtl;\n }\n}\n\n.right-to-left\n .ilo--datepicker--range\n > .ilo--fieldset:nth-of-type(1)\n .ilo--input {\n border-left: none;\n border-right: 0.1071811361rem solid rgb(184, 196, 204);\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--dropdown {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"default\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\");\n border-radius: 0;\n box-sizing: content-box;\n font-family: $fonts-copy;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"label-medium\");\n height: px-to-rem(45px);\n @include spacingvalues(\"margin\", \"input\", \"formelements\");\n outline: none;\n overflow: hidden;\n padding-left: 16px;\n padding-right: 56px;\n padding-bottom: 0;\n padding-top: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: calc(100% - 78px);\n\n background-position: calc(100% - 14px) center, 100% center;\n background-repeat: no-repeat;\n background-size: 24px 24px, 102px 100%;\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-ux-labels-actionable)}\"),\n linear-gradient(\n to right,\n transparent 0%,\n transparent calc(50% - 0.81px),\n $color-formelements-input-default-border-left calc(50% - 0.8px),\n $color-formelements-input-default-border-left calc(50% + 0.8px),\n rgba(237, 240, 242, 1) calc(50% + 0.81px),\n rgba(237, 240, 242, 1) 100%\n );\n\n option {\n width: calc(100% - 48px);\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n &:hover {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"hover\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"hover\");\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-ux-labels-hover)}\"),\n linear-gradient(\n to right,\n transparent 0%,\n transparent calc(50% - 0.81px),\n $color-formelements-input-default-border-left calc(50% - 0.8px),\n $color-formelements-input-default-border-left calc(50% + 0.8px),\n transparent calc(50% + 0.81px),\n transparent 100%\n );\n cursor: pointer;\n }\n\n &:focus {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"focus\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"focus\");\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-ux-labels-hover)}\"),\n linear-gradient(\n to right,\n transparent 0%,\n transparent calc(50% - 0.81px),\n $color-formelements-input-default-border-left calc(50% - 0.8px),\n $color-formelements-input-default-border-left calc(50% + 0.8px),\n transparent calc(50% + 0.81px),\n transparent 100%\n );\n }\n\n &:active {\n background-position: calc(100% - 14px) center, 100% center;\n background-repeat: no-repeat;\n background-size: 24px 24px, 102px 100%;\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-ux-labels-actionable)}\"),\n linear-gradient(\n to right,\n transparent 0%,\n transparent calc(50% - 0.81px),\n $color-formelements-input-default-border-left calc(50% - 0.8px),\n $color-formelements-input-default-border-left calc(50% + 0.8px),\n rgba(237, 240, 242, 1) calc(50% + 0.81px),\n rgba(237, 240, 242, 1) 100%\n );\n @include bordervalues(\"input\", \"formelements\");\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"error\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"error\");\n }\n}\n","@use \"../tokens\" as *;\n@import \"../mixins\";\n@import \"../animations\";\n\n.ilo--empty {\n background: linear-gradient(108.07deg, #b8c4cc 0.17%, #ebf5fd 75.36%);\n border-radius: 4px;\n height: 100%;\n position: relative;\n width: 100%;\n\n &:before {\n animation-duration: 2s;\n animation-name: emptygradient;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n background: linear-gradient(108.07deg, #b8c4cc 0.17%, #ebf5fd 75.36%);\n border-radius: 4px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transform: rotate(-180deg);\n width: 100%;\n z-index: 1;\n }\n\n &.storybook {\n height: 400px;\n width: 600px;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--fieldset {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n @include textmargin(\"margin-bottom\", 34px, \"label-medium\", \"display\", 0, 0);\n\n &--label {\n display: inline-flex;\n float: left;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"label-medium\");\n @include textmargin(\"margin-bottom\", 14px, \"label-medium\", \"display\", 0, 0);\n }\n\n &--helper {\n color: $color-base-neutrals-medium;\n font-family: $fonts-copy;\n @include font-styles(\"body-xxs\");\n @include textmargin(\n \"margin-top\",\n map-get($spacing, \"padding-1-5\"),\n \"body-xxs\",\n \"copy\",\n 0,\n 0\n );\n }\n\n &--error {\n color: $color-base-red-dark;\n font-family: $fonts-copy;\n @include font-styles(\"body-xxs\");\n @include textmargin(\n \"margin-top\",\n map-get($spacing, \"padding-1-5\"),\n \"body-xxs\",\n \"copy\",\n 0,\n 0\n );\n }\n\n &.ilo--choice-group {\n .ilo--fieldset--legend {\n display: inline-flex;\n float: left;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"label-medium\");\n margin: 0;\n\n & + .ilo--fieldset--helper,\n & + .ilo--fieldset--error {\n clear: both;\n display: block;\n }\n }\n\n div[class^=\"ilo--fieldset--input\"]:first-of-type,\n div[class*=\" ilo--fieldset--input\"]:first-of-type {\n clear: both;\n padding-top: px-to-rem($spacing-padding-3);\n }\n }\n\n .ilo--tooltip--wrapper {\n margin-left: 8px;\n margin-top: 3px;\n }\n\n .right-to-left & {\n direction: rtl;\n\n .ilo--fieldset--label {\n float: right;\n }\n\n &.ilo--choice-group .ilo--fieldset--legend {\n float: right;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--file-upload {\n color: transparent;\n order: 3;\n\n &::-webkit-file-upload-button {\n visibility: hidden;\n }\n\n &:before {\n background-color: map-get($color, \"ux\", \"background\", \"default\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"default\") solid;\n color: map-get($color, \"ux\", \"labels\", \"actionable\");\n content: attr(data-label);\n display: inline-block;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n padding: 0;\n @include borderradius(\"button\");\n @include boxpadding(\"button\", \"medium\");\n @include font-styles(\"label-medium\");\n }\n\n &:hover {\n &:before {\n background-color: map-get($color, \"ux\", \"background\", \"hover\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"hover\") solid;\n cursor: pointer;\n color: map-get($color, \"ux\", \"labels\", \"hover\");\n outline: none;\n }\n }\n\n &:focus {\n &:before {\n background-color: map-get($color, \"ux\", \"background\", \"focus\");\n border: map-get($borders, \"small\")\n map-get($color, \"ux\", \"borders\", \"hover\") solid;\n color: map-get($color, \"ux\", \"labels\", \"focus\");\n outline: none;\n }\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:active {\n &:before {\n background-color: map-get($color, \"ux\", \"background\", \"active\");\n border: map-get($borders, \"base\")\n map-get($color, \"ux\", \"borders\", \"active\") solid;\n color: map-get($color, \"ux\", \"labels\", \"active\");\n }\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n &:before {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"error\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"error\");\n }\n }\n\n &--list {\n order: 4;\n }\n\n &--list-item {\n background-color: $color-formelements-uploadedfile-default-background;\n @include bordervalues(\"uploadedfile\", \"formelements\", \"default\");\n box-sizing: border-box;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"label-medium\");\n height: px-to-rem(\n map-get($spacing, \"formelements\", \"uploadedfile\", \"default\", \"height\")\n );\n @include spacingvalues(\"margin\", \"uploadedfile\", \"formelements\");\n outline: none;\n @include spacingvalues(\"padding\", \"uploadedfile\", \"formelements\");\n width: map-get(\n $spacing,\n \"formelements\",\n \"uploadedfile\",\n \"default\",\n \"width\"\n );\n }\n}\n\n.file-upload div {\n display: flex;\n flex-direction: column;\n\n .ilo--fieldset--label {\n order: 1;\n }\n\n .ilo--fieldset--helper,\n .ilo--fieldset--error {\n margin-top: 0;\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"label-small\",\n \"display\",\n 0,\n 0\n );\n order: 2;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--formgroup {\n &--legend {\n display: block;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"legend\");\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-5\"),\n \"legend\",\n \"display\",\n \"label-small\",\n \"display\"\n );\n }\n\n .right-to-left & {\n direction: rtl;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--form {\n .right-to-left & {\n direction: rtl;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../animations\";\n@import \"../mixins\";\n\n.ilo--footer {\n border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;\n\n &--main {\n background-color: $color-base-blue-dark;\n border-bottom: px-to-rem(6px) solid $color-base-red-medium;\n padding: px-to-rem(40px) px-to-rem(32px) 0 px-to-rem(32px);\n position: relative;\n\n & > * {\n position: relative;\n z-index: 1;\n }\n\n &:after {\n background-size: contain;\n background-repeat: no-repeat;\n bottom: 0;\n content: \"\";\n height: 100%;\n min-width: 409.5px;\n right: 0;\n position: absolute;\n transform: scaleY(-1);\n width: 28.8%;\n z-index: 0;\n @include dataurlicon(\"footertriangle\", $color-base-blue-medium);\n }\n }\n\n &--logo {\n height: px-to-rem(48px);\n width: auto;\n }\n\n &--secondary {\n background-color: $color-base-neutrals-white;\n padding: px-to-rem(36px) px-to-rem(16px) 0 px-to-rem(16px);\n min-height: px-to-rem(\n map-get($spacing, \"ux\", \"readmore\", \"default\", \"height\")\n );\n }\n\n &--headline {\n color: $color-base-neutrals-white;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"body-small\");\n line-height: px-to-rem(21.6px);\n @include textmargin(\n \"margin-bottom\",\n 10px,\n \"body-small\",\n \"display\",\n \"body-xxs\",\n \"display\"\n );\n @include textmargin(\"margin-top\", 22px, \"body-small\", \"display\", 0, 0);\n }\n\n &--subhead {\n color: #bedcfa;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"section\");\n margin-top: px-to-rem(10px);\n @include font-styles(\"body-xxs\");\n line-height: px-to-rem(18.56px);\n @include textmargin(\"margin-bottom\", 28px, \"body-xxs\", \"display\", 0, 0);\n }\n\n .address {\n margin-bottom: px-to-rem(42px);\n }\n\n .address--line {\n color: $color-base-neutrals-white;\n @include font-styles(\"body-xxs\");\n @include textmargin(\n \"margin-bottom\",\n 8px,\n \"body-xxs\",\n \"display\",\n \"body-xxs\",\n \"display\"\n );\n }\n\n .connect {\n margin: px-to-rem(55px) 0;\n }\n\n .social--headline {\n color: $color-base-neutrals-white;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"body-small\");\n @include textmargin(\"margin-bottom\", 28px, \"body-small\", \"display\", 0, 0);\n }\n\n .social--links {\n display: flex;\n margin-bottom: px-to-rem(45px);\n }\n\n .social--links--link {\n background-repeat: no-repeat;\n background-size: contain;\n border: 0;\n display: inline-block;\n height: px-to-rem(16px);\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n text-indent: -999rem;\n width: px-to-rem(16px);\n\n &.facebook {\n @include dataurlicon(\"facebook\", $color-base-neutrals-lighter);\n }\n\n &.instagram {\n @include dataurlicon(\"instagram\", $color-base-neutrals-lighter);\n }\n\n &.twitter {\n @include dataurlicon(\"twitter\", $color-base-neutrals-lighter);\n }\n\n &.youtube {\n @include dataurlicon(\"youtube\", $color-base-neutrals-lighter);\n }\n }\n\n .social--links--item {\n align-items: center;\n background-color: transparent;\n border-radius: px-to-rem(3px);\n display: flex;\n height: px-to-rem(24px);\n justify-content: center;\n margin-right: px-to-rem(20px);\n position: relative;\n width: px-to-rem(24px);\n\n &:last-of-type {\n margin-right: none;\n }\n\n &:hover,\n &:focus {\n background-color: $color-base-blue-light;\n\n .social--links--link {\n &.facebook {\n @include dataurlicon(\"facebook\", $color-base-blue-medium);\n }\n\n &.instagram {\n @include dataurlicon(\"instagram\", $color-base-blue-medium);\n }\n\n &.twitter {\n @include dataurlicon(\"twitter\", $color-base-blue-medium);\n }\n\n &.youtube {\n @include dataurlicon(\"youtube\", $color-base-blue-medium);\n }\n }\n }\n }\n\n .legal,\n .secondarylinks {\n color: $color-base-neutrals-medium;\n display: inline;\n font-family: $fonts-copy;\n @include font-styles(\"body-xxs\");\n }\n\n .secondarylinks--list,\n .secondarylinks--list--item {\n display: inline;\n list-style: none;\n }\n\n .secondarylinks--list--item:not(first-child) {\n &:before {\n content: \" | \";\n }\n }\n\n .secondarylinks--list--item a {\n color: $color-base-neutrals-medium;\n @include globaltransition(\"color, border-color\");\n\n &:visited {\n color: map-get($color, \"link\", \"text-footer\", \"visited\");\n @include globaltransition(\"color, border-color\");\n }\n\n &:hover {\n color: map-get($color, \"link\", \"text-footer\", \"hover\");\n @include globaltransition(\"color, border-color\");\n }\n\n &:active {\n color: map-get($color, \"link\", \"text-footer\", \"active\");\n outline: none;\n @include globaltransition(\"color, border-color\");\n }\n\n &:focus {\n color: map-get($color, \"link\", \"text-footer\", \"focus\");\n outline: none;\n @include globaltransition(\"color, border-color\");\n }\n }\n\n .anchorlink {\n background: map-get($color, \"ux\", \"readmore\", \"default\", \"background\");\n border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;\n color: $color-ux-labels-actionable;\n display: block;\n font-family: $fonts-display;\n height: px-to-rem(map-get($spacing, \"ux\", \"readmore\", \"default\", \"height\"));\n margin: px-to-rem(12px) auto 0 auto;\n padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-4)\n px-to-rem($spacing-padding-2) 0;\n position: relative;\n text-align: left;\n text-decoration: none;\n @include font-styles(\"label-medium\");\n width: max-content;\n\n &:after {\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: px-to-rem(24px);\n position: absolute;\n right: px-to-rem(2px);\n top: 50%;\n transform: translateY(-50%) rotateX(180deg);\n transform-origin: center center;\n width: px-to-rem(24px);\n @include dataurlicon(\"arrow\", $color-ux-labels-actionable);\n }\n\n &:hover {\n background: map-get($color, \"ux\", \"readmore\", \"hover\", \"background\");\n border-bottom: 0.1071811361rem solid $color-base-blue-medium;\n color: $color-ux-labels-hover;\n cursor: pointer;\n @include globaltransition(\"color, background-color, border-color\");\n\n &:after {\n @include dataurlicon(\"arrow\", $color-ux-labels-hover);\n }\n }\n }\n\n @include breakpoint(\"medium\") {\n &--main {\n display: grid;\n grid-template-columns: minmax(0, 50%) minmax(0, 50%);\n gap: 0px 64px;\n grid-template-areas:\n \"site-info address\"\n \"site-info links\"\n \"site-info connect\";\n align-content: start;\n align-items: start;\n padding: px-to-rem(40px) px-to-rem(32px) px-to-rem(40px) px-to-rem(32px);\n }\n\n .site--info {\n grid-area: site-info;\n }\n\n .address {\n grid-area: address;\n }\n\n .connect {\n grid-area: connect;\n margin-bottom: 0;\n }\n\n .links {\n grid-area: links;\n }\n\n &--secondary {\n padding: px-to-rem(18px) px-to-rem(16px);\n position: relative;\n }\n\n .legal,\n .secondarylinks {\n display: block;\n float: left;\n }\n\n .secondarylinks {\n margin-right: px-to-rem(126px);\n }\n\n .anchorlink {\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 16px;\n top: 0;\n }\n }\n\n @include breakpoint(\"large\") {\n &--main {\n display: grid;\n grid-template-columns: 19.2% 25.1% calc(32.5% + 64px);\n grid-template-rows: 0.6fr 1.4fr;\n gap: 0px 64px;\n grid-template-areas:\n \"site-info address connect\"\n \"site-info links connect\";\n padding: px-to-rem(56px) px-to-rem(70px) px-to-rem(64px) px-to-rem(70px);\n\n &:after {\n background-position: right top;\n bottom: auto;\n top: 0;\n transform: scaleY(1);\n }\n }\n\n .connect {\n display: grid;\n grid-template-columns: minmax(0, 40%), 60%;\n grid-template-rows: repeat(3, minmax(0, 1fr));\n grid-area: connect;\n margin: 0 0 0 calc(18.9% + 64px);\n }\n\n .social--headline {\n text-align: left;\n }\n\n .ilo--button {\n align-self: start;\n justify-self: start;\n }\n\n &--secondary {\n padding: px-to-rem(18px) px-to-rem(70px);\n position: relative;\n }\n\n .secondarylinks {\n margin-right: px-to-rem(140px);\n }\n\n .anchorlink {\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 70px;\n top: 0;\n }\n }\n\n .right-to-left & {\n * {\n text-align: right;\n }\n\n .social--links {\n flex-direction: row-reverse;\n }\n\n .social--links--item:first-of-type {\n margin-right: 0;\n }\n\n .social--links--link {\n text-indent: 999em;\n }\n\n .legal,\n .secondarylinks {\n display: block;\n }\n\n .secondarylinks {\n &--list {\n display: flex;\n flex-direction: row-reverse;\n }\n }\n\n .secondarylinks--list--item:not(first-child) {\n &:before {\n content: none;\n }\n\n &:after {\n content: \" | \";\n padding-right: px-to-rem(2px);\n }\n }\n\n &--main {\n &:after {\n bottom: 0;\n left: 0;\n right: auto;\n top: auto;\n transform: scale(-1, -1);\n }\n }\n\n @include breakpoint(\"medium\") {\n &--main {\n grid-template-areas:\n \"address site-info\"\n \"links site-info\"\n \"connect site-info\";\n }\n\n .legal,\n .secondarylinks {\n float: right;\n }\n\n .secondarylinks {\n margin-left: px-to-rem(126px);\n margin-right: px-to-rem(4px);\n\n &--list {\n display: flex;\n flex-direction: row-reverse;\n }\n }\n\n .anchorlink {\n left: 16px;\n right: auto;\n }\n }\n\n @include breakpoint(\"large\") {\n &--main {\n grid-template-columns: calc(32.5% + 64px) 25.1% 19.2%;\n grid-template-areas:\n \"connect address site-info\"\n \"connect links site-info\";\n\n &:after {\n left: 0;\n right: auto;\n transform: scale(-1, 1);\n }\n }\n\n .connect {\n grid-template-columns: 60%, minmax(0, 40%);\n margin: 0 calc(18.9% + 64px) 0 0;\n }\n\n .ilo--button {\n justify-self: end;\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--h1,\n.ilo--h2,\n.ilo--h3,\n.ilo--h4,\n.ilo--h5,\n.ilo--h6 {\n color: inherit;\n font-family: $fonts-display;\n font-weight: 700;\n\n &--default {\n color: $color-font-base;\n }\n\n &--actionable {\n color: $color-base-purple-medium;\n }\n\n &--light {\n color: $color-base-neutrals-white;\n }\n}\n\n.ilo--h1 {\n @include font-styles(\"headline-2\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-1\");\n }\n}\n\n.ilo--h2 {\n @include font-styles(\"headline-3\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-2\");\n }\n}\n\n.ilo--h3 {\n @include font-styles(\"headline-4\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-3\");\n }\n}\n\n.ilo--h4 {\n @include font-styles(\"headline-5\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-4\");\n }\n}\n\n.ilo--h5 {\n @include font-styles(\"headline-6\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-5\");\n }\n}\n\n.ilo--h6 {\n @include font-styles(\"headline-6\");\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"headline-6\");\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--hero {\n background: map-get($color, \"ux\", \"pagination\", \"default\", \"background\");\n display: block;\n position: relative;\n width: 100%;\n\n &--home {\n .ilo--image {\n &::before {\n background: linear-gradient(\n 360deg,\n rgba($brand-ilo-black, 0.3) 0%,\n rgba($brand-ilo-black, 0) 24.88%\n ),\n transparent;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 2;\n }\n }\n\n @include breakpoint(\"large\") {\n position: relative;\n }\n }\n\n &--portal {\n position: relative;\n\n @include breakpoint(\"large\") {\n margin-bottom: 80px;\n padding-top: 170px;\n\n .ilo--image {\n height: calc(100% - 80px);\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n .ilo--image--wrapper {\n height: 100%;\n }\n\n .ilo--image--img {\n display: flex;\n height: 100%;\n object-fit: cover;\n width: 100%;\n\n img {\n object-fit: cover;\n height: auto;\n width: 100%;\n }\n }\n\n .ilo--hero-card {\n top: 80px;\n }\n }\n }\n\n &--article {\n background: map-get($color, \"hero\", \"article\");\n padding: 88px 0 0 0;\n\n @include breakpoint(\"large\") {\n margin-bottom: 80px;\n padding: 112px 0 0 0;\n\n .ilo--hero-card {\n top: 80px;\n }\n }\n\n &.ilo--hero--image {\n background-color: map-get($color, \"hero\", \"image\");\n padding: 0;\n\n @include breakpoint(\"large\") {\n .ilo--hero-card {\n top: 0;\n }\n }\n }\n\n .ilo--hero-card {\n &--center {\n margin: auto;\n }\n }\n }\n\n &--project {\n background: map-get($color, \"hero\", \"project\");\n padding: 88px 0 0 0;\n\n @include breakpoint(\"large\") {\n margin-bottom: 80px;\n padding: 112px 0 0 0;\n\n .ilo--hero-card {\n top: 80px;\n }\n }\n\n &.ilo--hero--image {\n background-color: map-get($color, \"hero\", \"image\");\n padding: 0;\n\n @include breakpoint(\"large\") {\n .ilo--hero-card {\n top: 0;\n }\n }\n }\n\n .ilo--hero-card {\n &--center {\n margin: auto;\n }\n }\n }\n\n &--image {\n background-color: map-get($color, \"hero\", \"image\");\n\n @include breakpoint(\"large\") {\n .ilo--image {\n height: 100%;\n max-height: 592px;\n overflow: hidden;\n width: 100%;\n }\n\n .ilo--image--wrapper {\n height: 100%;\n }\n\n .ilo--image--img {\n display: flex;\n height: 100%;\n object-fit: cover;\n width: 100%;\n\n img {\n object-fit: cover;\n height: auto;\n width: 100%;\n }\n }\n }\n }\n\n .ilo--breadcrumb {\n left: 0;\n max-width: 560px;\n position: absolute;\n top: 0;\n width: 100%;\n\n .right-to-left & {\n left: auto;\n right: 0;\n }\n }\n}\n\n.ilo--hero-card {\n background: map-get($color, \"hero\", \"card\", \"light\", \"background\");\n color: map-get($color, \"hero\", \"card\", \"light\", \"color\");\n max-width: 998px;\n position: relative;\n padding: 16px 16px 40px 16px;\n\n &::before {\n background: inherit;\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n content: \"\";\n display: block;\n height: 40px;\n left: 0;\n position: absolute;\n top: -39.7px;\n width: 100%;\n\n .right-to-left & {\n clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);\n left: auto;\n right: 0;\n }\n\n @include breakpoint(\"large\") {\n height: 56px;\n top: -55.7px;\n }\n }\n\n @include breakpoint(\"large\") {\n padding: 0 70px 70px 56px;\n\n &.ilo--hero-card--graphic {\n padding: 0 70px 44px 56px;\n }\n }\n\n .right-to-left & {\n direction: rtl;\n }\n\n &--center {\n margin: auto;\n }\n\n &--dark {\n background: map-get($color, \"hero\", \"card\", \"dark\", \"background\");\n border-bottom: 3px solid $color-base-red-medium;\n color: map-get($color, \"hero\", \"card\", \"dark\", \"color\");\n\n .ilo--hero-card--link.icon {\n color: map-get($color, \"hero\", \"card\", \"dark\", \"icon\", \"color\");\n\n &:hover {\n background-color: map-get(\n $color,\n \"hero\",\n \"card\",\n \"dark\",\n \"iconhover\",\n \"background\"\n );\n }\n\n &--facebook {\n @include dataurlicon(\n \"facebook\",\n map-get($color, \"hero\", \"card\", \"dark\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"facebook\",\n map-get($color, \"hero\", \"card\", \"dark\", \"iconhover\", \"color\")\n );\n }\n }\n\n &--twitter {\n @include dataurlicon(\n \"twitter\",\n map-get($color, \"hero\", \"card\", \"dark\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"twitter\",\n map-get($color, \"hero\", \"card\", \"dark\", \"iconhover\", \"color\")\n );\n }\n }\n\n &--linkedin {\n @include dataurlicon(\n \"linkedin\",\n map-get($color, \"hero\", \"card\", \"dark\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"linkedin\",\n map-get($color, \"hero\", \"card\", \"dark\", \"iconhover\", \"color\")\n );\n }\n }\n }\n\n .ilo--hero-card--eyebrow {\n color: map-get($color, \"hero\", \"card\", \"dark\", \"eyebrow\", \"color\");\n }\n\n .ilo--hero-card--datecopy {\n color: map-get($color, \"hero\", \"card\", \"dark\", \"datecopy\", \"color\");\n }\n }\n\n &--graphic {\n max-width: 856px;\n }\n\n &--home {\n border: none;\n padding: 24px;\n\n &::before {\n display: none;\n }\n\n @include breakpoint(\"large\") {\n bottom: 72px;\n max-width: 720px;\n padding: 0 48px 48px 72px;\n position: absolute;\n width: 100%;\n\n &::before {\n background: inherit;\n clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);\n content: \"\";\n display: block;\n height: 59px;\n left: 0;\n position: absolute;\n top: -58.7px;\n width: 100%;\n\n .right-to-left & {\n clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);\n left: auto;\n right: 0;\n }\n }\n\n &.ilo--hero-card--center {\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n }\n\n &.ilo--hero-card--left {\n left: 0;\n right: auto;\n }\n\n &.ilo--hero-card--right {\n left: auto;\n right: 0;\n }\n }\n\n &.ilo--hero-card--dark {\n @include breakpoint(\"large\") {\n background: rgba(\n map-get($color, \"hero\", \"card\", \"dark\", \"background\"),\n 0.55\n );\n }\n }\n }\n\n &--portal {\n background: map-get($color, \"hero\", \"portal\", \"background\");\n color: map-get($color, \"hero\", \"portal\", \"color\");\n padding: 24px;\n\n @include breakpoint(\"large\") {\n max-width: 625px;\n padding: 0 48px 48px 72px;\n width: 100%;\n }\n }\n\n &--publication {\n padding: 24px;\n\n @include breakpoint(\"large\") {\n margin-top: -64px;\n max-width: 720px;\n padding: 0 48px 48px 72px;\n width: 100%;\n }\n }\n\n &--datecopy {\n @include font-styles(\"body-small\");\n margin-bottom: px-to-rem(28px);\n\n color: map-get($color, \"hero\", \"card\", \"light\", \"datecopy\", \"color\");\n }\n\n &--eyebrow {\n @include font-styles(\"body-small\");\n margin-bottom: px-to-rem(16px);\n\n color: map-get($color, \"hero\", \"card\", \"light\", \"eyebrow\", \"color\");\n }\n\n &--intro {\n @include font-styles(\"body-small\");\n margin-bottom: px-to-rem(28px);\n\n @include breakpoint(\"large\") {\n @include font-styles(\"base\");\n }\n }\n\n &--title {\n @include font-styles(\"headline-3\");\n @include textmargin(\n \"margin-bottom\",\n 40px,\n \"headline-2\",\n \"display\",\n \"base\",\n \"copy\"\n );\n\n font-family: $fonts-display;\n font-weight: 700;\n\n @include breakpoint(\"large\") {\n @include font-styles(\"headline-2\");\n }\n }\n\n &--list {\n display: flex;\n }\n\n &--list--item {\n display: inline-block;\n margin-right: 32px;\n\n &:last-of-type {\n margin-right: 0;\n }\n }\n\n &--link {\n color: map-get($color, \"hero\", \"card\", \"light\", \"link\", \"color\");\n display: inline-block;\n overflow: hidden;\n padding: 0 5px;\n text-indent: -999px;\n width: 100%;\n\n &.icon {\n background-position: center;\n background-repeat: no-repeat;\n background-size: auto 16px;\n border-radius: 2px;\n display: inline-block;\n color: map-get($color, \"hero\", \"card\", \"light\", \"icon\", \"color\");\n height: 24px;\n width: px-to-rem(24px);\n\n &:hover {\n background-color: map-get(\n $color,\n \"hero\",\n \"card\",\n \"light\",\n \"iconhover\",\n \"background\"\n );\n transition: all 0.1s ease-in-out;\n }\n\n &--facebook {\n @include dataurlicon(\n \"facebook\",\n map-get($color, \"hero\", \"card\", \"light\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"facebook\",\n map-get($color, \"hero\", \"card\", \"light\", \"iconhover\", \"color\")\n );\n }\n }\n\n &--twitter {\n @include dataurlicon(\n \"twitter\",\n map-get($color, \"hero\", \"card\", \"light\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"twitter\",\n map-get($color, \"hero\", \"card\", \"light\", \"iconhover\", \"color\")\n );\n }\n }\n\n &--linkedin {\n @include dataurlicon(\n \"linkedin\",\n map-get($color, \"hero\", \"card\", \"light\", \"icon\", \"color\")\n );\n\n &:hover {\n @include dataurlicon(\n \"linkedin\",\n map-get($color, \"hero\", \"card\", \"light\", \"iconhover\", \"color\")\n );\n }\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--image {\n position: relative;\n\n &--wrapper {\n line-height: 0;\n position: relative;\n width: 100%;\n }\n\n &--img {\n line-height: 0;\n }\n\n &--img,\n img {\n width: 100%;\n }\n\n &--caption {\n border-left: $spacing-ux-caption-border-left solid\n $color-ux-caption-border-left;\n color: $color-font-caption;\n font-weight: 400;\n margin-top: px-to-rem(map-get($spacing, \"padding-2\"));\n padding-left: px-to-rem(map-get($spacing, \"padding-1\"));\n @include font-styles(\"image-caption\");\n }\n\n .ilo--credit {\n bottom: 0;\n left: 0;\n position: absolute;\n\n @include breakpoint(\"large\") {\n bottom: -#{px-to-rem(map-get($spacing, \"padding-0-5\"))};\n }\n }\n\n .right-to-left & {\n .ilo--image--caption {\n border-left: none;\n border-right: 3px solid #b8c4cc;\n padding-left: 0;\n padding-right: px-to-rem(map-get($spacing, \"padding-1\"));\n }\n\n .ilo--credit {\n left: auto;\n right: 0;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"default\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\");\n box-sizing: border-box;\n font-family: $fonts-copy;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"label-medium\");\n height: px-to-rem(\n map-get($spacing, \"formelements\", \"input\", \"default\", \"height\")\n );\n @include spacingvalues(\"margin\", \"input\", \"formelements\");\n outline: none;\n @include spacingvalues(\"padding\", \"input\", \"formelements\");\n width: map-get($spacing, \"formelements\", \"input\", \"default\", \"width\");\n\n &:focus {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"focus\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"focus\");\n padding-left: calc($spacing-formelements-input-default-padding-left - 1px);\n outline: none;\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"error\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"error\");\n }\n}\n","@use \"../tokens\" as *;\n@use \"../mixins\" as *;\n\n.ilo--link {\n @include linkstyles();\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../animations\";\n@import \"../mixins\";\n\n.ilo--link-list {\n &--headline {\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"headline-5\");\n @include textmargin(\"margin-bottom\", 30px, \"headline-5\", \"display\", 0, 0);\n }\n\n &--links {\n &--headline {\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n @include font-styles(\"headline-6\");\n @include textmargin(\"margin-bottom\", 27px, \"headline-6\", \"display\", 0, 0);\n @include textmargin(\n \"margin-top\",\n $spacing-padding-6,\n \"headline-6\",\n \"display\",\n 0,\n 0\n );\n }\n }\n\n &--links--item {\n &.indented {\n padding-left: px-to-rem($spacing-padding-4);\n\n .ilo--link-list--label {\n display: block;\n padding-left: px-to-rem($spacing-padding-3);\n position: relative;\n\n &:before {\n background-position: left center;\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-1-5);\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n transform-origin: center;\n width: px-to-rem($spacing-padding-1-5);\n @include dataurlicon(\n \"equilateraltriangle\",\n $color-base-neutrals-light\n );\n }\n }\n\n &:hover,\n &:focus {\n .ilo--link-list--label:before {\n @include dataurlicon(\"equilateraltriangle\", $color-link-text-hover);\n }\n }\n }\n }\n\n &--link {\n background-position: calc(100% - $spacing-padding-0-5) center;\n background-repeat: no-repeat;\n background-size: px-to-rem($spacing-padding-3) px-to-rem($spacing-padding-3);\n border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;\n color: map-get($color, \"link\", \"text\", \"default\");\n display: block;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"body-small\");\n @include textmargin(\"padding-bottom\", 25px, \"body-small\", \"display\", 0, 0);\n @include textmargin(\"padding-top\", 25px, \"body-small\", \"display\", 0, 0);\n padding-right: px-to-rem($spacing-padding-4);\n text-decoration: none;\n @include dataurlicon(\"arrowright\", $color-link-text-default);\n @include globaltransition(\"color, background-color, border-color\");\n\n &:visited {\n color: map-get($color, \"link\", \"text\", \"default\");\n @include globaltransition(\"color\");\n }\n\n &:active {\n color: map-get($color, \"link\", \"text\", \"active\");\n outline: none;\n @include globaltransition(\"color\");\n }\n\n &:hover,\n &:focus {\n border-bottom: px-to-rem($borders-base) solid\n map-get($color, \"link\", \"text\", \"hover\");\n background-color: $color-base-blue-light;\n color: map-get($color, \"link\", \"text\", \"hover\");\n outline: none;\n @include dataurlicon(\"arrowright\", $color-link-text-hover);\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n .right-to-left & {\n background-position: $spacing-padding-0-5 center;\n @include dataurlicon(\"arrowleft\", $color-link-text-default);\n\n &:hover,\n &:focus {\n @include dataurlicon(\"arrowleft\", $color-link-text-hover);\n }\n }\n }\n\n &--dark {\n .ilo--link-list--headline,\n .ilo--link-list--links--headline {\n color: $color-base-neutrals-white;\n }\n\n .ilo--link-list--label {\n &:before {\n @include dataurlicon(\"equilateraltriangle\", $color-base-neutrals-white);\n }\n }\n\n .ilo--link-list--link {\n border-bottom: px-to-rem($borders-base) solid rgba(237, 240, 242, 0.4);\n @include dataurlicon(\"arrowright\", $color-base-neutrals-white);\n\n .ilo--link-list--label {\n color: $color-base-neutrals-white;\n }\n\n &:visited {\n .ilo--link-list--label {\n color: $color-base-neutrals-white;\n @include globaltransition(\"color\");\n }\n }\n\n &:active {\n outline: none;\n\n .ilo--link-list--label {\n color: map-get($color, \"link\", \"text\", \"active\");\n @include globaltransition(\"color\");\n }\n }\n\n &:hover,\n &:focus {\n outline: none;\n @include dataurlicon(\"arrowright\", $color-base-blue-medium);\n\n .ilo--link-list--label {\n color: $color-base-blue-medium;\n @include globaltransition(\"color\");\n }\n }\n\n .right-to-left & {\n background-position: $spacing-padding-0-5 center;\n @include dataurlicon(\"arrowleft\", $color-base-neutrals-white);\n\n &:hover,\n &:focus {\n @include dataurlicon(\"arrowleft\", $color-base-blue-medium);\n }\n }\n }\n }\n\n .right-to-left & {\n * {\n text-align: right;\n }\n }\n}\n\n.wingsuit-body .ilo--link-list--dark {\n background-color: $color-base-blue-dark;\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--list {\n &--ordered {\n list-style: decimal;\n }\n\n &--unordered {\n list-style: initial;\n list-style-type: none;\n\n li {\n &::before {\n content: \"\";\n display: inline-block;\n height: px-to-rem(14px);\n left: px-to-rem(-12px);\n position: absolute;\n top: 6px;\n width: px-to-rem(12px);\n @include dataurlicon(\"listarrow\", $color-base-neutrals-light);\n }\n margin-bottom: px-to-rem(map-get($spacing, \"padding-4\"));\n margin-left: px-to-rem(12px);\n padding-left: px-to-rem(12px);\n position: relative;\n }\n }\n\n &--unstyled {\n list-style: none;\n\n .ilo--list__item {\n margin-left: 0;\n padding-left: 0;\n }\n }\n\n &--horizontal {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n\n .ilo--list__title {\n margin-bottom: px-to-rem(map-get($spacing, \"base\"));\n margin-right: px-to-rem(map-get($spacing, \"ui-padding-xxl\") - 3px);\n }\n\n .ilo--list__item {\n margin-bottom: px-to-rem(map-get($spacing, \"base\"));\n margin-left: 0;\n margin-right: px-to-rem(map-get($spacing, \"ui-padding-xxl\") - 3px);\n padding-left: 0;\n }\n }\n\n &__title {\n @include font-styles(\"headline-5\");\n\n font-family: $fonts-display;\n font-weight: 700;\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"ui-padding-xxl\"),\n \"headline-5\",\n \"display\",\n \"base\",\n \"copy\"\n );\n }\n\n &__item {\n @include font-styles(\"body-small\");\n\n font-family: $fonts-copy;\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"ui-padding-lg\"),\n \"body-small\",\n \"copy\",\n 0,\n 0\n );\n margin-left: px-to-rem(map-get($spacing, \"ui-padding-lg\"));\n padding-left: px-to-rem(map-get($spacing, \"base\") - 5px);\n\n b,\n strong {\n font-weight: 700;\n letter-spacing: $type-label-small-letter-spacing;\n }\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"base\");\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"ui-padding-lg\"),\n \"base\",\n \"copy\",\n 0,\n 0\n );\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n@import \"../animations\";\n\n.ilo--loading {\n align-items: center;\n display: flex;\n justify-content: center;\n position: relative;\n\n &--large {\n .ilo--loading--copy {\n @include isVisuallyHidden();\n }\n\n &.ilo--loading--loading {\n &:before {\n animation: spin 1.5s linear infinite;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 107.7 107.7'%3E%3Ccircle cx='53.8' cy='53.7' r='53.9' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M101.8 53.7c0-10.8-3.6-21.2-10.3-29.7-6.7-8.5-16-14.4-26.5-17s-21.5-1.4-31.3 3.1C23.9 14.7 16 22.4 11.1 32c-4.9 9.6-6.4 20.6-4.3 31.2 2.1 10.6 7.7 20.1 15.9 27.1s18.5 11 29.3 11.5c10.8.4 21.4-2.8 30.1-9.1l-4.7-6.4c-7.3 5.3-16.1 8-25.1 7.6-9-.4-17.6-3.7-24.5-9.6-6.8-5.9-11.5-13.9-13.3-22.7-1.8-8.8-.5-18 3.6-26S28.9 21.2 37 17.4c8.2-3.8 17.4-4.7 26.1-2.6 8.8 2.1 16.5 7.1 22.1 14.2s8.6 15.8 8.6 24.8h8z'/%3E%3Cpath fill='%231e2dbe' d='m97.8 74.9 9.5-17.2h-19l9.5 17.2z'/%3E%3C/svg%3E\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: px-to-rem(107.5px);\n width: px-to-rem(107.5px);\n }\n }\n\n &.ilo--loading--loaded {\n &:before {\n background-image: url(\"data:image/svg+xml,%3Csvg width='97' height='96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.237 48c0-26.51 21.49-48 48-48s48 21.49 48 48-21.49 48-48 48-48-21.49-48-48Z' fill='%23EDF0F2'/%3E%3Cpath d='M20.237 48c0-15.464 12.536-28 28-28 15.463 0 28 12.536 28 28s-12.536 28-28 28-28-12.536-28-28Z' fill='%231E2DBE'/%3E%3Cpath d='m44.037 50.8-5.6-5.6-4.2 4.2 9.8 9.8 18.2-18.2-4.2-4.2-14 14Z' fill='%23fff'/%3E%3C/svg%3E\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-12);\n width: px-to-rem($spacing-padding-12);\n }\n }\n }\n\n &--small {\n .ilo--loading--copy {\n color: $color-ux-labels-default;\n font-family: $fonts-copy;\n font-weight: 400;\n @include font-styles(\"label-small\");\n }\n\n &.ilo--loading--idle {\n .ilo--loading--copy {\n @include isVisuallyHidden();\n }\n }\n\n &.ilo--loading--loading {\n &:before {\n animation: spin 1.5s linear infinite;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 27.3 27.3'%3E%3Ccircle cx='13.7' cy='13.7' r='13.7' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M25.7 13.7c0-2.7-.9-5.3-2.6-7.4-1.7-2.1-4-3.6-6.6-4.2-2.6-.6-5.4-.4-7.8.8-2.5 1-4.5 2.9-5.7 5.3-1.2 2.4-1.6 5.1-1.1 7.8.5 2.6 1.9 5 4 6.8 2 1.8 4.6 2.8 7.3 2.9 2.7.1 5.3-.7 7.5-2.3L18.9 21c-1.6 1.2-3.6 1.8-5.6 1.7-2-.1-4-.8-5.5-2.1s-2.6-3.1-3-5.1-.1-4 .8-5.8C6.5 7.8 8 6.3 9.9 5.5c1.8-.8 3.9-1 5.9-.6 2 .5 3.7 1.6 5 3.2 1.3 1.6 1.9 3.6 1.9 5.6h3z'/%3E%3Cpath fill='%231e2dbe' d='m24.2 20.6 3-5.4h-6l3 5.4z'/%3E%3C/svg%3E\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-3);\n margin-right: px-to-rem($spacing-padding-1-5);\n width: px-to-rem($spacing-padding-3);\n }\n }\n\n &.ilo--loading--loaded {\n &:before {\n background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z' fill='%231E2DBE'/%3E%3Cpath d='m10.2 13.2-2.4-2.4L6 12.6l4.2 4.2L18 9l-1.8-1.8-6 6Z' fill='%23fff'/%3E%3C/svg%3E\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-3);\n margin-right: px-to-rem($spacing-padding-1-5);\n width: px-to-rem($spacing-padding-3);\n }\n }\n }\n\n &.storybook {\n height: 400px;\n width: 100%;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n@import \"../animations\";\n\n.ilo--modal {\n &--wrapper {\n display: none;\n\n & > * {\n opacity: 0;\n }\n }\n\n &.show {\n .ilo--modal--wrapper {\n display: block;\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n z-index: 10001;\n }\n\n &.fadein {\n .ilo--modal--wrapper {\n & > * {\n opacity: 1;\n transition-delay: 125ms;\n @include globaltransition(\"opacity\");\n }\n }\n }\n }\n\n &--background {\n background-color: rgba(0, 0, 0, 0.85);\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 10002;\n }\n\n &--contents {\n background-color: $color-base-neutrals-white;\n left: 0;\n position: absolute;\n margin: 0 4.2%;\n max-height: 96%;\n overflow: scroll;\n top: 50%;\n transform: translateY(-50%);\n width: 91.4%;\n z-index: 10003;\n }\n\n .modal--close {\n height: px-to-rem(40px);\n right: 0;\n position: absolute;\n top: 0;\n width: px-to-rem(40px);\n z-index: 10004;\n\n .ilo--icon {\n left: px-to-rem(3px);\n top: px-to-rem(3px);\n }\n }\n\n @include breakpoint(\"medium\") {\n &--contents {\n margin: 0 23.2%;\n width: 53.58%;\n }\n }\n\n @include breakpoint(\"large\") {\n &--contents {\n margin: 0 18.05%;\n width: 63.888%;\n }\n }\n\n &.storybook {\n height: 400px;\n width: 100%;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--header {\n $self: &;\n overflow: hidden;\n position: relative;\n z-index: 4;\n\n &.ilo--mobile--open {\n height: 100vh;\n }\n\n @include breakpoint(\"large\") {\n overflow: visible;\n }\n\n &--nav {\n background: $brand-ilo-dark-blue;\n }\n\n &--menu {\n @include dataurlicon(\"burger\", $brand-ilo-white);\n align-self: center;\n background-color: transparent;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 32px;\n border: none;\n cursor: pointer;\n height: 32px;\n overflow: hidden;\n position: relative;\n text-indent: -999%;\n transition: all 150ms ease-out;\n width: 32px;\n\n &:hover,\n &:focus {\n @include dataurlicon(\"burger\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 32px;\n }\n\n @include breakpoint(\"large\") {\n display: none;\n }\n\n &--close {\n @include dataurlicon(\"close\", $brand-ilo-dark-blue);\n background-color: $brand-ilo-grey-light;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 32px;\n border: none;\n cursor: pointer;\n height: 32px;\n overflow: hidden;\n position: relative;\n text-indent: -999%;\n transition: all 150ms ease-out;\n width: 32px;\n\n &:hover,\n &:focus {\n @include dataurlicon(\"close\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 32px;\n }\n\n @include breakpoint(\"large\") {\n display: none;\n }\n }\n }\n\n &--logo {\n display: block;\n max-width: 150px;\n\n @include breakpoint(\"large\") {\n max-width: 200px;\n }\n\n &-link {\n display: block;\n padding: 16px 0;\n\n @include breakpoint(\"large\") {\n padding: 0 0 24px;\n }\n }\n }\n\n &--logo-bar {\n background: $brand-ilo-blue;\n display: flex;\n width: 100%;\n\n .ilo--header--inner {\n display: flex;\n justify-content: space-between;\n }\n\n @include breakpoint(\"large\") {\n background: $brand-ilo-blue;\n }\n }\n\n &--utility-bar {\n display: none;\n\n @include breakpoint(\"large\") {\n background: $brand-ilo-blue;\n display: flex;\n justify-content: flex-end;\n width: 100%;\n\n &--local {\n justify-content: space-between;\n }\n\n .right-to-left & {\n flex-direction: row-reverse;\n }\n }\n }\n\n &--inner {\n margin: auto;\n max-width: 1300px;\n padding: 0 16px;\n width: 100%;\n\n .right-to-left & {\n direction: rtl;\n }\n\n @include breakpoint(\"large\") {\n display: flex;\n justify-content: space-between;\n padding: 0 20px;\n }\n }\n\n &--navigation {\n background: $brand-ilo-white;\n position: absolute;\n top: 0;\n left: 0;\n transform: translateX(100%);\n transition: transform 225ms ease-out;\n width: 100%;\n\n .ilo--header.ilo--mobile--open & {\n transform: translateX(0);\n }\n\n @include breakpoint(\"large\") {\n background: $brand-ilo-dark-blue;\n position: static;\n transform: none;\n }\n }\n\n &--logo-tagline {\n @include font-styles(\"headline-6\");\n color: $brand-ilo-white;\n display: none;\n font-family: $fonts-display;\n font-weight: 700;\n padding: 16px 0;\n text-align: right;\n\n .right-to-left & {\n text-align: left;\n }\n\n @include breakpoint(\"large\") {\n display: block;\n }\n\n &--small {\n @include font-styles(\"tagline\");\n color: $brand-ilo-ramp-blue;\n display: block;\n font-weight: 500;\n }\n }\n}\n\n.ilo--nav {\n width: 100%;\n\n @include breakpoint(\"large\") {\n width: auto;\n }\n\n &--label:not(:focus):not(:active) {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &--set {\n width: 100%;\n\n @include breakpoint(\"large\") {\n display: flex;\n width: auto;\n }\n }\n\n &--items {\n @include font-styles(\"nav-md\");\n font-family: $fonts-display;\n font-weight: 500;\n\n @include breakpoint(\"large\") {\n display: flex;\n align-items: center;\n\n &:first-of-type {\n margin-left: -20px;\n }\n }\n }\n\n &--link {\n color: $brand-ilo-dark-blue;\n display: block;\n padding: 16px 36px 16px 8px;\n text-decoration: none;\n transition: color 150ms ease-out, background 150ms ease-out;\n\n &:hover,\n &:focus {\n background: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n text-decoration: none;\n }\n\n @include breakpoint(\"large\") {\n background: $brand-ilo-dark-blue;\n color: $brand-ilo-white;\n display: inline-block;\n padding: 21.5px 24px 20.5px;\n\n &:hover,\n &:focus {\n background: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n text-decoration: none;\n }\n }\n }\n\n &--trigger {\n @include dataurlicon(\"arrowright\", $brand-ilo-dark-blue);\n @include font-styles(\"nav-md\");\n\n appearance: none;\n background-color: $brand-ilo-white;\n background-position: calc(100% - 16px) 55%;\n background-repeat: no-repeat;\n background-size: 16px;\n border: none;\n color: $brand-ilo-dark-blue;\n cursor: pointer;\n display: block;\n font-family: $fonts-display;\n font-weight: 500;\n padding: 16px 36px 16px 8px;\n text-align: left;\n transition: all 150ms ease-out;\n width: 100%;\n\n &:focus,\n &:hover {\n @include dataurlicon(\"arrowright\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n }\n\n .right-to-left & {\n @include dataurlicon(\"arrowleft\", $brand-ilo-dark-blue);\n background-color: $brand-ilo-white;\n background-position: 16px 55%;\n background-repeat: no-repeat;\n background-size: 16px;\n text-align: right;\n\n &:focus,\n &:hover {\n @include dataurlicon(\"arrowleft\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n }\n }\n\n @include breakpoint(\"large\") {\n @include dataurlicon(\"add\", $brand-ilo-white);\n @include font-styles(\"nav-bold-b-sm\");\n\n background-color: $brand-ilo-dark-blue;\n background-position: 90% 55%;\n background-repeat: no-repeat;\n background-size: 20px;\n border: 1.5px solid rgba($brand-ilo-grey-ui, 0.5);\n border-radius: 2px;\n color: $brand-ilo-white;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-left: 20px;\n padding: 7px 32px 5px 15px;\n text-align: center;\n transition: all 150ms ease-out;\n width: auto;\n\n &:focus,\n &:hover {\n @include dataurlicon(\"add\", $brand-ilo-blue);\n background-color: $brand-ilo-white;\n border-color: $brand-ilo-white;\n color: $brand-ilo-blue;\n }\n\n .right-to-left & {\n @include dataurlicon(\"add\", $brand-ilo-white);\n background-color: $brand-ilo-dark-blue;\n background-position: 90% 55%;\n background-repeat: no-repeat;\n background-size: 20px;\n text-align: left;\n\n &:focus,\n &:hover {\n @include dataurlicon(\"add\", $brand-ilo-blue);\n background-color: $brand-ilo-white;\n color: $brand-ilo-blue;\n }\n }\n }\n }\n\n &--local {\n display: flex;\n justify-content: space-between;\n padding: 0 0 0 max((100% - 1260px) / 2, 20px);\n\n &--logo-link {\n display: flex;\n }\n\n &--set {\n display: flex;\n justify-content: space-between;\n }\n\n &--item {\n @include font-styles(\"nav-md\");\n color: $brand-ilo-white;\n font-family: $fonts-display;\n font-weight: 500;\n }\n\n &--link {\n background: $brand-ilo-blue;\n color: $brand-ilo-white;\n display: flex;\n padding: 13px 24px;\n text-decoration: none;\n transition: all 150ms ease-out;\n\n &:hover,\n &:focus {\n background: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n }\n }\n }\n}\n\n.ilo--mobile--nav {\n border-bottom: 3px solid $brand-ilo-grey-light;\n margin-bottom: 16px;\n padding-bottom: 16px;\n\n &--logo {\n align-items: center;\n display: flex;\n justify-content: space-between;\n }\n\n &--language--select {\n background: $brand-ilo-white;\n left: 0;\n height: 100%;\n padding: 0 0 px-to-rem(32px);\n position: absolute;\n top: 0;\n transform: translateX(100%);\n transition: transform 225ms ease-out;\n width: 100%;\n\n .ilo--select--open & {\n transform: translateX(0);\n }\n }\n\n &--language--switcher--button {\n @include dataurlicon(\"global\", $brand-ilo-dark-blue);\n @include font-styles(\"nav-md\");\n\n appearance: none;\n background-color: $brand-ilo-white;\n background-position: calc(100% - 16px) 55%;\n background-repeat: no-repeat;\n background-size: 16px;\n border: none;\n color: $brand-ilo-dark-blue;\n cursor: pointer;\n display: block;\n font-family: $fonts-display;\n font-weight: 500;\n padding: 16px 36px 16px 8px;\n text-align: left;\n transition: all 150ms ease-out;\n width: 100%;\n\n &:focus,\n &:hover {\n @include dataurlicon(\"global\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n }\n\n .right-to-left & {\n background-position: 16px 55%;\n text-align: right;\n }\n }\n\n &--search {\n .ilo--searchfield {\n width: 100%;\n }\n\n .ilo--fieldset {\n width: 100%;\n }\n }\n\n @include breakpoint(\"large\") {\n display: none;\n }\n}\n\n.ilo--language-switcher {\n background: $brand-ilo-dark-blue;\n display: flex;\n padding: 0 max((100% - 1300px) / 2, 20px) 0 0;\n position: relative;\n\n .right-to-left & {\n padding: 0 0 0 max((100% - 1300px) / 2, 20px);\n }\n\n &::before {\n background: $brand-ilo-dark-blue;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n content: \"\";\n display: block;\n height: 100%;\n left: -32px;\n position: absolute;\n top: 0;\n width: 32px;\n\n .right-to-left & {\n clip-path: polygon(0 0, 0 100%, 100% 0);\n left: auto;\n right: -32px;\n }\n }\n\n &--wrap {\n display: flex;\n position: relative;\n }\n\n &--button {\n @include font-styles(\"image-credit\");\n @include dataurlicon(\"global\", $brand-ilo-white);\n appearance: none;\n background-color: $brand-ilo-dark-blue;\n background-repeat: no-repeat;\n background-position: 15px center;\n background-size: 16px 16px;\n border: none;\n color: $brand-ilo-white;\n cursor: pointer;\n display: block;\n font-family: $fonts-display;\n font-weight: 500;\n padding: 8px 30px 8px 40px;\n transition: all 150ms ease-out;\n\n &:hover,\n &:focus {\n @include dataurlicon(\"global\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n }\n }\n\n .ilo--context-menu {\n opacity: 0;\n position: absolute;\n right: 0;\n top: calc(100% + 12px);\n transition: opacity 150ms ease-out;\n z-index: -1;\n\n .ilo--context--open & {\n opacity: 1;\n z-index: 1;\n }\n }\n}\n\n.ilo--subnav {\n background: $brand-ilo-white;\n height: 100%;\n left: 0;\n padding: 0 0 32px;\n position: absolute;\n top: 0;\n transform: translateX(100%);\n transition: transform 225ms ease-out;\n width: 100%;\n\n .ilo--subnav--open & {\n transform: translateX(0);\n }\n\n .right-to-left & {\n direction: rtl;\n }\n\n @include breakpoint(\"large\") {\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));\n height: auto;\n left: 0;\n padding: 32px 0;\n top: auto;\n transform: translateY(-100%);\n transition: transform 225ms ease-out;\n z-index: -1;\n\n .ilo--header.ilo--subnav--open & {\n transform: translateY(0);\n }\n }\n\n &--inner {\n margin: auto;\n max-width: 1300px;\n padding: 0 20px;\n width: 100%;\n\n @include breakpoint(\"large\") {\n display: flex;\n justify-content: space-between;\n }\n }\n\n &--set {\n display: grid;\n grid-template-columns: 1fr;\n width: 100%;\n\n @include breakpoint(\"large\") {\n grid-auto-flow: column;\n grid-template-columns: repeat(5, 1fr);\n grid-template-rows: repeat(5, 1fr);\n }\n }\n\n &--link {\n @include font-styles(\"nav-md\");\n background: $brand-ilo-white;\n color: $brand-ilo-dark-blue;\n display: flex;\n font-family: $fonts-display;\n font-weight: 500;\n padding: 18px 8px;\n text-decoration: none;\n transition: all 150ms ease-out;\n\n &:hover,\n &:focus {\n background: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n text-decoration: none;\n }\n }\n}\n\n.ilo--mobile--subnav {\n @include breakpoint(\"large\") {\n display: none;\n }\n\n &--menu {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n\n &--back {\n @include font-styles(\"nav-md\");\n background-color: $brand-ilo-white;\n border: none;\n color: $brand-ilo-dark-blue;\n cursor: pointer;\n font-family: $fonts-display;\n font-weight: 500;\n padding: 16px 16px 16px 32px;\n position: relative;\n transition: all 150ms ease-out;\n\n &::before {\n @include dataurlicon(\"arrowleft\", $brand-ilo-dark-blue);\n background-position: 10% center;\n background-repeat: no-repeat;\n background-size: 24px;\n content: \"\";\n display: block;\n height: 24px;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 24px;\n }\n\n .right-to-left & {\n padding: 16px 32px 16px 16px;\n\n &::before {\n @include dataurlicon(\"arrowright\", $brand-ilo-dark-blue);\n background-position: 10% center;\n background-repeat: no-repeat;\n background-size: 24px;\n left: auto;\n right: 0;\n }\n }\n\n &:hover,\n &:focus {\n background-color: $brand-ilo-light-blue;\n color: $brand-ilo-blue;\n\n &::before {\n @include dataurlicon(\"arrowleft\", $brand-ilo-blue);\n background-position: 10% center;\n background-repeat: no-repeat;\n background-size: 24px;\n }\n\n .right-to-left & {\n &::before {\n @include dataurlicon(\"arrowright\", $brand-ilo-blue);\n background-position: 10% center;\n background-repeat: no-repeat;\n background-size: 24px;\n }\n }\n }\n\n @include breakpoint(\"large\") {\n display: none;\n }\n }\n\n &--label {\n @include font-styles(\"headline-6\");\n border-bottom: 3px solid $brand-ilo-grey-light;\n color: $brand-ilo-grey-charcoal;\n font-family: $fonts-display;\n font-weight: 700;\n margin-bottom: 16px;\n padding: 20px 8px;\n width: 100%;\n }\n}\n\n.ilo--search-box {\n background: $brand-ilo-white;\n left: 0;\n position: absolute;\n top: 0;\n transform: translateX(100%);\n transition: transform 225ms ease-out;\n width: 100%;\n\n .ilo--search--open & {\n transform: translateX(0);\n }\n\n @include breakpoint(\"large\") {\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));\n left: 0;\n padding: 32px 0;\n top: auto;\n transform: translateY(-100%);\n transition: transform 225ms ease-out;\n z-index: -1;\n\n .ilo--header.ilo--search--open & {\n transform: translateY(0);\n }\n }\n\n .ilo--header--inner {\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n }\n\n .ilo--searchfield {\n max-width: 618px;\n width: 100%;\n }\n\n .ilo--fieldset {\n width: 100%;\n }\n}\n\n.ilo--search {\n display: none;\n\n @include breakpoint(\"large\") {\n display: flex;\n }\n\n &--button {\n @include dataurlicon(\"search\", $brand-ilo-white);\n appearance: none;\n background-color: transparent;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 21.5px 21.5px;\n border: none;\n border-radius: 0;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n text-indent: -999%;\n transition: all 150ms ease-out;\n\n &:hover,\n &:focus {\n @include dataurlicon(\"search\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n }\n\n .ilo--search--open & {\n @include dataurlicon(\"close\", $brand-ilo-dark-blue);\n background-color: $brand-ilo-white;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 21.5px 21.5px;\n\n &:hover,\n &:focus {\n @include dataurlicon(\"close\", $brand-ilo-blue);\n background-color: $brand-ilo-light-blue;\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n@import \"../animations\";\n\n.ilo--notification {\n background-color: $color-ux-notification-background;\n box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),\n 0px 4px 8px rgba(30, 45, 190, 0.054), 0px 10px 20px rgba(30, 45, 190, 0.08),\n 0px -4px 16px rgba(30, 45, 190, 0.054);\n border-radius: 2px;\n color: $color-ux-notification-text;\n position: relative;\n\n &--dialog {\n max-width: 340px;\n width: 100%;\n\n @include breakpoint(\"medium\") {\n max-width: 490px;\n }\n\n .ilo--notification--content {\n padding: calc(px-to-rem($spacing-padding-3) + 2px)\n px-to-rem($spacing-padding-3);\n }\n }\n\n &--inline {\n max-width: 340px;\n\n .ilo--notification--content {\n padding: calc(px-to-rem($spacing-padding-3) + 2px)\n px-to-rem($spacing-padding-3);\n }\n\n @include breakpoint(\"medium\") {\n max-width: 100%;\n width: 100%;\n\n .ilo--notification--content {\n align-items: start;\n display: flex;\n justify-items: space-between;\n padding: px-to-rem(14px) px-to-rem($spacing-padding-3);\n }\n }\n }\n\n &--content {\n margin-left: px-to-rem($spacing-padding-5);\n position: relative;\n width: calc(100% - 40px);\n\n &:before {\n background-position: center $spacing-padding-3;\n background-repeat: no-repeat;\n background-size: px-to-rem($spacing-padding-2);\n content: \"\";\n display: block;\n height: 100%;\n left: -40px;\n position: absolute;\n width: px-to-rem($spacing-padding-5);\n top: 0;\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n background-position: center;\n }\n }\n\n .icon--error & {\n background-color: $color-ux-notification-type-error;\n @include dataurlicon(\"error\", $color-ux-notification-icon);\n }\n\n .icon--info & {\n background-color: $color-ux-notification-type-info;\n @include dataurlicon(\"info\", $color-ux-notification-icon);\n }\n\n .icon--success & {\n background-color: $color-ux-notification-type-success;\n @include dataurlicon(\"success\", $color-ux-notification-icon);\n }\n\n .icon--warning & {\n background-color: $color-ux-notification-type-warning;\n @include dataurlicon(\"warning\", $color-ux-notification-icon);\n }\n }\n }\n\n &--headline {\n font-weight: 700;\n @include font-styles(\"body-small\");\n\n margin-bottom: px-to-rem($spacing-padding-1-5);\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-bottom: 0;\n }\n }\n }\n\n &--copy {\n font-weight: 400;\n @include font-styles(\"body-xs\");\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-left: px-to-rem($spacing-padding-3);\n }\n }\n\n &:not(:last-child) {\n margin-bottom: px-to-rem($spacing-padding-3);\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-bottom: 0;\n max-width: 24%;\n\n @include breakpoint(\"large\") {\n max-width: 40%;\n }\n }\n }\n }\n }\n\n &--date {\n color: $color-base-neutrals-medium;\n display: block;\n font-weight: 400;\n @include font-styles(\"body-xs\");\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-left: px-to-rem($spacing-padding-2);\n }\n }\n\n &:not(:last-child) {\n margin-bottom: px-to-rem(19px);\n }\n\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-bottom: 0;\n }\n }\n }\n\n &--cta {\n @include breakpoint(\"medium\") {\n .ilo--notification--inline & {\n margin-left: px-to-rem($spacing-padding-3);\n }\n }\n }\n\n &--close {\n background-color: $color-ux-background-highlight;\n background-position: center;\n background-repeat: no-repeat;\n background-size: px-to-rem($spacing-padding-3);\n border: none;\n height: px-to-rem($spacing-padding-5);\n position: absolute;\n right: 0;\n top: 0;\n width: px-to-rem($spacing-padding-5);\n @include dataurlicon(\"close\", $color-ux-labels-actionable);\n\n &:hover,\n &:focus {\n background-color: $color-ux-background-hover;\n cursor: pointer;\n @include dataurlicon(\"close\", $color-ux-labels-hover);\n }\n\n span {\n @include isVisuallyHidden();\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--pagination {\n display: flex;\n justify-content: space-between;\n margin-top: px-to-rem(\n map-get($spacing, \"ux\", \"pagination\", \"padding\", \"top\")\n );\n $self: &;\n\n &--link {\n background: map-get($color, \"ux\", \"pagination\", \"default\", \"background\");\n border: none;\n border-radius: 2px;\n color: map-get($color, \"ux\", \"pagination\", \"default\", \"icon\");\n display: inline-block;\n font-family: $fonts-display;\n height: px-to-rem(map-get($spacing, \"ux\", \"pagination\", \"width\"));\n overflow: hidden;\n position: relative;\n text-align: left;\n text-indent: -999%;\n width: px-to-rem(map-get($spacing, \"ux\", \"pagination\", \"width\"));\n @include font-styles(\"label-medium\");\n\n &::before {\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n left: 50%;\n height: px-to-rem(16px);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center center;\n width: px-to-rem(16px);\n }\n\n &:hover {\n background: map-get($color, \"ux\", \"pagination\", \"hover\", \"background\");\n color: map-get($color, \"ux\", \"pagination\", \"hover\", \"icon\");\n }\n\n &.ilo--pagination--disable {\n opacity: 0.45;\n cursor: unset;\n\n &:hover {\n background: map-get(\n $color,\n \"ux\",\n \"pagination\",\n \"default\",\n \"background\"\n );\n }\n }\n }\n\n &--first-page {\n margin: 0\n px-to-rem(map-get($spacing, \"ux\", \"pagination\", \"padding\", \"left\")) 0 0;\n &::before {\n transform: translate(-50%, -50%) rotate(180deg);\n\n @include dataurlicon(\n \"doublearrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n\n &:hover {\n &::before {\n @include dataurlicon(\n \"doublearrow\",\n map-get($color, \"ux\", \"pagination\", \"hover\", \"icon\")\n );\n }\n }\n\n &.ilo--pagination--disable {\n opacity: 0.45;\n\n &:hover {\n background: map-get(\n $color,\n \"ux\",\n \"pagination\",\n \"default\",\n \"background\"\n );\n\n &::before {\n @include dataurlicon(\n \"doublearrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n }\n }\n }\n\n &--prev-page {\n &::before {\n transform: translate(-50%, -50%) rotate(180deg);\n width: px-to-rem(10px);\n\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n\n &:hover {\n &::before {\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"hover\", \"icon\")\n );\n }\n }\n\n &.ilo--pagination--disable {\n opacity: 0.45;\n\n &:hover {\n background: map-get(\n $color,\n \"ux\",\n \"pagination\",\n \"default\",\n \"background\"\n );\n\n &::before {\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n }\n }\n }\n\n &--next-page {\n &::before {\n transform: translate(-50%, -50%) rotate(0);\n width: px-to-rem(10px);\n\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n\n &:hover {\n &::before {\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"hover\", \"icon\")\n );\n }\n }\n\n &.ilo--pagination--disable {\n opacity: 0.45;\n\n &:hover {\n background: map-get(\n $color,\n \"ux\",\n \"pagination\",\n \"default\",\n \"background\"\n );\n\n &::before {\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n }\n }\n }\n\n &--last-page {\n margin: 0 0 0\n px-to-rem(map-get($spacing, \"ux\", \"pagination\", \"padding\", \"right\"));\n\n &::before {\n @include dataurlicon(\n \"doublearrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n\n &:hover {\n &::before {\n @include dataurlicon(\n \"doublearrow\",\n map-get($color, \"ux\", \"pagination\", \"hover\", \"icon\")\n );\n }\n }\n\n &.ilo--pagination--disable {\n opacity: 0.45;\n\n &:hover {\n background: map-get(\n $color,\n \"ux\",\n \"pagination\",\n \"default\",\n \"background\"\n );\n\n &::before {\n @include dataurlicon(\n \"paginationarrow\",\n map-get($color, \"ux\", \"pagination\", \"default\", \"icon\")\n );\n }\n }\n }\n }\n\n &--page {\n @include font-styles(\"nav-md-sm\");\n\n font-family: $fonts-copy;\n font-weight: 400;\n line-height: 45px;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../animations\";\n@import \"../mixins\";\n\n.ilo--profile {\n max-width: 343px;\n position: relative;\n\n &--avatar {\n border-radius: 50%;\n float: left;\n width: px-to-rem(64px);\n }\n\n &--contents {\n .id {\n margin-left: px-to-rem(75px);\n padding-top: 5px;\n\n &:first-of-type {\n padding-bottom: 1px;\n }\n\n &:nth-of-type(2):last-of-type {\n padding-top: 0;\n }\n }\n\n .id:first-of-type:last-of-type,\n .id:nth-of-type(2):last-of-type {\n border-bottom: 2px solid $color-base-neutrals-lighter;\n padding-bottom: 11px;\n }\n\n .id:first-of-type:last-of-type {\n padding-top: 14px;\n }\n }\n\n &--name {\n display: block;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"label\");\n margin-left: 11px;\n @include font-styles(\"body-small\");\n }\n\n &--role {\n display: block;\n font-family: $fonts-copy;\n margin-left: 11px;\n @include font-styles(\"body-xs\");\n }\n\n &--description {\n clear: both;\n font-family: $fonts-copy;\n padding-top: 22px;\n @include font-styles(\"body-xs\");\n }\n\n &--link {\n align-items: center;\n clear: both;\n color: map-get($color, \"link\", \"text\", \"default\");\n display: inline-flex;\n font-family: $fonts-display;\n font-weight: map-get($type, \"weights\", \"section\");\n height: px-to-rem(56px);\n text-decoration: none;\n @include font-styles(\"body-small\");\n\n span {\n align-items: center;\n background-position: calc(100% - 10px) center;\n background-repeat: no-repeat;\n background-size: 24px 24px;\n display: inline-flex;\n height: 24px;\n padding-right: 32px;\n @include dataurlicon(\"arrowright\", $color-link-text-default);\n }\n\n &:visited {\n color: map-get($color, \"link\", \"text\", \"visited\");\n\n span {\n @include dataurlicon(\"arrowright\", $color-link-text-visited);\n }\n }\n\n &:active {\n color: map-get($color, \"link\", \"text\", \"active\");\n outline: none;\n\n span {\n @include dataurlicon(\"arrowright\", $color-link-text-active);\n background-color: map-get($color, \"link\", \"background\", \"active\");\n }\n }\n\n &:hover,\n &:focus {\n background-color: $color-base-blue-light;\n color: map-get($color, \"link\", \"text\", \"hover\");\n outline: none;\n @include globaltransition(\"color, background-color\");\n\n span {\n @include dataurlicon(\"arrowright\", $color-link-text-hover);\n }\n }\n }\n\n .ilo--profile--description + .ilo--profile--link {\n margin-top: px-to-rem(8px);\n }\n\n .ilo--profile--role + .ilo--profile--link {\n margin-top: px-to-rem(2px);\n }\n\n .ilo--profile--name + .ilo--profile--link {\n margin-top: px-to-rem(18px);\n }\n\n .right-to-left & {\n direction: rtl;\n\n .ilo--profile--avatar {\n float: right;\n }\n\n .ilo--profile--contents {\n .id {\n margin-left: auto;\n margin-right: px-to-rem(75px);\n }\n }\n\n .ilo--profile--link {\n span {\n background-position: 10px center;\n padding-left: 32px;\n padding-right: 0;\n @include dataurlicon(\"arrowleft\", $color-link-text-default);\n }\n\n &:visited {\n span {\n @include dataurlicon(\"arrowleft\", $color-link-text-visited);\n }\n }\n\n &:active {\n span {\n @include dataurlicon(\"arrowleft\", $color-link-text-active);\n }\n }\n\n &:hover,\n &:focus {\n span {\n @include dataurlicon(\"arrowleft\", $color-link-text-hover);\n }\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n border: none;\n display: grid;\n height: px-to-rem(24px);\n margin: 0;\n order: 1;\n position: relative;\n place-content: center;\n width: px-to-rem(24px);\n\n &:before {\n content: \"\";\n background-color: $color-base-neutrals-light;\n border: px-to-rem(4px) solid $color-base-neutrals-light;\n border-radius: 50%;\n height: px-to-rem(18px);\n left: px-to-rem(3px);\n position: absolute;\n top: px-to-rem(3px);\n width: px-to-rem(18px);\n z-index: 1;\n }\n\n &:after {\n content: \"\";\n background-color: $color-base-neutrals-light;\n border-radius: 50%;\n height: px-to-rem(24px);\n left: 0;\n position: absolute;\n top: 0;\n width: px-to-rem(24px);\n z-index: 0;\n }\n\n &:checked {\n &:before {\n background-color: $color-base-blue-light;\n border-color: $color-base-blue-dark;\n }\n\n &:after {\n background-color: $color-base-blue-dark;\n }\n }\n\n &:focus {\n &:after {\n background-color: $color-base-yellow;\n }\n\n &:checked {\n &:before {\n border-color: $color-base-blue-dark;\n }\n }\n\n outline: none;\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n &:after {\n background-color: $color-base-red-medium;\n }\n\n &:checked {\n &:before {\n border-color: $color-base-blue-dark;\n }\n }\n }\n}\n\n.ilo--fieldset--input--radio {\n align-items: center;\n clear: both;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-bottom: px-to-rem(22px);\n\n .ilo--fieldset--label {\n color: $color-base-neutrals-black;\n font-family: $fonts-copy;\n font-weight: 400;\n font-size: 14.9px;\n margin-bottom: 0;\n margin-left: px-to-rem($spacing-padding-1);\n margin-top: 2px;\n order: 2;\n\n .right-to-left & {\n margin-left: 0;\n margin-right: px-to-rem($spacing-padding-1);\n }\n }\n\n .ilo--fieldset--error,\n .ilo--fieldset--helper {\n order: 3;\n width: 100%;\n }\n\n .right-to-left & {\n direction: rtl;\n\n .ilo--fieldset--label {\n margin-left: 0;\n margin-right: px-to-rem($spacing-padding-1);\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../animations\";\n@import \"../mixins\";\n\n.ilo--read-more {\n &--button {\n background: map-get($color, \"ux\", \"readmore\", \"default\", \"background\");\n @include bordervalues(\"readmore\", \"ux\");\n color: $color-ux-labels-actionable;\n font-family: $fonts-display;\n height: px-to-rem(map-get($spacing, \"ux\", \"readmore\", \"default\", \"height\"));\n @include spacingvalues(\"margin\", \"readmore\", \"ux\");\n @include spacingvalues(\"padding\", \"readmore\", \"ux\");\n position: relative;\n text-align: left;\n width: $spacing-ux-readmore-default-width;\n @include font-styles(\"label-medium\");\n\n &:after {\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: px-to-rem(24px);\n position: absolute;\n right: px-to-rem(2px);\n top: 50%;\n transform: translateY(-50%);\n transform-origin: center center;\n width: px-to-rem(24px);\n @include dataurlicon(\"arrow\", $color-ux-labels-actionable);\n }\n\n &:hover {\n background: map-get($color, \"ux\", \"readmore\", \"hover\", \"background\");\n @include bordervalues(\"readmore\", \"ux\", \"hover\");\n color: $color-ux-labels-hover;\n cursor: pointer;\n @include globaltransition(\"color, background-color, border-color\");\n\n &:after {\n @include dataurlicon(\"arrow\", $color-ux-labels-hover);\n }\n }\n\n &--open {\n &:after {\n transform: translateY(-50%) rotateX(180deg);\n transform-origin: center center;\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--richtext {\n font-family: $fonts-copy;\n font-weight: 400;\n @include font-styles(\"body-small\");\n\n a {\n @include linkstyles();\n }\n\n img {\n width: 100%;\n }\n\n p {\n margin-bottom: px-to-rem(map-get($spacing, \"padding-3\"));\n }\n\n p + figure,\n p + img,\n p + blockquote,\n ul + img,\n ol + img,\n dl + img,\n p + hr,\n ul + hr,\n ol + hr,\n dl + hr,\n blockquote + hr {\n @include textmargin(\n \"margin-top\",\n map-get($spacing, \"padding-7\"),\n \"body-small\",\n \"copy\",\n 0,\n 0\n );\n }\n\n figure {\n width: 100%;\n margin-bottom: px-to-rem(map-get($spacing, \"padding-7\"));\n }\n\n figcaption {\n border-left: 3px solid #b8c4cc;\n color: $color-font-caption;\n font-weight: 400;\n margin-top: px-to-rem(map-get($spacing, \"padding-2\"));\n padding-left: px-to-rem(map-get($spacing, \"padding-1\"));\n @include font-styles(\"image-caption\");\n }\n\n em,\n i {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 700;\n }\n\n hr {\n background-color: $color-ux-horizontal-rule-default;\n border: none;\n height: px-to-rem(map-get($spacing, \"horizontal-rule\"));\n margin-bottom: px-to-rem(map-get($spacing, \"padding-7\"));\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-family: $fonts-display;\n font-weight: 700;\n margin-top: px-to-rem(map-get($spacing, \"padding-7\"));\n }\n\n h1 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-2\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-2\");\n }\n\n h2 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-3\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-3\");\n }\n\n h3 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"headline-4\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-4\");\n }\n\n h4 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"headline-5\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-5\");\n }\n\n h5 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"headline-6\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-6\");\n }\n\n h6 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"headline-6\",\n \"display\",\n \"body-small\",\n \"copy\"\n );\n @include font-styles(\"headline-6\");\n }\n\n ul,\n ol {\n li {\n &::before {\n content: \"\";\n display: inline-block;\n height: px-to-rem(14px);\n left: px-to-rem(-12px);\n position: absolute;\n top: 6px;\n width: px-to-rem(12px);\n @include dataurlicon(\"listarrow\", $color-base-neutrals-light);\n }\n margin-bottom: px-to-rem(map-get($spacing, \"padding-4\"));\n margin-left: px-to-rem(12px);\n padding-left: px-to-rem(12px);\n position: relative;\n }\n margin-bottom: px-to-rem(map-get($spacing, \"padding-4\"));\n }\n\n blockquote {\n background-color: $color-ux-background-highlight;\n background-position: right top;\n background-repeat: no-repeat;\n background-size: px-to-rem(72px) px-to-rem(40px);\n display: block;\n font-family: $fonts-display;\n margin: px-to-rem(map-get($spacing, \"padding-3\")) 0\n px-to-rem(map-get($spacing, \"padding-5\")) 0;\n padding: px-to-rem(54px) 0 px-to-rem(34px)\n px-to-rem(map-get($spacing, \"padding-4\"));\n position: relative;\n width: 100%;\n @include dataurlicon(\"triangle\", $color-ux-background-default);\n\n p {\n color: $color-font-blockquote;\n font-weight: 300;\n margin-bottom: px-to-rem(map-get($spacing, \"padding-3\"));\n padding: 0 px-to-rem(map-get($spacing, \"padding-6\")) 0 0;\n position: relative;\n @include font-styles(\"pull-quote-sm\");\n\n &:after {\n background-repeat: no-repeat;\n bottom: 0;\n content: \"\";\n display: inline-block;\n height: px-to-rem(20px);\n position: absolute;\n right: 0;\n transform: scaleX(-1);\n width: px-to-rem(26.5px);\n @include dataurlicon(\"quote\", $color-font-blockquote);\n }\n }\n\n cite {\n color: $color-font-cite;\n font-weight: 400;\n @include font-styles(\"pull-quote-cite\");\n }\n\n &:before {\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: px-to-rem(40px);\n left: 0;\n position: absolute;\n width: px-to-rem(53px);\n top: 0;\n @include dataurlicon(\"quote\", $color-font-blockquote);\n }\n }\n\n @include breakpoint(\"medium\") {\n @include font-styles(\"base\");\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: px-to-rem(map-get($spacing, \"padding-8\"));\n }\n\n h1 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-5\"),\n \"headline-1\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-1\");\n }\n\n h2 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-5\"),\n \"headline-2\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-2\");\n }\n\n h3 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-3\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-3\");\n }\n\n h4 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-4\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-4\");\n }\n\n h5 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-5\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-5\");\n }\n\n h6 {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-4\"),\n \"headline-5\",\n \"display\",\n \"body-large\",\n \"copy\"\n );\n @include font-styles(\"headline-5\");\n }\n\n p {\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-3\"),\n \"body-large\",\n \"copy\",\n \"body-large\",\n \"copy\"\n );\n }\n\n p + figure,\n p + img,\n p + blockquote,\n ul + img,\n ol + img,\n dl + img,\n p + hr,\n ul + hr,\n ol + hr,\n dl + hr,\n blockquote + hr {\n @include textmargin(\n \"margin-top\",\n map-get($spacing, \"padding-8\"),\n \"body-large\",\n \"copy\",\n 0,\n 0\n );\n }\n\n hr {\n margin-bottom: px-to-rem(map-get($spacing, \"padding-8\"));\n }\n\n figure {\n width: 100%;\n @include textmargin(\n \"margin-bottom\",\n map-get($spacing, \"padding-8\"),\n \"body-large\",\n \"copy\",\n 0,\n 0\n );\n }\n\n blockquote {\n background-size: px-to-rem(86px) px-to-rem(48px);\n margin: px-to-rem(map-get($spacing, \"padding-4\")) 0\n px-to-rem(map-get($spacing, \"padding-8\")) 0;\n padding: px-to-rem(62px) 0 px-to-rem(map-get($spacing, \"padding-6\"))\n px-to-rem(map-get($spacing, \"padding-6\"));\n\n p {\n margin-bottom: px-to-rem(map-get($spacing, \"padding-3\"));\n padding: 0 px-to-rem(map-get($spacing, \"padding-6\")) 0 0;\n position: relative;\n @include font-styles(\"pull-quote-lg\");\n\n &:after {\n height: px-to-rem(24px);\n width: px-to-rem(32px);\n }\n }\n\n &:before {\n height: px-to-rem(48px);\n width: px-to-rem(64px);\n }\n }\n }\n\n .right-to-left & {\n direction: rtl;\n\n figcaption {\n border-left: none;\n border-right: 3px solid #b8c4cc;\n padding-left: 0;\n padding-right: px-to-rem(map-get($spacing, \"padding-1\"));\n }\n\n ul,\n ol {\n li {\n &::before {\n left: auto;\n right: px-to-rem(-12px);\n @include dataurlicon(\"listarrowreverse\");\n }\n margin-left: 0;\n margin-right: px-to-rem(12px);\n padding-left: 0;\n padding-right: px-to-rem(12px);\n }\n }\n\n blockquote {\n background-position: -1px -1px;\n padding: px-to-rem(54px) px-to-rem(map-get($spacing, \"padding-4\"))\n px-to-rem(34px) 0;\n @include dataurlicon(\"trianglereverse\", $color-ux-background-default);\n\n p {\n padding: 0 0 0 px-to-rem(map-get($spacing, \"padding-6\"));\n\n &:after {\n left: 0;\n right: auto;\n transform: scaleX(1);\n }\n }\n\n &:before {\n left: auto;\n right: 0;\n transform: scaleX(-1);\n }\n\n @include breakpoint(\"medium\") {\n padding: px-to-rem(62px) px-to-rem(map-get($spacing, \"padding-6\"))\n px-to-rem(map-get($spacing, \"padding-6\")) 0;\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--searchfield {\n display: flex;\n\n &--button {\n background-color: map-get(\n $color,\n \"formelements\",\n \"inputbutton\",\n \"default\",\n \"background\"\n );\n background-position: center center;\n background-repeat: no-repeat;\n background-size: $spacing-padding-3 $spacing-padding-3;\n @include bordervalues(\"inputbutton\", \"formelements\");\n height: $spacing-padding-6;\n width: calc($spacing-padding-6 - 2px);\n text-indent: -9999px;\n @include dataurlicon(\n \"search\",\n $color-formelements-inputbutton-default-color\n );\n\n &:focus {\n background-color: map-get(\n $color,\n \"formelements\",\n \"inputbutton\",\n \"hover\",\n \"background\"\n );\n cursor: pointer;\n @include dataurlicon(\n \"search\",\n $color-formelements-inputbutton-hover-color\n );\n }\n\n &:active {\n background-color: map-get(\n $color,\n \"formelements\",\n \"inputbutton\",\n \"active\",\n \"background\"\n );\n @include dataurlicon(\n \"search\",\n $color-formelements-inputbutton-active-color\n );\n }\n\n .haslabel & {\n margin-top: px-to-rem(28px);\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n }\n\n .right-to-left & {\n direction: rtl;\n\n .ilo--searchfield--button {\n border-left: $spacing-formelements-inputbutton-default-borderrtl-left\n solid $color-formelements-inputbutton-default-border-left;\n border-right: $spacing-formelements-inputbutton-default-borderrtl-right\n solid $color-formelements-inputbutton-default-border-right;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@use \"../animations\" as *;\n@import \"../mixins\";\n\n.ilo--tabs {\n border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;\n border-left: px-to-rem(3px) solid $color-base-neutrals-lighter;\n border-right: px-to-rem(3px) solid $color-base-neutrals-lighter;\n\n &:not(.tabs--js) {\n .ilo--tabs--selection {\n margin-bottom: px-to-rem(24px);\n\n &--button {\n background: map-get($color, \"link\", \"background\", \"default\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"default\");\n color: map-get($color, \"link\", \"text\", \"default\");\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n @include globaltransition(\"color, background-color, border-color\");\n\n &:visited {\n background: map-get($color, \"link\", \"background\", \"visited\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"visited\");\n color: map-get($color, \"link\", \"text\", \"visited\");\n }\n\n &:hover {\n background: map-get($color, \"link\", \"background\", \"hover\");\n border-bottom: $widths-border-med solid\n map-get($color, \"link\", \"underline\", \"hover\");\n color: map-get($color, \"link\", \"text\", \"hover\");\n text-decoration: none;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &:active {\n background: map-get($color, \"link\", \"background\", \"default\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"default\");\n color: map-get($color, \"link\", \"text\", \"default\");\n outline: none;\n }\n\n &:focus {\n background: map-get($color, \"link\", \"background\", \"default\");\n border-bottom: $widths-border-sm solid\n map-get($color, \"link\", \"underline\", \"default\");\n color: map-get($color, \"link\", \"text\", \"default\");\n outline: none;\n }\n }\n }\n }\n\n &.tabs--js {\n .ilo--tabs--selection {\n --tabscount: 1;\n display: block;\n\n &--button {\n align-items: center;\n background-color: $color-base-neutrals-lighter;\n border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;\n color: $color-ux-labels-actionable;\n font-family: $fonts-display;\n font-weight: 600;\n display: flex;\n height: px-to-rem(60px);\n justify-content: flex-start;\n padding-left: $spacing-padding-1;\n padding-right: $spacing-padding-3;\n text-decoration: none;\n @include font-styles(\"label-medium\");\n @include globaltransition(\"color, background-color, border-color\");\n\n &[aria-selected=\"true\"] {\n background-color: $color-base-neutrals-white;\n border-top: px-to-rem(3px) solid $color-ux-labels-actionable;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &.icon {\n .ilo--icon {\n height: px-to-rem($spacing-padding-2);\n margin-right: px-to-rem(5px);\n order: 1;\n width: px-to-rem($spacing-padding-2);\n }\n\n .ilo--tabs--selection--label {\n order: 2;\n }\n }\n\n &:hover,\n &[aria-selected=\"true\"]:hover {\n background-color: $color-base-blue-light;\n color: $color-base-blue-medium;\n outline: none;\n @include globaltransition(\"color, background-color, border-color\");\n\n &.has--tooltip {\n .ilo--tooltip--wrapper {\n @include dataurlicon(\"info\", $color-base-blue-medium);\n }\n }\n }\n }\n\n &--label {\n max-width: 50ch;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &--item {\n display: block;\n width: 100%;\n\n &:last-of-type {\n .ilo--tabs--selection--button {\n border-bottom: none;\n border-right: none;\n }\n }\n }\n }\n\n .ilo--tabs--content {\n padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-3)\n px-to-rem($spacing-padding-7) px-to-rem($spacing-padding-3);\n\n [aria-expanded=\"false\"] {\n display: none;\n }\n\n [aria-expanded=\"true\"] {\n display: block;\n }\n }\n\n @include breakpoint(\"medium\") {\n .ilo--tabs--content {\n padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-8)\n px-to-rem($spacing-padding-8) px-to-rem($spacing-padding-8);\n }\n\n .ilo--tabs--selection {\n display: flex;\n max-width: 100%;\n overflow-x: scroll;\n overflow-y: hidden;\n\n &--button {\n border-bottom: none;\n border-right: px-to-rem(5px) solid $color-base-neutrals-white;\n }\n\n &--item {\n width: min(calc(var(--tabscount) / 1 * 100%), 100%);\n }\n }\n }\n\n @include breakpoint(\"large\") {\n .ilo--tabs--selection {\n &--item {\n width: min(calc(var(--tabscount) / 1 * 100%), 100%);\n }\n }\n }\n }\n\n .right-to-left & {\n direction: rtl;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--table {\n background-color: $color-ux-table-background;\n padding: $spacing-ux-table-padding-top $spacing-ux-table-padding-right\n $spacing-ux-table-padding-bottom $spacing-ux-table-padding-left;\n position: relative;\n\n &--header {\n background-color: $color-ux-table-content-background;\n border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;\n padding: $spacing-ux-table-content-padding-top\n $spacing-ux-table-content-padding-right\n $spacing-ux-table-content-padding-bottom\n $spacing-ux-table-content-padding-left;\n }\n\n &--wrapper {\n max-height: 380px;\n overflow: scroll;\n position: relative;\n width: 100%;\n }\n\n &--content {\n border-collapse: initial;\n width: 100%;\n }\n\n &--head {\n background-color: $color-ux-table-content-background;\n box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),\n 0px 4px 8px rgba(30, 45, 190, 0.054),\n 0px 10px 20px rgba(30, 45, 190, 0.08),\n 0px -4px 16px rgba(30, 45, 190, 0.054);\n left: 0;\n height: auto;\n position: sticky;\n top: -1px;\n width: 100%;\n z-index: 2;\n\n &--cell {\n background-color: $color-ux-table-content-background;\n border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;\n border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;\n font-family: $fonts-display;\n font-weight: 700;\n @include font-styles(\"body-xs\");\n letter-spacing: -0.02em;\n padding: $spacing-ux-table-head-padding-top\n $spacing-ux-table-head-padding-right\n $spacing-ux-table-head-padding-bottom\n $spacing-ux-table-head-padding-left;\n pointer-events: none;\n text-align: left;\n\n .ilo--table--small & {\n padding: $spacing-ux-table-smallhead-padding-top\n $spacing-ux-table-smallhead-padding-right\n $spacing-ux-table-smallhead-padding-bottom\n $spacing-ux-table-smallhead-padding-left;\n }\n\n &:first-of-type {\n border-left: none;\n }\n\n &.sortable {\n pointer-events: auto;\n position: relative;\n\n &:after {\n background-color: $color-base-neutrals-lighter;\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-ux-labels-actionable)}\");\n background-position: center center;\n background-repeat: no-repeat;\n background-size: 75%;\n content: \"\";\n display: block;\n height: px-to-rem($spacing-padding-3);\n position: absolute;\n right: px-to-rem(9px);\n width: px-to-rem($spacing-padding-3);\n top: 50%;\n transform: translateY(-50%);\n }\n\n &:hover {\n background-color: $color-base-blue-light;\n border-bottom: px-to-rem(2px) solid $color-base-blue-medium;\n color: $color-base-blue-medium;\n cursor: pointer;\n\n &:after {\n background-color: $color-base-blue-light;\n background-image: url(\"#{colortodataurlicon(\"arrow\", $color-base-blue-medium)}\");\n }\n }\n\n &[aria-sort=\"descending\"] {\n &:after {\n transform-origin: center center;\n transform: translateY(-50%) rotate(180deg);\n }\n }\n }\n }\n }\n\n &--body {\n background-color: $color-ux-table-cell-background;\n\n &--row.selected {\n background-color: $color-ux-table-hover-background;\n }\n\n &--cell {\n border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;\n font-family: $fonts-copy;\n font-weight: 400;\n @include font-styles(\"body-xs\");\n outline: 0;\n padding: $spacing-ux-table-cell-padding-top\n $spacing-ux-table-cell-padding-right\n $spacing-ux-table-cell-padding-bottom\n $spacing-ux-table-cell-padding-left;\n position: relative;\n\n .ilo--table--small & {\n padding: $spacing-ux-table-smallcell-padding-top\n $spacing-ux-table-smallcell-padding-right\n $spacing-ux-table-smallcell-padding-bottom\n $spacing-ux-table-smallcell-padding-left;\n }\n\n &:first-of-type {\n border-left: none;\n }\n\n &.numeric {\n text-align: right;\n }\n\n &:hover {\n background-color: $color-ux-table-hover-background;\n border-bottom: 2px solid $color-ux-labels-hover;\n color: $color-ux-labels-hover;\n }\n\n &.selected {\n background-color: $color-ux-table-selected-background;\n border-bottom: 2px solid $color-ux-labels-hover;\n color: $color-ux-labels-hover;\n cursor: pointer;\n }\n\n &.column--selected {\n background-color: $color-ux-table-hover-background;\n }\n\n a {\n @include linkstyles();\n }\n }\n }\n\n &--headline {\n align-items: center;\n display: flex;\n font-family: $fonts-display;\n font-weight: 700;\n margin-bottom: px-to-rem(7px);\n @include font-styles(\"headline-6\");\n\n .ilo--tooltip--wrapper {\n margin-left: px-to-rem(6px);\n }\n }\n\n &--description {\n color: $color-base-neutrals-medium;\n font-family: $fonts-copy;\n font-weight: 400;\n @include font-styles(\"body-xxs\");\n\n a {\n @include linkstyles();\n }\n }\n\n &--zebra {\n .ilo--table--body--row:nth-child(odd) {\n background-color: $color-ux-table-zebra-background;\n\n &:hover,\n &:focus {\n background-color: $color-ux-table-zebra-background;\n }\n\n .ilo--table--body--cell {\n border-left: px-to-rem(1px) solid $color-base-neutrals-white;\n\n &:hover,\n &:focus {\n background-color: $color-ux-table-selected-background;\n }\n }\n\n &.selected {\n .ilo--table--body--cell {\n background-color: $color-ux-table-hover-background;\n\n &.selected {\n background-color: $color-ux-table-selected-background;\n }\n }\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../animations\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--table-of-contents {\n background-color: $color-ux-tableofcontents-items-default-background;\n display: none;\n min-width: 343px;\n padding: 0;\n\n & > * {\n opacity: 0;\n }\n\n &.show {\n display: block;\n\n &.fadein {\n & > * {\n opacity: 1;\n transition-delay: 125ms;\n @include globaltransition(\"opacity\");\n }\n }\n }\n\n &--headline {\n border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;\n margin-bottom: px-to-rem($spacing-padding-3);\n margin-top: px-to-rem(9px);\n @include font-styles(\"base\");\n font-family: $fonts-display;\n font-weight: 700;\n padding-bottom: px-to-rem($spacing-padding-2);\n }\n\n &--wrapper {\n &.show {\n display: block;\n height: 100vh;\n left: 0;\n padding: px-to-rem(26px);\n position: fixed;\n top: 0;\n width: 100vw;\n z-index: 10001;\n\n @include breakpoint(\"large\") {\n padding: 0;\n }\n }\n }\n\n &--trigger {\n align-items: center;\n display: flex;\n justify-content: center;\n margin: px-to-rem($spacing-padding-3) auto;\n\n &.hide {\n display: none;\n }\n }\n\n @include breakpoint(\"large\") {\n display: block;\n\n & > * {\n opacity: 1;\n }\n\n &--trigger {\n display: none;\n }\n }\n\n &--modal {\n display: none;\n\n & > * {\n opacity: 0;\n }\n\n &.show {\n display: block;\n\n &.fadein {\n & > * {\n opacity: 1;\n transition-delay: 125ms;\n @include globaltransition(\"opacity\");\n }\n }\n }\n\n @include breakpoint(\"large\") {\n display: none;\n\n &.show {\n display: none;\n }\n }\n\n .toc--modal--close {\n top: 0;\n height: px-to-rem(40px);\n right: 0;\n position: absolute;\n width: px-to-rem(40px);\n z-index: 10004;\n\n .ilo--icon {\n left: px-to-rem(3px);\n top: px-to-rem(3px);\n }\n }\n }\n\n &--list,\n &--list--item {\n width: 100%;\n }\n\n &--link {\n background-color: transparent;\n background-position: calc(100% - 11px) center;\n background-repeat: no-repeat;\n background-size: px-to-rem(24px) px-to-rem(24px);\n border-bottom: $color-ux-tableofcontents-items-default-border\n $spacing-ux-tableofcontents-items-border-bottom solid;\n color: $color-ux-labels-actionable;\n display: block;\n font-family: $fonts-display;\n font-weight: 500;\n margin: 0 $spacing-ux-tableofcontents-padding-right 0\n $spacing-ux-tableofcontents-padding-left;\n padding: $spacing-ux-tableofcontents-items-padding-top\n $spacing-ux-tableofcontents-items-padding-right\n $spacing-ux-tableofcontents-items-padding-bottom\n $spacing-ux-tableofcontents-items-padding-left;\n position: relative;\n text-decoration: none;\n width: calc(\n 100% - $spacing-ux-tableofcontents-padding-right -\n $spacing-ux-tableofcontents-padding-left\n );\n @include dataurlicon(\"stemarrow\", $color-ux-labels-actionable);\n @include font-styles(\"label-medium\");\n @include globaltransition(\"background-color, border, color\");\n\n &:hover,\n &:focus {\n background-color: $color-ux-tableofcontents-items-hover-background;\n border-bottom: $color-ux-tableofcontents-items-hover-border\n $spacing-ux-tableofcontents-items-border-bottom solid;\n background-position: calc(100% - 19px) center;\n color: $color-ux-labels-hover;\n margin: 0;\n outline: none;\n padding: $spacing-ux-tableofcontents-items-padding-top\n calc(\n $spacing-ux-tableofcontents-items-padding-right +\n $spacing-ux-tableofcontents-padding-right\n )\n $spacing-ux-tableofcontents-items-padding-bottom\n calc(\n $spacing-ux-tableofcontents-items-padding-left +\n $spacing-ux-tableofcontents-padding-left\n );\n width: 100%;\n @include dataurlicon(\"stemarrow\", $color-ux-labels-hover);\n @include globaltransition(\"background-color, border, color\");\n }\n\n &:active {\n background-color: $color-ux-tableofcontents-items-active-background;\n border-bottom: $color-ux-tableofcontents-items-active-border\n $spacing-ux-tableofcontents-items-border-bottom solid;\n border-top: $color-ux-tableofcontents-items-default-border\n $spacing-ux-tableofcontents-items-border-bottom solid;\n color: $color-ux-tableofcontents-items-active-color;\n margin: -2px 0 0 0;\n outline: none;\n padding: $spacing-ux-tableofcontents-items-padding-top\n calc(\n $spacing-ux-tableofcontents-items-padding-right +\n $spacing-ux-tableofcontents-padding-right\n )\n $spacing-ux-tableofcontents-items-padding-bottom\n calc(\n $spacing-ux-tableofcontents-items-padding-left +\n $spacing-ux-tableofcontents-padding-left\n );\n width: 100%;\n @include dataurlicon(\n \"stemarrow\",\n $color-ux-tableofcontents-items-active-icon\n );\n z-index: 5;\n }\n }\n\n &--list--item:last-of-type {\n .ilo--table-of-contents--link {\n border-bottom: none;\n\n &:hover {\n border-bottom: $color-ux-tableofcontents-items-hover-border\n $spacing-ux-tableofcontents-items-border-bottom solid;\n }\n }\n }\n\n .right-to-left & {\n direction: rtl;\n\n .ilo--table-of-contents--link {\n background-position: 11px center;\n\n &:hover,\n &:focus {\n background-position: 19px center;\n }\n }\n\n &--wrapper {\n direction: rtl;\n }\n\n &--modal {\n .toc--modal--close {\n left: 0;\n right: auto;\n }\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--textarea {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"default\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\");\n box-sizing: border-box;\n font-family: $fonts-copy;\n font-weight: map-get($type, \"weights\", \"section\");\n @include font-styles(\"label-medium\");\n height: px-to-rem(\n map-get($spacing, \"formelements\", \"input\", \"default\", \"height\")\n );\n @include spacingvalues(\"margin\", \"input\", \"formelements\");\n max-width: map-get($spacing, \"formelements\", \"input\", \"default\", \"width\");\n min-height: px-to-rem($spacing-padding-15);\n min-width: map-get($spacing, \"formelements\", \"input\", \"default\", \"width\");\n outline: none;\n position: relative;\n @include spacingvalues(\"padding\", \"input\", \"formelements\");\n width: map-get($spacing, \"formelements\", \"input\", \"default\", \"width\");\n\n &:focus {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"focus\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"focus\");\n padding-left: calc($spacing-formelements-input-default-padding-left - 1px);\n }\n\n &:disabled {\n opacity: 45%;\n pointer-events: none;\n }\n\n &:invalid,\n &.error,\n .error & {\n background-color: map-get(\n $color,\n \"formelements\",\n \"input\",\n \"error\",\n \"background\"\n );\n @include bordervalues(\"input\", \"formelements\", \"error\");\n }\n\n .right-to-left & {\n direction: rtl;\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@use \"../animations\" as *;\n@import \"../mixins\";\n\n.ilo--tags {\n list-style: none;\n\n .right-to-left & {\n direction: rtl;\n }\n\n &__item {\n display: inline-block;\n margin: map-get($spacing, \"horizontal-rule\");\n }\n}\n\n.ilo--tag {\n @include font-styles(\"nav-md-sm\");\n\n background: map-get($color, \"tag\", \"background\", \"default\");\n border: none;\n color: map-get($color, \"tag\", \"text\", \"default\");\n display: inline-block;\n font-family: map-get($fonts, \"display\");\n font-weight: 500;\n padding: px-to-rem(7px) px-to-rem(map-get($spacing, \"ui-padding-sm\"))\n px-to-rem(5px) px-to-rem(map-get($spacing, \"ui-padding-sm\"));\n text-decoration: none;\n $self: &;\n @include globaltransition(\"color, background-color, border-color\");\n\n &--active {\n background: map-get($color, \"tag\", \"background\", \"active\");\n color: map-get($color, \"tag\", \"text\", \"active\");\n outline: none;\n }\n\n &--anchor {\n cursor: unset;\n pointer-events: none;\n\n &.ilo--tag--active {\n background: map-get($color, \"tag\", \"background\", \"active\");\n color: map-get($color, \"tag\", \"text\", \"active\");\n cursor: pointer;\n outline: none;\n\n &:hover {\n background: map-get($color, \"tag\", \"background\", \"hover\");\n color: map-get($color, \"tag\", \"text\", \"hover\");\n text-decoration: none;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &:focus {\n background: map-get($color, \"tag\", \"background\", \"focus\");\n color: map-get($color, \"tag\", \"text\", \"focus\");\n outline: none;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &.ilo--tag--active {\n pointer-events: auto;\n }\n }\n }\n\n &--button {\n @include font-styles(\"label-small\");\n\n cursor: pointer;\n display: none;\n opacity: 0;\n padding-right: 36px;\n position: relative;\n visibility: hidden;\n\n &.ilo--tag--active {\n background: map-get($color, \"tag\", \"background\", \"active\");\n color: map-get($color, \"tag\", \"text\", \"active\");\n display: block;\n opacity: 1;\n outline: none;\n visibility: visible;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &.icon__position--right {\n .ilo--icon {\n @include dataurlicon(\"close\", map-get($color, \"tag\", \"text\", \"active\"));\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n height: 100%;\n max-height: 24px;\n max-width: 24px;\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n }\n }\n\n &:hover {\n background: map-get($color, \"tag\", \"background\", \"hover\");\n color: map-get($color, \"tag\", \"text\", \"hover\");\n text-decoration: none;\n @include globaltransition(\"color, background-color, border-color\");\n\n &.icon__position--right {\n .ilo--icon {\n @include dataurlicon(\n \"close\",\n map-get($color, \"tag\", \"text\", \"hover\")\n );\n }\n }\n }\n\n &:focus {\n background: map-get($color, \"tag\", \"background\", \"focus\");\n color: map-get($color, \"tag\", \"text\", \"focus\");\n outline: none;\n }\n }\n\n &--reset {\n @include font-styles(\"label-small\");\n\n cursor: pointer;\n display: none;\n opacity: 0;\n position: relative;\n visibility: hidden;\n\n &.ilo--tag--active {\n background: $color-base-neutrals-white;\n border: 1.5px solid $color-base-neutrals-light;\n color: map-get($color, \"tag\", \"text\", \"active\");\n display: block;\n opacity: 1;\n outline: none;\n visibility: visible;\n @include globaltransition(\"color, background-color, border-color\");\n }\n\n &.icon__position--right {\n .ilo--icon {\n @include dataurlicon(\"close\", map-get($color, \"tag\", \"text\", \"active\"));\n\n height: 100%;\n max-height: 28px;\n max-width: 28px;\n position: absolute;\n right: 5px;\n top: 5px;\n width: 100%;\n }\n }\n\n &:hover {\n background: map-get($color, \"tag\", \"background\", \"hover\");\n border: 1.5px solid map-get($color, \"tag\", \"background\", \"hover\");\n color: map-get($color, \"tag\", \"text\", \"hover\");\n text-decoration: none;\n @include globaltransition(\"color, background-color, border-color\");\n\n &.icon__position--right {\n .ilo--icon {\n @include dataurlicon(\n \"close\",\n map-get($color, \"tag\", \"text\", \"hover\")\n );\n }\n }\n }\n\n &:focus {\n background: map-get($color, \"tag\", \"background\", \"focus\");\n border: 1.5px solid map-get($color, \"tag\", \"background\", \"focus\");\n color: map-get($color, \"tag\", \"text\", \"focus\");\n outline: none;\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--tooltip {\n @include font-styles(\"body-xs\");\n background: map-get($color, \"tooltip\", \"default\", \"background\");\n border: none;\n border-radius: px-to-rem(2px);\n display: inline-block;\n filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))\n drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))\n drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))\n drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));\n color: map-get($color, \"tooltip\", \"default\", \"text\");\n opacity: 0;\n padding: px-to-rem($spacing-padding-1) px-to-rem($spacing-padding-1-5);\n position: absolute;\n transition: opacity 150ms ease-out;\n visibility: hidden;\n width: auto;\n\n &--fade {\n opacity: 1;\n }\n\n &--visible {\n visibility: visible;\n z-index: 2;\n }\n\n &--wrapper {\n display: inline-block;\n position: relative;\n\n &.has-icon {\n background-repeat: no-repeat;\n background-size: cover;\n height: px-to-rem($spacing-padding-2);\n min-width: px-to-rem($spacing-padding-2);\n @include dataurlicon(\"info\", $color-ux-labels-actionable);\n }\n }\n\n &--arrow {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: 0;\n height: 0;\n margin-top: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")};\n position: absolute;\n width: 0;\n }\n\n &--alignment-top {\n left: 0;\n top: calc(-100% + map-get($spacing, \"tooltip\", \"tooltip-arrow-height\"));\n\n .ilo--tooltip--arrow {\n border-top-color: map-get($color, \"tooltip\", \"default\", \"background\");\n border-width: map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-width\") 0\n map-get($spacing, \"tooltip\", \"tooltip-arrow-width\");\n bottom: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")};\n left: 50%;\n margin-left: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")};\n top: auto;\n\n &--placement-negative {\n left: 10%;\n }\n\n &--placement-positive {\n left: auto;\n right: 10%;\n }\n\n &--placement-center {\n left: 50%;\n }\n }\n }\n\n &--alignment-right {\n left: calc(100% + map-get($spacing, \"padding-4\"));\n top: calc(50% - map-get($spacing, \"tooltip\", \"tooltip-arrow-width\"));\n\n .ilo--tooltip--arrow {\n border-right-color: map-get($color, \"tooltip\", \"default\", \"background\");\n border-width: map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-width\") 0;\n left: 0;\n margin-left: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")};\n top: 50%;\n\n &--placement-negative {\n margin-top: 0;\n top: 10%;\n }\n\n &--placement-positive {\n top: auto;\n bottom: 10%;\n }\n\n &--placement-center {\n top: 50%;\n }\n }\n }\n\n &--alignment-left {\n right: calc(100% + map-get($spacing, \"padding-4\"));\n top: calc(50% - map-get($spacing, \"tooltip\", \"tooltip-arrow-width\"));\n\n .ilo--tooltip--arrow {\n border-left-color: map-get($color, \"tooltip\", \"default\", \"background\");\n border-width: map-get($spacing, \"tooltip\", \"tooltip-arrow-width\") 0\n map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-height\");\n left: auto;\n margin-top: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")};\n right: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")};\n top: 50%;\n\n &--placement-negative {\n margin-top: 0;\n top: 10%;\n }\n\n &--placement-positive {\n top: auto;\n bottom: 10%;\n }\n\n &--placement-center {\n top: 50%;\n }\n }\n }\n\n &--alignment-bottom {\n left: 0;\n top: calc(100% + map-get($spacing, \"tooltip\", \"tooltip-arrow-height\"));\n\n .ilo--tooltip--arrow {\n border-width: 0 map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")\n map-get($spacing, \"tooltip\", \"tooltip-arrow-width\");\n left: 50%;\n margin-left: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-width\")};\n margin-top: -#{map-get($spacing, \"tooltip\", \"tooltip-arrow-height\")};\n top: 0;\n border-bottom-color: map-get($color, \"tooltip\", \"default\", \"background\");\n\n &--placement-negative {\n left: 10%;\n }\n\n &--placement-positive {\n left: auto;\n right: 10%;\n }\n\n &--placement-center {\n left: 50%;\n }\n }\n }\n\n &--dark {\n background: map-get($color, \"tooltip\", \"dark\", \"background\");\n color: map-get($color, \"tooltip\", \"dark\", \"text\");\n\n &.ilo--tooltip--alignment-bottom .ilo--tooltip--arrow {\n border-bottom-color: map-get($color, \"tooltip\", \"dark\", \"background\");\n }\n\n &.ilo--tooltip--alignment-top .ilo--tooltip--arrow {\n border-top-color: map-get($color, \"tooltip\", \"dark\", \"background\");\n }\n\n &.ilo--tooltip--alignment-left .ilo--tooltip--arrow {\n border-left-color: map-get($color, \"tooltip\", \"dark\", \"background\");\n }\n\n &.ilo--tooltip--alignment-right .ilo--tooltip--arrow {\n border-right-color: map-get($color, \"tooltip\", \"dark\", \"background\");\n }\n }\n}\n","@use \"../tokens\" as *;\n@use \"../functions\" as *;\n@import \"../mixins\";\n\n.ilo--video {\n position: relative;\n\n &--wrapper {\n line-height: 0;\n position: relative;\n width: 100%;\n }\n\n &--img {\n line-height: 0;\n }\n\n &--caption {\n border-left: $spacing-ux-caption-border-left solid\n $color-ux-caption-border-left;\n color: $color-font-caption;\n font-weight: 400;\n margin-top: px-to-rem(map-get($spacing, \"padding-2\"));\n padding-left: px-to-rem(map-get($spacing, \"padding-1\"));\n @include font-styles(\"image-caption\");\n }\n\n &:focus,\n .vjs-tech:focus {\n outline: none;\n }\n\n &--element,\n .vjs-tech {\n height: auto;\n object-fit: cover;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n }\n\n &--player {\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &.youtube {\n height: auto;\n max-width: 100%;\n overflow: hidden;\n padding-bottom: 56.25%;\n position: relative;\n }\n\n iframe {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n\n &--poster,\n .vjs-poster {\n display: none;\n object-fit: cover;\n height: 100%;\n left: 0;\n max-height: 100%;\n max-width: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n width: 100%;\n\n &.show {\n display: block;\n }\n\n & img,\n & source {\n height: auto;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n }\n }\n\n &--controls,\n .vjs-control-bar {\n bottom: 0;\n color: $color-ux-labels-darkbg;\n display: flex;\n justify-content: flex-start;\n left: 0;\n height: px-to-rem($spacing-ux-video-controls-height);\n opacity: 0;\n position: absolute;\n transition: opacity 150ms ease-out;\n width: 100%;\n\n &.notplayed {\n bottom: auto;\n opacity: 1;\n top: 0;\n\n @include breakpoint(\"large\") {\n flex-direction: column;\n height: 122px;\n width: px-to-rem($spacing-ux-video-bigplaybutton-width);\n }\n }\n\n button span {\n @include isVisuallyHidden();\n }\n\n &--play,\n &--pause,\n .vjs-play-control,\n .vjs-big-play-button {\n background-color: $color-ux-video-controls-default-background;\n border: none;\n cursor: pointer;\n height: 100%;\n order: 1;\n width: $spacing-ux-video-controls-height;\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n\n &.notplayed {\n @include breakpoint(\"large\") {\n .vjs-play-control,\n .vjs-big-play-button {\n order: 1;\n height: px-to-rem($spacing-ux-video-bigplaybutton-height);\n width: px-to-rem($spacing-ux-video-bigplaybutton-width);\n }\n\n .ilo--video--controls--play,\n .ilo--video--controls--pause {\n order: 1;\n height: px-to-rem(80px);\n width: px-to-rem(80px);\n }\n }\n }\n\n &--play,\n .vjs-play-control:not(.vjs-playing),\n .vjs-big-play-button {\n @include iconbutton(\n \"play\",\n $spacing-ux-video-bigplaybutton-height,\n $spacing-ux-video-bigplaybutton-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: $color-ux-video-controls-hover-background;\n @include iconbutton(\n \"play\",\n $spacing-ux-video-bigplaybutton-height,\n $spacing-ux-video-bigplaybutton-width,\n $color-ux-video-controls-hover-icon\n );\n\n & ~ .vjs-duration,\n & ~ .ilo--video--controls--duration {\n background-color: $color-ux-video-controls-hover-background;\n color: $color-ux-video-controls-hover-icon;\n }\n }\n\n &.vjs-paused {\n @include iconbutton(\n \"play\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: $color-ux-video-controls-hover-background;\n @include iconbutton(\n \"play\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-hover-icon\n );\n }\n }\n }\n\n &:not(.notplayed) {\n .ilo--video--controls--play {\n background-size: 24px 24px;\n }\n }\n\n &--pause,\n .vjs-playing {\n @include iconbutton(\n \"pause\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: $color-ux-video-controls-hover-background;\n @include iconbutton(\n \"pause\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-hover-icon\n );\n }\n }\n\n &--duration,\n .vjs-duration {\n background-color: $color-ux-video-controls-default-background;\n color: $color-ux-video-controls-default-icon;\n display: none;\n height: 100%;\n font-weight: 700;\n margin-left: 2px;\n order: 2;\n padding-top: 9px;\n text-align: center;\n width: px-to-rem(80px);\n\n &:hover,\n &:focus {\n background-color: $color-ux-video-controls-hover-background;\n color: $color-ux-video-controls-hover-icon;\n }\n\n @include font-styles(\"label-small\");\n\n &.show {\n display: block;\n }\n }\n\n &.notplayed {\n @include breakpoint(\"large\") {\n .vjs-duration {\n height: px-to-rem($spacing-ux-video-controls-height);\n margin-left: 0;\n margin-top: 2px;\n width: px-to-rem($spacing-ux-video-bigplaybutton-width);\n }\n\n .ilo--video--controls--duration {\n height: px-to-rem($spacing-ux-video-controls-height);\n margin-left: 0;\n margin-top: 2px;\n width: px-to-rem(80px);\n }\n }\n }\n\n .vjs-progress-holder {\n position: relative;\n width: 96%;\n }\n\n &--progress,\n .vjs-progress-control {\n background-color: $color-ux-video-controls-default-background;\n display: none;\n flex-grow: 1;\n height: 100%;\n margin-left: 2px;\n order: 3;\n position: relative;\n\n &.show,\n .vjs-has-started & {\n display: block;\n }\n\n &-playhead {\n height: 100%;\n left: 2%;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n width: 96%;\n z-index: 20;\n }\n\n &-current,\n .vjs-play-progress {\n height: 8px;\n left: 2%;\n position: absolute;\n top: px-to-rem(16px);\n width: 96%;\n z-index: 15;\n -webkit-appearance: none;\n\n &::-moz-progress-bar {\n background: $color-ux-video-controls-hover-background;\n border-radius: 0;\n }\n\n &::-webkit-progress-bar {\n background: transparent;\n }\n\n &::-webkit-progress-value {\n background: $color-ux-video-controls-hover-background;\n border-radius: 0;\n }\n }\n\n .vjs-play-progress {\n background: $color-ux-video-controls-hover-background;\n\n .vjs-time-tooltip {\n display: none;\n }\n }\n\n div[data-start] {\n background: $color-base-neutrals-light;\n height: 8px;\n left: 2%;\n position: absolute;\n top: 0;\n width: 96%;\n z-index: 15;\n }\n\n &-played,\n .vjs-mouse-display {\n display: none;\n position: absolute;\n top: -40px;\n z-index: 20;\n }\n\n &-loaded,\n .vjs-load-progress {\n height: 8px;\n left: 2%;\n position: absolute;\n top: px-to-rem(16px);\n width: 96%;\n z-index: 10;\n -webkit-appearance: none;\n\n &::-moz-progress-bar {\n background: $color-base-neutrals-light;\n border-radius: 0;\n }\n\n &::-webkit-progress-bar {\n background: transparent;\n }\n\n &::-webkit-progress-value {\n background: $color-base-neutrals-light;\n border-radius: 0;\n }\n }\n\n &:hover,\n &:focus {\n .vjs-play-progress {\n position: relative;\n\n .vjs-time-tooltip {\n align-items: center;\n background-color: $color-ux-credit-background;\n display: flex;\n height: px-to-rem(map-get($spacing, \"padding-4\"));\n justify-content: center;\n right: 0;\n position: absolute;\n bottom: calc(300% + 12px);\n width: 70px;\n @include font-styles(\"image-credit\");\n\n &:after {\n background-position: top left;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\n \"equilateraltriangle\",\n $color-base-neutrals-dark\n );\n content: \"\";\n height: px-to-rem(map-get($spacing, \"padding-1-5\"));\n position: absolute;\n left: calc(50% - 6px);\n bottom: -#{px-to-rem(map-get($spacing, \"padding-1-5\"))};\n width: px-to-rem(map-get($spacing, \"padding-1-5\"));\n }\n }\n }\n\n .ilo--video--controls--progress-played-container {\n position: absolute;\n left: 2%;\n top: 0;\n width: 96%;\n }\n\n .ilo--video--controls--progress-played {\n --playhead: 0%;\n align-items: center;\n background-color: $color-ux-credit-background;\n display: flex;\n height: px-to-rem(map-get($spacing, \"padding-4\"));\n justify-content: center;\n left: calc(var(--playhead) - 34px);\n position: absolute;\n bottom: calc(300% + 12px);\n width: 70px;\n @include font-styles(\"image-credit\");\n\n &:after {\n background-position: top left;\n background-repeat: no-repeat;\n background-size: contain;\n @include dataurlicon(\n \"equilateraltriangle\",\n $color-base-neutrals-dark\n );\n content: \"\";\n height: px-to-rem(map-get($spacing, \"padding-1-5\"));\n position: absolute;\n left: calc(50% - 6px);\n bottom: -#{px-to-rem(map-get($spacing, \"padding-1-5\"))};\n width: px-to-rem(map-get($spacing, \"padding-1-5\"));\n }\n }\n }\n }\n\n &--volume,\n .vjs-volume-panel {\n border-bottom: 1px solid;\n bottom: 0;\n display: none;\n flex-direction: column;\n height: 140px;\n margin-left: 2px;\n order: 4;\n position: relative;\n width: 40px;\n\n &.show,\n .vjs-has-started & {\n display: block;\n }\n\n &:hover,\n &:focus {\n .vjs-volume-control {\n display: block;\n }\n }\n }\n\n &--showvolume,\n .vjs-mute-control {\n background-color: $color-ux-video-controls-default-background;\n border: none;\n cursor: pointer;\n height: px-to-rem($spacing-ux-video-controls-height);\n margin-top: 0;\n position: relative;\n width: px-to-rem($spacing-ux-video-controls-height);\n z-index: 10;\n -webkit-appearance: none;\n -moz-appearance: none;\n @include iconbutton(\n \"volume\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: $color-ux-video-controls-hover-background;\n @include iconbutton(\n \"volume\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-hover-icon\n );\n }\n\n &.muted,\n &[title=\"Unmute\"] {\n @include iconbutton(\n \"muted\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: #ebf5fd;\n @include iconbutton(\n \"muted\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-hover-icon\n );\n }\n }\n }\n\n &--setvolume,\n .vjs-volume-control {\n background: $color-ux-video-controls-hover-background;\n border-left: 3px solid rgb(184, 196, 204);\n display: none;\n height: px-to-rem($spacing-ux-video-controls-height);\n order: 1;\n padding: 0;\n position: absolute;\n transform: rotate(270deg);\n transform-origin: -4px -4px;\n top: 9px;\n width: px-to-rem(138px);\n }\n\n &--setvolume {\n border-left: 8px solid $color-ux-video-controls-hover-background;\n border-right: 8px solid $color-ux-video-controls-hover-background;\n width: px-to-rem(122px);\n -webkit-appearance: none;\n\n &.show {\n display: block;\n }\n\n &-container {\n left: -2px;\n position: absolute;\n top: -2px;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: $color-ux-video-controls-hover-icon;\n border: none;\n box-shadow: none;\n height: 4px;\n cursor: pointer;\n }\n\n &::-webkit-slider-thumb {\n background-color: $color-ux-video-controls-hover-icon;\n border: none;\n border-radius: 50%;\n box-shadow: none;\n cursor: pointer;\n height: 16px;\n margin-top: -5px;\n width: 16px;\n -webkit-appearance: none;\n }\n }\n\n .vjs-volume-panel.vjs-hover .vjs-volume-control {\n align-items: center;\n cursor: pointer;\n display: flex;\n justify-content: center;\n }\n\n .vjs-volume-bar {\n height: 4px;\n position: relative;\n width: calc(100% - 26px);\n }\n\n .vjs-mouse-display,\n .vjs-volume-level {\n height: 4px;\n left: 0;\n position: absolute;\n top: 0;\n }\n\n .vjs-mouse-display {\n background-color: $color-base-neutrals-light;\n width: 100%;\n }\n\n .vjs-volume-level {\n background-color: $color-ux-video-controls-hover-icon;\n\n &:before {\n background: $color-ux-video-controls-hover-icon;\n border-radius: 50%;\n content: \"\";\n height: 16px;\n margin: 0;\n padding: 0;\n position: absolute;\n right: -16px;\n top: 50%;\n width: 16px;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n }\n }\n\n .vjs-volume-tooltip {\n display: none;\n }\n\n &--fullscreen,\n .vjs-fullscreen-control {\n background-color: $color-ux-video-controls-default-background;\n border: none;\n cursor: pointer;\n display: none;\n height: 100%;\n margin-left: 2px;\n order: 5;\n width: px-to-rem($spacing-ux-video-controls-height);\n -webkit-appearance: none;\n -moz-appearance: none;\n @include iconbutton(\n \"fullscreen\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-default-icon\n );\n\n &:hover,\n &:focus {\n background-color: #ebf5fd;\n @include iconbutton(\n \"fullscreen\",\n $spacing-ux-video-buttonicon-height,\n $spacing-ux-video-buttonicon-width,\n $color-ux-video-controls-hover-icon\n );\n }\n\n &.show {\n display: block;\n }\n }\n }\n\n .vjs-control-bar {\n bottom: 0;\n left: -5px;\n width: calc(100% + 5px);\n }\n\n &--element:not(.vjs-has-started) {\n .vjs-control-bar {\n bottom: auto;\n left: -5px;\n opacity: 1;\n top: 0;\n\n @include breakpoint(\"large\") {\n flex-direction: column;\n height: 158px;\n justify-content: flex-start;\n left: 0;\n width: 80px;\n }\n }\n\n .vjs-duration {\n display: block;\n }\n\n @include breakpoint(\"large\") {\n .vjs-duration {\n height: px-to-rem($spacing-ux-video-controls-height);\n margin-left: 0;\n margin-top: 2px;\n width: px-to-rem(80px);\n }\n\n .vjs-play-control {\n order: 1;\n height: px-to-rem(80px);\n width: px-to-rem(80px);\n }\n }\n }\n\n .vjs-control:focus,\n .vjs-control *:focus {\n outline: none;\n }\n\n .vjs-has-started {\n .vjs-control:not(.vjs-duration):not(.vjs-volume-control) {\n display: block;\n }\n }\n\n &:hover,\n &:focus {\n .ilo--video--controls,\n .vjs-control-bar {\n opacity: 1;\n transition: opacity 150ms ease-out;\n }\n }\n\n // TODO: style using loading component\n .vjs-loading-spinner {\n display: none;\n }\n\n .vjs-time-divider,\n .vjs-remaining-time,\n .vjs-current-time,\n .vjs-control-text {\n display: none !important;\n }\n}\n\n.ilo--video--container {\n position: relative;\n}\n\n.right-to-left {\n .ilo--video--caption {\n border-left: none;\n border-right: 3px solid #b8c4cc;\n direction: rtl;\n padding-left: 0;\n padding-right: px-to-rem(map-get($spacing, \"padding-1\"));\n }\n\n .ilo--credit {\n left: auto;\n right: 0;\n }\n}\n"],"names":[],"sourceRoot":""}