{"version":3,"file":"styles/documentation-swedbankpay.css","mappings":"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","sources":["webpack://@swedbankpay/design-guide/./variables-swedbankpay.less","webpack://@swedbankpay/design-guide/./global.less","webpack://@swedbankpay/design-guide/./src/less/documentation-swedbankpay.less","webpack://@swedbankpay/design-guide/./documentation-swedbankpay.less"],"sourcesContent":["/* ==========================================================================\n *\n * This file contains SwedbankPay brand specific variables\n *\n */\n\n/* Grayscale */\n@black: #222222;\n@list-gray: #999999;\n@light-gray: #f9f8f6;\n@white: #ffffff;\n\n/* Brownscale */\n@solid-brown: #2f2424;\n@dark-brown: #493c3b;\n@medium-brown: #72605e;\n@soft-brown: #a38b80;\n@light-brown: #d4c4bc;\n@brown-solid: @solid-brown;\n@brown-dark: @dark-brown;\n@brown-medium: @medium-brown;\n@brown-soft: @soft-brown;\n@brown-light: @light-brown;\n\n/* Main Brand Color Variants */\n@brand-primary: #fdc92a;\n@brand-primary-light: #fbdd91;\n@brand-primary-lighter: @brand-primary-light-3;\n@brand-primary-light-2: #ffdf88;\n@brand-primary-light-3: #fff3d5;\n@brand-primary-faded: fade(@brand-primary, 60%);\n@brand-secondary: @solid-brown;\n@brand-secondary-light-1: @medium-brown;\n@brand-secondary-light-2: @soft-brown;\n@brand-secondary-light-3: @light-brown;\n@brand-secondary-light-4: #d4b8a3;\n@brand-secondary-info-1: #8acdc3;\n@brand-secondary-info-2: #efb7b6;\n\n@brand-tertiary: #ee7023;\n@brand-accent: #31a3ae;\n@brand-accent-disabled: #98d0d6;\n\n@brand-orange: @brand-tertiary;\n@brand-blue: @brand-info;\n@brand-blue-light: @brand-info-light;\n@brand-turquoise: @brand-accent;\n@brand-turquoise-light: @brand-secondary-info-1;\n@brand-turqouise-lighter: #ebf8f2;\n@brand-turqouise-dark: #257886;\n@brand-turqouise-darker: #1a545e;\n@brand-apricot: #fbf2ea;\n@brand-pink: @brand-secondary-info-2;\n@brand-brown: @brand-secondary;\n@brand-green: @brand-success;\n@brand-green-light: @brand-success-light;\n\n/* Text colors */\n@text-default: @brand-secondary;\n@text-muted: @brown-medium;\n@text-white: @brand-bg-white;\n\n/* Background Colors */\n@brand-bg-1: #fbf2ea;\n@brand-bg-2: #ebf8f2;\n@brand-bg-3: #fbedf4;\n@brand-bg-4: #e9f7fb;\n@brand-bg-gray: #ebe7e2;\n@brand-bg-white: #ffffff;\n@bg-white: @brand-bg-white;\n@bg-primary: @brand-bg-1;\n@bg-secondary: @brand-bg-2;\n@bg-tertiary: @brand-bg-gray;\n@bg-quaternary: @light-gray;\n\n/* State colors */\n@brand-success: #3c7213;\n@brand-success-light: #f2f7eb;\n@brand-success-light-2: #99cc66;\n@brand-warning: #e97423;\n@brand-warning-light: #fef2e2;\n@brand-warning-2: @brand-tertiary;\n@brand-error-border: #f1bbb9;\n@brand-error: #d82e2a;\n@brand-error-light: #ffe9e9;\n@brand-error-dark: #8c0d14;\n@brand-info: #3961a7;\n@brand-info-light: #ebf1fa;\n\n/* System colors */\n@system-error-dark: @brand-error-dark;\n@system-error: @brand-error;\n@system-error-light: @brand-error-light;\n@system-warning: @brand-warning;\n@system-warning-light: @brand-warning-light;\n@system-success: @brand-success;\n@system-success-light: @brand-success-light;\n@system-info: @brand-info;\n@system-info-light: @brand-info-light;\n\n/* Checkbox */\n@checkbox-checked-color: @brand-secondary;\n\n/* Button colors */\n@primary-disabled-bg: @brand-primary-light-3;\n@secondary-disabled-bg: #e3d1c3;\n@destructive-disabled-bg: #f9ded3;\n\n@btn-primary-color: @brand-secondary;\n@btn-primary-bg: @brand-primary;\n@btn-primary-hover: @brand-primary-light;\n@btn-primary-disabled-color: @brand-secondary-light-2;\n@btn-primary-disabled-bg: @primary-disabled-bg;\n\n@btn-secondary-color: @white;\n@btn-secondary-bg: @brand-secondary;\n@btn-secondary-hover: @brand-secondary-light-2;\n@btn-secondary-disabled-color: @white;\n@btn-secondary-disabled-bg: @secondary-disabled-bg;\n\n@btn-destructive-color: @white;\n@btn-destructive-bg: @brand-error;\n@btn-destructive-hover: @brand-error-dark;\n@btn-destructive-disabled-color: @white;\n@btn-destructive-disabled-bg: @destructive-disabled-bg;\n\n@btn-link-color: @brand-secondary;\n@btn-link-disabled-color: @brand-secondary-light-3;\n\n/* Input */\n@input-color: @brand-secondary;\n@input-bg: @white;\n@input-bg-disabled: @white;\n@input-checked-bg-disabled: @brand-secondary-light-3;\n@input-addon-color: @medium-brown;\n\n/* Panel */\n@panel-default-border-color: @brand-secondary-light-3;\n\n/* Other colors */\n@yellow-faded: #fbdd91;\n@green-syntax-highlight: #99cc66;\n@yellow-syntax-highlight: @brand-primary-light-3;\n\n/* ==================================CSS VARIABLES========================================\n*\n* NEW CSS VARIABLES - work in progress\n*\n*/\n:root {\n\t--brand-primary: var(--brand-yellow, #fdc92a);\n\t--brand-primary-light: #fbdd91;\n\t--brand-primary-lighter: var(--brand-yellow-lighter, #fff3d5);\n\t--brand-secondary: var(--brown-solid, #2f2424);\n\n\t// Functional colors\n\t--brown-solid: #2f2424;\n\t--dark-brown: #493c3b;\n\t--brown-medium: #72605e;\n\t--brown-soft: #a38b80;\n\t--brown-light: #d4c4bc;\n\t--gray: #ebe7e2;\n\t--white: #ffffff;\n\n\t/* Main Brand Color Variants */\n\t--brand-primary-light-3: #fff3d5;\n\t--brand-secondary-light-1: var(--brown-medium, #72605e);\n\t--brand-secondary-light-2: var(--brown-soft, #a38b80);\n\t--brand-secondary-light-3: var(--brown-light, #d4c4bc);\n\n\t// Grayscale\n\t--black: #222222;\n\t--light-gray: #f9f8f6;\n\n\t// Brown scale colors\n\n\t// Text colors\n\t--text-default: var(--brown-solid);\n\t--text-muted: var(--brown-medium);\n\t--text-muted-light: var(--brown-soft);\n\t--text-white: var(--white, #ffffff);\n\t--text-disabled: var(--brown-light, #d4c4bc);\n\t--brand-accent-links: var(--brand-turquoise-dark, #257886);\n\t--text-gray: #767676;\n\n\t// Communication colors\n\t--brand-yellow: #fdc92a;\n\t--brand-yellow-lighter: #fff3d5;\n\t--brand-orange: #ee7023;\n\t--brand-turquoise: #31a3ae;\n\t--brand-turquoise-light: #8acdc3;\n\t--brand-turquoise-dark: #257886;\n\t--brand-pink: #efb7b6;\n\n\t// Color pool\n\t--brand-turquoise-lighter: #ebf8f2;\n\t--brand-orange-lighter: #fbeadb;\n\t--brand-green: #497125;\n\t--brand-green-light: #70b63a;\n\t--brand-green-lighter: #e7f8d2;\n\t--brand-red-lighter: #ffe9e9;\n\t--brand-blue: #335bb1;\n\t--brand-blue-lighter: #e0eaf9;\n\n\t// Functional colors\n\t--base-1: var(--text-default);\n\t--base-2: var(--text-muted);\n\t--base-3: var(--text-muted-light);\n\t--base-4: var(--text-disabled);\n\t--base-5: var(--bg-brown);\n\t--base-6: var(--bg-grey);\n\t--base-7: var(--bg-white);\n\n\t// Background colors\n\t--bg-brown: var(--gray, #ebe7e2);\n\t--bg-grey: var(--light-gray, #f9f8f6);\n\t--bg-orange: #fff1e4;\n\t--bg-white: var(--white, #ffffff);\n\t--bg-turquoise: var(--brand-turquoise-lighter, #ebf8f2);\n\n\t// System colors\n\t--system-success: #4d9c0f;\n\t--system-success-light: var(--brand-green-lighter, #e7f8d2);\n\t--system-warning: var(--brand-orange, #ee7023);\n\t--system-warning-light: var(--brand-orange-lighter, #fbeadb);\n\t--system-info: var(--brand-blue, #335bb1);\n\t--system-info-light: var(--brand-blue-lighter, #e0eaf9);\n\t--system-error: #d82e2a;\n\t--system-error-light: var(--brand-red-lighter, #ffe9e9);\n\t// TODO: update system colors in LESS variables and in component\n\n\t--brand-error: var(--system-error);\n\t--brand-error-light: var(--system-error-light);\n\n\t// Button colors\n\t--secondary-disabled-bg: #e3d1c3;\n\n\t// Other colors\n\t--blue-syntax-highlight: #43d0dd;\n\t--bg-primary: #fbf2ea;\n\n\t// Universal utilities\n\t--border-radius: 8px;\n\n\t// BUTTON VALUES\n\t--btn-hover: var(--brown-medium);\n\t--btn-primary-color: var(--brown-solid);\n\t--btn-primary-text-color: var(--text-white);\n\t// btn-secondary\n\t--btn-secondary-color: transparent;\n\t--btn-secondary-text-color: var(--text-default);\n\t--btn-secondary-border-color: var(--brown-medium);\n\t// btn-tertiary\n\t--btn-tertiary-color: var(--gray);\n\t--btn-tertiary-text-color: var(--brown-solid);\n\t--btn-tertiary-disabled: var(--btn-bg-disabled);\n\t// Shared button variables\n\t--btn-disabled-text: var(--text-disabled);\n\t--btn-bg-disabled: color-mix(\n\t\tin oklch,\n\t\tvar(--text-disabled),\n\t\tvar(--white) 70%\n\t);\n\t--btn-active-color: var(--brand-turquoise-light);\n\n\t//FORM VALUES\n\t--input-border-color: var(--brown-soft);\n\t--input-border-focus-color: var(--brown-solid);\n\t--input-border-success-color: var(--brand-turquoise);\n\t--input-checked-bg-disabled: var(--brand-secondary-light-3);\n\t--input-bg-disabled: var(--white);\n\t--input-color: var(--brand-secondary);\n\n\t/* Brand fonts */\n\t--brand-headline: \"Swedbank Headline\", \"Arial\", sans-serif;\n\t--brand-black: \"Swedbank Headline Black\", \"Arial\", sans-serif;\n\t--brand-monofont: \"Akkurat Mono\", monospace;\n\t--brand-default: \"Arial\", sans-serif;\n\n\t// icon fonts\n\t--icons-font-material: \"Material Icons\";\n\t--icons-font-material-outlined: \"Material Icons Outlined\";\n\t--icons-font-material-default: var(--icons-font-material);\n\t--icons-font-atlas: initial;\n\t--icons-font-default: var(--icons-font-atlas);\n\n\t/* Font weights */\n\t--font-weight-header: 400;\n}\n","// TODO: Google Material icons font should be removed during next release after > 10.x\n/* stylelint-disable-next-line import-notation, at-rule-prelude-no-invalid */\n@import (css)\n\turl(\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\");\n\n/* stylelint-disable-next-line import-notation */\n@import url(\"@vectoricons/atlas-icons/style.css\");\n\n/* Other colors */\n@text-muted: fade(@text-color, 75%);\n@text-color: @brand-secondary;\n@border-color: @brand-secondary-light-3;\n\n/* Spacer */\n@spacer: 1rem; /* Default */\n\n/* stylelint-disable indentation */\n// prettier-ignore\n@grid-breakpoints: {\n\txs: 0;\n\tsm: 576px;\n\tmd: 768px;\n\tlg: 992px;\n\txl: 1200px;\n\txxl: 1600px;\n}\n\n// prettier-ignore\n@grid-breakpoints-max: {\n\txs: (@grid-breakpoints[sm] - 0.02);\n\tsm: (@grid-breakpoints[md] - 0.02);\n\tmd: (@grid-breakpoints[lg] - 0.02);\n\tlg: (@grid-breakpoints[xl] - 0.02);\n\txl: (@grid-breakpoints[xxl] - 0.02);\n}\n\n/* stylelint-enable */\n\n/* Media queries breakpoints\n* The maximum value is calculated as the minimum of the next one less 0.02px\n* to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n* See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n* Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n* See https://bugs.webkit.org/show_bug.cgi?id=178261\n*/\n\n@screen-xs-min: @grid-breakpoints[xs];\n@screen-sm-min: @grid-breakpoints[sm];\n@screen-md-min: @grid-breakpoints[md];\n@screen-lg-min: @grid-breakpoints[lg];\n@screen-xl-min: @grid-breakpoints[xl];\n@screen-xxl-min: @grid-breakpoints[xxl];\n\n@screen-xs-max: @grid-breakpoints-max[xs];\n@screen-sm-max: @grid-breakpoints-max[sm];\n@screen-md-max: @grid-breakpoints-max[md];\n@screen-lg-max: @grid-breakpoints-max[lg];\n@screen-xl-max: @grid-breakpoints-max[xl];\n\n/* Fonts */\n\n@font-face {\n\tfont-family: \"Swedbank Headline\";\n\tsrc: url(\"../fonts/SwedbankHeadline-Bold.woff\") format(\"woff\");\n}\n\n@font-face {\n\tfont-family: \"Swedbank Headline Black\";\n\tsrc: url(\"../fonts/SwedbankHeadline-Black.woff\") format(\"woff\");\n}\n\n@font-face {\n\tfont-family: \"Akkurat Mono\";\n\tsrc: url(\"../fonts/AkkuratMonoLLWeb-Regular.woff\") format(\"woff\");\n}\n\n@font-face {\n\tfont-family: \"Akkurat Mono\";\n\tsrc: url(\"../fonts/AkkuratMonoLLWeb-Bold.woff\") format(\"woff\");\n\tfont-weight: bold;\n}\n\n@font-face {\n\tfont-family: \"Akkurat Mono\";\n\tsrc: url(\"../fonts/AkkuratMonoLLWeb-Italic.woff\") format(\"woff\");\n\tfont-style: italic;\n}\n\n@font-face {\n\tfont-family: \"Akkurat Mono\";\n\tsrc: url(\"../fonts/AkkuratMonoLLWeb-BoldItalic.woff\") format(\"woff\");\n\tfont-weight: bold;\n\tfont-style: italic;\n}\n\n@font-face {\n\tfont-family: \"Futura PT W08 Book\";\n\tsrc:\n\t\turl(\"../fonts/FuturaBook.woff2\") format(\"woff2\"),\n\t\turl(\"../fonts/FuturaBook.woff\") format(\"woff\");\n}\n@font-face {\n\tfont-family: \"Futura PT W08 Medium\";\n\tsrc:\n\t\turl(\"../fonts/FuturaMedium.woff2\") format(\"woff2\"),\n\t\turl(\"../fonts/FuturaMedium.woff\") format(\"woff\");\n}\n@font-face {\n\tfont-family: \"Futura PT W08 Demi\";\n\tsrc:\n\t\turl(\"../fonts/FuturaDemi.woff2\") format(\"woff2\"),\n\t\turl(\"../fonts/FuturaDemi.woff\") format(\"woff\");\n}\n\n/*\n*   CSS Variables (custom properties)\n*/\n\n/* all .less variables have been converted over to CSS variables then we can delete them */\n\n:root {\n\t/* COLORS */\n\t--text-color: var(--brand-secondary);\n\t--border-color: var(--brand-secondary-light-3);\n\n\t/*\n    * TYPOGRAPHY\n    * ==========================================================================\n    */\n\n\t/* fonts */\n\t--font-stack: \"Arial\", sans-serif;\n\n\t/* Font Size */\n\t--base-font-size: 1rem;\n\t--font-size-large: calc(var(--base-font-size) * 1.25);\n\t--font-size-small: calc(var(--base-font-size) * 0.875);\n\n\t/* Font Weight */\n\t--font-weight-light: 300;\n\t--font-weight-normal: 400;\n\t--font-weight-bold: 700;\n\t--font-weight-base: var(--font-weight-normal);\n\n\t/* line heights */\n\t--line-height-base: 1.5;\n\n\t/*\n    * Spacing\n    * ===========================================================================\n    */\n\n\t/* Spacer */\n\t--spacer: 1rem; /* Default */\n\n\t/* Margin */\n\t--base-margin: var(--spacer);\n\t--base-margin-xs: calc(var(--base-margin) / 4);\n\t--base-margin-sm: calc(var(--base-margin) / 2);\n\t--base-margin-lg: calc(var(--base-margin) * 1.5);\n\t--base-margin-xl: calc(var(--base-margin) * 2);\n\t--base-margin-xxl: calc(var(--base-margin) * 4);\n\n\t/* Padding */\n\t--base-padding: var(--spacer);\n\t--base-padding-xs: calc(var(--base-padding) / 4);\n\t--base-padding-sm: calc(var(--base-padding) / 2);\n\t--base-padding-lg: calc(var(--base-padding) * 1.5);\n\t--base-padding-xl: calc(var(--base-padding) * 2);\n\t--base-padding-xxl: calc(var(--base-padding) * 4);\n\n\t// misc paddings\n\t--vscroll-padding-right: 17px;\n\n\t/* Forms spacing */\n\t--input-padding-x: 16px;\n\t--input-padding-y: 12px;\n\t--border-width: 1px;\n\t--border-width-focus: 2px;\n\t--border-width-diff-focus: calc(\n\t\tvar(--border-width-focus, 2px) - var(--border-width, 1px)\n\t);\n\n\t// Border radius\n\t--border-radius-modal: 20px;\n\t--border-radius-expandable: 16px;\n\n\t/**\n\t*Z-indexes\n\t*/\n\t--tooltip-z-index: 1100;\n\t--skip-link-active-z-index: 1000;\n\t--toast-z-index: 700;\n\t--dialog-z-index: 600;\n\t--sheet-z-index: 500;\n\t--action-list-z-index: 450;\n\t--topbar-z-index: 400;\n\t--sidebar-z-index: 400;\n\t--datepicker-z-index: 150;\n\t--dropdown-z-index: 150;\n\t--navigation-z-index: 100;\n\t--progress-steps-z-index: 100;\n\t--tabs-z-index: 100;\n\t--skip-link-z-index: -100;\n}\n\n/*\n* Scaffolding\n* -------------------------------------------------- */\n\n/* Reset the box-sizing\n*\n* Heads up! This reset may cause conflicts with some third-party widgets.\n* For recommendations on resolving such conflicts, see\n* http://getbootstrap.com/getting-started/#third-box-sizing\n*/\n\n/* Body reset */\n\nhtml {\n\t-webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n\theight: 100%;\n\tscroll-behavior: smooth;\n\tline-height: 1.15; /* 1 */\n\ttext-size-adjust: 100%; /* 2 */\n\n\t@media (min-width: @screen-lg-max) {\n\t\tscroll-snap-type: y mandatory;\n\t}\n}\n\nbody {\n\tfont-family: var(--font-stack);\n\tfont-size: var(--base-font-size);\n\tline-height: var(--line-height-base, 1.5);\n\tcolor: var(--brand-secondary);\n\tbackground-color: var(--white);\n\theight: 100%;\n\tmargin: 0;\n\n\t&.no-vscroll {\n\t\toverflow-x: hidden;\n\t}\n\n\t&.no-scroll {\n\t\toverflow: hidden;\n\t}\n\n\t&.has-vscroll {\n\t\toverflow: hidden;\n\n\t\t@media screen and (min-width: @screen-sm-min) {\n\t\t\tpadding-right: var(--vscroll-padding-right, 17px);\n\n\t\t\t.dialog {\n\t\t\t\tpadding-right: var(--vscroll-padding-right, 17px);\n\t\t\t}\n\t\t}\n\t}\n}\n\n/* Reset fonts for relevant elements */\ninput,\nbutton,\nselect,\ntextarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tline-height: inherit;\n}\n\n/* Unordered and Ordered lists */\nul,\nol {\n\tmargin-top: 0;\n\tmargin-bottom: var(--base-margin);\n\n\tul,\n\tol {\n\t\tmargin-bottom: 0;\n\t}\n}\n\n/* Only display content to screen readers\n*\n* See: http://a11yproject.com/posts/how-to-hide-content/ */\n\n.sr-only {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tpadding: 0;\n\toverflow: hidden;\n\tclip-path: rect(0 0 0 0);\n\tborder: 0;\n}\n\n/* Use in conjunction with .sr-only to only display content when it's focused.\n* Useful for \"Skip to main content\" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n* Credit: HTML5 Boilerplate\n*/\n\n.sr-only-focusable {\n\t&:active,\n\t&:focus {\n\t\tposition: static;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\toverflow: visible;\n\t\tclip-path: none;\n\t}\n}\n\n/* iOS \"clickable elements\" fix for role=\"button\"\n*\n* Fixes \"clickability\" issue (and more generally, the firing of events such as focus as well)\n* for traditionally non-focusable elements with role=\"button\"\n* see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n* Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged\n*/\n\n[role=\"button\"] {\n\tcursor: pointer;\n}\n\n/*\n    MIXINS\n*/\n\n/* stylelint-disable less/color-no-invalid-hex, less/no-duplicate-variables */\n.media-breakpoint-up(@size, @abbr, @ruleset) {\n\t& when (@size > 0) {\n\t\t@infix: ~\"-@{abbr}\";\n\t\t@media (min-width: @size) {\n\t\t\t@ruleset();\n\t\t}\n\t}\n\n\t& when (@size = 0) {\n\t\t@infix: ~\"\";\n\t\t@ruleset();\n\t}\n}\n/* stylelint-enable */\n\n.tab-focus(@color: @brand-secondary) {\n\t/* Default */\n\t/* stylelint-disable-next-line declaration-property-value-no-unknown */\n\toutline: 2px solid @color;\n\n\t/* Webkit */\n\toutline: 5px auto -webkit-focus-ring-color;\n\toutline-offset: -2px;\n}\n\n.close-button() {\n\tcolor: var(--text-color);\n\topacity: 0.8;\n\tline-height: 0.7;\n\ttransition: opacity 0.3s ease-in-out;\n\tborder: none;\n\n\t&:hover {\n\t\topacity: 1;\n\t\tcursor: pointer;\n\t\tbackground-color: rgb(73 60 59 / 10%);\n\t}\n\n\t&:focus {\n\t\t.tab-focus();\n\t}\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\n@media (forced-colors: active) {\n\t.close-button() {\n\t\toutline: 2px solid transparent;\n\t}\n}\n","/* ==========================================================================\n *\n * This file contains SwedbankPay brand specific variables\n *\n */\n/* Grayscale */\n/* Brownscale */\n/* Main Brand Color Variants */\n/* Text colors */\n/* Background Colors */\n/* State colors */\n/* System colors */\n/* Checkbox */\n/* Button colors */\n/* Input */\n/* Panel */\n/* Other colors */\n/* ==================================CSS VARIABLES========================================\n*\n* NEW CSS VARIABLES - work in progress\n*\n*/\n@import url(\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\");\n@import url(\"@vectoricons/atlas-icons/style.css\");\n:root {\n  --brand-primary: var(--brand-yellow, #fdc92a);\n  --brand-primary-light: #fbdd91;\n  --brand-primary-lighter: var(--brand-yellow-lighter, #fff3d5);\n  --brand-secondary: var(--brown-solid, #2f2424);\n  --brown-solid: #2f2424;\n  --dark-brown: #493c3b;\n  --brown-medium: #72605e;\n  --brown-soft: #a38b80;\n  --brown-light: #d4c4bc;\n  --gray: #ebe7e2;\n  --white: #ffffff;\n  /* Main Brand Color Variants */\n  --brand-primary-light-3: #fff3d5;\n  --brand-secondary-light-1: var(--brown-medium, #72605e);\n  --brand-secondary-light-2: var(--brown-soft, #a38b80);\n  --brand-secondary-light-3: var(--brown-light, #d4c4bc);\n  --black: #222222;\n  --light-gray: #f9f8f6;\n  --text-default: var(--brown-solid);\n  --text-muted: var(--brown-medium);\n  --text-muted-light: var(--brown-soft);\n  --text-white: var(--white, #ffffff);\n  --text-disabled: var(--brown-light, #d4c4bc);\n  --brand-accent-links: var(--brand-turquoise-dark, #257886);\n  --text-gray: #767676;\n  --brand-yellow: #fdc92a;\n  --brand-yellow-lighter: #fff3d5;\n  --brand-orange: #ee7023;\n  --brand-turquoise: #31a3ae;\n  --brand-turquoise-light: #8acdc3;\n  --brand-turquoise-dark: #257886;\n  --brand-pink: #efb7b6;\n  --brand-turquoise-lighter: #ebf8f2;\n  --brand-orange-lighter: #fbeadb;\n  --brand-green: #497125;\n  --brand-green-light: #70b63a;\n  --brand-green-lighter: #e7f8d2;\n  --brand-red-lighter: #ffe9e9;\n  --brand-blue: #335bb1;\n  --brand-blue-lighter: #e0eaf9;\n  --base-1: var(--text-default);\n  --base-2: var(--text-muted);\n  --base-3: var(--text-muted-light);\n  --base-4: var(--text-disabled);\n  --base-5: var(--bg-brown);\n  --base-6: var(--bg-grey);\n  --base-7: var(--bg-white);\n  --bg-brown: var(--gray, #ebe7e2);\n  --bg-grey: var(--light-gray, #f9f8f6);\n  --bg-orange: #fff1e4;\n  --bg-white: var(--white, #ffffff);\n  --bg-turquoise: var(--brand-turquoise-lighter, #ebf8f2);\n  --system-success: #4d9c0f;\n  --system-success-light: var(--brand-green-lighter, #e7f8d2);\n  --system-warning: var(--brand-orange, #ee7023);\n  --system-warning-light: var(--brand-orange-lighter, #fbeadb);\n  --system-info: var(--brand-blue, #335bb1);\n  --system-info-light: var(--brand-blue-lighter, #e0eaf9);\n  --system-error: #d82e2a;\n  --system-error-light: var(--brand-red-lighter, #ffe9e9);\n  --brand-error: var(--system-error);\n  --brand-error-light: var(--system-error-light);\n  --secondary-disabled-bg: #e3d1c3;\n  --blue-syntax-highlight: #43d0dd;\n  --bg-primary: #fbf2ea;\n  --border-radius: 8px;\n  --btn-hover: var(--brown-medium);\n  --btn-primary-color: var(--brown-solid);\n  --btn-primary-text-color: var(--text-white);\n  --btn-secondary-color: transparent;\n  --btn-secondary-text-color: var(--text-default);\n  --btn-secondary-border-color: var(--brown-medium);\n  --btn-tertiary-color: var(--gray);\n  --btn-tertiary-text-color: var(--brown-solid);\n  --btn-tertiary-disabled: var(--btn-bg-disabled);\n  --btn-disabled-text: var(--text-disabled);\n  --btn-bg-disabled: color-mix(in oklch, var(--text-disabled), var(--white) 70%);\n  --btn-active-color: var(--brand-turquoise-light);\n  --input-border-color: var(--brown-soft);\n  --input-border-focus-color: var(--brown-solid);\n  --input-border-success-color: var(--brand-turquoise);\n  --input-checked-bg-disabled: var(--brand-secondary-light-3);\n  --input-bg-disabled: var(--white);\n  --input-color: var(--brand-secondary);\n  /* Brand fonts */\n  --brand-headline: \"Swedbank Headline\", \"Arial\", sans-serif;\n  --brand-black: \"Swedbank Headline Black\", \"Arial\", sans-serif;\n  --brand-monofont: \"Akkurat Mono\", monospace;\n  --brand-default: \"Arial\", sans-serif;\n  --icons-font-material: \"Material Icons\";\n  --icons-font-material-outlined: \"Material Icons Outlined\";\n  --icons-font-material-default: var(--icons-font-material);\n  --icons-font-atlas: initial;\n  --icons-font-default: var(--icons-font-atlas);\n  /* Font weights */\n  --font-weight-header: 400;\n}\n/* stylelint-disable-next-line import-notation, at-rule-prelude-no-invalid */\n/* stylelint-disable-next-line import-notation */\n/* Other colors */\n/* Spacer */\n/* Default */\n/* stylelint-disable indentation */\n/* Fonts */\n@font-face {\n  font-family: \"Swedbank Headline\";\n  src: url(\"../fonts/SwedbankHeadline-Bold.woff\") format(\"woff\");\n}\n@font-face {\n  font-family: \"Swedbank Headline Black\";\n  src: url(\"../fonts/SwedbankHeadline-Black.woff\") format(\"woff\");\n}\n@font-face {\n  font-family: \"Akkurat Mono\";\n  src: url(\"../fonts/AkkuratMonoLLWeb-Regular.woff\") format(\"woff\");\n}\n@font-face {\n  font-family: \"Akkurat Mono\";\n  src: url(\"../fonts/AkkuratMonoLLWeb-Bold.woff\") format(\"woff\");\n  font-weight: bold;\n}\n@font-face {\n  font-family: \"Akkurat Mono\";\n  src: url(\"../fonts/AkkuratMonoLLWeb-Italic.woff\") format(\"woff\");\n  font-style: italic;\n}\n@font-face {\n  font-family: \"Akkurat Mono\";\n  src: url(\"../fonts/AkkuratMonoLLWeb-BoldItalic.woff\") format(\"woff\");\n  font-weight: bold;\n  font-style: italic;\n}\n@font-face {\n  font-family: \"Futura PT W08 Book\";\n  src: url(\"../fonts/FuturaBook.woff2\") format(\"woff2\"), url(\"../fonts/FuturaBook.woff\") format(\"woff\");\n}\n@font-face {\n  font-family: \"Futura PT W08 Medium\";\n  src: url(\"../fonts/FuturaMedium.woff2\") format(\"woff2\"), url(\"../fonts/FuturaMedium.woff\") format(\"woff\");\n}\n@font-face {\n  font-family: \"Futura PT W08 Demi\";\n  src: url(\"../fonts/FuturaDemi.woff2\") format(\"woff2\"), url(\"../fonts/FuturaDemi.woff\") format(\"woff\");\n}\n/*\n*   CSS Variables (custom properties)\n*/\n/* all .less variables have been converted over to CSS variables then we can delete them */\n:root {\n  /* COLORS */\n  --text-color: var(--brand-secondary);\n  --border-color: var(--brand-secondary-light-3);\n  /*\n    * TYPOGRAPHY\n    * ==========================================================================\n    */\n  /* fonts */\n  --font-stack: \"Arial\", sans-serif;\n  /* Font Size */\n  --base-font-size: 1rem;\n  --font-size-large: calc(var(--base-font-size) * 1.25);\n  --font-size-small: calc(var(--base-font-size) * 0.875);\n  /* Font Weight */\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-bold: 700;\n  --font-weight-base: var(--font-weight-normal);\n  /* line heights */\n  --line-height-base: 1.5;\n  /*\n    * Spacing\n    * ===========================================================================\n    */\n  /* Spacer */\n  --spacer: 1rem;\n  /* Default */\n  /* Margin */\n  --base-margin: var(--spacer);\n  --base-margin-xs: calc(var(--base-margin) / 4);\n  --base-margin-sm: calc(var(--base-margin) / 2);\n  --base-margin-lg: calc(var(--base-margin) * 1.5);\n  --base-margin-xl: calc(var(--base-margin) * 2);\n  --base-margin-xxl: calc(var(--base-margin) * 4);\n  /* Padding */\n  --base-padding: var(--spacer);\n  --base-padding-xs: calc(var(--base-padding) / 4);\n  --base-padding-sm: calc(var(--base-padding) / 2);\n  --base-padding-lg: calc(var(--base-padding) * 1.5);\n  --base-padding-xl: calc(var(--base-padding) * 2);\n  --base-padding-xxl: calc(var(--base-padding) * 4);\n  --vscroll-padding-right: 17px;\n  /* Forms spacing */\n  --input-padding-x: 16px;\n  --input-padding-y: 12px;\n  --border-width: 1px;\n  --border-width-focus: 2px;\n  --border-width-diff-focus: calc(var(--border-width-focus, 2px) - var(--border-width, 1px));\n  --border-radius-modal: 20px;\n  --border-radius-expandable: 16px;\n  /**\n\t*Z-indexes\n\t*/\n  --tooltip-z-index: 1100;\n  --skip-link-active-z-index: 1000;\n  --toast-z-index: 700;\n  --dialog-z-index: 600;\n  --sheet-z-index: 500;\n  --action-list-z-index: 450;\n  --topbar-z-index: 400;\n  --sidebar-z-index: 400;\n  --datepicker-z-index: 150;\n  --dropdown-z-index: 150;\n  --navigation-z-index: 100;\n  --progress-steps-z-index: 100;\n  --tabs-z-index: 100;\n  --skip-link-z-index: -100;\n}\n/*\n* Scaffolding\n* -------------------------------------------------- */\n/* Reset the box-sizing\n*\n* Heads up! This reset may cause conflicts with some third-party widgets.\n* For recommendations on resolving such conflicts, see\n* http://getbootstrap.com/getting-started/#third-box-sizing\n*/\n/* Body reset */\nhtml {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  height: 100%;\n  scroll-behavior: smooth;\n  line-height: 1.15;\n  /* 1 */\n  text-size-adjust: 100%;\n  /* 2 */\n}\n@media (min-width: 1199.98px) {\n  html {\n    scroll-snap-type: y mandatory;\n  }\n}\nbody {\n  font-family: var(--font-stack);\n  font-size: var(--base-font-size);\n  line-height: var(--line-height-base, 1.5);\n  color: var(--brand-secondary);\n  background-color: var(--white);\n  height: 100%;\n  margin: 0;\n}\nbody.no-vscroll {\n  overflow-x: hidden;\n}\nbody.no-scroll {\n  overflow: hidden;\n}\nbody.has-vscroll {\n  overflow: hidden;\n}\n@media screen and (min-width: 576px) {\n  body.has-vscroll {\n    padding-right: var(--vscroll-padding-right, 17px);\n  }\n  body.has-vscroll .dialog {\n    padding-right: var(--vscroll-padding-right, 17px);\n  }\n}\n/* Reset fonts for relevant elements */\ninput,\nbutton,\nselect,\ntextarea {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n/* Unordered and Ordered lists */\nul,\nol {\n  margin-top: 0;\n  margin-bottom: var(--base-margin);\n}\nul ul,\nol ul,\nul ol,\nol ol {\n  margin-bottom: 0;\n}\n/* Only display content to screen readers\n*\n* See: http://a11yproject.com/posts/how-to-hide-content/ */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: rect(0 0 0 0);\n  border: 0;\n}\n/* Use in conjunction with .sr-only to only display content when it's focused.\n* Useful for \"Skip to main content\" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n* Credit: HTML5 Boilerplate\n*/\n.sr-only-focusable:active,\n.sr-only-focusable:focus {\n  position: static;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  clip-path: none;\n}\n/* iOS \"clickable elements\" fix for role=\"button\"\n*\n* Fixes \"clickability\" issue (and more generally, the firing of events such as focus as well)\n* for traditionally non-focusable elements with role=\"button\"\n* see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n* Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged\n*/\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\n    MIXINS\n*/\n/* stylelint-disable less/color-no-invalid-hex, less/no-duplicate-variables */\n/* stylelint-enable */\n* {\n  box-sizing: border-box;\n}\n#designguide {\n  --fullscreen-z-index: 10000;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n}\n#designguide .designguide-header {\n  z-index: var(--topbar-z-index, 400);\n}\n#designguide pre {\n  font-size: 87.5%;\n}\n#designguide .color-preview {\n  display: grid;\n  gap: 1rem 2.5rem;\n  grid-template-columns: 1fr;\n}\n#designguide .color-preview svg {\n  width: 100%;\n}\n#designguide .color-preview figcaption {\n  line-height: 1.25rem;\n  margin-top: 0.25rem;\n}\n@media screen and (min-width: 576px) {\n  #designguide .color-preview {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n}\n#designguide .sp-wrapper {\n  margin-bottom: 1rem;\n}\n#designguide .sp-wrapper > div:not(.sp-stack) {\n  font-size: initial;\n  line-height: 1.5;\n  color: var(--brand-secondary);\n}\n#designguide .showcase-panel {\n  --preview-min-height: 200px;\n}\n#designguide .showcase-panel .sc-highlight {\n  background-color: rgba(86, 61, 124, 0.15);\n  border: 1px solid rgba(86, 61, 124, 0.15);\n}\n#designguide .showcase-panel .showcase-grid .row > [class*=\"col\"] {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  background: #f9f8f6;\n  border: 1px solid rgba(153, 153, 153, 0.8);\n}\n#designguide .showcase-panel .showcase-grid .row + .row {\n  margin-top: 1rem;\n}\n#designguide .showcase-panel .showcase-grid.showcase-vertical-space .row {\n  background: #f9f8f6;\n  height: 10rem;\n}\n#designguide .showcase-panel iframe {\n  min-height: var(--preview-min-height);\n}\n#designguide .browser-support-table th,\n#designguide .browser-support-table tr {\n  text-align: center;\n  vertical-align: middle;\n}\n#designguide .browser-support-table svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  display: inline-block;\n}\n#designguide figure {\n  margin: 0;\n}\n#designguide figure td:focus-visible {\n  outline: 2px solid var(--brand-primary);\n  border-radius: 2px;\n}\n#designguide figure button:focus-visible {\n  outline: 2px solid var(--brand-primary);\n  border-radius: 2px;\n}\n#designguide figure .code-toolbar > .toolbar {\n  opacity: 1;\n}\n#designguide figure .code-toolbar > .toolbar > .toolbar-item a {\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  border: 0;\n  box-shadow: none;\n}\n#designguide figure .code-toolbar > .toolbar > .toolbar-item a:hover {\n  color: #ffffff;\n  background: var(--brand-primary);\n}\n#designguide #loading-component {\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n}\n#designguide #loading-component .loader {\n  margin-top: 10rem;\n}\n#designguide .glow-on-hover {\n  cursor: pointer;\n  position: relative;\n  z-index: 0;\n}\n#designguide .glow-on-hover:before {\n  content: \"\";\n  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  background-size: 400%;\n  z-index: -1;\n  filter: blur(5px);\n  width: calc(100% + 4px);\n  height: calc(100% + 4px);\n  animation: glowing 20s linear infinite;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n#designguide .glow-on-hover:hover:before {\n  opacity: 1;\n}\n#designguide .glow-on-hover:after {\n  z-index: -1;\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background-color: inherit;\n  border-radius: inherit;\n}\n@keyframes glowing {\n  0% {\n    background-position: 0 0;\n  }\n  50% {\n    background-position: 400% 0;\n  }\n  100% {\n    background-position: 0 0;\n  }\n}\n@supports selector(:has(a, b)) {\n  body[data-preview-expanded-has-vscroll]:has(#designguide) {\n    overflow: hidden;\n  }\n}\n@supports not selector(:has(a, b)) {\n  body[data-preview-expanded-has-vscroll] {\n    overflow: hidden;\n  }\n}\n.search-container {\n  position: absolute;\n  margin-top: 1rem;\n  right: 1rem;\n  z-index: 103;\n}\n.search-container:focus-visible {\n  outline: 2px solid var(--brand-secondary);\n  border-radius: 2px;\n}\n.search-container .form-group {\n  margin-bottom: 0;\n}\n.search-container .form-group .input-container:focus-within + button {\n  border-color: transparent;\n}\n.search-container .form-group:focus-visible {\n  outline: 2px solid var(--brand-secondary);\n  border-radius: 2px;\n}\n.search-container .form-group input {\n  width: 21rem;\n}\n.search-container .form-group button.hint-shortcuts {\n  position: absolute;\n  top: 0.8rem;\n  right: 2.5rem;\n  border-color: transparent;\n  background: none;\n}\n.search-container .form-group button.hint-shortcuts:hover {\n  border-color: transparent;\n}\n.search-container .form-group button.hint-shortcuts kbd {\n  border-radius: 3px;\n  background: color-mix(in oklab, var(--brand-primary-lighter), transparent 80%);\n  padding: 2px 6px;\n  margin: 2px;\n  color: var(--brand-secondary-light-1);\n}\n.search-container .form-group button i {\n  color: var(--brown-soft);\n}\n.search-container .form-group button:hover {\n  border-color: var(--brown-soft);\n}\n.search-container .form-group button:active,\n.search-container .form-group button:focus {\n  border-color: transparent;\n  box-shadow: none;\n}\n.search-container .form-group button:focus i,\n.search-container .form-group button:hover i {\n  color: var(--brand-secondary);\n  transform: scale(1.2);\n}\n.search-container .result-box {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: auto;\n  position: absolute;\n  z-index: 103;\n  background-color: var(--white);\n  border-radius: var(--border-radius, 8px);\n  max-height: 50vh;\n  overflow: auto;\n  box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.25);\n  padding-top: 0.5rem;\n}\n.search-container .result-box:focus-visible {\n  outline: 2px solid var(--brand-secondary);\n  border-radius: 2px;\n}\n.search-container .result-box .item-list {\n  margin-bottom: 0;\n}\n.search-container .result-box .item-list a {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  text-decoration: none;\n}\n.search-container .result-box .item-list a:focus-visible {\n  outline: 2px solid var(--brand-secondary);\n  outline-offset: -2px;\n  border-radius: 2px;\n}\n.search-container .result-box .item-list a li {\n  margin-left: 7px;\n  margin-right: 7px;\n}\n.search-container .result-box .item-list.item-list-hover li {\n  border-bottom: none;\n  height: 2rem;\n  padding: 0.5rem;\n  border-radius: 2px;\n}\n.search-container .result-box .item-list.item-list-hover li:hover {\n  background-color: #fbf2ea;\n  cursor: pointer;\n}\n.search-container .result-box .item-list.item-list-hover li span {\n  color: var(--brand-secondary);\n  display: inline-block;\n  position: relative;\n  z-index: 1;\n  text-decoration: none;\n}\n.search-container .result-box .item-list.item-list-hover li .directory {\n  color: var(--brown-soft);\n  font-size: 0.875rem;\n}\n.search-container.search-expander {\n  top: unset;\n  left: 1rem;\n  margin-top: 0;\n}\n.search-container.search-expander .form-group {\n  display: flex;\n}\n.search-container.search-expander .form-group #search-box:focus + button {\n  border-color: var(--brown-soft);\n}\n.search-container.search-expander .form-group button {\n  position: absolute;\n  right: 0;\n  top: -1.4rem;\n  height: 2.5rem;\n  border-left: 1px solid;\n  border-color: var(--brown-solid);\n}\n.search-container.search-expander .form-group button i {\n  font-size: 1.25rem;\n  color: var(--brand-secondary);\n}\n.search-container.search-expander .form-group input {\n  display: none;\n}\n.search-container.search-expander.expanded {\n  display: grid;\n}\n.search-container.search-expander.expanded .form-group button {\n  position: unset;\n  right: unset;\n  height: 2.5rem;\n  border: 1px solid var(--brown-soft);\n  align-self: center;\n}\n.search-container.search-expander.expanded .form-group button:hover,\n.search-container.search-expander.expanded .form-group button:focus {\n  background-color: transparent;\n  outline-color: var(--brand-secondary);\n}\n.search-container.search-expander.expanded .form-group button:hover i,\n.search-container.search-expander.expanded .form-group button:focus i {\n  color: #000000;\n}\n.search-container.search-expander.expanded .form-group input {\n  display: block;\n  line-height: 1.5;\n  font-size: 0.875rem;\n  margin-right: 0.5rem;\n  width: 100%;\n}\n.documentation {\n  width: 100%;\n}\n.documentation .doc-container {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  padding: 2rem;\n  max-width: 46.375rem;\n}\n.documentation .doc-container h1:first-of-type {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.documentation .doc-container.utilities-page {\n  max-width: 70rem;\n  padding-top: 3rem;\n}\n.documentation .doc-container.dg-front-page {\n  position: relative;\n  max-width: 82rem;\n  /* Changelog */\n  /* Background images */\n}\n.documentation .doc-container.dg-front-page section {\n  min-height: 100vh;\n}\n.documentation .doc-container.dg-front-page .rotate-icon {\n  transform: rotate(180deg);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container {\n  padding-top: 3rem;\n  max-width: 70rem;\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container header {\n  line-height: 4rem;\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-small {\n  font-size: 2.5rem;\n  font-family: var(--brand-headline);\n  font-weight: var(--font-weight-bold);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-big {\n  font-size: 3.5rem;\n  font-family: var(--brand-headline);\n  font-weight: var(--font-weight-bold);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container .dg-version-indicator {\n  margin-top: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container .dg-version-indicator span {\n  padding: 0.5rem;\n  background-color: #fff3d5;\n  font-size: 1.25rem;\n  font-family: var(--brand-headline);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container .front-page-lead {\n  max-width: 38.75rem;\n  font-size: 1.25rem;\n  font-family: var(--font-stack);\n  line-height: 1.75rem;\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container .dg-cards-container {\n  max-width: 70rem;\n  z-index: 10;\n  /* Makes content appear above background image */\n}\n.documentation .doc-container.dg-front-page .dg-next-page-content {\n  display: flex;\n  justify-content: center;\n  position: relative;\n  color: inherit;\n  text-decoration: none;\n}\n.documentation .doc-container.dg-front-page .dg-next-page-content span {\n  font-size: 0.75rem;\n  padding-bottom: 2rem;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.documentation .doc-container.dg-front-page .dg-next-page-content > i {\n  position: absolute;\n  cursor: pointer;\n  animation: bounce 1.5s infinite;\n}\n.documentation .doc-container.dg-front-page .dg-next-page-content:hover {\n  font-weight: bold;\n}\n.documentation .doc-container.dg-front-page .dg-next-page-content:hover > i {\n  font-weight: bold;\n  animation-play-state: paused;\n}\n@keyframes bounce {\n  0% {\n    bottom: 0.15rem;\n  }\n  50% {\n    bottom: -0.15rem;\n  }\n  100% {\n    bottom: 0.15rem;\n  }\n}\n.documentation .doc-container.dg-front-page .dg-changelog-container .dg-changelog-content {\n  z-index: 10;\n  /* makes content appear above background images */\n  max-width: 70rem;\n}\n.documentation .doc-container.dg-front-page .dg-changelog-container .dg-changelog-content .dg-changlelog-title {\n  font-size: 1.5rem;\n  font-family: var(--brand-headline);\n}\n.documentation .doc-container.dg-front-page .dg-changelog-container .dg-changelog-content .dg-changlelog-title .dg-changelog-divider {\n  width: 3.75rem;\n  height: 0.25rem;\n  background-color: var(--system-warning);\n  border-radius: 1.6rem;\n}\n.documentation .doc-container.dg-front-page .dg-changelog-container .dg-changelog-content .dg-changelog-description {\n  max-width: 47.25rem;\n}\n@media (min-width: 1199.98px) {\n  .documentation .doc-container.dg-front-page .dg-changelog-description {\n    margin-left: 2rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-version-indicator {\n    margin-top: 0.75rem;\n  }\n}\n@media (min-width: 576px) and (max-width: 991.98px) {\n  .documentation .doc-container.dg-front-page {\n    padding: 0 5rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container,\n  .documentation .doc-container.dg-front-page .dg-changelog-container {\n    padding-top: 1rem;\n    height: auto;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-small,\n  .documentation .doc-container.dg-front-page .dg-changelog-container header .dg-title-small {\n    font-size: 2rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-big,\n  .documentation .doc-container.dg-front-page .dg-changelog-container header .dg-title-big {\n    font-size: 2.5rem;\n  }\n}\n@media (max-width: 575.98px) {\n  .documentation .doc-container.dg-front-page .dg-front-page-container {\n    height: auto;\n    padding: 5rem 0;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container header {\n    line-height: 2rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-small {\n    font-size: 1.25rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-big {\n    font-size: 1.5rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container .front-page-ingress {\n    font-size: 1rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container .dg-version-indicator {\n    margin: 1rem 0;\n  }\n  .documentation .doc-container.dg-front-page .dg-front-page-container .dg-version-indicator .dg-version-indicator-text {\n    font-size: 0.875rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-changelog-container .dg-version-title {\n    min-width: 6rem;\n  }\n  .documentation .doc-container.dg-front-page .dg-changelog-container .dg-changelog-description {\n    padding-bottom: 0.5rem;\n  }\n}\n.documentation .doc-container.dg-front-page .background-img {\n  position: absolute;\n}\n.documentation .doc-container.dg-front-page .cluster-bubble {\n  left: 63.25rem;\n}\n.documentation .doc-container.dg-front-page .large-bubble {\n  top: 35%;\n  left: 73rem;\n}\n.documentation .doc-container.dg-front-page .two-bubbles {\n  bottom: 0;\n  right: 94%;\n}\n.documentation .doc-container.dg-front-page .single-bubble {\n  bottom: 3rem;\n  left: 94%;\n}\n@media (max-width: 991.98px) {\n  .documentation .doc-container {\n    padding-left: var(--base-padding);\n    padding-right: var(--base-padding);\n  }\n}\n.documentation .doc-container .dg-current-version {\n  font-size: 0.75rem;\n}\n.documentation .doc-container .component-overview {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n.documentation .doc-container .component-overview a {\n  width: 100%;\n  margin: 1.5rem 0 0;\n}\n@media (min-width: 768px) {\n  .documentation .doc-container .component-overview a {\n    max-width: 20.5rem;\n  }\n}\n.documentation .doc-container .component-overview.hide-arrow-icon i:last-child {\n  opacity: 0;\n  transition: 0.5s;\n}\n.documentation .doc-container .component-overview.hide-arrow-icon a:hover i {\n  opacity: 1;\n}\n.documentation .doc-container .container.playbook .row {\n  gap: 8px;\n}\n.documentation .doc-container .container.playbook .row img {\n  border-radius: 2px;\n}\n.documentation .doc-container .playbook-overview a.cards-secondary i {\n  color: var(--brand-turquoise);\n}\n.documentation .doc-container section:has(#design-profiles) .container .col {\n  padding: 2rem;\n  margin: 1rem;\n  border: 1px solid var(--brand-secondary-light-2);\n  text-align: center;\n  min-inline-size: 10rem;\n}\n.documentation .doc-container section:has(#design-profiles) .container .col:nth-child(1) {\n  border-radius: 50px;\n}\n.documentation .doc-container section:has(#design-profiles) .container .col:nth-child(2) {\n  border-radius: 20px;\n}\n.documentation .doc-container section:has(#design-profiles) .container .col:nth-child(3) {\n  border-radius: 0;\n}\n.documentation .doc-container .playbook-mozaic {\n  --gap: 10px;\n  --radius: 0;\n}\n.documentation .doc-container .playbook-mozaic .row {\n  gap: var(--gap);\n}\n.documentation .doc-container .playbook-mozaic .row > div {\n  padding-left: 0;\n  padding-right: 0;\n}\n.documentation .doc-container .playbook-mozaic .row img,\n.documentation .doc-container .playbook-mozaic .row video {\n  width: 100%;\n  object-fit: cover;\n  border-radius: var(--radius, 0);\n}\n.documentation .doc-container .playbook-mozaic .row img {\n  height: 100%;\n}\n.documentation .doc-container .playbook-mozaic .row video {\n  max-width: 100%;\n  max-height: 100%;\n}\n@media (max-width: 576px) {\n  .documentation .doc-container .playbook-mozaic .row video {\n    height: auto;\n    width: 100%;\n  }\n}\n.documentation .doc-container .playbook-glued-grid .row {\n  padding-left: 1px;\n  padding-right: 1px;\n}\n.documentation .doc-container .playbook-glued-grid .row img {\n  margin: -2px;\n}\n@media (max-width: 576px) {\n  .documentation .doc-container #bold-typography .playbook .row > div:nth-child(1) {\n    flex: 1;\n  }\n  .documentation .doc-container #bold-typography .playbook .row > div:nth-child(1) img {\n    height: 100%;\n    object-fit: fill;\n  }\n  .documentation .doc-container #bold-typography .playbook .row > div:nth-child(2) {\n    width: 35.5%;\n  }\n}\n@media (min-width: 576px) {\n  .documentation .doc-container .ratio-responsive-row {\n    aspect-ratio: var(--row-width) / var(--row-height);\n    height: calc(678px * var(--row-height) / var(--row-width));\n  }\n  .documentation .doc-container .ratio-responsive-row > div.col-sm {\n    height: 100%;\n  }\n  .documentation .doc-container .ratio-responsive-row > div.col-sm > img {\n    max-height: 100%;\n  }\n  .documentation .doc-container .ratio-responsive-row .col-sm {\n    flex-basis: initial;\n    flex-grow: initial;\n    max-width: initial;\n    position: static;\n    width: unset;\n    min-height: unset;\n    padding-right: unset;\n    padding-left: unset;\n  }\n  .documentation .doc-container .ratio-responsive-row .col-sm .w-100 {\n    width: auto;\n  }\n}\n.documentation .doc-container .grid-row.delicate-lines {\n  display: grid;\n  grid-template: \"one three four five\" 1fr \"two three four six\" 2fr / 1fr 1fr 1fr 1fr;\n  gap: 10px;\n}\n@media (max-width: 576px) {\n  .documentation .doc-container .grid-row.delicate-lines {\n    grid-template: \"one one\" auto \"two two\" auto \"three four\" auto \"five five\" auto \"six six\" auto / 1fr 1fr;\n  }\n}\n.documentation .doc-container .grid-row.delicate-lines img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 3px;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(1) {\n  grid-area: one;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(2) {\n  grid-area: two;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(3) {\n  grid-area: three;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(4) {\n  grid-area: four;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(5) {\n  grid-area: five;\n}\n.documentation .doc-container .grid-row.delicate-lines img:nth-child(6) {\n  grid-area: six;\n}\n.documentation .doc-container figure figcaption {\n  color: var(--text-muted);\n}\n.documentation .doc-container .shift-right-1 {\n  margin-right: -1px;\n}\n.documentation .doc-container .shift-left-1 {\n  margin-left: -1px;\n}\n.documentation .doc-container section {\n  margin-bottom: 2rem;\n}\n.documentation .doc-container section > h3 {\n  margin-top: 2rem;\n}\n.documentation .doc-sidebar {\n  height: auto;\n  position: sticky;\n}\n.documentation .sidebar-heading {\n  background: #fdc311;\n  box-shadow: 1px 0 0 0 #fdc311;\n  padding-left: 1.25rem;\n  height: 80px;\n}\n.documentation .sidebar-heading h1 {\n  color: var(--text-color);\n  margin: 0;\n  font-weight: var(--font-weight-normal);\n  line-height: 80px;\n}\n.documentation .documentation-nav {\n  padding: var(--base-padding);\n  max-height: calc(100vh - 226px);\n  overflow-y: hidden;\n}\n.documentation .documentation-nav:hover {\n  overflow-y: auto;\n}\n.documentation .documentation-nav .nav-group {\n  margin-bottom: var(--base-margin);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.075);\n}\n.documentation .documentation-nav .nav-group:first-child {\n  padding-top: 1rem;\n  border-top: 1px solid rgba(0, 0, 0, 0.075);\n}\n.documentation .documentation-nav .nav-group a {\n  width: 100%;\n  padding: 0.25rem 0;\n  text-decoration: none;\n}\n.documentation .documentation-nav .nav-group a.active {\n  font-weight: var(--font-weight-bold);\n}\n.documentation .documentation-nav .nav-group .nav-heading {\n  display: flex;\n  align-items: flex-end;\n}\n.documentation .documentation-nav .nav-group .nav-heading > i.material-icons {\n  user-select: none;\n}\n.documentation .documentation-nav .nav-group .nav-heading > span {\n  padding: 0;\n  cursor: pointer;\n}\n.documentation .documentation-nav .nav-group .nav-heading > span:hover,\n.documentation .documentation-nav .nav-group .nav-heading > span:focus {\n  text-decoration: underline;\n}\n.documentation .documentation-nav .nav-group .nav-heading > span:active,\n.documentation .documentation-nav .nav-group .nav-heading > span:hover {\n  outline: 0;\n}\n.documentation .documentation-nav .nav-group .nav-heading > span:focus {\n  /* Default */\n  /* stylelint-disable-next-line declaration-property-value-no-unknown */\n  outline: 2px solid #2f2424;\n  /* Webkit */\n  outline: 5px auto -webkit-focus-ring-color;\n  outline-offset: -2px;\n}\n.documentation .documentation-nav .nav-group .nav-heading i {\n  cursor: pointer;\n  color: rgba(47, 36, 36, 0.75);\n  margin-right: 0.25rem;\n  transition: transform 0.5s ease-in-out;\n}\n.documentation .documentation-nav .nav-group ul {\n  list-style: none;\n  padding: 0 2.25rem;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s;\n  font-size: 90%;\n}\n.documentation .documentation-nav .nav-group ul li {\n  display: flex;\n}\n.documentation .documentation-nav .nav-group.active .nav-heading > span {\n  font-weight: var(--font-weight-bold);\n}\n.documentation .documentation-nav .nav-group.active .nav-heading i {\n  transform: rotate(90deg);\n  transition: transform 0.2s;\n}\n.documentation .documentation-nav .nav-group.active ul {\n  /* max-height must be defined for transition to work. It is set to 1500px as it is a high number that most likely will cover the usage scenario. */\n  max-height: 1500px;\n  transition: max-height 1s ease-in-out;\n}\n.documentation .doc-view {\n  flex-grow: 1;\n  padding-left: 0;\n  padding-right: 0;\n  background: var(--bg-white);\n}\n.documentation .view-heading {\n  background: var(--brand-primary);\n  height: 80px;\n  border-left: 1px solid #fdc311;\n}\n.documentation .view-heading h2 {\n  color: var(--text-color);\n  padding-left: var(--base-padding-xl);\n  margin: 0;\n  font-weight: var(--font-weight-normal);\n  line-height: 80px;\n}\n@media (max-width: 767.98px) {\n  .documentation .doc-body {\n    padding-right: 1rem;\n  }\n}\n.documentation .doc-section-heading:before {\n  content: \"\";\n  display: block;\n  height: 100px;\n  margin: -100px 0 0;\n}\n.documentation .doc-toc {\n  position: sticky;\n  top: 32px;\n  font-size: 0.8rem;\n  line-height: 1.2;\n}\n.documentation .doc-toc ul {\n  list-style: none;\n  padding-left: 0;\n}\n.documentation .doc-toc ul li {\n  border-left: 1px solid rgba(0, 0, 0, 0.1);\n  padding: 0.5rem 0 0.5rem 1rem;\n}\n.documentation .doc-toc ul li.active {\n  border-left: 2px solid var(--brand-primary);\n  font-weight: var(--font-weight-bold);\n  padding-left: calc(var(--base-padding) - 1px);\n}\n.documentation .doc-toc ul li a {\n  text-decoration: none;\n}\n.documentation .status-list > li {\n  margin-bottom: 1rem;\n}\n.documentation .showcase-panel {\n  position: relative;\n  background-color: #ffffff;\n  padding: var(--base-padding-lg);\n  margin: var(--base-margin-sm) 0 0 0;\n  border-radius: 2px 0;\n  border: 1px solid var(--brand-secondary-light-3);\n}\n.documentation .showcase-panel.showcasepanel-sm {\n  max-width: 20rem;\n}\n.documentation .showcase-panel.showcase-panel-negative {\n  background-color: var(--brand-secondary);\n}\n.documentation .showcase-panel.showcase-panel-advanced {\n  padding: 0;\n  position: relative;\n}\n@media screen and (max-width: 767.98px) {\n  .documentation .showcase-panel.showcase-panel-advanced.options-active:after {\n    content: \"\";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background-color: rgba(34, 34, 34, 0.5);\n    z-index: 100;\n  }\n}\n.documentation .showcase-panel.showcase-panel-advanced #undefined-ul {\n  border-bottom: 1px solid var(--brown-light);\n}\n.documentation .showcase-panel.showcase-panel-advanced #undefined-ul .active a {\n  display: none;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) {\n  margin: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  border-bottom: none;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example).tabs-fade-right:after {\n  right: 56px;\n  height: 39px;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example).tabs-fade-right:has(.options-open.d-none):after {\n  right: 0;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example).tabs-fade-left:before {\n  height: 39px;\n  left: 0;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) ul {\n  position: relative;\n  width: 100%;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) ul:before {\n  content: \"\";\n  position: absolute;\n  bottom: 2px;\n  width: 100%;\n  border-bottom: 1px solid var(--brand-secondary-light-3);\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) ul#undefined-ul:before {\n  border-color: transparent;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) ul > button[aria-label^=\"Expand\"],\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) ul > button[aria-label^=\"Zoom\"] {\n  width: 30px;\n  height: 30px;\n  margin: 4px;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) .options-open {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  height: 40px;\n  border-bottom: 1px solid var(--brand-secondary-light-3);\n  padding: 0 1rem;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) .options-open.hidden {\n  display: none;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) .options-open button.open-options-menu {\n  all: unset;\n}\n.documentation .showcase-panel.showcase-panel-advanced .tabs:not(#tabs-showcase-example) .options-open button:focus {\n  border-radius: 0.125rem;\n  box-shadow: 0 0 0 2px var(--black);\n  outline: 2px solid transparent;\n}\n@supports not selector(:has(a, b)) {\n  .documentation .showcase-panel.showcase-panel-advanced .tabs + div.d-flex > div.d-flex {\n    max-width: 100%;\n  }\n}\n@supports selector(:has(a, b)) {\n  .documentation .showcase-panel.showcase-panel-advanced .tabs + div > div:has(> .component-preview) {\n    max-width: 100%;\n  }\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview {\n  margin-top: 2.5rem;\n  border-bottom: 1px solid var(--brand-secondary-light-3);\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content {\n  position: relative;\n  min-height: 9.5rem;\n  height: 100%;\n  padding: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content.editable-preview {\n  padding: 0;\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content.component-preview-alt-background {\n  background-color: var(--brand-primary);\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content form {\n  z-index: 100;\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content .loader-preview-container {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content .loader-preview-container.dark {\n  background-color: var(--brand-secondary);\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content:has(input[type=\"checkbox\"].theme-white) {\n  background: var(--gray);\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-description {\n  padding: 2rem;\n  height: 100%;\n}\n.documentation .showcase-panel.showcase-panel-advanced .component-description h3 {\n  margin-top: 0;\n}\n.documentation .showcase-panel.showcase-panel-advanced .options {\n  background-color: #ffffff;\n  display: none;\n  min-width: 0;\n  border-left: 1px solid var(--brand-secondary-light-3);\n  transition: min-width 1s ease-in-out;\n  z-index: calc(100 + 2);\n}\n@media screen and (max-width: 767.98px) {\n  .documentation .showcase-panel.showcase-panel-advanced .options {\n    position: absolute;\n    right: 0;\n    height: 100%;\n  }\n}\n.documentation .showcase-panel.showcase-panel-advanced .options.active {\n  display: block;\n  min-width: 12.5rem;\n  overflow-y: auto;\n}\n.documentation .showcase-panel.showcase-panel-advanced .options .options-header {\n  padding: 0 1rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--brand-secondary-light-3);\n  height: 2.5rem;\n}\n.documentation .showcase-panel.showcase-panel-advanced .options .options-header .options-close {\n  all: unset;\n  cursor: pointer;\n}\n.documentation .showcase-panel.showcase-panel-advanced .options .options-header .options-close:focus {\n  border: none;\n  border-radius: 0.125rem;\n  box-shadow: 0 0 0 2px var(--black);\n}\n.documentation .showcase-panel.showcase-panel-advanced .options .options-body {\n  padding: 1rem;\n}\n.documentation .showcase-panel.showcase-panel-advanced.hide-options .options {\n  display: none;\n}\n.documentation .showcase-panel.preview-expanded {\n  position: fixed;\n  width: 100vw;\n  left: 0;\n  z-index: var(--fullscreen-z-index, 10000);\n  top: 0;\n  height: 100vh;\n  margin: 0;\n}\n.documentation .icon-preview {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.documentation .examples-faq-logo {\n  width: 20%;\n  max-width: 200px;\n  min-width: 120px;\n}\n.documentation .javascript-doc-element-description {\n  line-height: 1.75rem;\n  margin-top: 2rem;\n}\n.documentation .logotype-icon-table {\n  height: 170px;\n}\n.documentation .logotype-vertical-measure {\n  width: 170px;\n}\n.documentation .logotype-horizontal-measure {\n  height: 184px;\n}\n.documentation .logotype-misuse-donts {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n.documentation .logotype-misuse-donts .logotype-misuse-donts-img {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 9.75rem;\n  background-color: var(--white);\n  padding: 2rem;\n}\n.documentation .imagery-misuse-donts-img {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 9.75rem;\n  padding: 2rem;\n}\n.documentation .caption-text {\n  margin-top: 1rem;\n  font-style: italic;\n  font-size: 0.875rem;\n}\n.documentation .typography-typefaces .illustration {\n  display: flex;\n  justify-content: center;\n  padding: 3.5rem 0;\n  background-color: #f9f8f6;\n  font-size: 3.5rem;\n}\n.documentation .typography-typefaces .illustration > div {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 2rem;\n}\n.documentation .typography-typefaces .illustration > div > span {\n  font-size: 1rem;\n}\n.documentation .typography-typefaces .swedbank-headline {\n  font-family: var(--brand-headline);\n}\n.documentation .typography-typefaces .arial {\n  font-family: var(--brand-default);\n}\n.documentation .typography-typefaces .akkurat-mono {\n  font-family: var(--brand-monofont);\n}\n.documentation .typography-table td {\n  height: 6.125rem;\n}\n.documentation .typography-table td p {\n  line-height: var(--line-height-base);\n}\n.documentation .identity-colors .color-page-introduction .color-circle {\n  width: clamp(30px, 7vw, 55px);\n  height: clamp(30px, 7vw, 55px);\n  margin: clamp(0.2rem, 3vw, 1rem);\n  aspect-ratio: 1;\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brown-solid {\n  background-color: var(--brown-solid);\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brand-yellow {\n  background-color: var(--brand-yellow);\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brand-orange {\n  background-color: var(--brand-orange);\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brand-pink {\n  background-color: var(--brand-pink);\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brand-turquoise-light {\n  background-color: var(--brand-turquoise-light);\n}\n.documentation .identity-colors .color-page-introduction .color-circle.brand-turquoise {\n  background-color: var(--brand-turquoise);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(1) {\n  transform: translateY(10px);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(2) {\n  transform: translateY(-15px);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(3) {\n  transform: translateY(-25px);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(4) {\n  transform: translateY(-10px);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(5) {\n  transform: translateY(15px);\n}\n.documentation .identity-colors .color-page-introduction .color-circle:nth-child(6) {\n  transform: translateY(-10px);\n}\n.documentation .identity-colors .color-contrast-section {\n  border-radius: 10px;\n}\n.documentation .identity-colors .color-contrast-section i {\n  font-size: 1rem;\n  align-self: center;\n}\n.documentation .identity-colors .color-contrast-section i.check {\n  color: var(--system-success);\n}\n.documentation .identity-colors .color-contrast-section i.cancel {\n  color: var(--brand-error);\n}\n.documentation .identity-colors .color-contrast-section i.warning {\n  color: var(--system-warning);\n}\n.documentation .identity-colors .color-group {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n.documentation .identity-colors .color-group.color-group-table {\n  display: grid;\n  grid-template-columns: repeat(4, auto);\n  gap: 1rem;\n  grid-template-rows: repeat(8, auto);\n}\n.documentation .identity-colors .color-group.color-group-table .table-header-row {\n  grid-column: 1 / span 4;\n  display: grid;\n  grid-template-columns: subgrid;\n  color: var(--text-muted-light);\n}\n.documentation .identity-colors .color-group.color-group-table .table-row {\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-column: span 4;\n  grid-row: span 1;\n}\n.documentation .identity-colors .color-group.color-grid {\n  display: grid;\n  justify-content: space-evenly;\n  gap: 5px 30px;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n.documentation .identity-colors .color-group.grid-columns {\n  container-type: inline-size;\n}\n.documentation .identity-colors .color-group.grid-columns .containerized-grid {\n  display: grid;\n  grid-auto-flow: column;\n  gap: 5px 30px;\n}\n@container (min-width: 0) {\n  .documentation .identity-colors .color-group.grid-columns .containerized-grid {\n    grid-template-columns: repeat(1, 1fr);\n    grid-template-rows: repeat(27, 1fr);\n  }\n}\n@container (min-width: calc(200px * 2 + 30px * 1)) {\n  .documentation .identity-colors .color-group.grid-columns .containerized-grid {\n    grid-template-columns: repeat(2, 200px);\n    grid-template-rows: repeat(15, 1fr);\n  }\n}\n@container (min-width: calc(200px * 3 + 30px * 2)) {\n  .documentation .identity-colors .color-group.grid-columns .containerized-grid {\n    grid-template-rows: repeat(9, 1fr);\n  }\n}\n.documentation .identity-colors .color-group .color-box {\n  height: 7.1875rem;\n  width: 7.1875rem;\n  margin-right: 1rem;\n  border-radius: 2.1875rem;\n  aspect-ratio: 1;\n  overflow: hidden;\n}\n.documentation .identity-colors .color-group .color-box-small {\n  height: 3.0625rem;\n  width: 3.0625rem;\n  margin-right: 1rem;\n  border-radius: 0.875rem;\n  background: var(--bg-color);\n  aspect-ratio: 1;\n}\n.documentation .identity-colors .color-group div:is(.color-box, .color-box-small) svg {\n  width: 100%;\n  height: 100%;\n}\n.documentation .identity-colors .color-group div:is(.color-box, .color-box-small) svg rect {\n  rx: 5px;\n  width: 100%;\n  height: 100%;\n}\n.documentation .identity-colors .color-group .text-box {\n  margin-top: 4px;\n}\n.documentation .identity-colors .color-group .text-box small {\n  color: #72605e;\n}\n.documentation #slab-doc .component-preview {\n  background-color: #f9f8f6;\n}\n.documentation #slab-doc .slab {\n  min-width: 15.6rem;\n  min-height: 12.5rem;\n  max-width: 95%;\n}\n.documentation #slab-arrow .showcase-panel {\n  background-color: #f9f8f6;\n}\n.documentation #input-field-doc #input-field-overview .form-group {\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n}\n.documentation #input-field-doc .form-group {\n  min-width: 20rem;\n  max-width: 21.25rem;\n}\n.documentation #input-field-doc .component-description {\n  min-height: auto;\n}\n.documentation #input-field-doc .component-description h3 {\n  margin-top: 0;\n}\n.documentation #input-field-doc textarea {\n  height: 8.125rem;\n}\n.documentation #input-field-doc .placeholder-guideline .form-group {\n  width: 100%;\n  min-width: unset;\n}\n.documentation #input-field-doc #developer-documentation-container .form-group {\n  margin: auto;\n}\n.documentation .browser-support {\n  display: flex;\n  justify-content: space-between;\n}\n.documentation .browser-support div {\n  display: flex;\n  align-items: center;\n}\n.documentation .browser-support div img {\n  width: 2rem;\n}\n.documentation .browser-support div p {\n  margin: 0 0.5rem;\n}\n.documentation .spacing-table tbody th {\n  font-weight: normal;\n}\n.documentation .lightbox img {\n  cursor: zoom-in;\n  border: 1px solid transparent;\n}\n.documentation .lightbox img:hover {\n  border: 1px solid var(--brand-secondary);\n}\n.documentation .lightbox + img {\n  display: none;\n}\n.documentation .lightbox.active {\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: rgba(58, 58, 58, 0.904);\n  z-index: 450;\n}\n.documentation .lightbox.active img {\n  margin: 2rem;\n  width: 90%;\n  background-color: #ffffff;\n  cursor: zoom-out;\n}\n.documentation .lightbox.active + img {\n  display: block;\n}\n.documentation i.help-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--brand-secondary);\n}\n.documentation #select-doc .form-group {\n  width: 21.25rem;\n}\n@media screen and (max-width: 575.98px) {\n  .documentation #select-doc .form-group {\n    max-width: 17.25rem;\n  }\n}\n.documentation #select-doc .how-to-use .form-group {\n  width: 100%;\n}\n@media screen and (max-width: 575.98px) {\n  .documentation #select-doc .slab-border-error {\n    margin-top: 1.5rem;\n  }\n}\n.documentation #select-doc .showcase-panel .form-group {\n  margin: auto;\n}\n.documentation .no-pointer-events {\n  pointer-events: none;\n}\n.documentation #togglebox-doc .slab {\n  min-height: 12.875rem;\n}\n.documentation #togglebox-doc .slab .slab-content {\n  margin: 0.125rem;\n  background-color: #ffffff;\n  min-height: 8.5rem;\n}\n.documentation #togglebox-doc .slab .slab-content button {\n  margin-left: 0.25rem;\n}\n.documentation #togglebox-doc .checked-example-container {\n  width: 50px;\n}\n.documentation .v-flip {\n  transform: scaleY(-1);\n}\n.documentation #checkbox-doc .showcase-panel .component-preview-content form {\n  max-width: 100%;\n}\n.documentation #checkbox-doc .slab-border-error,\n.documentation #checkbox-doc .slab-border-success {\n  min-height: 19rem;\n}\n@media screen and (min-width: 767.98px) {\n  .documentation #checkbox-doc .error-state-container .checkbox-group.has-error {\n    width: 50%;\n    margin: auto;\n  }\n}\n.documentation #radio-button-doc #how-to-container .slab {\n  min-height: 18rem;\n}\n.documentation .small-text {\n  font-size: 0.875rem;\n}\n.documentation #skip-link-overview #skip-link-example {\n  margin-top: 3rem;\n}\n.documentation #checkbox-overview .component-preview-content {\n  justify-content: flex-start;\n}\n.documentation #loader-page-overview .component-preview-content {\n  padding: 7.5rem;\n}\n.documentation #loader-page-overview .component-preview-content .loader-preview-container.dark {\n  background-color: #493c3b;\n}\n.documentation #loader-page-overview .component-preview-content #loaders-how-to-use .slab {\n  height: 15.375rem;\n}\n.documentation .text-align-center {\n  text-align: center;\n}\n.documentation #link-doc .link-dark-background {\n  background-color: var(--brand-secondary);\n  border-radius: var(--border-radius, 8px);\n}\n.documentation #link-doc .link-dark-background a:focus-visible {\n  outline: 2px solid var(--brand-primary);\n  border-radius: 2px;\n}\n.documentation #link-doc #action-link-container .slab-border-error .action-link {\n  margin-bottom: 0;\n}\n.documentation #tabs-overview #tabs-scroll-example-dont {\n  border-bottom: none;\n}\n.documentation #tabs-overview #tabs-scroll-example-dont > ul {\n  border-bottom: 1px solid #d4c4bc;\n}\n.documentation #tabs-overview .showcase-panel .component-preview-content {\n  padding: 0;\n}\n.documentation #tabs-overview .showcase-panel .component-preview-content .tabs.tabs-scroll {\n  max-width: 29.7rem;\n  margin-left: 0;\n}\n@media screen and (max-width: 575.98px) {\n  .documentation #tabs-overview .showcase-panel .component-preview-content {\n    max-width: 22.5rem;\n  }\n}\n.documentation #tabs-overview .showcase-panel .component-preview-content .tabs-example-container {\n  width: 80%;\n}\n.documentation #toast-doc .toast-example-container #toast-container {\n  position: relative;\n  top: auto;\n  right: 0;\n  z-index: 0;\n  margin: initial;\n}\n.documentation #toast-doc .toast-example-container #toast-container .toast {\n  animation: 0s;\n}\n.documentation #toast-doc .slab-border-success .toast-example-container {\n  position: relative;\n  height: 20rem;\n  margin-top: 1rem;\n  margin-right: 1.75rem;\n  top: 1rem;\n  left: -1rem;\n  border: 1px dashed;\n  border-left: 0;\n  border-bottom: 0;\n}\n.documentation #toast-doc .slab-border-error .toast-example-container {\n  border: 1px dashed;\n  padding: 6rem 0;\n}\n.documentation .overflow-auto {\n  overflow: auto;\n}\n.documentation .forms-radio-example legend {\n  line-height: 1rem;\n  margin-bottom: 1rem;\n}\n.documentation #logotype-doc .logotype-display div {\n  display: flex;\n  height: 10rem;\n  width: 10rem;\n  justify-content: center;\n  align-items: center;\n}\n.documentation #logotype-doc .logotype-display div.background-light {\n  background-color: #f9f8f6;\n}\n.documentation #logotype-doc .logotype-display div.background-primary {\n  background-color: var(--brand-primary);\n}\n.documentation #logotype-doc #spacing-zone-doc table.table-plain tbody tr :last-child,\n.documentation #logotype-doc #spacing-zone-doc table.table-plain thead tr :last-child {\n  background-color: #fdf0d5;\n}\n.documentation #tag-overview #tag-dropdown-example {\n  width: 4.5rem;\n  margin-bottom: 1rem;\n}\n.documentation #accordion-doc .slab-border-error,\n.documentation #accordion-doc .slab-border-success {\n  height: 27rem;\n}\n.documentation #accordion-doc .accordion :focus-visible {\n  outline: 2px solid var(--brand-secondary);\n  border-radius: 2px;\n}\n.documentation #accordion-doc .accordion .accordion-body .example-accordion {\n  border: 2px dotted var(--brown-light);\n}\n.documentation #pagination-overview .component-preview-content {\n  padding: 0;\n}\n.documentation #pagination-overview .pagination.example {\n  pointer-events: none;\n}\n.documentation #pagination-overview .pagination.example .example-box {\n  width: 6rem;\n  height: 0.625rem;\n  background-color: var(--brand-secondary);\n  border-radius: 0.125rem;\n}\n.documentation #pagination-overview .pagination-content-box-example {\n  height: 2.5rem;\n  background-color: var(--bg-brown);\n  border-radius: 0.125rem;\n}\n.documentation #topbar-doc .component-preview-content {\n  padding: 1rem 0;\n}\n.documentation #topbar-doc .topbar {\n  z-index: calc(var(--sidebar-z-index, 400));\n}\n.documentation #topbar-doc .topbar:not(.experimental) {\n  z-index: calc(var(--sidebar-z-index, 400) - 1);\n}\n.documentation #topbar-doc .topbar:not(.experimental) + main {\n  height: 10rem;\n  background-color: #f9f8f6;\n}\n.documentation #sidebar-doc #sidebar-overview figure .code-view-table {\n  max-height: 35rem;\n  overflow: auto;\n}\n.documentation #sidebar-doc .component-preview-content #dg-sidebar.sidebar {\n  position: relative;\n  max-height: 45rem;\n}\n.documentation #sidebar-doc .component-preview-content #dg-sidebar ~ main {\n  min-height: auto;\n}\n.documentation #what-design-guide .lightbox.active img {\n  height: 90%;\n  width: auto;\n}\n.documentation .video {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  padding-top: 56.25%;\n}\n.documentation .video .responsive-iframe {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n.documentation #table-doc .table-align-example .table {\n  width: 75%;\n  margin: auto;\n}\n.documentation #table-doc .button-table-example .btn {\n  height: 2rem;\n  width: 5rem;\n  padding: 0 0.75rem;\n}\n.documentation #table-doc .button-table-example .btn:focus {\n  outline: 2px solid var(--brand-secondary);\n  border-radius: 2px;\n}\n.documentation #dropdown-doc .component-preview-content .dropdown .dropdown-menu {\n  z-index: calc(var(--dropdown-z-index, 150) + 3);\n}\n.documentation #button-utilities .button-utilities-container {\n  margin-top: 1rem;\n}\n.documentation #button-utilities .button-utilities-container .utility-container {\n  display: grid;\n  grid: auto-flow / 1fr 3fr;\n}\n.documentation #button-utilities .button-utilities-container .utility-container .code-tags {\n  height: fit-content;\n  width: fit-content;\n}\n.flag-icon-ps {\n  background-image: url(\"../icons/flags/4x3/ps.svg\");\n}\n.flag-icon-ug {\n  background-image: url(\"../icons/flags/4x3/ug.svg\");\n}\n.flag-icon-cu {\n  background-image: url(\"../icons/flags/4x3/cu.svg\");\n}\n.flag-icon-np {\n  background-image: url(\"../icons/flags/4x3/np.svg\");\n}\n.flag-icon-co {\n  background-image: url(\"../icons/flags/4x3/co.svg\");\n}\n@media (forced-colors: active) {\n  #designguide,\n  .documentation {\n    border: 2px solid;\n  }\n  #designguide #link-doc .link-dark-background a:focus-visible,\n  .documentation #link-doc .link-dark-background a:focus-visible {\n    outline: 1px solid transparent;\n  }\n  #designguide .options-close:focus,\n  .documentation .options-close:focus {\n    outline: 2px solid;\n  }\n  .search-container input {\n    border: 2px solid;\n  }\n  .options-open {\n    border: 2px solid;\n  }\n}\n@media (forced-colors: active) and (prefers-color-scheme: dark) {\n  .showcase-panel canvas {\n    filter: saturate(1000%);\n  }\n}\n/*# sourceMappingURL=documentation-swedbankpay.css.map */","@import \"variables-swedbankpay.less\";\n@import \"global.less\";\n\n#designguide {\n\t--fullscreen-z-index: 10000;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n\n\t.designguide-header {\n\t\tz-index: var(--topbar-z-index, 400);\n\t}\n\n\tpre {\n\t\tfont-size: 87.5%;\n\t}\n\n\t.color-preview {\n\t\tdisplay: grid;\n\t\tgap: 1rem 2.5rem;\n\t\tgrid-template-columns: 1fr;\n\n\t\tsvg {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\tfigcaption {\n\t\t\tline-height: 1.25rem;\n\t\t\tmargin-top: 0.25rem;\n\t\t}\n\t}\n\n\t@media screen and (min-width: @screen-sm-min) {\n\t\t.color-preview {\n\t\t\tgrid-template-columns: 1fr 1fr 1fr;\n\t\t}\n\t}\n\n\t// resetting the styles modified by the Sandpack sandbox\n\t.sp-wrapper {\n\t\tmargin-bottom: 1rem;\n\n\t\t& > div:not(.sp-stack) {\n\t\t\tfont-size: initial;\n\t\t\tline-height: 1.5;\n\t\t\tcolor: var(--brand-secondary);\n\t\t}\n\t}\n\n\t.showcase-panel {\n\t\t.sc-highlight {\n\t\t\tbackground-color: rgb(86 61 124 / 15%);\n\t\t\tborder: 1px solid rgb(86 61 124 / 15%);\n\t\t}\n\n\t\t.showcase-grid {\n\t\t\t.row {\n\t\t\t\t> [class*=\"col\"] {\n\t\t\t\t\tpadding-top: 0.5rem;\n\t\t\t\t\tpadding-bottom: 0.5rem;\n\t\t\t\t\tbackground: @light-gray;\n\t\t\t\t\tborder: 1px solid fade(@list-gray, 80%);\n\t\t\t\t}\n\n\t\t\t\t+ .row {\n\t\t\t\t\tmargin-top: 1rem;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.showcase-vertical-space {\n\t\t\t\t.row {\n\t\t\t\t\tbackground: @light-gray;\n\t\t\t\t\theight: 10rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t--preview-min-height: 200px;\n\n\t\tiframe {\n\t\t\tmin-height: var(--preview-min-height);\n\t\t}\n\t}\n\n\t.browser-support-table {\n\t\tth,\n\t\ttr {\n\t\t\ttext-align: center;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\tsvg {\n\t\t\twidth: 1.5rem;\n\t\t\theight: 1.5rem;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t}\n\n\t// Override the prism toolbar button rules\n\tfigure {\n\t\tmargin: 0;\n\n\t\ttd {\n\t\t\t&:focus-visible {\n\t\t\t\toutline: 2px solid var(--brand-primary);\n\t\t\t\tborder-radius: 2px;\n\t\t\t}\n\t\t}\n\n\t\tbutton:focus-visible {\n\t\t\toutline: 2px solid var(--brand-primary);\n\t\t\tborder-radius: 2px;\n\t\t}\n\n\t\t.code-toolbar {\n\t\t\t> .toolbar {\n\t\t\t\topacity: 1;\n\n\t\t\t\t> .toolbar-item {\n\t\t\t\t\ta {\n\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\tpadding: 0.25rem 0.5rem;\n\t\t\t\t\t\tborder-radius: 0.25rem;\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\tbox-shadow: none;\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tcolor: @white;\n\t\t\t\t\t\t\tbackground: var(--brand-primary);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#loading-component {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tflex-grow: 1;\n\n\t\t.loader {\n\t\t\tmargin-top: 10rem;\n\t\t}\n\t}\n\n\t.glow-on-hover {\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\tz-index: 0;\n\n\t\t&:before {\n\t\t\tcontent: \"\";\n\t\t\tbackground: linear-gradient(\n\t\t\t\t45deg,\n\t\t\t\t#ff0000,\n\t\t\t\t#ff7300,\n\t\t\t\t#fffb00,\n\t\t\t\t#48ff00,\n\t\t\t\t#00ffd5,\n\t\t\t\t#002bff,\n\t\t\t\t#7a00ff,\n\t\t\t\t#ff00c8,\n\t\t\t\t#ff0000\n\t\t\t);\n\t\t\tposition: absolute;\n\t\t\ttop: -2px;\n\t\t\tleft: -2px;\n\t\t\tbackground-size: 400%;\n\t\t\tz-index: -1;\n\t\t\tfilter: blur(5px);\n\t\t\twidth: calc(100% + 4px);\n\t\t\theight: calc(100% + 4px);\n\t\t\tanimation: glowing 20s linear infinite;\n\t\t\topacity: 0;\n\t\t\ttransition: opacity 0.3s ease-in-out;\n\t\t}\n\n\t\t&:hover:before {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&:after {\n\t\t\tz-index: -1;\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tbackground-color: inherit;\n\t\t\tborder-radius: inherit;\n\t\t}\n\n\t\t@keyframes glowing {\n\t\t\t0% {\n\t\t\t\tbackground-position: 0 0;\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\tbackground-position: 400% 0;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\tbackground-position: 0 0;\n\t\t\t}\n\t\t}\n\t}\n}\n\n@supports selector(:has(a, b)) {\n\tbody[data-preview-expanded-has-vscroll]:has(#designguide) {\n\t\toverflow: hidden;\n\t}\n}\n@supports not selector(:has(a, b)) {\n\tbody[data-preview-expanded-has-vscroll] {\n\t\toverflow: hidden;\n\t}\n}\n\n.search-container {\n\tposition: absolute;\n\tmargin-top: 1rem;\n\tright: 1rem;\n\tz-index: 103;\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--brand-secondary);\n\t\tborder-radius: 2px;\n\t}\n\n\t.form-group {\n\t\tmargin-bottom: 0;\n\n\t\t.input-container:focus-within + button {\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--brand-secondary);\n\t\t\tborder-radius: 2px;\n\t\t}\n\n\t\tinput {\n\t\t\twidth: 21rem;\n\t\t}\n\n\t\tbutton.hint-shortcuts {\n\t\t\tposition: absolute;\n\t\t\ttop: 0.8rem;\n\t\t\tright: 2.5rem;\n\t\t\tborder-color: transparent;\n\t\t\tbackground: none;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: transparent;\n\t\t\t}\n\n\t\t\t& kbd {\n\t\t\t\tborder-radius: 3px;\n\t\t\t\tbackground: color-mix(\n\t\t\t\t\tin oklab,\n\t\t\t\t\tvar(--brand-primary-lighter),\n\t\t\t\t\ttransparent 80%\n\t\t\t\t);\n\t\t\t\tpadding: 2px 6px;\n\t\t\t\tmargin: 2px;\n\t\t\t\tcolor: var(--brand-secondary-light-1);\n\t\t\t}\n\t\t}\n\n\t\tbutton {\n\t\t\ti {\n\t\t\t\tcolor: var(--brown-soft);\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: var(--brown-soft);\n\t\t\t}\n\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\tborder-color: transparent;\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t&:focus,\n\t\t\t&:hover {\n\t\t\t\ti {\n\t\t\t\t\tcolor: var(--brand-secondary);\n\t\t\t\t\ttransform: scale(1.2);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.result-box {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tposition: absolute;\n\t\tz-index: 103;\n\t\tbackground-color: var(--white);\n\t\tborder-radius: var(--border-radius, 8px);\n\t\tmax-height: 50vh;\n\t\toverflow: auto;\n\t\tbox-shadow: 1px 2px 20px rgb(0 0 0 / 25%);\n\t\tpadding-top: 0.5rem;\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--brand-secondary);\n\t\t\tborder-radius: 2px;\n\t\t}\n\n\t\t.item-list {\n\t\t\tmargin-bottom: 0;\n\n\t\t\ta {\n\t\t\t\tpadding-top: 0.25rem;\n\t\t\t\tpadding-bottom: 0.25rem;\n\t\t\t\ttext-decoration: none;\n\n\t\t\t\t&:focus-visible {\n\t\t\t\t\toutline: 2px solid var(--brand-secondary);\n\t\t\t\t\toutline-offset: -2px;\n\t\t\t\t\tborder-radius: 2px;\n\t\t\t\t}\n\n\t\t\t\tli {\n\t\t\t\t\tmargin-left: 7px;\n\t\t\t\t\tmargin-right: 7px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.item-list-hover {\n\t\t\t\tli {\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\theight: 2rem;\n\t\t\t\t\tpadding: 0.5rem;\n\t\t\t\t\tborder-radius: 2px;\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: @bg-primary;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\n\t\t\t\t\tspan {\n\t\t\t\t\t\tcolor: var(--brand-secondary);\n\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\tz-index: 1;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\n\t\t\t\t\t.directory {\n\t\t\t\t\t\tcolor: var(--brown-soft);\n\t\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.search-expander {\n\t\ttop: unset;\n\t\tleft: 1rem;\n\t\tmargin-top: 0;\n\n\t\t.form-group {\n\t\t\tdisplay: flex;\n\n\t\t\t#search-box:focus + button {\n\t\t\t\tborder-color: var(--brown-soft);\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0;\n\t\t\t\ttop: -1.4rem;\n\t\t\t\theight: 2.5rem;\n\t\t\t\tborder-left: 1px solid;\n\t\t\t\tborder-color: var(--brown-solid);\n\n\t\t\t\ti {\n\t\t\t\t\tfont-size: 1.25rem;\n\t\t\t\t\tcolor: var(--brand-secondary);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tinput {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&.expanded {\n\t\t\tdisplay: grid;\n\n\t\t\t.form-group {\n\t\t\t\tbutton {\n\t\t\t\t\tposition: unset;\n\t\t\t\t\tright: unset;\n\t\t\t\t\theight: 2.5rem;\n\t\t\t\t\tborder: 1px solid var(--brown-soft);\n\t\t\t\t\talign-self: center;\n\n\t\t\t\t\t&:hover,\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t\t\toutline-color: var(--brand-secondary);\n\n\t\t\t\t\t\ti {\n\t\t\t\t\t\t\tcolor: #000000;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tinput {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tline-height: 1.5;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\tmargin-right: 0.5rem;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n.documentation {\n\twidth: 100%;\n\n\t.doc-container {\n\t\twidth: 100%;\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t\tpadding: 2rem;\n\t\tmax-width: 46.375rem;\n\n\t\th1:first-of-type {\n\t\t\tmargin-top: 1rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t&.utilities-page {\n\t\t\tmax-width: 70rem;\n\t\t\tpadding-top: 3rem;\n\t\t}\n\n\t\t&.dg-front-page {\n\t\t\tposition: relative;\n\t\t\tmax-width: 82rem;\n\n\t\t\tsection {\n\t\t\t\tmin-height: 100vh;\n\t\t\t}\n\n\t\t\t.rotate-icon {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t.dg-front-page-container {\n\t\t\t\tpadding-top: 3rem;\n\t\t\t\tmax-width: 70rem;\n\n\t\t\t\theader {\n\t\t\t\t\tline-height: 4rem;\n\n\t\t\t\t\t.dg-title-small {\n\t\t\t\t\t\tfont-size: 2.5rem;\n\t\t\t\t\t\tfont-family: var(--brand-headline);\n\t\t\t\t\t\tfont-weight: var(--font-weight-bold);\n\t\t\t\t\t}\n\n\t\t\t\t\t.dg-title-big {\n\t\t\t\t\t\tfont-size: 3.5rem;\n\t\t\t\t\t\tfont-family: var(--brand-headline);\n\t\t\t\t\t\tfont-weight: var(--font-weight-bold);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.dg-version-indicator {\n\t\t\t\t\tmargin-top: 0.5rem;\n\t\t\t\t\tmargin-bottom: 1.5rem;\n\n\t\t\t\t\tspan {\n\t\t\t\t\t\tpadding: 0.5rem;\n\t\t\t\t\t\tbackground-color: #fff3d5;\n\t\t\t\t\t\tfont-size: 1.25rem;\n\t\t\t\t\t\tfont-family: var(--brand-headline);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.front-page-lead {\n\t\t\t\t\tmax-width: 38.75rem;\n\t\t\t\t\tfont-size: 1.25rem;\n\t\t\t\t\tfont-family: var(--font-stack);\n\t\t\t\t\tline-height: 1.75rem;\n\t\t\t\t}\n\n\t\t\t\t.dg-cards-container {\n\t\t\t\t\tmax-width: 70rem;\n\t\t\t\t\tz-index: 10; /* Makes content appear above background image */\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.dg-next-page-content {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: relative;\n\t\t\t\tcolor: inherit;\n\t\t\t\ttext-decoration: none;\n\n\t\t\t\tspan {\n\t\t\t\t\tfont-size: 0.75rem;\n\t\t\t\t\tpadding-bottom: 2rem;\n\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\n\t\t\t\t> i {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tanimation: bounce 1.5s infinite;\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\tfont-weight: bold;\n\n\t\t\t\t\t> i {\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tanimation-play-state: paused;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t@keyframes bounce {\n\t\t\t\t\t0% {\n\t\t\t\t\t\tbottom: 0.15rem;\n\t\t\t\t\t}\n\n\t\t\t\t\t50% {\n\t\t\t\t\t\tbottom: -0.15rem;\n\t\t\t\t\t}\n\n\t\t\t\t\t100% {\n\t\t\t\t\t\tbottom: 0.15rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Changelog */\n\t\t\t.dg-changelog-container {\n\t\t\t\t.dg-changelog-content {\n\t\t\t\t\tz-index: 10; /* makes content appear above background images */\n\t\t\t\t\tmax-width: 70rem;\n\n\t\t\t\t\t.dg-changlelog-title {\n\t\t\t\t\t\tfont-size: 1.5rem;\n\t\t\t\t\t\tfont-family: var(--brand-headline);\n\n\t\t\t\t\t\t.dg-changelog-divider {\n\t\t\t\t\t\t\twidth: 3.75rem;\n\t\t\t\t\t\t\theight: 0.25rem;\n\t\t\t\t\t\t\tbackground-color: var(--system-warning);\n\t\t\t\t\t\t\tborder-radius: 1.6rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.dg-changelog-description {\n\t\t\t\t\t\tmax-width: 47.25rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (min-width: @screen-lg-max) {\n\t\t\t\t.dg-changelog-description {\n\t\t\t\t\tmargin-left: 2rem;\n\t\t\t\t}\n\n\t\t\t\t.dg-version-indicator {\n\t\t\t\t\tmargin-top: 0.75rem;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {\n\t\t\t\tpadding: 0 5rem;\n\n\t\t\t\t.dg-front-page-container,\n\t\t\t\t.dg-changelog-container {\n\t\t\t\t\tpadding-top: 1rem;\n\t\t\t\t\theight: auto;\n\n\t\t\t\t\theader {\n\t\t\t\t\t\t.dg-title-small {\n\t\t\t\t\t\t\tfont-size: 2rem;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.dg-title-big {\n\t\t\t\t\t\t\tfont-size: 2.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (max-width: @screen-xs-max) {\n\t\t\t\t.dg-front-page-container {\n\t\t\t\t\theight: auto;\n\t\t\t\t\tpadding: 5rem 0;\n\n\t\t\t\t\theader {\n\t\t\t\t\t\tline-height: 2rem;\n\n\t\t\t\t\t\t.dg-title-small {\n\t\t\t\t\t\t\tfont-size: 1.25rem;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.dg-title-big {\n\t\t\t\t\t\t\tfont-size: 1.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.front-page-ingress {\n\t\t\t\t\t\tfont-size: 1rem;\n\t\t\t\t\t}\n\n\t\t\t\t\t.dg-version-indicator {\n\t\t\t\t\t\tmargin: 1rem 0;\n\n\t\t\t\t\t\t.dg-version-indicator-text {\n\t\t\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.dg-changelog-container {\n\t\t\t\t\t.dg-version-title {\n\t\t\t\t\t\tmin-width: 6rem;\n\t\t\t\t\t}\n\n\t\t\t\t\t.dg-changelog-description {\n\t\t\t\t\t\tpadding-bottom: 0.5rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Background images */\n\t\t\t.background-img {\n\t\t\t\tposition: absolute;\n\t\t\t}\n\n\t\t\t.cluster-bubble {\n\t\t\t\tleft: 63.25rem;\n\t\t\t}\n\n\t\t\t.large-bubble {\n\t\t\t\ttop: 35%;\n\t\t\t\tleft: 73rem;\n\t\t\t}\n\n\t\t\t.two-bubbles {\n\t\t\t\tbottom: 0;\n\t\t\t\tright: 94%;\n\t\t\t}\n\n\t\t\t.single-bubble {\n\t\t\t\tbottom: 3rem;\n\t\t\t\tleft: 94%;\n\t\t\t}\n\t\t}\n\n\t\t@media (max-width: @screen-md-max) {\n\t\t\tpadding-left: var(--base-padding);\n\t\t\tpadding-right: var(--base-padding);\n\t\t}\n\n\t\t.dg-current-version {\n\t\t\tfont-size: 0.75rem;\n\t\t}\n\n\t\t.component-overview {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: space-between;\n\n\t\t\ta {\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin: 1.5rem 0 0;\n\t\t\t}\n\n\t\t\t@media (min-width: @screen-md-min) {\n\t\t\t\ta {\n\t\t\t\t\tmax-width: 20.5rem;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.hide-arrow-icon {\n\t\t\t\ti:last-child {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransition: 0.5s;\n\t\t\t\t}\n\n\t\t\t\ta {\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\ti {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.container.playbook {\n\t\t\t.row {\n\t\t\t\tgap: 8px;\n\n\t\t\t\timg {\n\t\t\t\t\tborder-radius: 2px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.playbook-overview {\n\t\t\ta.cards-secondary i {\n\t\t\t\tcolor: var(--brand-turquoise);\n\t\t\t}\n\t\t}\n\n\t\t// in Playbook > Profiles > Design profiles\n\t\tsection:has(#design-profiles) .container .col {\n\t\t\tpadding: 2rem;\n\t\t\tmargin: 1rem;\n\t\t\tborder: 1px solid var(--brand-secondary-light-2);\n\t\t\ttext-align: center;\n\t\t\tmin-inline-size: 10rem;\n\n\t\t\t&:nth-child(1) {\n\t\t\t\tborder-radius: 50px;\n\t\t\t}\n\n\t\t\t&:nth-child(2) {\n\t\t\t\tborder-radius: 20px;\n\t\t\t}\n\n\t\t\t&:nth-child(3) {\n\t\t\t\tborder-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t.playbook-mozaic {\n\t\t\t--gap: 10px;\n\t\t\t--radius: 0;\n\n\t\t\t.row {\n\t\t\t\tgap: var(--gap);\n\n\t\t\t\t> div {\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tpadding-right: 0;\n\t\t\t\t}\n\n\t\t\t\timg,\n\t\t\t\tvideo {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tobject-fit: cover;\n\t\t\t\t\tborder-radius: var(--radius, 0);\n\t\t\t\t}\n\n\t\t\t\timg {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\n\t\t\t\tvideo {\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\n\t\t\t\t\t@media (max-width: @screen-sm-min) {\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.playbook-glued-grid {\n\t\t\t.row {\n\t\t\t\tpadding-left: 1px;\n\t\t\t\tpadding-right: 1px;\n\n\t\t\t\timg {\n\t\t\t\t\tmargin: -2px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t#bold-typography .playbook .row {\n\t\t\t@media (max-width: @screen-sm-min) {\n\t\t\t\t& > div:nth-child(1) {\n\t\t\t\t\tflex: 1;\n\n\t\t\t\t\timg {\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\tobject-fit: fill;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t& > div:nth-child(2) {\n\t\t\t\t\twidth: 35.5%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.ratio-responsive-row {\n\t\t\t@media (min-width: @screen-sm-min) {\n\t\t\t\taspect-ratio: var(--row-width) / var(--row-height);\n\t\t\t\theight: calc(678px * var(--row-height) / var(--row-width));\n\n\t\t\t\t> div.col-sm {\n\t\t\t\t\theight: 100%;\n\n\t\t\t\t\t> img {\n\t\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.col-sm {\n\t\t\t\t\tflex-basis: initial;\n\t\t\t\t\tflex-grow: initial;\n\t\t\t\t\tmax-width: initial;\n\t\t\t\t\tposition: static;\n\t\t\t\t\twidth: unset;\n\t\t\t\t\tmin-height: unset;\n\t\t\t\t\tpadding-right: unset;\n\t\t\t\t\tpadding-left: unset;\n\n\t\t\t\t\t.w-100 {\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.grid-row {\n\t\t\t&.delicate-lines {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template:\n\t\t\t\t\t\"one three four five\" 1fr\n\t\t\t\t\t\"two three four six\" 2fr\n\t\t\t\t\t/ 1fr 1fr 1fr 1fr;\n\t\t\t\tgap: 10px;\n\n\t\t\t\t@media (max-width: @screen-sm-min) {\n\t\t\t\t\tgrid-template:\n\t\t\t\t\t\t\"one one\" auto\n\t\t\t\t\t\t\"two two\" auto\n\t\t\t\t\t\t\"three four\" auto\n\t\t\t\t\t\t\"five five\" auto\n\t\t\t\t\t\t\"six six\" auto\n\t\t\t\t\t\t/ 1fr 1fr;\n\t\t\t\t}\n\n\t\t\t\timg {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tobject-fit: cover;\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(1) {\n\t\t\t\t\tgrid-area: one;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(2) {\n\t\t\t\t\tgrid-area: two;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(3) {\n\t\t\t\t\tgrid-area: three;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(4) {\n\t\t\t\t\tgrid-area: four;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(5) {\n\t\t\t\t\tgrid-area: five;\n\t\t\t\t}\n\n\t\t\t\timg:nth-child(6) {\n\t\t\t\t\tgrid-area: six;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfigure figcaption {\n\t\t\tcolor: var(--text-muted);\n\t\t}\n\n\t\t.shift-right-1 {\n\t\t\tmargin-right: -1px;\n\t\t}\n\n\t\t.shift-left-1 {\n\t\t\tmargin-left: -1px;\n\t\t}\n\n\t\tsection {\n\t\t\tmargin-bottom: 2rem;\n\n\t\t\t> h3 {\n\t\t\t\tmargin-top: 2rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.doc-sidebar {\n\t\theight: auto;\n\t\tposition: sticky;\n\t}\n\n\t.sidebar-heading {\n\t\tbackground: darken(@brand-primary, 5%);\n\t\tbox-shadow: 1px 0 0 0 darken(@brand-primary, 5%);\n\t\tpadding-left: 1.25rem;\n\t\theight: 80px;\n\n\t\th1 {\n\t\t\tcolor: var(--text-color);\n\t\t\tmargin: 0;\n\t\t\tfont-weight: var(--font-weight-normal);\n\t\t\tline-height: 80px;\n\t\t}\n\t}\n\n\t.documentation-nav {\n\t\tpadding: var(--base-padding);\n\t\tmax-height: calc(100vh - 226px);\n\t\toverflow-y: hidden;\n\n\t\t&:hover {\n\t\t\toverflow-y: auto;\n\t\t}\n\n\t\t.nav-group {\n\t\t\tmargin-bottom: var(--base-margin);\n\t\t\tborder-bottom: 1px solid rgb(0 0 0 / 7.5%);\n\n\t\t\t&:first-child {\n\t\t\t\tpadding-top: 1rem;\n\t\t\t\tborder-top: 1px solid rgb(0 0 0 / 7.5%);\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: 0.25rem 0;\n\t\t\t\ttext-decoration: none;\n\n\t\t\t\t&.active {\n\t\t\t\t\tfont-weight: var(--font-weight-bold);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.nav-heading {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: flex-end;\n\n\t\t\t\t> i.material-icons {\n\t\t\t\t\tuser-select: none;\n\t\t\t\t}\n\n\t\t\t\t> span {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tcursor: pointer;\n\n\t\t\t\t\t&:hover,\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:active,\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\toutline: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\t.tab-focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\ti {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tcolor: @text-muted;\n\t\t\t\t\tmargin-right: 0.25rem;\n\t\t\t\t\ttransition: transform 0.5s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tul {\n\t\t\t\tlist-style: none;\n\t\t\t\tpadding: 0 2.25rem;\n\t\t\t\tmax-height: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttransition: max-height 0.3s;\n\t\t\t\tfont-size: 90%;\n\n\t\t\t\tli {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.active {\n\t\t\t\t.nav-heading {\n\t\t\t\t\t> span {\n\t\t\t\t\t\tfont-weight: var(--font-weight-bold);\n\t\t\t\t\t}\n\n\t\t\t\t\ti {\n\t\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t\t\ttransition: transform 0.2s;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tul {\n\t\t\t\t\t/* max-height must be defined for transition to work. It is set to 1500px as it is a high number that most likely will cover the usage scenario. */\n\t\t\t\t\tmax-height: 1500px;\n\t\t\t\t\ttransition: max-height 1s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.doc-view {\n\t\tflex-grow: 1;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t\tbackground: var(--bg-white);\n\t}\n\n\t.view-heading {\n\t\tbackground: var(--brand-primary);\n\t\theight: 80px;\n\t\tborder-left: 1px solid darken(@brand-primary, 5%);\n\n\t\th2 {\n\t\t\tcolor: var(--text-color);\n\t\t\tpadding-left: var(--base-padding-xl);\n\t\t\tmargin: 0;\n\t\t\tfont-weight: var(--font-weight-normal);\n\t\t\tline-height: 80px;\n\t\t}\n\t}\n\n\t.doc-body {\n\t\t@media (max-width: @screen-sm-max) {\n\t\t\tpadding-right: 1rem;\n\t\t}\n\t}\n\n\t.doc-section-heading {\n\t\t&:before {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\theight: 100px;\n\t\t\tmargin: -100px 0 0;\n\t\t}\n\t}\n\n\t.doc-toc {\n\t\tposition: sticky;\n\t\ttop: 32px;\n\t\tfont-size: 0.8rem;\n\t\tline-height: 1.2;\n\n\t\tul {\n\t\t\tlist-style: none;\n\t\t\tpadding-left: 0;\n\n\t\t\tli {\n\t\t\t\tborder-left: 1px solid rgb(0 0 0 / 10%);\n\t\t\t\tpadding: 0.5rem 0 0.5rem 1rem;\n\n\t\t\t\t&.active {\n\t\t\t\t\tborder-left: 2px solid var(--brand-primary);\n\t\t\t\t\tfont-weight: var(--font-weight-bold);\n\t\t\t\t\tpadding-left: calc(var(--base-padding) - 1px);\n\t\t\t\t}\n\n\t\t\t\ta {\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.status-list {\n\t\t> li {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t}\n\n\t.showcase-panel {\n\t\tposition: relative;\n\t\tbackground-color: @white;\n\t\tpadding: var(--base-padding-lg);\n\t\tmargin: var(--base-margin-sm) 0 0 0;\n\t\tborder-radius: 2px 0;\n\t\tborder: 1px solid var(--brand-secondary-light-3);\n\n\t\t&.showcasepanel-sm {\n\t\t\tmax-width: 20rem;\n\t\t}\n\n\t\t&.showcase-panel-negative {\n\t\t\tbackground-color: var(--brand-secondary);\n\t\t}\n\n\t\t&.showcase-panel-advanced {\n\t\t\tpadding: 0;\n\t\t\tposition: relative;\n\n\t\t\t@media screen and (max-width: @screen-sm-max) {\n\t\t\t\t&.options-active {\n\t\t\t\t\t&:after {\n\t\t\t\t\t\tcontent: \"\";\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\tbackground-color: fade(@black, 50%);\n\t\t\t\t\t\tz-index: 100;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t//Hides the top bar when there is only one tab\n\t\t\t#undefined-ul {\n\t\t\t\tborder-bottom: 1px solid var(--brown-light);\n\n\t\t\t\t.active {\n\t\t\t\t\ta {\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.tabs {\n\t\t\t\t&:not(#tabs-showcase-example) {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tborder-bottom: none;\n\n\t\t\t\t\t&.tabs-fade-right {\n\t\t\t\t\t\t&:after {\n\t\t\t\t\t\t\tright: 56px; // width of options-open icon\n\t\t\t\t\t\t\theight: 39px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:has(.options-open.d-none):after {\n\t\t\t\t\t\t\tright: 0; // no need to shift left when options sidebar button is not displayed\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&.tabs-fade-left {\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\theight: 39px;\n\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tul {\n\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: \"\";\n\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\tbottom: 2px;\n\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\tborder-bottom: 1px solid var(--brand-secondary-light-3);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&#undefined-ul {\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tborder-color: transparent;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> button[aria-label^=\"Expand\"],\n\t\t\t\t\t\t> button[aria-label^=\"Zoom\"] {\n\t\t\t\t\t\t\twidth: 30px;\n\t\t\t\t\t\t\theight: 30px;\n\t\t\t\t\t\t\tmargin: 4px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.options-open {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tborder-bottom: 1px solid var(--brand-secondary-light-3);\n\t\t\t\t\t\tpadding: 0 1rem;\n\n\t\t\t\t\t\t&.hidden {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tbutton {\n\t\t\t\t\t\t\t&.open-options-menu {\n\t\t\t\t\t\t\t\tall: unset;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\tborder-radius: 0.125rem;\n\t\t\t\t\t\t\t\tbox-shadow: 0 0 0 2px var(--black);\n\t\t\t\t\t\t\t\toutline: 2px solid transparent;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// TODO: delete once support for has() is good enough\n\t\t\t\t// which means probably around mid-January 2024 for FF support on FF v.120 (Nov 2023) + 2 versions\n\t\t\t\t@supports not selector(:has(a, b)) {\n\t\t\t\t\t+ div.d-flex > div.d-flex {\n\t\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// prevents components inside doc component preview to overflow outside the component-preview container\n\t\t\t\t@supports selector(:has(a, b)) {\n\t\t\t\t\t+ div > div:has(> .component-preview) {\n\t\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.component-preview {\n\t\t\t\tmargin-top: 2.5rem;\n\t\t\t\tborder-bottom: 1px solid var(--brand-secondary-light-3);\n\n\t\t\t\t.component-preview-content {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tmin-height: 9.5rem;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\n\t\t\t\t\t// TODO: can be removed once we convert all components previews to the new Sandpack previews and not use the OldComponentPreview component anywhere anymore\n\t\t\t\t\t&.editable-preview {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&.component-preview-alt-background {\n\t\t\t\t\t\tbackground-color: var(--brand-primary);\n\t\t\t\t\t}\n\n\t\t\t\t\tform {\n\t\t\t\t\t\tz-index: 100;\n\t\t\t\t\t}\n\n\t\t\t\t\t.loader-preview-container {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t\t&.dark {\n\t\t\t\t\t\t\tbackground-color: var(--brand-secondary);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(input[type=\"checkbox\"].theme-white) {\n\t\t\t\t\t\tbackground: var(--gray);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.component-description {\n\t\t\t\tpadding: 2rem;\n\t\t\t\theight: 100%;\n\n\t\t\t\th3 {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.options {\n\t\t\t\t@media screen and (max-width: @screen-sm-max) {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tright: 0;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\n\t\t\t\tbackground-color: @white;\n\t\t\t\tdisplay: none;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder-left: 1px solid var(--brand-secondary-light-3);\n\t\t\t\ttransition: min-width 1s ease-in-out;\n\t\t\t\tz-index: calc(100 + 2);\n\n\t\t\t\t&.active {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmin-width: 12.5rem;\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t}\n\n\t\t\t\t.options-header {\n\t\t\t\t\tpadding: 0 1rem;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tborder-bottom: 1px solid var(--brand-secondary-light-3);\n\t\t\t\t\theight: 2.5rem;\n\n\t\t\t\t\t.options-close {\n\t\t\t\t\t\tall: unset;\n\t\t\t\t\t\tcursor: pointer;\n\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\tborder-radius: 0.125rem;\n\t\t\t\t\t\t\tbox-shadow: 0 0 0 2px var(--black);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.options-body {\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.hide-options {\n\t\t\t\t.options {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.preview-expanded {\n\t\t\tposition: fixed;\n\t\t\twidth: 100vw;\n\t\t\tleft: 0;\n\t\t\tz-index: var(--fullscreen-z-index, 10000);\n\t\t\ttop: 0;\n\t\t\theight: 100vh;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.icon-preview {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t}\n\n\t.examples-faq-logo {\n\t\twidth: 20%;\n\t\tmax-width: 200px;\n\t\tmin-width: 120px;\n\t}\n\n\t.javascript-doc-element-description {\n\t\tline-height: 1.75rem;\n\t\tmargin-top: 2rem;\n\t}\n\n\t.logotype-icon-table {\n\t\theight: 170px;\n\t}\n\n\t.logotype-vertical-measure {\n\t\twidth: 170px;\n\t}\n\n\t.logotype-horizontal-measure {\n\t\theight: 184px;\n\t}\n\n\t.logotype-misuse-donts {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t.logotype-misuse-donts-img {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 100%;\n\t\t\theight: 9.75rem;\n\t\t\tbackground-color: var(--white);\n\t\t\tpadding: 2rem;\n\t\t}\n\t}\n\n\t.imagery-misuse-donts-img {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 9.75rem;\n\t\tpadding: 2rem;\n\t}\n\n\t.caption-text {\n\t\tmargin-top: 1rem;\n\t\tfont-style: italic;\n\t\tfont-size: 0.875rem;\n\t}\n\n\t.typography-typefaces {\n\t\t.illustration {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\tpadding: 3.5rem 0;\n\t\t\tbackground-color: @light-gray;\n\t\t\tfont-size: 3.5rem;\n\n\t\t\t> div {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tmargin: 0 2rem;\n\n\t\t\t\t> span {\n\t\t\t\t\tfont-size: 1rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.swedbank-headline {\n\t\t\tfont-family: var(--brand-headline);\n\t\t}\n\n\t\t.arial {\n\t\t\tfont-family: var(--brand-default);\n\t\t}\n\n\t\t.akkurat-mono {\n\t\t\tfont-family: var(--brand-monofont);\n\t\t}\n\t}\n\n\t.typography-table td {\n\t\theight: 6.125rem;\n\n\t\tp {\n\t\t\tline-height: var(--line-height-base);\n\t\t}\n\t}\n\n\t.identity-colors {\n\t\t.color-page-introduction .color-circle {\n\t\t\twidth: clamp(30px, 7vw, 55px);\n\t\t\theight: clamp(30px, 7vw, 55px);\n\t\t\tmargin: clamp(0.2rem, 3vw, 1rem);\n\t\t\taspect-ratio: 1;\n\n\t\t\t&.brown-solid {\n\t\t\t\tbackground-color: var(--brown-solid);\n\t\t\t}\n\n\t\t\t&.brand-yellow {\n\t\t\t\tbackground-color: var(--brand-yellow);\n\t\t\t}\n\n\t\t\t&.brand-orange {\n\t\t\t\tbackground-color: var(--brand-orange);\n\t\t\t}\n\n\t\t\t&.brand-pink {\n\t\t\t\tbackground-color: var(--brand-pink);\n\t\t\t}\n\n\t\t\t&.brand-turquoise-light {\n\t\t\t\tbackground-color: var(--brand-turquoise-light);\n\t\t\t}\n\n\t\t\t&.brand-turquoise {\n\t\t\t\tbackground-color: var(--brand-turquoise);\n\t\t\t}\n\n\t\t\t&:nth-child(1) {\n\t\t\t\ttransform: translateY(10px);\n\t\t\t}\n\n\t\t\t&:nth-child(2) {\n\t\t\t\ttransform: translateY(-15px);\n\t\t\t}\n\n\t\t\t&:nth-child(3) {\n\t\t\t\ttransform: translateY(-25px);\n\t\t\t}\n\n\t\t\t&:nth-child(4) {\n\t\t\t\ttransform: translateY(-10px);\n\t\t\t}\n\n\t\t\t&:nth-child(5) {\n\t\t\t\ttransform: translateY(15px);\n\t\t\t}\n\n\t\t\t&:nth-child(6) {\n\t\t\t\ttransform: translateY(-10px);\n\t\t\t}\n\t\t}\n\n\t\t.color-contrast-section {\n\t\t\tborder-radius: 10px;\n\n\t\t\ti {\n\t\t\t\tfont-size: 1rem;\n\t\t\t\talign-self: center;\n\n\t\t\t\t&.check {\n\t\t\t\t\tcolor: var(--system-success);\n\t\t\t\t}\n\n\t\t\t\t&.cancel {\n\t\t\t\t\tcolor: var(--brand-error);\n\t\t\t\t}\n\n\t\t\t\t&.warning {\n\t\t\t\t\tcolor: var(--system-warning);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.color-group {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: space-around;\n\n\t\t\t&.color-group-table {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(4, auto);\n\t\t\t\tgap: 1rem;\n\t\t\t\tgrid-template-rows: repeat(8, auto);\n\n\t\t\t\t.table-header-row {\n\t\t\t\t\tgrid-column: 1 / span 4;\n\t\t\t\t\tdisplay: grid;\n\t\t\t\t\tgrid-template-columns: subgrid;\n\t\t\t\t\tcolor: var(--text-muted-light);\n\t\t\t\t}\n\n\t\t\t\t.table-row {\n\t\t\t\t\tdisplay: grid;\n\t\t\t\t\tgrid-template-columns: subgrid;\n\t\t\t\t\tgrid-column: span 4;\n\t\t\t\t\tgrid-row: span 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.color-grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tjustify-content: space-evenly;\n\t\t\t\tgap: 5px 30px;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n\t\t\t}\n\n\t\t\t&.grid-columns {\n\t\t\t\tcontainer-type: inline-size;\n\n\t\t\t\t.containerized-grid {\n\t\t\t\t\tdisplay: grid;\n\t\t\t\t\tgrid-auto-flow: column;\n\t\t\t\t\tgap: 5px 30px;\n\t\t\t\t}\n\t\t\t\t@container (min-width: 0) {\n\t\t\t\t\t.containerized-grid {\n\t\t\t\t\t\tgrid-template-columns: repeat(1, 1fr);\n\t\t\t\t\t\tgrid-template-rows: repeat(27, 1fr);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@container (min-width: calc(200px * 2 + 30px * 1)) {\n\t\t\t\t\t.containerized-grid {\n\t\t\t\t\t\tgrid-template-columns: repeat(2, 200px);\n\t\t\t\t\t\tgrid-template-rows: repeat(15, 1fr);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@container (min-width: calc(200px * 3 + 30px * 2)) {\n\t\t\t\t\t.containerized-grid {\n\t\t\t\t\t\tgrid-template-rows: repeat(9, 1fr);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.color-box {\n\t\t\t\theight: 7.1875rem;\n\t\t\t\twidth: 7.1875rem;\n\t\t\t\tmargin-right: 1rem;\n\t\t\t\tborder-radius: 2.1875rem;\n\t\t\t\taspect-ratio: 1;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.color-box-small {\n\t\t\t\theight: 3.0625rem;\n\t\t\t\twidth: 3.0625rem;\n\t\t\t\tmargin-right: 1rem;\n\t\t\t\tborder-radius: 0.875rem;\n\t\t\t\tbackground: var(--bg-color);\n\t\t\t\taspect-ratio: 1;\n\t\t\t}\n\n\t\t\tdiv:is(.color-box, .color-box-small) {\n\t\t\t\tsvg {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\n\t\t\t\t\trect {\n\t\t\t\t\t\trx: 5px;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.text-box {\n\t\t\t\tmargin-top: 4px;\n\n\t\t\t\tsmall {\n\t\t\t\t\tcolor: @medium-brown;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#slab-doc {\n\t\t.component-preview {\n\t\t\tbackground-color: @light-gray;\n\t\t}\n\n\t\t.slab {\n\t\t\tmin-width: 15.6rem;\n\t\t\tmin-height: 12.5rem;\n\t\t\tmax-width: 95%;\n\t\t}\n\t}\n\n\t#slab-arrow {\n\t\t.showcase-panel {\n\t\t\tbackground-color: @light-gray;\n\t\t}\n\t}\n\n\t#input-field-doc {\n\t\t#input-field-overview {\n\t\t\t.form-group {\n\t\t\t\tmargin-top: 1rem;\n\t\t\t\tmargin-bottom: 2rem;\n\t\t\t}\n\t\t}\n\n\t\t.form-group {\n\t\t\tmin-width: 20rem;\n\t\t\tmax-width: 21.25rem;\n\t\t}\n\n\t\t.component-description {\n\t\t\tmin-height: auto;\n\n\t\t\th3 {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\ttextarea {\n\t\t\theight: 8.125rem;\n\t\t}\n\n\t\t.placeholder-guideline {\n\t\t\t.form-group {\n\t\t\t\twidth: 100%;\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\n\t\t#developer-documentation-container {\n\t\t\t.form-group {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t}\n\t}\n\n\t.browser-support {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\n\t\tdiv {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\n\t\t\timg {\n\t\t\t\twidth: 2rem;\n\t\t\t}\n\n\t\t\tp {\n\t\t\t\tmargin: 0 0.5rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.spacing-table {\n\t\ttbody {\n\t\t\tth {\n\t\t\t\tfont-weight: normal;\n\t\t\t}\n\t\t}\n\t}\n\n\t.lightbox {\n\t\timg {\n\t\t\tcursor: zoom-in;\n\t\t\tborder: 1px solid transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder: 1px solid var(--brand-secondary);\n\t\t\t}\n\t\t}\n\n\t\t+ img {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&.active {\n\t\t\tposition: fixed;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tbackground-color: rgb(58 58 58 / 90.4%);\n\t\t\tz-index: 450;\n\n\t\t\timg {\n\t\t\t\tmargin: 2rem;\n\t\t\t\twidth: 90%;\n\t\t\t\tbackground-color: #ffffff;\n\t\t\t\tcursor: zoom-out;\n\t\t\t}\n\n\t\t\t+ img {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n\n\ti {\n\t\t&.help-icon {\n\t\t\twidth: 1.25rem;\n\t\t\theight: 1.25rem;\n\t\t\tcolor: var(--brand-secondary);\n\t\t}\n\t}\n\n\t#select-doc {\n\t\t.form-group {\n\t\t\twidth: 21.25rem;\n\t\t\t@media screen and (max-width: @screen-xs-max) {\n\t\t\t\tmax-width: 17.25rem;\n\t\t\t}\n\t\t}\n\n\t\t.how-to-use {\n\t\t\t.form-group {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t@media screen and (max-width: @screen-xs-max) {\n\t\t\t.slab-border-error {\n\t\t\t\tmargin-top: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.showcase-panel {\n\t\t\t.form-group {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t}\n\t}\n\n\t.no-pointer-events {\n\t\tpointer-events: none;\n\t}\n\n\t#togglebox-doc {\n\t\t.slab {\n\t\t\tmin-height: 12.875rem;\n\n\t\t\t.slab-content {\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tbackground-color: @white;\n\t\t\t\tmin-height: 8.5rem;\n\n\t\t\t\tbutton {\n\t\t\t\t\tmargin-left: 0.25rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.checked-example-container {\n\t\t\twidth: 50px;\n\t\t}\n\t}\n\n\t.v-flip {\n\t\ttransform: scaleY(-1);\n\t}\n\n\t#checkbox-doc {\n\t\t.showcase-panel {\n\t\t\t.component-preview-content {\n\t\t\t\tform {\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.slab-border-error,\n\t\t.slab-border-success {\n\t\t\tmin-height: 19rem;\n\t\t}\n\n\t\t.error-state-container {\n\t\t\t.checkbox-group {\n\t\t\t\t&.has-error {\n\t\t\t\t\t@media screen and (min-width: @screen-sm-max) {\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\tmargin: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#radio-button-doc {\n\t\t#how-to-container {\n\t\t\t.slab {\n\t\t\t\tmin-height: 18rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.small-text {\n\t\tfont-size: 0.875rem;\n\t}\n\n\t#skip-link-overview {\n\t\t#skip-link-example {\n\t\t\tmargin-top: 3rem;\n\t\t}\n\t}\n\n\t#checkbox-overview {\n\t\t.component-preview-content {\n\t\t\tjustify-content: flex-start;\n\t\t}\n\t}\n\n\t#loader-page-overview .component-preview-content {\n\t\tpadding: 7.5rem;\n\n\t\t.loader-preview-container.dark {\n\t\t\tbackground-color: @dark-brown;\n\t\t}\n\n\t\t#loaders-how-to-use .slab {\n\t\t\theight: 15.375rem;\n\t\t}\n\t}\n\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n\n\t#link-doc {\n\t\t.link-dark-background {\n\t\t\tbackground-color: var(--brand-secondary);\n\t\t\tborder-radius: var(--border-radius, 8px);\n\n\t\t\ta:focus-visible {\n\t\t\t\toutline: 2px solid var(--brand-primary);\n\t\t\t\tborder-radius: 2px;\n\t\t\t}\n\t\t}\n\n\t\t#action-link-container {\n\t\t\t.slab-border-error {\n\t\t\t\t.action-link {\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#tabs-overview {\n\t\t#tabs-scroll-example-dont {\n\t\t\tborder-bottom: none;\n\n\t\t\t> ul {\n\t\t\t\tborder-bottom: 1px solid #d4c4bc;\n\t\t\t}\n\t\t}\n\n\t\t.showcase-panel {\n\t\t\t.component-preview-content {\n\t\t\t\tpadding: 0;\n\n\t\t\t\t.tabs {\n\t\t\t\t\t&.tabs-scroll {\n\t\t\t\t\t\tmax-width: 29.7rem;\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: @screen-xs-max) {\n\t\t\t\t\tmax-width: 22.5rem;\n\t\t\t\t}\n\n\t\t\t\t.tabs-example-container {\n\t\t\t\t\twidth: 80%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#toast-doc {\n\t\t.toast-example-container {\n\t\t\t#toast-container {\n\t\t\t\tposition: relative;\n\t\t\t\ttop: auto;\n\t\t\t\tright: 0;\n\t\t\t\tz-index: 0;\n\t\t\t\tmargin: initial;\n\n\t\t\t\t.toast {\n\t\t\t\t\tanimation: 0s;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.slab-border-success {\n\t\t\t.toast-example-container {\n\t\t\t\tposition: relative;\n\t\t\t\theight: 20rem;\n\t\t\t\tmargin-top: 1rem;\n\t\t\t\tmargin-right: 1.75rem;\n\t\t\t\ttop: 1rem;\n\t\t\t\tleft: -1rem;\n\t\t\t\tborder: 1px dashed;\n\t\t\t\tborder-left: 0;\n\t\t\t\tborder-bottom: 0;\n\t\t\t}\n\t\t}\n\n\t\t.slab-border-error {\n\t\t\t.toast-example-container {\n\t\t\t\tborder: 1px dashed;\n\t\t\t\tpadding: 6rem 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t.overflow-auto {\n\t\toverflow: auto;\n\t}\n\n\t.forms-radio-example {\n\t\tlegend {\n\t\t\tline-height: 1rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t}\n\n\t#logotype-doc {\n\t\t.logotype-display {\n\t\t\tdiv {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: 10rem;\n\t\t\t\twidth: 10rem;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\n\t\t\t\t&.background-light {\n\t\t\t\t\tbackground-color: @light-gray;\n\t\t\t\t}\n\n\t\t\t\t&.background-primary {\n\t\t\t\t\tbackground-color: var(--brand-primary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t#spacing-zone-doc {\n\t\t\ttable {\n\t\t\t\t&.table-plain {\n\t\t\t\t\ttbody,\n\t\t\t\t\tthead {\n\t\t\t\t\t\ttr {\n\t\t\t\t\t\t\t:last-child {\n\t\t\t\t\t\t\t\tbackground-color: #fdf0d5;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#tag-overview {\n\t\t#tag-dropdown-example {\n\t\t\twidth: 4.5rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t}\n\n\t#accordion-doc {\n\t\t.slab-border-error,\n\t\t.slab-border-success {\n\t\t\theight: 27rem;\n\t\t}\n\n\t\t.accordion {\n\t\t\t:focus-visible {\n\t\t\t\toutline: 2px solid var(--brand-secondary);\n\t\t\t\tborder-radius: 2px;\n\t\t\t}\n\n\t\t\t.accordion-body {\n\t\t\t\t.example-accordion {\n\t\t\t\t\tborder: 2px dotted var(--brown-light);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#pagination-overview {\n\t\t.component-preview-content {\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.pagination {\n\t\t\t&.example {\n\t\t\t\tpointer-events: none;\n\n\t\t\t\t.example-box {\n\t\t\t\t\twidth: 6rem;\n\t\t\t\t\theight: 0.625rem;\n\t\t\t\t\tbackground-color: var(--brand-secondary);\n\t\t\t\t\tborder-radius: 0.125rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.pagination-content-box-example {\n\t\t\theight: 2.5rem;\n\t\t\tbackground-color: var(--bg-brown);\n\t\t\tborder-radius: 0.125rem;\n\t\t}\n\t}\n\n\t#topbar-doc {\n\t\t.component-preview-content {\n\t\t\tpadding: 1rem 0;\n\t\t}\n\n\t\t.topbar {\n\t\t\tz-index: calc(var(--sidebar-z-index, 400));\n\n\t\t\t&:not(.experimental) {\n\t\t\t\tz-index: calc(var(--sidebar-z-index, 400) - 1);\n\n\t\t\t\t& + main {\n\t\t\t\t\theight: 10rem;\n\t\t\t\t\tbackground-color: @light-gray;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#sidebar-doc {\n\t\t#sidebar-overview {\n\t\t\tfigure {\n\t\t\t\t.code-view-table {\n\t\t\t\t\tmax-height: 35rem;\n\t\t\t\t\toverflow: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.component-preview-content {\n\t\t\t#dg-sidebar {\n\t\t\t\t&.sidebar {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tmax-height: 45rem;\n\t\t\t\t}\n\n\t\t\t\t~ main {\n\t\t\t\t\tmin-height: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#what-design-guide {\n\t\t.lightbox {\n\t\t\t&.active {\n\t\t\t\timg {\n\t\t\t\t\theight: 90%;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.video {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\twidth: 100%;\n\t\tpadding-top: 56.25%;\n\n\t\t.responsive-iframe {\n\t\t\tposition: absolute;\n\t\t\tinset: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t#table-doc {\n\t\t.table-align-example {\n\t\t\t.table {\n\t\t\t\twidth: 75%;\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t}\n\n\t\t.button-table-example {\n\t\t\t.btn {\n\t\t\t\theight: 2rem;\n\t\t\t\twidth: 5rem;\n\t\t\t\tpadding: 0 0.75rem;\n\n\t\t\t\t&:focus {\n\t\t\t\t\toutline: 2px solid var(--brand-secondary);\n\t\t\t\t\tborder-radius: 2px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#dropdown-doc .component-preview-content .dropdown .dropdown-menu {\n\t\tz-index: calc(var(--dropdown-z-index, 150) + 3);\n\t}\n\n\t#button-utilities {\n\t\t.button-utilities-container {\n\t\t\tmargin-top: 1rem;\n\n\t\t\t.utility-container {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid: auto-flow / 1fr 3fr;\n\n\t\t\t\t.code-tags {\n\t\t\t\t\theight: fit-content;\n\t\t\t\t\twidth: fit-content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n.flag-icon-ps {\n\tbackground-image: url(\"../icons/flags/4x3/ps.svg\");\n}\n\n.flag-icon-ug {\n\tbackground-image: url(\"../icons/flags/4x3/ug.svg\");\n}\n\n.flag-icon-cu {\n\tbackground-image: url(\"../icons/flags/4x3/cu.svg\");\n}\n\n.flag-icon-np {\n\tbackground-image: url(\"../icons/flags/4x3/np.svg\");\n}\n\n.flag-icon-co {\n\tbackground-image: url(\"../icons/flags/4x3/co.svg\");\n}\n\n@media (forced-colors: active) {\n\t#designguide,\n\t.documentation {\n\t\tborder: 2px solid;\n\n\t\t#link-doc {\n\t\t\t.link-dark-background {\n\t\t\t\ta:focus-visible {\n\t\t\t\t\toutline: 1px solid transparent;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.options-close {\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid;\n\t\t\t}\n\t\t}\n\t}\n\n\t.search-container {\n\t\tinput {\n\t\t\tborder: 2px solid;\n\t\t}\n\t}\n\n\t.options-open {\n\t\tborder: 2px solid;\n\t}\n}\n\n@media (forced-colors: active) and (prefers-color-scheme: dark) {\n\t.showcase-panel {\n\t\tcanvas {\n\t\t\tfilter: saturate(1000%);\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}