{"version":3,"file":"styles/documentation-payex.css","mappings":"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","sources":["webpack://@swedbankpay/design-guide/./variables-swedbankpay.less","webpack://@swedbankpay/design-guide/./src/less/documentation-payex.less","webpack://@swedbankpay/design-guide/./variables-payex.less","webpack://@swedbankpay/design-guide/./global.less","webpack://@swedbankpay/design-guide/./documentation-swedbankpay.less","webpack://@swedbankpay/design-guide/./documentation-payex.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","/* ==========================================================================\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/* ==========================================================================\n *\n * This file overrides variables with the PayEx brand theme\n *\n */\n/* OVERRIDES */\n/* Grayscale */\n/* Main Brand Color Variants */\n/* Background Colors */\n/* State colors */\n/* Checkbox */\n/* Button colors */\n/* Input */\n/* Panel */\n/* Other colors */\n/* Unused Bagde variables */\nhtml,\nbody {\n  font-family: var(--brand-default);\n}\nhtml p.lead,\nbody p.lead {\n  font-family: var(--brand-default);\n  font-weight: var(--font-weight-bold);\n}\n/* ==================================CSS VARIABLES========================================\n*\n* NEW CSS VARIABLES - work in progress\n*\n*/\n:root {\n  /* Grayscale */\n  --black: #000000;\n  --light-black: #2F2424;\n  --list-gray: #999999;\n  --light-gray: #f4f4f4;\n  --gray: #c8c8c8;\n  --white: #ffffff;\n  --soft-brown: #707070;\n  --medium-brown: #72605e;\n  --brown-medium: #72605e;\n  /* Main Brand Color Variants */\n  --brand-primary: #2a9d3f;\n  --brand-primary-light: var(--brand-primary, #2a9d3f);\n  --brand-primary-light-2: var(--brand-primary, #2a9d3f);\n  --brand-primary-light-3: var(--brand-primary, #2a9d3f);\n  /* below, faded LESS function, not possible in CSS yet, keep LESS equivalent until possible conversion */\n  /* TODO: to be converted: --brand-primary-faded:  fade(var(--brand-primary, #2A9D3F), 60%); */\n  --brand-secondary: #3c3c3c;\n  --brand-secondary-hover: var(--soft-brown, #707070);\n  --brand-secondary-light-1: var(--brand-secondary, #3c3c3c);\n  --brand-secondary-light-2: #c8c8c8;\n  --brand-secondary-light-3: var(--brand-secondary-light-2, #c8c8c8);\n  --brand-secondary-light-4: var(--brand-secondary, #3c3c3c);\n  --brand-secondary-info-1: var(--brand-secondary-light-3, #c8c8c8);\n  --brand-secondary-info-2: #efb7b6;\n  --brand-tertiary: var(--brand-primary, #2a9d3f);\n  --brand-accent: var(--brand-secondary, #3c3c3c);\n  --blue-bright: var(--brand-secondary-light-2, #c8c8c8);\n  --brand-accent-links: var(--brand-primary, #2a9d3f);\n  --payex-light-blue: #32b2dd;\n  --payex-dark-blue: #1e3a6e;\n  /* Background Colors */\n  --bg-primary: #e8f3e6;\n  --brand-bg-1: var(--bg-primary);\n  --brand-bg-2: #e8f3e6;\n  --brand-bg-3: #fbedf4;\n  --brand-bg-4: #eaf8fc;\n  --brand-bg-gray: var(--brand-secondary-light-2, #c8c8c8);\n  --bg-grey: var(--brand-secondary-light-2, #c8c8c8);\n  --bg-white: #ffffff;\n  --bg-quaternary: var(--list-gray, #999999);\n  /* State colors */\n  --system-success: #238635;\n  --brand-success: var(--system-success);\n  --system-success-light: #e8f3e6;\n  --brand-success-light: var(--system-success-light);\n  --system-success-light-2: var(--system-success, #238635);\n  --brand-success-light-2: var(--system-success-light-2);\n  --system-warning: #f35b1c;\n  --brand-warning: var(--system-warning);\n  --system-warning-light: #ffecd5;\n  --brand-warning-light: var(--system-warning-light);\n  --system-warning-2: #f35b1c;\n  --brand-warning-2: var(--system-warning-2);\n  --system-error-border: #f1bbb9;\n  --brand-error-border: var(--system-error-border);\n  --system-error: #c5131c;\n  --brand-error: var(--system-error);\n  --system-error-light: #ffebe3;\n  --brand-error-light: var(--system-error-light);\n  --system-info: #3e6ab6;\n  --brand-info: var(--system-info);\n  --system-info-light: #e8eff9;\n  --brand-info-light: var(--system-info-light);\n  --text-color: var(--brand-secondary);\n  --text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%);\n  --text-link: #1c7d2e;\n  --text-hover: var(--brand-primary);\n  --text-disabled: var(--brand-secondary-light-2);\n  --text-gray: var(--brand-secondary, #3c3c3c);\n  /* Checkbox */\n  --checkbox-checked-color: var(--brand-secondary, #3c3c3c);\n  /* BUTTONS COLORS */\n  --btn-hover: var(--brand-tertiary, #2a9d3f);\n  --primary-disabled-bg: #f5b895;\n  --secondary-disabled-bg: var(--brand-secondary-light-2);\n  --btn-primary-color: var(--brand-success, #238635);\n  --btn-primary-text-color: var(--white, #ffffff);\n  --btn-primary-bg: var(--brand-success, #238635);\n  --btn-primary-disabled-color: var(--white, #ffffff);\n  --btn-primary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);\n  /* btn-secondary */\n  --btn-secondary-color: transparent;\n  --btn-secondary-bg: var(--brand-secondary, #3c3c3c);\n  --btn-secondary-text-color: var(--brand-secondary, #3c3c3c);\n  --btn-secondary-border-color: var(--brand-secondary, #3c3c3c);\n  --btn-secondary-disabled-color: var(--white, #ffffff);\n  --btn-secondary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);\n  /* btn-tertiary */\n  --btn-tertiary-color: var(--brand-secondary, #3c3c3c);\n  --btn-tertiary-text-color: var(--white, #ffffff);\n  --btn-tertiary-disabled: var(--btn-bg-disabled, rgba(212, 196, 188, 0.3));\n  /* btn-destructive */\n  --destructive-disabled-bg: #f9ded3;\n  --btn-destructive-color: var(--white, #ffffff);\n  --btn-destructive-bg: var(--brand-error, #c5131c);\n  --btn-destructive-hover: #ee4e56;\n  --btn-destructive-disabled-color: var(--white, #ffffff);\n  --btn-destructive-disabled-bg: var(--destructive-disabled-bg, #f9ded3);\n  --btn-link-color: var(--brand-secondary, #3c3c3c);\n  --btn-link-disabled-color: var(--list-gray, #999999);\n  --link-hover-color: var(--brand-primary, #2a9d3f);\n  --link-color: var(--btn-primary-bg, #238635);\n  /* Shared button variables */\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-secondary, #3c3c3c);\n  /* INPUTS COLORS */\n  --input-color: var(--brand-secondary, #3c3c3c);\n  --input-bg: var(--white, #ffffff);\n  --input-bg-disabled: var(--white, #ffffff);\n  --input-checked-bg-disabled: var(--brand-secondary-light-3, #c8c8c8);\n  --input-addon-color: var(--brand-secondary, #3c3c3c);\n  --input-border-color: var(--brand-secondary-hover, #5f5f5f);\n  --input-border-focus-color: var(--brand-secondary, #3c3c3c);\n  --input-border-success-color: var(--brand-success);\n  --input-border-disabled-color: var(--brand-secondary-light-3, #c8c8c8);\n  /* Panel */\n  --panel-default-border-color: var(--brand-secondary-light-3, #c8c8c8);\n  /* Other colors */\n  --yellow-faded: #fbdd91;\n  --green-syntax-highlight: #99cc66;\n  --blue-syntax-highlight: #43d0dd;\n  --yellow-syntax-highlight: #fff3d5;\n  --dark-brown: var(--brand-secondary, #3c3c3c);\n  --brown-light: var(--brand-secondary-light-3, #c8c8c8);\n  --light-brown: var(--brown-light);\n  --help-block-text: #707070;\n  --tab-link: var(--help-block-text, #707070);\n  --radiobutton-border: var(--help-block-text, #707070);\n  --brand-green: #497125;\n  --brand-green-light: #70b63a;\n  /* UNIVERSAL UTILITIES */\n  --border-radius: 8px;\n  /* TYPOGRAPHY */\n  /* Brand fonts */\n  --brand-black: \"Futura PT W08 Medium\", sans-serif;\n  --brand-default: \"Futura PT W08 Book\", sans-serif;\n  --brand-default-buttons: \"Futura PT W08 Demi\", sans-serif;\n  --brand-monofont: monospace;\n  --brand-headline: \"Futura PT W08 Demi\", sans-serif;\n  --brand-font-default: \"Futura PT W08 Book\", 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-outlined);\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: #f4f4f4;\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: #f4f4f4;\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: #e8f3e6;\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: #258937;\n  box-shadow: 1px 0 0 0 #258937;\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 #3c3c3c;\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(60, 60, 60, 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 #258937;\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(0, 0, 0, 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: #f4f4f4;\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: #f4f4f4;\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: #f4f4f4;\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: #3c3c3c;\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: #f4f4f4;\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: #f4f4f4;\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.documentation .doc-container.dg-front-page img .background-img:is(\n\t\t\t.cluster-bubble,\n\t\t\t.single-bubble,\n\t\t\t.two-bubbles,\n\t\t\t.large-bubble\n\t\t) {\n  visibility: hidden;\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container .dg-version-indicator span {\n  background-color: var(--bg-primary);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container header .dg-title-big.my-0 {\n  font-family: var(--brand-headline);\n}\n.documentation .doc-container.dg-front-page .dg-front-page-container p.front-page-lead {\n  font-family: var(--brand-default);\n}\n/*# sourceMappingURL=documentation-payex.css.map */","/* ==========================================================================\n *\n * This file overrides variables with the PayEx brand theme\n *\n */\n\n/* OVERRIDES */\n\n/* Grayscale */\n@black: #000000;\n@list-gray: #999999;\n@light-gray: #f4f4f4;\n@white: #ffffff;\n@soft-brown: #707070;\n@medium-brown: #72605e;\n\n/* Main Brand Color Variants */\n@brand-primary: #2a9d3f;\n@brand-primary-light: @brand-primary;\n@brand-primary-light-2: @brand-primary;\n@brand-primary-light-3: @brand-primary;\n@brand-primary-faded: fade(@brand-primary, 60%);\n\n@brand-secondary: #3c3c3c;\n@brand-secondary-light-1: @brand-secondary;\n@brand-secondary-light-2: #c8c8c8;\n@brand-secondary-light-3: @brand-secondary-light-2;\n@brand-secondary-light-4: @brand-secondary;\n@brand-secondary-info-1: @brand-secondary-light-3;\n@brand-secondary-info-2: #efb7b6;\n\n@brand-tertiary: @brand-primary;\n@brand-accent: @brand-secondary;\n@blue-bright: @brand-secondary-light-2;\n@payex-light-blue: #32b2dd;\n@payex-dark-blue: #1e3a6e;\n@brand-complementary-3: #ef5434;\n\n/* Background Colors */\n@brand-bg-1: #e8f3e6;\n@brand-bg-2: #e8f3e6;\n@brand-bg-3: #fbedf4;\n@brand-bg-4: #eaf8fc;\n@brand-bg-gray: @brand-secondary-light-2;\n@brand-bg-white: #ffffff;\n@bg-quaternary: @list-gray;\n\n/* State colors */\n@brand-success: #238635;\n@brand-success-light: #e8f3e6;\n@brand-success-light-2: @brand-success;\n@brand-warning: #f35b1c;\n@brand-warning-light: #ffecd5;\n@brand-warning-2: #f35b1c;\n@brand-error-border: #f1bbb9;\n@brand-error: #c5131c;\n@brand-error-light: #ffebe3;\n@brand-error-dark: #c5131c;\n@brand-info: #3e6ab6;\n@brand-info-light: #e8eff9;\n\n/* Checkbox */\n@checkbox-checked-color: @brand-secondary;\n\n/* Button colors */\n@primary-disabled-bg: #f5b895;\n@secondary-disabled-bg: @brand-secondary-light-2;\n@destructive-disabled-bg: #f9ded3;\n\n@btn-primary-color: @white;\n@btn-primary-bg: @brand-success;\n@btn-primary-hover: @brand-tertiary;\n@btn-primary-disabled-color: @white;\n@btn-primary-disabled-bg: @brand-secondary-light-2;\n\n@btn-secondary-color: @white;\n@btn-secondary-bg: @brand-secondary;\n@btn-secondary-hover: @soft-brown;\n@btn-secondary-disabled-color: @white;\n@btn-secondary-disabled-bg: @brand-secondary-light-2;\n\n@btn-destructive-color: @white;\n@btn-destructive-bg: @brand-error;\n@btn-destructive-hover: #ee4e56;\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: @list-gray;\n@link-hover-color: @brand-primary;\n@link-color: @btn-primary-bg;\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: @brand-secondary;\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: #fff3d5;\n@dark-brown: @brand-secondary;\n@light-brown: @brand-secondary-light-3;\n@help-block-text: #707070;\n@tab-link: @help-block-text;\n@radiobutton-border: @help-block-text;\n\n/* Unused Bagde variables */\n@brand-primary-lighter: @brand-primary-light;\n@system-error: @brand-error;\n@system-info: @brand-info;\n@brand-apricot: @yellow-faded;\n@brand-blue: @payex-dark-blue;\n@brand-blue-light: @payex-light-blue;\n@brand-brown: @brand-secondary;\n@brown-medium: @brand-secondary-light-3;\n@brown-soft: @brand-secondary-light-2;\n@brown-light: @brand-secondary-light-3;\n@solid-brown: @brand-secondary-light-2;\n@brand-green: @brand-primary;\n@brand-green-light: @brand-success-light;\n@brand-orange: @brand-warning;\n@brand-turquoise: @brand-bg-4;\n@brand-turqouise-dark: @brand-bg-4;\n@brand-turqouise-darker: @brand-bg-4;\n@brand-turquoise-light: @brand-bg-4;\n@brand-turqouise-lighter: @brand-bg-4;\n@brand-pink: @brand-error-light;\n\nhtml,\nbody {\n\tfont-family: var(--brand-default);\n\n\tp {\n\t\t&.lead {\n\t\t\tfont-family: var(--brand-default);\n\t\t\tfont-weight: var(--font-weight-bold);\n\t\t}\n\t}\n}\n\n/* ==================================CSS VARIABLES========================================\n*\n* NEW CSS VARIABLES - work in progress\n*\n*/\n:root {\n\t/* Grayscale */\n\t--black: #000000;\n\t--light-black: #2F2424;\n\t--list-gray: #999999;\n\t--light-gray: #f4f4f4;\n\t--gray: #c8c8c8;\n\t--white: #ffffff;\n\t--soft-brown: #707070;\n\t--medium-brown: #72605e;\n\t--brown-medium: #72605e;\n\n\t/* Main Brand Color Variants */\n\t--brand-primary: #2a9d3f;\n\t--brand-primary-light: var(--brand-primary, #2a9d3f);\n\t--brand-primary-light-2: var(--brand-primary, #2a9d3f);\n\t--brand-primary-light-3: var(--brand-primary, #2a9d3f);\n\n\t/* below, faded LESS function, not possible in CSS yet, keep LESS equivalent until possible conversion */\n\n\t/* TODO: to be converted: --brand-primary-faded:  fade(var(--brand-primary, #2A9D3F), 60%); */\n\n\t--brand-secondary: #3c3c3c;\n\t--brand-secondary-hover: var(--soft-brown, #707070);\n\t--brand-secondary-light-1: var(--brand-secondary, #3c3c3c);\n\t--brand-secondary-light-2: #c8c8c8;\n\t--brand-secondary-light-3: var(--brand-secondary-light-2, #c8c8c8);\n\t--brand-secondary-light-4: var(--brand-secondary, #3c3c3c);\n\t--brand-secondary-info-1: var(--brand-secondary-light-3, #c8c8c8);\n\t--brand-secondary-info-2: #efb7b6;\n\t--brand-tertiary: var(--brand-primary, #2a9d3f);\n\t--brand-accent: var(--brand-secondary, #3c3c3c);\n\t--blue-bright: var(--brand-secondary-light-2, #c8c8c8);\n\t--brand-accent-links: var(--brand-primary, #2a9d3f);\n\t--payex-light-blue: #32b2dd;\n\t--payex-dark-blue: #1e3a6e;\n\n\t/* Background Colors */\n\t--bg-primary: #e8f3e6;\n\t--brand-bg-1: var(--bg-primary);\n\t--brand-bg-2: #e8f3e6;\n\t--brand-bg-3: #fbedf4;\n\t--brand-bg-4: #eaf8fc;\n\t--brand-bg-gray: var(--brand-secondary-light-2, #c8c8c8);\n\t--bg-grey: var(--brand-secondary-light-2, #c8c8c8);\n\t--bg-white: #ffffff;\n\t--bg-quaternary: var(--list-gray, #999999);\n\n\t/* State colors */\n\n\t--system-success: #238635;\n\t--brand-success: var(--system-success);\n\t--system-success-light: #e8f3e6;\n\t--brand-success-light: var(--system-success-light);\n\t--system-success-light-2: var(--system-success, #238635);\n\t--brand-success-light-2: var(--system-success-light-2);\n\t--system-warning: #f35b1c;\n\t--brand-warning: var(--system-warning);\n\t--system-warning-light: #ffecd5;\n\t--brand-warning-light: var(--system-warning-light);\n\t--system-warning-2: #f35b1c;\n\t--brand-warning-2: var(--system-warning-2);\n\t--system-error-border: #f1bbb9;\n\t--brand-error-border: var(--system-error-border);\n\t--system-error: #c5131c;\n\t--brand-error: var(--system-error);\n\t--system-error-light: #ffebe3;\n\t--brand-error-light: var(--system-error-light);\n\t--system-info: #3e6ab6;\n\t--brand-info: var(--system-info);\n\t--system-info-light: #e8eff9;\n\t--brand-info-light: var(--system-info-light);\n\n\t// text colors\n\t--text-color: var(--brand-secondary);\n\t--text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%);\n\t--text-link: #1c7d2e;\n\t--text-hover: var(--brand-primary);\n\t--text-disabled: var(--brand-secondary-light-2);\n\t--text-gray: var(--brand-secondary, #3c3c3c);\n\n\t/* Checkbox */\n\t--checkbox-checked-color: var(--brand-secondary, #3c3c3c);\n\n\t/* BUTTONS COLORS */\n\t--btn-hover: var(--brand-tertiary, #2a9d3f);\n\t--primary-disabled-bg: #f5b895;\n\t--secondary-disabled-bg: var(--brand-secondary-light-2);\n\t--btn-primary-color: var(--brand-success, #238635);\n\t--btn-primary-text-color: var(--white, #ffffff);\n\t--btn-primary-bg: var(--brand-success, #238635);\n\t--btn-primary-disabled-color: var(--white, #ffffff);\n\t--btn-primary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);\n\n\t/* btn-secondary */\n\t--btn-secondary-color: transparent;\n\t--btn-secondary-bg: var(--brand-secondary, #3c3c3c);\n\t--btn-secondary-text-color: var(--brand-secondary, #3c3c3c);\n\t--btn-secondary-border-color: var(--brand-secondary, #3c3c3c);\n\t--btn-secondary-disabled-color: var(--white, #ffffff);\n\t--btn-secondary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);\n\n\t/* btn-tertiary */\n\t--btn-tertiary-color: var(--brand-secondary, #3c3c3c);\n\t--btn-tertiary-text-color: var(--white, #ffffff);\n\t--btn-tertiary-disabled: var(--btn-bg-disabled, rgb(212 196 188 / 30%));\n\n\t/* btn-destructive */\n\t--destructive-disabled-bg: #f9ded3;\n\t--btn-destructive-color: var(--white, #ffffff);\n\t--btn-destructive-bg: var(--brand-error, #c5131c);\n\t--btn-destructive-hover: #ee4e56;\n\t--btn-destructive-disabled-color: var(--white, #ffffff);\n\t--btn-destructive-disabled-bg: var(--destructive-disabled-bg, #f9ded3);\n\t--btn-link-color: var(--brand-secondary, #3c3c3c);\n\t--btn-link-disabled-color: var(--list-gray, #999999);\n\t--link-hover-color: var(--brand-primary, #2a9d3f);\n\t--link-color: var(--btn-primary-bg, #238635);\n\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-secondary, #3c3c3c);\n\n\t/* INPUTS COLORS */\n\t--input-color: var(--brand-secondary, #3c3c3c);\n\t--input-bg: var(--white, #ffffff);\n\t--input-bg-disabled: var(--white, #ffffff);\n\t--input-checked-bg-disabled: var(--brand-secondary-light-3, #c8c8c8);\n\t--input-addon-color: var(--brand-secondary, #3c3c3c);\n\t--input-border-color: var(--brand-secondary-hover, #5f5f5f);\n\t--input-border-focus-color: var(--brand-secondary, #3c3c3c);\n\t--input-border-success-color: var(--brand-success);\n\t--input-border-disabled-color: var(--brand-secondary-light-3, #c8c8c8);\n\n\t/* Panel */\n\t--panel-default-border-color: var(--brand-secondary-light-3, #c8c8c8);\n\n\t/* Other colors */\n\t--yellow-faded: #fbdd91;\n\t--green-syntax-highlight: #99cc66;\n\t--blue-syntax-highlight: #43d0dd;\n\t--yellow-syntax-highlight: #fff3d5;\n\t--dark-brown: var(--brand-secondary, #3c3c3c);\n\t--brown-light: var(--brand-secondary-light-3, #c8c8c8);\n\t--light-brown: var(--brown-light);\n\t--help-block-text: #707070;\n\t--tab-link: var(--help-block-text, #707070);\n\t--radiobutton-border: var(--help-block-text, #707070);\n\t// copied from SwedbankPay brand colors - please PayEx people check it out and adapt where necessary\n\t--brand-green: #497125;\n\t--brand-green-light: #70b63a;\n\n\t/* UNIVERSAL UTILITIES */\n\t--border-radius: 8px;\n\n\t/* TYPOGRAPHY */\n\n\t/* Brand fonts */\n\t--brand-black: \"Futura PT W08 Medium\", sans-serif;\n\t--brand-default: \"Futura PT W08 Book\", sans-serif;\n\t--brand-default-buttons: \"Futura PT W08 Demi\", sans-serif;\n\t--brand-monofont: monospace;\n\t--brand-headline: \"Futura PT W08 Demi\", sans-serif;\n\t--brand-font-default: \"Futura PT W08 Book\", 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-outlined);\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","@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","@import \"variables-swedbankpay.less\";\n@import \"variables-payex.less\";\n@import \"documentation-swedbankpay.less\";\n\n.documentation .doc-container.dg-front-page {\n\timg\n\t\t.background-img:is(\n\t\t\t.cluster-bubble,\n\t\t\t.single-bubble,\n\t\t\t.two-bubbles,\n\t\t\t.large-bubble\n\t\t) {\n\t\tvisibility: hidden;\n\t}\n\n\t.dg-front-page-container {\n\t\t.dg-version-indicator span {\n\t\t\tbackground-color: var(--bg-primary);\n\t\t}\n\n\t\theader .dg-title-big.my-0 {\n\t\t\tfont-family: var(--brand-headline);\n\t\t}\n\n\t\tp.front-page-lead {\n\t\t\tfont-family: var(--brand-default);\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}