From 5d4790dd9aaca1fbe094cf46f5a6cb80719a3021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Wed, 15 Jan 2025 15:31:09 +0200 Subject: [PATCH 01/34] UHF-11098: Updated hds-react and hds-design-tokens to 4.1.0 --- package-lock.json | 25 +++++++++++++------------ package.json | 4 ++-- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8fe79c31d..884306e22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,8 +22,8 @@ "classnames": "^2.3.1", "focus-trap": "^7.5.4", "glob": "^11.0.0", - "hds-design-tokens": "^3.3.0", - "hds-react": "^3.3.0", + "hds-design-tokens": "^4.1.0", + "hds-react": "^4.1.0", "html-react-parser": "^5.0.11", "husky": "^9.0.0", "hyphenopoly": "^6.0.0", @@ -10798,20 +10798,21 @@ } }, "node_modules/hds-core": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/hds-core/-/hds-core-3.11.0.tgz", - "integrity": "sha512-405+8VHW4N3/y5ESWGOv6vUIbgp/DCYjQVpdVLsWg6RowrUwNk9VvU6N2ZpEP8HM3ujJYu/bcIQ6zzwvAOFMCA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/hds-core/-/hds-core-4.1.0.tgz", + "integrity": "sha512-GZ8NnzxrZ7pB75G0hnsc/IjIDLnxpp2oKJTjZ+hFJsesWytDTVG0l+hYnQeg3wWSFALHDq5kA0unitWVAzFOEQ==", "license": "MIT" }, "node_modules/hds-design-tokens": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/hds-design-tokens/-/hds-design-tokens-3.3.0.tgz", - "integrity": "sha512-sSyPSxtkaamLMQ59KPdEtbeia0+JmM0wEtLxa0E6euBosZIG0CoSThY4OhRLnpb9GHZYyhSd+OAhYEJzUxUEVQ==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/hds-design-tokens/-/hds-design-tokens-4.1.0.tgz", + "integrity": "sha512-+KlNPW/Bf1tmdkDqIW4DgOQsWDvtodQC/hDsyjAP7NOnS12fV4o8K+Sr5wrJbIBjMWxsha2xc5ipvGe30tRcEg==", + "license": "MIT" }, "node_modules/hds-react": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/hds-react/-/hds-react-3.11.0.tgz", - "integrity": "sha512-n3JiEX1K9xWqwEi7VvZvDj4+wnpMNCZX9mmOdsK8h9ZYGHS49vPnvYLXs3hlX/Ljw1XGsgX3vtQlOO69C1iu2g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/hds-react/-/hds-react-4.1.0.tgz", + "integrity": "sha512-U1bliIqY3FajDt/PBOvdvceBu61KbxcT00yvny5d28840/xKJrduwG/IVSipq6QZau+d3bKD9vtb4/bLcWV3sQ==", "license": "MIT", "dependencies": { "@apollo/client": "^3.10.1", @@ -10830,7 +10831,7 @@ "date-fns": "2.16.1", "downshift": "6.0.6", "graphql": "^16.8.1", - "hds-core": "3.11.0", + "hds-core": "4.1.0", "jwt-decode": "^3.1.2", "kashe": "1.0.4", "lodash": "^4.17.21", diff --git a/package.json b/package.json index 119d291f8..493c516f9 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "classnames": "^2.3.1", "focus-trap": "^7.5.4", "glob": "^11.0.0", - "hds-design-tokens": "^3.3.0", - "hds-react": "^3.3.0", + "hds-design-tokens": "^4.1.0", + "hds-react": "^4.1.0", "html-react-parser": "^5.0.11", "husky": "^9.0.0", "hyphenopoly": "^6.0.0", From 9aa38a16144d108c7fb76d718003b428336bfa85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Wed, 15 Jan 2025 16:09:42 +0200 Subject: [PATCH 02/34] UHF-11098: Updated HDS core to 4.1.0. --- src/scss/_hds.scss | 1 - src/scss/xx_external/hds-core/LICENSE | 2 +- src/scss/xx_external/hds-core/README.md | 7 +- src/scss/xx_external/hds-core/lib/base.css | 468 +-- .../xx_external/hds-core/lib/base.min.css | 2 +- .../hds-core/lib/components/all.css | 3267 ++++++++++------- .../hds-core/lib/components/all.min.css | 2 +- .../lib/components/breadcrumb/breadcrumb.css | 83 + .../components/breadcrumb/breadcrumb.min.css | 1 + .../hds-core/lib/components/button/button.css | 478 +-- .../lib/components/button/button.min.css | 2 +- .../hds-core/lib/components/card/card.css | 21 +- .../hds-core/lib/components/card/card.min.css | 2 +- .../lib/components/checkbox/checkbox.css | 224 +- .../lib/components/checkbox/checkbox.min.css | 2 +- .../lib/components/container/container.css | 27 +- .../components/container/container.min.css | 2 +- .../cookie-consent/cookieConsent.css | 1025 ++++++ .../cookie-consent/cookieConsent.min.css | 1 + .../cookie-consent/cookieConsent.ts | 1 + .../error-summary/error-summary.css | 7 +- .../error-summary/error-summary.min.css | 2 +- .../lib/components/fieldset/fieldset.css | 12 +- .../lib/components/fieldset/fieldset.min.css | 2 +- .../hds-core/lib/components/hero/hero.css | 417 +++ .../hds-core/lib/components/hero/hero.min.css | 1 + .../lib/components/highlight/highlight.css | 62 + .../components/highlight/highlight.min.css | 1 + .../hds-core/lib/components/koros/koros.css | 39 +- .../lib/components/koros/koros.min.css | 2 +- .../hds-core/lib/components/link/link.css | 105 +- .../hds-core/lib/components/link/link.min.css | 2 +- .../loading-spinner/loading-spinner.css | 40 +- .../loading-spinner/loading-spinner.min.css | 2 +- .../components/notification/notification.css | 217 +- .../notification/notification.min.css | 2 +- .../lib/components/pagination/pagination.css | 189 + .../components/pagination/pagination.min.css | 1 + .../components/radio-button/radio-button.css | 173 +- .../radio-button/radio-button.min.css | 2 +- .../components/search-input/search-input.css | 117 +- .../search-input/search-input.min.css | 2 +- .../selection-group/selection-group.css | 51 +- .../selection-group/selection-group.min.css | 2 +- .../components/status-label/status-label.css | 6 +- .../status-label/status-label.min.css | 2 +- .../components/step-by-step/step-by-step.css | 95 + .../step-by-step/step-by-step.min.css | 1 + .../hds-core/lib/components/table/table.css | 138 +- .../lib/components/table/table.min.css | 2 +- .../hds-core/lib/components/tag/tag.css | 234 +- .../hds-core/lib/components/tag/tag.min.css | 2 +- .../lib/components/text-input/text-input.css | 309 +- .../components/text-input/text-input.min.css | 2 +- .../xx_external/hds-core/lib/icons/icon.css | 55 +- .../hds-core/lib/icons/icon.min.css | 2 +- .../hds-core/lib/utils/animations.css | 2 +- .../hds-core/lib/utils/helpers.css | 74 +- .../hds-core/lib/utils/helpers.min.css | 2 +- src/scss/xx_external/hds-core/package.json | 58 +- 60 files changed, 5191 insertions(+), 2861 deletions(-) create mode 100644 src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.css create mode 100644 src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.min.css create mode 100644 src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.css create mode 100644 src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.min.css create mode 100644 src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.ts create mode 100644 src/scss/xx_external/hds-core/lib/components/hero/hero.css create mode 100644 src/scss/xx_external/hds-core/lib/components/hero/hero.min.css create mode 100644 src/scss/xx_external/hds-core/lib/components/highlight/highlight.css create mode 100644 src/scss/xx_external/hds-core/lib/components/highlight/highlight.min.css create mode 100644 src/scss/xx_external/hds-core/lib/components/pagination/pagination.css create mode 100644 src/scss/xx_external/hds-core/lib/components/pagination/pagination.min.css create mode 100644 src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.css create mode 100644 src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.min.css diff --git a/src/scss/_hds.scss b/src/scss/_hds.scss index af0608c47..80b24aa02 100644 --- a/src/scss/_hds.scss +++ b/src/scss/_hds.scss @@ -8,7 +8,6 @@ // button.css contents have been moved inside 05_objects/_button.scss @import 'xx_external/hds-core/lib/components/checkbox/checkbox.min.css'; @import 'xx_external/hds-core/lib/components/koros/koros.min.css'; -@import 'xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css'; @import 'xx_external/hds-core/lib/components/notification/notification.min.css'; @import 'xx_external/hds-core/lib/components/radio-button/radio-button.min.css'; @import 'xx_external/hds-core/lib/components/status-label/status-label.min.css'; diff --git a/src/scss/xx_external/hds-core/LICENSE b/src/scss/xx_external/hds-core/LICENSE index 23da15370..a52ee4684 100644 --- a/src/scss/xx_external/hds-core/LICENSE +++ b/src/scss/xx_external/hds-core/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019 City of Helsinki +Copyright (c) 2023 City of Helsinki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/src/scss/xx_external/hds-core/README.md b/src/scss/xx_external/hds-core/README.md index b4fda073d..a18c3a9df 100644 --- a/src/scss/xx_external/hds-core/README.md +++ b/src/scss/xx_external/hds-core/README.md @@ -6,7 +6,7 @@ Base styles and individual HTML component styles for the Helsinki Design System. ## Getting started -### Installing the package: +Install the package. ```bash yarn add hds-core @@ -25,7 +25,7 @@ hds-core/ │ : │ ├── icons/ # collection of HDS icon styles - │ ├── all.css # bundled stylesheet including all icons + │ ├── icons.css # bundled stylesheet including all icons │ ├── icon.css # base styles for icons │ ├── icon-.css # individual icon stylesheet │ : @@ -37,7 +37,7 @@ hds-core/ ### Using the styles -To import styles for all the core components, you'll need two stylesheets: `base.css` (the base styles and CSS variables) and `components/all.css`. If you use any of the icons, you'll also need `icons/all.css`. Do note that the `all.css`-files bundle all the components and icons into single stylesheets and thus are large in filesize. +To import styles for all the core components, you'll need two stylesheets: `base.css` (the base styles and CSS variables) and `components/all.css`. If you use any of the icons, you'll also need `icons/icons.css`. Do note that the `components/all.css` bundles all the components and `icons/icons.css` bundles all the icons into single stylesheets and thus are large in filesize. Therefore, we do recommend that you use individual component and icon stylesheets instead of the bundled styles. @@ -56,6 +56,7 @@ The Helsinki fonts are not included in the package due to copyright reasons. Helsinki Design System uses CSS variables from the [hds-design-tokens](https://www.npmjs.com/package/hds-design-tokens) package to control coloring, spacing and layout. You can override these variables if necessary, but it is not recommended. ## Development + Read more [here](DEVELOPMENT.md). ## Built with diff --git a/src/scss/xx_external/hds-core/lib/base.css b/src/scss/xx_external/hds-core/lib/base.css index 0dde43e7a..c7e6faa1f 100644 --- a/src/scss/xx_external/hds-core/lib/base.css +++ b/src/scss/xx_external/hds-core/lib/base.css @@ -1,353 +1,3 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} - :root { --breakpoint-xs: 320px; --breakpoint-s: 576px; @@ -407,16 +57,17 @@ template { --color-tram-light: #dff7eb; --color-tram-medium-light: #a3e3c2; --color-tram-dark: #006631; + --color-focus-outline: #0072c6; --color-black: #000000; --color-white: #ffffff; - --color-black-5: #f1f1f1; - --color-black-10: #e5e5e5; + --color-black-5: #f2f2f2; + --color-black-10: #e6e6e6; --color-black-20: #cccccc; - --color-black-30: #b2b2b2; - --color-black-40: #999898; + --color-black-30: #b3b3b3; + --color-black-40: #999999; --color-black-50: #808080; - --color-black-60: #666666; - --color-black-70: #4c4c4c; + --color-black-60: #595959; + --color-black-70: #4d4d4d; --color-black-80: #333333; --color-black-90: #1a1a1a; --color-error: #b01038; @@ -431,6 +82,9 @@ template { --color-info: #0062b9; --color-info-light: #e5eff8; --color-info-dark: #004f94; + --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07); + --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); + --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2); --spacing-layout-2-xs: 1rem; /* 16px */ --spacing-layout-xs: 1.5rem; /* 24px */ --spacing-layout-s: 2rem; /* 32px */ @@ -450,8 +104,10 @@ template { --spacing-3-xl: 3.5rem; /* 56px */ --spacing-4-xl: 4rem; /* 64px */ --spacing-5-xl: 4.5rem; /* 72px */ - --fontsize-heading-xl: 3.25rem; /* 52px */ - --fontsize-heading-l: 2.25rem; /* 36px */ + --fontsize-heading-xxl: 4rem; /* 64px */ + --fontsize-heading-xl: 3rem; /* 48px */ + --fontsize-heading-xl-mobile: 2.5rem; /* 40px */ + --fontsize-heading-l: 2rem; /* 32px */ --fontsize-heading-m: 1.5rem; /* 24px */ --fontsize-heading-s: 1.25rem; /* 20px */ --fontsize-heading-xs: 1.125rem; /* 18px */ @@ -466,27 +122,25 @@ template { --lineheight-l: 1.5; --lineheight-xl: 1.75; } - @keyframes fadeIn { from { opacity: 0; } + to { opacity: 1; } } - -.hiddenFromScreen { +.visually-hidden { border: 0; - clip: "rect(0 0 0 0)"; + clip: 'rect(0 0 0 0)'; height: 1px; - width: 1px; margin: -1px; - padding: 0; overflow: hidden; + padding: 0; position: absolute; + width: 1px; } - .button-reset { background: none; border: none; @@ -495,53 +149,95 @@ template { font: inherit; padding: 0; } - .text-body { - font-family: HelsinkiGrotesk, Arial, sans-serif; + color: var(--color-black-90); font-family: var(--font-default); - font-size: 1rem; font-size: var(--fontsize-body-m); - color: #1a1a1a; - color: var(--color-black-90); - line-height: 1.5; line-height: var(--lineheight-l); } - .text-medium { - font-family: HelsinkiGrotesk, Arial, sans-serif; font-family: var(--font-default); font-weight: 500; } - .text-bold { - font-family: HelsinkiGrotesk, Arial, sans-serif; font-family: var(--font-default); font-weight: bold; } - .text-xl { - font-size: 1.5rem; font-size: var(--fontsize-heading-m); } - .text-lg { - font-size: 1.25rem; font-size: var(--fontsize-heading-s); } - .text-md { - font-size: 1.125rem; font-size: var(--fontsize-heading-xs); } - .subtitle { - font-size: 1rem; font-size: var(--fontsize-body-m); } - .text-sm { - font-size: 0.875rem; font-size: var(--fontsize-body-s); - line-height: 1.75; line-height: var(--lineheight-xl); } +/* HEADINGS */ +.heading-xxl { + font-size: var(--fontsize-heading-xxl); + font-weight: 400; + letter-spacing: -1.2px; + line-height: var(--lineheight-s); +} +.heading-xl { + font-size: var(--fontsize-heading-xl); + font-weight: 400; + letter-spacing: -1px; + line-height: var(--lineheight-s); +} +.heading-xl-mobile { + font-size: var(--fontsize-heading-xl-mobile); + font-weight: 400; + letter-spacing: -0.8px; + line-height: var(--lineheight-s); +} +.heading-l { + font-size: var(--fontsize-heading-l); + font-weight: 400; + letter-spacing: -0.4px; + line-height: var(--lineheight-m); +} +.heading-m { + font-size: var(--fontsize-heading-m); + font-weight: 500; + letter-spacing: -0.2px; + line-height: var(--lineheight-m); +} +.heading-s { + font-size: var(--fontsize-heading-s); + font-weight: 500; + letter-spacing: 0; + line-height: var(--lineheight-l); +} +.heading-xs { + font-size: var(--fontsize-heading-xs); + font-weight: 700; + letter-spacing: 0; + line-height: var(--lineheight-l); +} +.heading-xxs { + font-size: var(--fontsize-heading-xxs); + font-weight: 700; + letter-spacing: 0.2px; + line-height: var(--lineheight-l); +} +.helper-text { + color: var(--color-black-60); + display: block; + flex-basis: 100%; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-2-xs); +} +/* + * Normalize.css rule + */ +html { + -webkit-text-size-adjust: 100%; +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/base.min.css b/src/scss/xx_external/hds-core/lib/base.min.css index c61c7c24f..55f98c04c 100644 --- a/src/scss/xx_external/hds-core/lib/base.min.css +++ b/src/scss/xx_external/hds-core/lib/base.min.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-black:#000;--color-white:#fff;--color-black-5:#f1f1f1;--color-black-10:#e5e5e5;--color-black-20:#ccc;--color-black-30:#b2b2b2;--color-black-40:#999898;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4c4c4c;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xl:3.25rem;--fontsize-heading-l:2.25rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hiddenFromScreen{border:0;clip:"rect(0 0 0 0)";height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;position:absolute}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{font-size:1rem;font-size:var(--fontsize-body-m);color:#1a1a1a;color:var(--color-black-90);line-height:1.5;line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:HelsinkiGrotesk,Arial,sans-serif;font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:HelsinkiGrotesk,Arial,sans-serif;font-family:var(--font-default);font-weight:700}.text-xl{font-size:1.5rem;font-size:var(--fontsize-heading-m)}.text-lg{font-size:1.25rem;font-size:var(--fontsize-heading-s)}.text-md{font-size:1.125rem;font-size:var(--fontsize-heading-xs)}.subtitle{font-size:1rem;font-size:var(--fontsize-body-m)}.text-sm{font-size:.875rem;font-size:var(--fontsize-body-s);line-height:1.75;line-height:var(--lineheight-xl)} \ No newline at end of file +:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#595959;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.visually-hidden{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px}.heading-l,.heading-m{line-height:var(--lineheight-m)}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500}.heading-s,.heading-xs{letter-spacing:0;line-height:var(--lineheight-l)}.heading-xs{font-size:var(--fontsize-heading-xs);font-weight:700}.heading-xxs{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.2px;line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}html{-webkit-text-size-adjust:100%} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/all.css b/src/scss/xx_external/hds-core/lib/components/all.css index 550d39a46..7af80c63a 100644 --- a/src/scss/xx_external/hds-core/lib/components/all.css +++ b/src/scss/xx_external/hds-core/lib/components/all.css @@ -1,559 +1,353 @@ +.hds-breadcrumb { + --horizontal-margin-small: var(--spacing-layout-2-xs); + --horizontal-margin-medium: var(--spacing-layout-xs); + --horizontal-margin-large: var(--spacing-layout-xs); + --horizontal-margin-x-large: var(--spacing-layout-s); + --horizontal-margin: var(--horizontal-margin-small); + display: flex; + margin: 0 var(--horizontal-margin); + padding: var(--spacing-s) 0; +} +.hds-breadcrumb__list { + align-items: center; + flex-direction: row; + word-wrap: break-word; +} +.hds-breadcrumb__list-item { + align-items: center; + display: flex; + line-height: var(--lineheight-l); +} +.hds-breadcrumb__link.hds-breadcrumb__link { + --link-visited-color: none; + --link-color: var(--color-black-90); +} +.hds-breadcrumb__link:hover, .hds-breadcrumb__link:focus { + -webkit-text-decoration-color: var(--color-black-90); + text-decoration-color: var(--color-black-90); +} +.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow { + display: inline-flex; + /* compensate the white space in the icon */ + margin-left: -5px; + margin-right: -3px; + --icon-size: var(--spacing-m); +} +.hds-breadcrumb__separator.hds-breadcrumb__separator { + display: inline-flex; + padding-left: var(--spacing-3-xs); + --icon-size: var(--spacing-s); +} +@media (min-width: 768px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-medium); + } +} +@media (min-width: 992px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-large); + } +} +@media (min-width: 1248px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-x-large); + } +} +.hds-breadcrumb__list-item--active { + font-weight: 700; + /* to match 3px border around links */ + padding: 3px; +} +.hds-breadcrumb__list--mobile { + display: flex; +} +.hds-breadcrumb__list--mobile .hds-breadcrumb__link { + font-size: var(--fontsize-body-l); +} +@media (min-width: 768px) { + .hds-breadcrumb__list--mobile { + display: none; + } +} +.hds-breadcrumb__list--desktop { + display: none; +} +@media (min-width: 768px) { + .hds-breadcrumb__list--desktop { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + } +} +/* PRIMARY */ +/* default (bus) */ +/* SECONDARY */ +/* default (bus) */ +/* SUPPLEMENTARY */ +/* CLEAR */ +/* UTILITY */ +/* success */ +/* danger */ +/* THEMES */ +/* coat */ +/* black */ .hds-button { --border-width: 2px; - --color: inherit; - --min-size: 44px; - --outline-gutter: 2px; - --outline-width: 3px; - + --outline-width-focus: 3px; + --padding-horizontal: var(--spacing-l); + --min-size: 56px; + --padding-vertical: var(--spacing-s); + --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width)); + --icon-reposition: calc(-1 * var(--spacing-2-xs)); + /* logics, always falls back to previous (upper) if not given -> + (no) active color -> (no) hover color -> (no) focus color -> default color + */ + --computed-background-color: var(--background-color, transparent); + --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent)); + --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent)); + --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent)); + --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent)); + --computed-color: var(--color, inherit); + --computed-color-focus: var(--color-focus, var(--computed-color, inherit)); + --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit)); + --computed-color-active: var(--color-active, var(--computed-color-hover, inherit)); + --computed-color-disabled: var(--color-disabled, var(--color-white, inherit)); + --computed-border-color: var(--border-color, var(--computed-background-color)); + --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent)); + --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent)); + --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent)); + --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent)); + --computed-outline-color-focus: var(--outline-color-focus, transparent); + --computed-icon-size: var(--icon-size, var(--spacing-m)); align-content: flex-start; align-items: center; - background-color: transparent; - background-color: var(--background-color, transparent); - border: var(--border-width) solid transparent; - border: var(--border-width) solid var(--border-color, transparent); + background-color: var(--computed-background-color); + border: var(--border-width) solid var(--computed-border-color); border-radius: 0; - color: var(--color); - cursor: pointer; + box-sizing: border-box; + color: var(--computed-color, inherit); + grid-column-gap: var(--spacing-2-xs); + -moz-column-gap: var(--spacing-2-xs); + column-gap: var(--spacing-2-xs); + cursor: var(--cursor, pointer); display: inline-flex; + font-family: inherit; + font-size: 100%; font-weight: 500; + -webkit-hyphens: auto; + hyphens: auto; justify-content: center; + line-height: var(--lineheight-l); + margin: 0; min-height: var(--min-size); min-width: var(--min-size); - padding: 0 var(--spacing-2-xs); + outline: none; + outline-offset: 2px; + overflow: hidden; + overflow-wrap: anywhere; + padding: var(--padding); position: relative; + text-align: center; + text-decoration: none; + text-transform: none; vertical-align: top; + /* repositioning the icons, after & before usage */ + /* focus */ + /* hover */ + /* active */ + /* disabled */ } - -.hds-button, -.hds-button::before, -.hds-button::after, -.hds-button *, -.hds-button *::before, -.hds-button *::after { - box-sizing: border-box; -} - -/* button transitions */ - -.hds-button:hover, -.hds-button:focus { - transition-property: background-color, border-color, color; - transition-duration: 85ms; - transition-timing-function: ease-out; -} - -.hds-button:hover { - background-color: transparent; - background-color: var(--background-color-hover, transparent); - color: var(--color-hover); -} - -.hds-button:focus { - background-color: transparent; - background-color: var(--background-color-focus, transparent); - color: var(--color-focus); - outline: none; -} - -.hds-button:focus:hover { - background-color: transparent; - background-color: var(--background-color-hover-focus, transparent); -} - -.hds-button:disabled { - background-color: transparent; - background-color: var(--background-color-disabled, transparent); - border-color: transparent; - border-color: var(--border-color-disabled, transparent); - color: var(--color-disabled); - cursor: not-allowed; +.hds-button:after { + margin-right: var(--icon-reposition); } - -.hds-button:not(:disabled) { - border-color: transparent; - border-color: var(--border-color, transparent); +.hds-button:before { + margin-left: var(--icon-reposition); } - -.hds-button:not(:disabled):hover { - border-color: transparent; - border-color: var(--border-color-hover, transparent); +.hds-button, .hds-button[type=button], .hds-button[type=reset], .hds-button[type=submit] { + -webkit-appearance: button; } - -.hds-button:not(:disabled):focus { - border-color: transparent; - border-color: var(--border-color-focus, transparent); +.hds-button.focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -.hds-button:not(:disabled):focus:hover { - border-color: transparent; - border-color: var(--border-color-hover-focus, transparent); - color: var(--color-hover-focus); +.hds-button:focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -/* FOCUS OUTLINE */ - -.hds-button::after { - --size: 100%; - - border: var(--outline-width) solid transparent; - content: ''; - height: var(--size); - position: absolute; - width: var(--size); +.hds-button:hover { + background-color: var(--computed-background-color-hover); + border-color: var(--computed-border-color-hover); + color: var(--computed-color-hover); } - -.hds-button:focus::after { - --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2)); - border-color: var(--focus-outline-color); +.hds-button:active { + background-color: var(--computed-background-color-active); + border-color: var(--computed-border-color-active); + color: var(--computed-color-active); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -/* submit input */ - -input[type="submit"].hds-button:focus { - box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color); +.hds-button:disabled { + --cursor: not-allowed; + background-color: var(--computed-background-color-disabled); + border-color: var(--computed-border-color-disabled); + color: var(--computed-color-disabled); + outline: none; } - -/* LABEL */ - -input[type="submit"].hds-button, -.hds-button__label { - font-weight: inherit; - line-height: 1.25em; - padding: var(--spacing-s); +button.button { + -webkit-appearance: button; } - -input[type="submit"].hds-button { - cursor: pointer; - padding: var(--spacing-s) var(--spacing-l); -} - -/* no icons */ - -.hds-button__label:only-child { - margin: 0 var(--spacing-2-xs); -} - -/* supplementary with right icon */ - -.hds-button--supplementary .hds-button__label:first-child { - padding-right: var(--spacing-3-xs); +.hds-button .hds-icon { + flex-shrink: 0; + height: var(--computed-icon-size); + width: var(--computed-icon-size); + /* start-side icon */ + /* end-side icon */ } - -/* supplementary with left icon */ - -.hds-button--supplementary .hds-icon + .hds-button__label:last-child { - padding-left: var(--spacing-3-xs); +.hds-button .hds-icon:first-child:not(:last-child) { + margin-left: var(--icon-reposition); } - -/* supplementary with both icons */ - -.hds-button--supplementary .hds-icon + .hds-button__label:not(:last-child) { - padding-left: var(--spacing-3-xs); - padding-right: var(--spacing-3-xs); +.hds-button .hds-icon:last-child:not(:first-child) { + margin-right: var(--icon-reposition); } - -/* SMALL */ - .hds-button--small { - padding: 0; + --min-size: 44px; + --padding-horizontal: var(--spacing-m); + --padding-vertical: var(--spacing-2-xs); } - -input[type="submit"].hds-button--small, -.hds-button--small .hds-button__label { - line-height: var(--lineheight-s); - padding: var(--spacing-2-xs) var(--spacing-xs); -} - -input[type="submit"].hds-button--small { - padding: var(--spacing-2-xs) var(--spacing-m); -} - -/* no icons */ - -.hds-button--small .hds-button__label:only-child { - margin: 0 var(--spacing-xs); -} - -/* both icons */ - -.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type) { - padding: var(--spacing-2-xs) var(--spacing-2-xs); -} - -/* FULL WIDTH */ - .hds-button--fullwidth { width: 100%; } - -/* ICONS */ - -/* left */ - -.hds-button .hds-icon { - height: var(--spacing-m); - margin-left: var(--spacing-s); - width: var(--spacing-m); -} - -/* right */ - -.hds-button__label ~ .hds-icon { - margin: 0 var(--spacing-s) 0 0; -} - -/* left - small */ - -.hds-button--small .hds-icon { - margin-left: var(--spacing-2-xs); -} - -/* right - small */ - -.hds-button .hds-button--small .hds-button__label ~ .hds-icon { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* both icons - left */ - -.hds-button .hds-icon:first-of-type:not(:last-of-type) { - margin: 0 0 0 var(--spacing-2-xs); -} - -/* both icons - right */ - -.hds-button .hds-icon:last-of-type:not(:first-of-type) { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* both icons - left - small */ - -.hds-button--small .hds-icon:first-child:not(:last-of-type) { - margin: 0 0 0 var(--spacing-2-xs); -} - -/* both icons - right - small */ - -.hds-button--small .hds-icon:last-child:not(:first-of-type) { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* PRIMARY */ - -/* default (bus) */ - .hds-button--primary { --background-color: var(--color-bus); --background-color-hover: var(--color-bus-dark); --background-color-focus: var(--color-bus); - --background-color-hover-focus: var(--color-bus-dark); --background-color-disabled: var(--color-black-20); - - --border-color: var(--color-bus); - --border-color-hover: var(--color-bus-dark); - --border-color-focus: var(--color-bus); - --border-color-hover-focus: var(--color-bus-dark); - --border-color-disabled: var(--color-black-20); - + --border-color: transparent; --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); --color-disabled: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); - --submit-input-focus-gutter-color: var(--color-white); + --outline-color-focus: var(--color-coat-of-arms); } - -/* SECONDARY */ - -/* default (bus) */ - .hds-button--secondary { --background-color: transparent; --background-color-hover: var(--color-bus-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-bus-light); --background-color-disabled: transparent; - --border-color: var(--color-bus); - --border-color-hover: var(--color-bus-dark); - --border-color-focus: var(--color-bus); - --border-color-hover-focus: var(--color-bus-dark); - --border-color-disabled: var(--color-black-50); - + --border-color-disabled: var(--color-disabled); --color: var(--color-bus); - --color-hover: var(--color-bus-dark); - --color-focus: var(--color-bus); - --color-hover-focus: var(--color-bus-dark); --color-disabled: var(--color-black-40); - - --focus-outline-color: var(--color-coat-of-arms); - --submit-input-focus-gutter-color: var(--color-white); + --outline-color-focus: var(--color-coat-of-arms); } - -/* SUPPLEMENTARY */ - .hds-button--supplementary { --background-color: transparent; --background-color-hover: var(--color-bus-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-bus-light); --background-color-disabled: transparent; - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms); --border-color-disabled: transparent; - --color: var(--color-bus); - --color-hover: var(--color-bus-dark); - --color-focus: var(--color-bus); - --color-hover-focus: var(--color-bus-dark); --color-disabled: var(--color-black-40); - - --focus-outline-color: transparent; - --submit-input-focus-gutter-color: transparent; -} - -/* LOADING */ - -.hds-button--loading { + --outline-color-focus: var(--color-coat-of-arms); +} +.hds-button--clear { --background-color: transparent; - --background-color-hover: transparent; - --background-color-focus: transparent; - --background-color-hover-focus: transparent; --background-color-disabled: transparent; - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: transparent; - --border-color-hover-focus: transparent; --border-color-disabled: transparent; - --color: var(--color-black-90); - --color-hover: var(--color-black-90); - --color-focus: var(--color-black-90); - --color-hover-focus: var(--color-black-90); --color-disabled: var(--color-black-90); - - cursor: wait; } - -/* UTILITY */ - -/* success */ - .hds-button--success { --background-color: var(--color-success); --background-color-hover: var(--color-success-dark); --background-color-focus: var(--color-success); - --background-color-hover-focus: var(--color-success-dark); - --border-color: var(--color-success); --border-color-hover: var(--color-success-dark); --border-color-focus: var(--color-success); - --border-color-hover-focus: var(--color-success-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); + --outline-color-focus: var(--color-coat-of-arms); } - -/* danger */ - .hds-button--danger { --background-color: var(--color-error); --background-color-hover: var(--color-error-dark); --background-color-focus: var(--color-error); - --background-color-hover-focus: var(--color-error-dark); - --border-color: var(--color-error); --border-color-hover: var(--color-error-dark); --border-color-focus: var(--color-error); - --border-color-hover-focus: var(--color-error-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); + --outline-color-focus: var(--color-coat-of-arms); } - -/* THEMES */ - -/* coat */ - .hds-button--primary.hds-button--theme-coat { --background-color: var(--color-coat-of-arms); --background-color-hover: var(--color-coat-of-arms-dark); --background-color-focus: var(--color-coat-of-arms); - --background-color-hover-focus: var(--color-coat-of-arms-dark); - --border-color: var(--color-coat-of-arms); --border-color-hover: var(--color-coat-of-arms-dark); --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); } - .hds-button--secondary.hds-button--theme-coat { --background-color: transparent; --background-color-hover: var(--color-coat-of-arms-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-coat-of-arms-light); - --border-color: var(--color-coat-of-arms); - --border-color-hover: var(--color-coat-of-arms-dark); - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms-dark); - --color: var(--color-coat-of-arms); - --color-hover: var(--color-coat-of-arms); - --color-focus: var(--color-coat-of-arms); - --color-hover-focus: var(--color-coat-of-arms); } - .hds-button--supplementary.hds-button--theme-coat { --background-color: transparent; --background-color-hover: var(--color-coat-of-arms-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-coat-of-arms-light); - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms); - --color: var(--color-coat-of-arms); - --color-hover: var(--color-coat-of-arms); - --color-focus: var(--color-coat-of-arms); - --color-hover-focus: var(--color-coat-of-arms); } - -/* black */ - .hds-button--primary.hds-button--theme-black { --background-color: var(--color-black); --background-color-hover: var(--color-black); --background-color-focus: var(--color-black); - --background-color-hover-focus: var(--color-black); - --border-color: var(--color-black); --border-color-hover: var(--color-black); --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-white); --color-hover: var(--color-white); --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); } - .hds-button--secondary.hds-button--theme-black { --background-color: transparent; --background-color-hover: var(--color-black-5); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-black-5); - --border-color: var(--color-black); --border-color-hover: var(--color-black); --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black); - --color-hover-focus: var(--color-black); } - .hds-button--supplementary.hds-button--theme-black { --background-color: transparent; --background-color-hover: var(--color-black-5); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-black-5); - --border-color: transparent; --border-color-hover: transparent; - --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black); - --color-hover-focus: var(--color-black); -} - -.hds-card { - --background-color: var(--color-white); - --border-color: var(--color-black-90); - --color: var(--color-black-90); - --border-width: 2px; - --padding-horizontal: var(--spacing-l); - --padding-vertical: var(--spacing-m); - - background-color: var(--background-color); - color: var(--color); - padding: var(--padding-vertical) var(--padding-horizontal); -} - -/* WITH BORDER */ - -.hds-card--border { - border: var(--border-width) solid var(--border-color); -} - -/* BODY */ - -.hds-card__body { - display: grid; - grid-gap: var(--spacing-m); - gap: var(--spacing-m); - margin-bottom: var(--spacing-l); -} - -.hds-card__body:last-child { - margin-bottom: 0; -} - -/* HEADING */ - -.hds-card__heading { - font-size: var(--fontsize-heading-m); - font-weight: bold; - line-height: var(--lineheight-m); -} - -/* BODY TEXT */ - -.hds-card__text { - font-size: var(--fontsize-body-m); - line-height: var(--lineheight-l); } - .hds-checkbox { --size: 24px; - /* icon size relative to the checkbox size (--size) */ --icon-scale: 1; --border-width: 2px; --outline-width: 3px; --label-font-size: var(--fontsize-body-m); --label-padding: var(--spacing-2-xs); - --background-unselected: transparent; --background-selected: var(--color-bus); --background-hover: var(--color-bus-dark); --background-disabled: var(--color-black-10); - --border-color-selected: var(--color-bus); --border-color-selected-hover: var(--color-bus-dark); --border-color-selected-focus: var(--color-bus); @@ -561,616 +355,1330 @@ input[type="submit"].hds-button--small { --border-color-unselected-hover: var(--color-black-90); --border-color-unselected-focus: var(--color-black-90); --border-color-disabled: var(--color-black-10); - --icon-color-unselected: transparent; --icon-color-selected: var(--color-white); --icon-color-disabled: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); - --label-color: var(--color-black-90); --label-color-disabled: var(--color-black-40); - --icon-size: var(--spacing-m); - display: flex; flex-wrap: wrap; min-height: var(--size); position: relative; + /* stylelint-disable no-descending-specificity */ } - -.hds-checkbox, -.hds-checkbox *, -.hds-checkbox *::before, -.hds-checkbox *::after { +.hds-checkbox, .hds-checkbox *, .hds-checkbox *:before, .hds-checkbox *:after { box-sizing: border-box; } - .hds-checkbox:not(:first-of-type) { margin-top: var(--spacing-2-xs); } - -/* checkbox transitions */ - -.hds-checkbox .hds-checkbox__input:hover::before, -.hds-checkbox .hds-checkbox__input:focus::before, -.hds-checkbox .hds-checkbox__input:hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::after { - transition: 85ms ease-out; - transition-property: background-color, border-color, transform; -} - -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::before { - transition: 85ms ease-out; - transition-property: box-shadow, transform; -} - -/* NATIVE INPUT */ - .hds-checkbox .hds-checkbox__input { - appearance: none; - -moz-appearance: none; -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; + font-family: inherit; + font-size: 100%; height: var(--size); left: 0; + line-height: 1.15; + margin: 0; outline: none; position: absolute; top: 0; width: var(--size); } - -/* LABEL */ - -.hds-checkbox .hds-checkbox__label { - color: var(--label-color); - cursor: pointer; - font-size: var(--label-font-size); - line-height: var(--lineheight-m); - padding-left: calc(var(--size) + var(--label-padding)); - padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2); - position: relative; -} - -/* ERROR */ - -.hds-checkbox__error-text { - position: relative; - color: var(--color-error); - display: block; - font-size: var(--fontsize-body-m); - margin-top: var(--spacing-2-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); - flex-basis: 100%; -} - -.hds-checkbox__error-text::before { - background: var(--color-error); - content: ''; - height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - pointer-events: none; - position: absolute; - left: 0; - top: 0; - width: var(--icon-size); -} - -/* CUSTOM CHECKBOX */ - -.hds-checkbox .hds-checkbox__input::before, -.hds-checkbox .hds-checkbox__label::before, -.hds-checkbox .hds-checkbox__label::after { - content: ""; - left: 0; - position: absolute; - top: 0; -} - -/* checkbox icon */ - -.hds-checkbox .hds-checkbox__input::before { +.hds-checkbox .hds-checkbox__input:before { background-color: var(--icon-color-unselected); + content: ""; height: var(--size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: calc(var(--size) * var(--icon-scale)); + left: 0; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); -webkit-mask-position: center; + mask-position: center; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: calc(var(--size) * var(--icon-scale)); - width: var(--size); + mask-size: calc(var(--size) * var(--icon-scale)); + position: absolute; + top: 0; transform: scale(0.6); + width: var(--size); z-index: 1; } - -/* checkbox icon - selected */ - -.hds-checkbox .hds-checkbox__input:checked::before { - background-color: var(--icon-color-selected); - transform: scale(1); +.hds-checkbox .hds-checkbox__input:disabled + label { + color: var(--label-color-disabled); } - -/* focus outline */ - -.hds-checkbox .hds-checkbox__label::before { - height: var(--size); - width: var(--size); +.hds-checkbox .hds-checkbox__input:checked:disabled:before { + background-color: var(--icon-color-disabled); +} +.hds-checkbox .hds-checkbox__input:disabled, .hds-checkbox .hds-checkbox__input:disabled + label { + cursor: not-allowed; } - -/* focus outline - focus */ - -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::before { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); +.hds-checkbox .hds-checkbox__input:hover:before, .hds-checkbox .hds-checkbox__input:focus:before, .hds-checkbox .hds-checkbox__input:hover + label:after, .hds-checkbox .hds-checkbox__input:focus + label:after { + transition: 85ms ease-out; + transition-property: background-color, border-color, transform; +} +.hds-checkbox .hds-checkbox__input:focus + label:before { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); transform: translate3d(0, 0, 0); + transition: 85ms ease-out; + transition-property: box-shadow, transform; } - -/* background */ - -.hds-checkbox .hds-checkbox__label::after { - background-color: var(--background-unselected); - border: var(--border-width) solid var(--border-color-unselected); - height: var(--size); - width: var(--size); +.hds-checkbox .hds-checkbox__input:checked:before { + background-color: var(--icon-color-selected); + transform: scale(1); } - -/* background - selected */ - -.hds-checkbox .hds-checkbox__input:checked + .hds-checkbox__label::after { +.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before { + background-color: var(--icon-color-selected); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + transform: scale(1); +} +.hds-checkbox .hds-checkbox__input:checked + label:after, .hds-checkbox .hds-checkbox__input:indeterminate + label:after { background-color: var(--background-selected); border-color: var(--border-color-selected); } - -/* background - selected - hover */ - -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + .hds-checkbox__label::after { - background-color: var(--background-hover); - border-color: var(--border-color-selected-hover); -} - -/* background - unselected - hover */ - -.hds-checkbox .hds-checkbox__input:not(:disabled):hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + .hds-checkbox__label::after { - border-color: var(--border-color-unselected-hover); +.hds-checkbox .hds-checkbox__input:disabled + label:after { + background-color: var(--background-disabled); + border-color: var(--border-color-disabled); } - -/* background - unselected - focus */ - -.hds-checkbox .hds-checkbox__input:not(:disabled):focus + .hds-checkbox__label::after { +.hds-checkbox .hds-checkbox__input:not(:disabled):focus + label:after { border-color: var(--border-color-unselected-focus); } - -/* background - selected - focus */ - -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + .hds-checkbox__label::after { - border-color: var(--border-color-selected-focus); -} - -/* DISABLED */ - -/* label */ - -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label { - color: var(--label-color-disabled); +.hds-checkbox .hds-checkbox__input:not(:disabled):hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + label:after { + border-color: var(--border-color-unselected-hover); } - -/* checkbox icon - disabled */ - -.hds-checkbox .hds-checkbox__input:checked:disabled::before { - background-color: var(--icon-color-disabled); +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus + label:after { + border-color: var(--border-color-selected-focus); } - -/* background */ - -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label::after { - background-color: var(--background-disabled); - border-color: var(--border-color-disabled); +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus + label:after { + background-color: var(--background-hover); + border-color: var(--border-color-selected-hover); } - -.hds-checkbox .hds-checkbox__input:disabled, -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label { - cursor: not-allowed; +.hds-checkbox .hds-checkbox__label { + color: var(--label-color); + cursor: pointer; + font-size: var(--label-font-size); + line-height: var(--lineheight-m); + padding-left: calc(var(--size) + var(--label-padding)); + padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2); + position: relative; +} +.hds-checkbox .hds-checkbox__label:before, .hds-checkbox .hds-checkbox__label:after { + content: ""; + left: 0; + position: absolute; + top: 0; +} +.hds-checkbox .hds-checkbox__label:before { + height: var(--size); + width: var(--size); +} +.hds-checkbox .hds-checkbox__label:after { + background-color: var(--background-unselected); + border: var(--border-width) solid var(--border-color-unselected); + height: var(--size); + width: var(--size); +} +.hds-checkbox__label .hds-checkbox__label--hidden { + padding-left: var(--size); +} +.hds-checkbox .hds-checkbox__error-text { + background-color: var(--color-error-light); + border-left: 8px solid var(--color-error); + color: var(--color-black); + display: flex; + flex-basis: 100%; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; +} +.hds-checkbox .hds-checkbox__error-text:before { + background: var(--color-error); + content: ""; + display: inline-block; + height: var(--icon-size); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + pointer-events: none; + width: var(--icon-size); +} +.hds-status-label { + --status-label-background: var(--color-black-10); + --status-label-color: var(--color-black-90); + --status-label-height: 32px; + background-color: var(--status-label-background); + border-radius: 20px; + color: var(--status-label-color); + display: inline-block; + font-size: var(--fontsize-body-s); + line-height: var(--status-label-height); + min-height: var(--status-label-height); + padding: 0 var(--spacing-2-xs); + vertical-align: middle; +} +.hds-status-label--with-icon { + align-items: center; + display: inline-flex; + padding-left: var(--spacing-3-xs); +} +.hds-status-label-icon { + height: var(--spacing-m); + margin-right: var(--spacing-3-xs); + width: var(--spacing-m); +} +.hds-status-label--info { + --status-label-background: var(--color-info); + --status-label-color: var(--color-white); +} +.hds-status-label--success { + --status-label-background: var(--color-success); + --status-label-color: var(--color-white); +} +.hds-status-label--alert { + --status-label-background: var(--color-alert); +} +.hds-status-label--error { + --status-label-background: var(--color-error); + --status-label-color: var(--color-white); +} +.hds-table { + --content-background-color: var(--color-white); + border-collapse: collapse; + line-height: 1.5; + width: 100%; +} +.hds-table-container { + overflow-x: auto; +} +.hds-table-container:focus { + outline: var(--color-focus-outline) 3px solid; +} +.hds-table th { + border-bottom: 1px solid var(--color-black-20); + font-size: var(--fontsize-body-m); + font-weight: 500; + line-height: var(--lineheight-l); + padding: var(--spacing-xs) var(--spacing-m); + text-align: left; + white-space: nowrap; +} +.hds-table__content tr td { + background-color: var(--content-background-color); + border-bottom: 1px solid var(--color-black-50); + color: var(--color-black-90); + font-size: var(--fontsize-body-m); + font-weight: 400; + line-height: 24px; + padding: var(--spacing-xs) var(--spacing-m); +} +.hds-table__header-row { + background-color: var(--header-background-color); +} +.hds-table__content--text-align-td-right td { + text-align: right; +} +.hds-table__caption { + font-size: var(--fontsize-body-l); + font-weight: normal; + line-height: var(--lineheight-l); + margin-bottom: var(--spacing-s); + text-align: left; +} +.hds-table--dark { + --header-background-color: var(--color-bus); +} +.hds-table.hds-table--dark th { + color: var(--color-white); +} +.hds-table--light { + --header-background-color: var(--color-silver); +} +.hds-table.hds-table--light th { + color: var(--color-black-90); +} +.hds-table--with-vertical-lines .hds-table__content { + border-left: 1px solid var(--color-black-50); +} +.hds-table--with-vertical-lines .hds-table__content td { + border-right: 1px solid var(--color-black-50); +} +.hds-table--with-vertical-lines .hds-table__header-row { + border-left: 1px solid var(--header-background-color); + border-right: 1px solid var(--header-background-color); +} +.hds-table--dense.hds-table th { + font-size: var(--fontsize-body-s); + font-weight: bold; + padding: 9px var(--spacing-s); +} +.hds-table--dense .hds-table__content tr td { + font-size: var(--fontsize-body-s); + padding: 9px var(--spacing-s); +} +.hds-table--dense .hds-table__caption { + font-size: var(--fontsize-body-m); + line-height: var(--lineheight-l); + margin-bottom: var(--spacing-xs); +} +.hds-table--zebra .hds-table__content tr td { + border-bottom: none; +} +.hds-table--zebra .hds-table__content tr:nth-child(even) td { + background-color: var(--color-black-10); +} +.hds-table__vertical-header-column { + background-color: var(--header-background-color); +} +.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content { + border-left: none; +} +.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row { + border-left: none; +} +.hds-table--text-align-right { + text-align: right; +} +@media (max-width: 767px) { + .hds-table th { + font-size: var(--fontsize-body-s); + font-weight: bold; + padding: 9px var(--spacing-s); + } + .hds-table__content tr td { + font-size: var(--fontsize-body-s); + padding: 9px var(--spacing-s); + } + .hds-table__caption { + font-size: var(--fontsize-heading-xxs); + letter-spacing: 0.2px; + line-height: var(--lineheight-l); + margin-bottom: var(--spacing-xs); + } +} +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} +.hds-icon--alert-circle-fill { + --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-alert-circle-fill); +} +.hds-icon-start--alert-circle-fill { + --mask-image-before: var(--mask-image-alert-circle-fill); +} +.hds-icon-end--alert-circle-fill { + --mask-image-after: var(--mask-image-alert-circle-fill); +} +.hds-icon--check-circle-fill { + --mask-image-check-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-check-circle-fill); +} +.hds-icon-start--check-circle-fill { + --mask-image-before: var(--mask-image-check-circle-fill); +} +.hds-icon-end--check-circle-fill { + --mask-image-after: var(--mask-image-check-circle-fill); +} +.hds-icon--error-fill { + --mask-image-error-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-error-fill); +} +.hds-icon-start--error-fill { + --mask-image-before: var(--mask-image-error-fill); +} +.hds-icon-end--error-fill { + --mask-image-after: var(--mask-image-error-fill); +} +.hds-icon--info-circle-fill { + --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-info-circle-fill); +} +.hds-icon-start--info-circle-fill { + --mask-image-before: var(--mask-image-info-circle-fill); +} +.hds-icon-end--info-circle-fill { + --mask-image-after: var(--mask-image-info-circle-fill); +} +.hds-notification { + --notification-background-color: var(--color-info-light); + --notification-border-color: var(--color-info); + --notification-border-width: var(--spacing-2-xs); + --notification-icon-color: var(--color-info); + --notification-color: var(--color-black-90); + --notification-max-width-inline: none; + --notification-max-width-toast: 21rem; + --notification-z-index-inline: auto; + --notification-z-index-toast: 99; + --notification-offset: var(--spacing-layout-s); + --notification-padding: var(--spacing-s); + background-color: var(--notification-background-color); + border: solid var(--notification-border-color); + border-width: 0 0 0 var(--notification-border-width); + box-sizing: border-box; + color: var(--notification-color); + max-width: var(--notification-max-width-inline); + padding: var(--notification-padding); + position: relative; + width: 100%; + z-index: var(--notification-z-index-inline); +} +.hds-notification__content { + display: grid; + grid-gap: var(--spacing-s); + gap: var(--spacing-s); +} +.hds-notification__label { + align-items: center; + display: flex; + font-size: var(--fontsize-heading-xs); + font-weight: bold; + letter-spacing: 0; + line-height: 24px; + margin-right: var(--spacing-l); +} +.hds-notification .hds-icon { + --icon-size: var(--spacing-layout-xs); +} +.hds-notification__label > .hds-icon { + color: var(--notification-icon-color); + flex: none; + margin-right: var(--spacing-2-xs); +} +.hds-notification__body { + font-size: var(--fontsize-body-s); + line-height: 24px; +} +.hds-notification__close-button { + --notification-close-button-offset: var(--spacing-s); + background: none; + border: none; + cursor: pointer; + display: flex; + outline: none; + padding: 0; + position: absolute; + right: var(--notification-close-button-offset); + top: var(--notification-close-button-offset); +} +.hds-notification__close-button:focus { + box-shadow: 0 0 0 3px var(--color-focus-outline); +} +.hds-notification--small { + --notification-padding: var(--spacing-2-xs); +} +.hds-notification--small .hds-notification__content { + display: flex; + grid-gap: 0; + gap: 0; +} +.hds-notification--small .hds-notification__label { + margin-right: 0; +} +.hds-notification--small .hds-notification__body { + margin-right: var(--spacing-l); +} +.hds-notification--small .hds-notification__close-button { + --notification-close-button-offset: var(--spacing-2-xs); +} +.hds-notification--large { + --notification-padding: var(--spacing-l); +} +.hds-notification--large .hds-notification__label { + margin-right: 0; +} +.hds-notification--large .hds-notification__close-button { + --notification-close-button-offset: var(--spacing-2-xs); +} +.hds-notification--top-left, .hds-notification--top-center, .hds-notification--top-right, .hds-notification--bottom-left, .hds-notification--bottom-center, .hds-notification--bottom-right { + border-width: var(--notification-border-width) 0 0; + max-width: var(--notification-max-width-toast); + position: fixed; + width: calc(100% - var(--spacing-l)); + z-index: var(--notification-z-index-toast); +} +.hds-notification--top-left { + left: var(--notification-offset); + top: var(--notification-offset); +} +.hds-notification--top-center { + left: 50%; + top: var(--notification-offset); + transform: translateX(-50%); +} +.hds-notification--top-right { + right: var(--notification-offset); + top: var(--notification-offset); +} +.hds-notification--bottom-left { + bottom: var(--notification-offset); + left: var(--notification-offset); +} +.hds-notification--bottom-center { + bottom: var(--notification-offset); + left: 50%; + transform: translateX(-50%); +} +.hds-notification--bottom-right { + bottom: var(--notification-offset); + right: var(--notification-offset); +} +@media only screen and (max-width: 765.98px) { + .hds-notification { + --notification-offset: var(--spacing-s); + } +} +.hds-notification--success { + --notification-background-color: var(--color-success-light); + --notification-border-color: var(--color-success); + --notification-icon-color: var(--color-success); +} +.hds-notification--alert { + --notification-background-color: var(--color-alert-light); + --notification-border-color: var(--color-alert-dark); + --notification-icon-color: var(--color-alert-dark); +} +.hds-notification--error { + --notification-background-color: var(--color-error-light); + --notification-border-color: var(--color-error); + --notification-icon-color: var(--color-error); +} +.hds-notification--box-shadow { + box-shadow: var(--box-shadow-l); +} +.hds-card { + --background-color: var(--color-white); + --border-color: var(--color-black-90); + --color: var(--color-black-90); + --border-width: 2px; + --padding-horizontal: var(--spacing-l); + --padding-vertical: var(--spacing-m); + background-color: var(--background-color); + color: var(--color); + padding: var(--padding-vertical) var(--padding-horizontal); +} +/* WITH BORDER */ +.hds-card--border { + border: var(--border-width) solid var(--border-color); +} +/* WITH BOX-SHADOW */ +.hds-card--box-shadow { + box-shadow: var(--box-shadow-m); +} +/* BODY */ +.hds-card__body { + display: grid; + grid-gap: var(--spacing-s); + gap: var(--spacing-s); + margin-bottom: var(--spacing-l); +} +.hds-card__body:last-child { + margin-bottom: 0; +} +/* BODY TEXT */ +.hds-card__text { + font-size: var(--fontsize-body-m); + line-height: var(--lineheight-l); +} +.hds-container { + box-sizing: border-box; + padding-left: var(--spacing-layout-2-xs); + padding-right: var(--spacing-layout-2-xs); +} +@media (min-width: 768px) { + .hds-container { + padding-left: var(--spacing-layout-xs); + padding-right: var(--spacing-layout-xs); + } +} +@media (min-width: 1248px) { + .hds-container { + max-width: var(--container-width-xl); + padding-left: 0; + padding-right: 0; + } +} +.hds-error-summary__body { + font-size: var(--fontsize-body-s); + line-height: 24px; +} +.hds-error-summary__body ul { + margin: 0; + padding: 0 0 0 var(--spacing-s); +} +.hds-error-summary__body li { + margin-bottom: 0.125rem; +} +.hds-error-summary__body a { + color: var(--color-bus); +} +.hds-fieldset { + --border-style: 0 none; + --padding-top: 4px; + --padding-sides: 0; + --padding-bottom: var(--spacing-s); + border: var(--border-style); + box-sizing: border-box; + padding: var(--padding-top) var(--padding-sides) var(--padding-bottom); +} +.hds-fieldset-legend { + font-weight: bold; + /* Normalize.css rule + * Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + padding: 0; +} +.hds-fieldset--border { + --border-style: 2px inset var(--color-black-90); + --padding-top: 2px; + --padding-sides: 12px; +} +.hds-fieldset--border > .hds-fieldset-legend { + margin-left: calc(var(--padding-sides) / -2); + padding: 0 6px; +} +.hds-hero { + --arrow-icon-color: var(--color); + --arrow-icon-size: 128px; + --background-color: var(--color-white); + --color: var(--color-black-90); + --diagonal-koros-position: 45%; + --horizontal-padding-large: var(--spacing-layout-xs); + --horizontal-padding-medium: var(--spacing-layout-xs); + --horizontal-padding-small: var(--spacing-layout-2-xs); + --horizontal-padding-x-large: var(--spacing-layout-xs); + --image-position: bottom right; + --koros-color: var(--color-white); + --bottom-koros-color: var(--koros-color); + --koros-height: 85px; + --padding-horizontal: var(--horizontal-padding-small); + --padding-vertical: var(--spacing-xl); + --z-index: 1; + --bottom-background-color: transparent; + --information-padding-top: 0; + --information-color: inherit; + background-color: var(--background-color); + color: var(--color); + display: flex; + flex-direction: column; + position: relative; + z-index: var(--z-index); +} +.hds-hero__bottom-container { + background-color: var(--bottom-background-color); + width: 100%; +} +.hds-hero__bottom-content-aligner { + display: flex; + justify-content: space-between; + margin: 0 auto; + max-width: var(--container-width-xl); + position: relative; + width: 100%; + z-index: calc(var(--z-index) + 1); +} +.hds-hero__arrow-icon-container { + display: flex; + position: relative; + z-index: calc(var(--z-index) + 1); +} +.hds-hero--arrow-icon { + --icon-size: var(--arrow-icon-size) !important; + color: var(--arrow-icon-color); + /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account) */ + margin-left: calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4); + margin-top: calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs)); +} +.hds-hero__information-container { + display: flex; + flex-grow: 1; + justify-content: flex-end; + padding-top: var(--information-padding-top); +} +.hds-hero__information-container span { + color: var(--information-color); + padding: var(--spacing-2-xs) var(--spacing-s); +} +.hds-hero__title { + font-size: var(--fontsize-heading-xl-mobile); + font-weight: normal; + letter-spacing: -1px; + line-height: var(--lineheight-s); + margin: 0 0 var(--spacing-s) 0; +} +.hds-hero__text { + font-size: var(--fontsize-body-l); + margin: 0 0 var(--spacing-s) 0; +} +.hds-hero__text:last-of-type { + margin: 0 0 var(--spacing-l) 0; +} +.hds-hero__container { + margin-left: auto; + margin-right: auto; + max-width: var(--container-width-xl); +} +.hds-hero__content { + display: flex; + padding: var(--padding-vertical) var(--padding-horizontal); +} +.hds-hero__content--single-column, +.hds-hero__content--two-columns { + display: flex; + flex-direction: column; +} +.hds-hero__content--two-columns { + align-items: center; +} +.hds-hero__content--two-columns__image-container { + display: none; +} +.hds-hero__card { + display: block; + max-width: var(--container-width-xl); +} +.hds-hero__koros-container, +.hds-hero__koros-container--overflow-bottom, +.hds-hero__koros-container--inward-koros { + height: var(--koros-height); + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + position: absolute; + z-index: 1; +} +.hds-hero__koros-container--inward-koros { + position: relative; +} +.hds-hero__koros-container--overflow-bottom { + bottom: calc(-1 * var(--koros-height)); + display: flex; + flex-direction: column; + justify-content: flex-end; + top: auto; +} +.hds-hero__koros-container > div { + bottom: 0; + height: 100%; + position: absolute; + width: 100%; +} +.hds-hero__card--centered-content { + text-align: center; + width: 100%; } - -.hds-container { +.hds-hero__image { + display: block; + width: 100%; +} +.hds-hero__koros-and-image-container { + display: block; + position: relative; +} +.hds-hero__image-below-koros { + display: block; +} +.hds-hero__image-below-koros .hds-hero__image { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: var(--image-position); + object-position: var(--image-position); +} +.hds-hero--with-background__container { + position: relative; +} +.hds-hero--with-background__background { + position: relative; + width: 100%; +} +.hds-hero--with-background__background .hds-hero__image { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: var(--image-position); + object-position: var(--image-position); +} +.hds-hero--with-background__content-columns { + display: flex; + margin: 0 auto; + max-width: var(--container-width-xl); +} +.hds-hero--with-background__empty-column { + display: none; +} +.hds-hero--background-image .hds-hero__content { + padding: 0; +} +.hds-hero--background-image .hds-hero__card { + background-color: var(--background-color); + padding: var(--padding-vertical) var(--padding-horizontal); +} +.hds-hero--background-image__koros { + bottom: 0; + height: var(--koros-height); + overflow: hidden; + position: absolute; + width: 100%; + --koros-color: var(--top-koros-color); +} +.hds-hero--diagonal-koros .hds-hero--with-background__container { + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + z-index: 1; +} +.hds-hero--diagonal-koros .hds-hero__content { box-sizing: border-box; + display: block; + padding: 0; + width: 100%; + z-index: 2; } - -@media (min-width: 320px) { - .hds-container { - max-width: var(--container-width-xs); - } +.hds-hero--diagonal-koros .hds-hero__card { + background-color: var(--background-color); + padding: var(--padding-vertical) var(--padding-horizontal); } - -@media (min-width: 576px) { - .hds-container { - max-width: var(--container-width-s); - } +.hds-hero--diagonal-koros__koros-and-background { + height: var(--koros-height); + position: absolute; + transform: rotate(180deg); + width: 100%; } - -@media (min-width: 768px) { - .hds-container { - max-width: var(--container-width-m); - } +.hds-hero--diagonal-koros__koros-aligner { + position: relative; + z-index: 1; } - -@media (min-width: 992px) { - .hds-container { - max-width: var(--container-width-l); +.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container { + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + width: 100%; +} +.hds-hero--with-background__background, +.hds-hero__image-below-koros { + height: 300px; +} +@media only screen and (min-width: 768px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-medium); + --padding-vertical: var(--spacing-layout-m); + --arrow-icon-size: 164px; + } + .hds-hero--with-background__background, + .hds-hero__image-below-koros { + height: 400px; + } + .hds-hero__information-container span { + padding-bottom: var(--spacing-xs); + padding-right: var(--spacing-m); + padding-top: var(--spacing-xs); } } - -@media (min-width: 1248px) { - .hds-container { +@media only screen and (min-width: 992px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-large); + --padding-vertical: var(--spacing-layout-xl); + } + .hds-hero__text { + font-size: var(--fontsize-body-xl); + } + .hds-hero--image-left .hds-hero__image-below-koros, + .hds-hero--image-right .hds-hero__image-below-koros { + display: none; + } + .hds-hero--image-left .hds-hero__information-container, + .hds-hero--image-right .hds-hero__information-container { + --information-padding-top: var(--koros-height); + } + .hds-hero__content--two-columns { + flex-direction: row; + } + .hds-hero__content--two-columns > * { + width: 50%; + } + .hds-hero__content--two-columns > *:first-child { + margin-right: var(--spacing-xl); + } + .hds-hero__content--two-columns > *:last-child { + margin-left: var(--spacing-xl); + } + .hds-hero__content--two-columns__image-container { + display: block; + } + .hds-hero--background-image .hds-hero--with-background__container { + padding: var(--padding-vertical) var(--padding-horizontal); + } + .hds-hero--background-image .hds-hero__content { + --padding-vertical: var(--spacing-2-xl); + display: flex; + flex-direction: row; + margin: 0 auto; + max-width: var(--container-width-xl); + } + .hds-hero--background-image .hds-hero__card { + width: 50%; + } + .hds-hero--with-background__background { + height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + width: auto; + z-index: -1; + } + .hds-hero--with-background__empty-column { + display: block; + width: 45%; + } + .hds-hero--diagonal-koros .hds-hero__content { + background-color: transparent; + padding: var(--padding-vertical) 0; + } + .hds-hero--diagonal-koros .hds-hero__card { + background: none; + padding: 0 var(--padding-horizontal); + width: 55%; + } + .hds-hero--diagonal-koros__koros-aligner { + bottom: 0; max-width: var(--container-width-xl); + position: absolute; + right: var(--diagonal-koros-position); + top: 0; + width: 100%; + z-index: 1; + } + .hds-hero--diagonal-koros__koros-and-background { + display: block; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: visible; + position: absolute; + transform: rotate(135deg); + transform-origin: center; + width: 150%; + } + .hds-hero--diagonal-koros__koros-and-background:after { + background-color: var(--koros-color); + content: ""; + display: block; + height: 1500px; + left: 0; + position: absolute; + top: 50px; + width: 150%; + } + .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container { + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + .hds-hero--background-image__koros { + --koros-color: var(--bottom-koros-color); + } + .hds-hero__title { + font-size: var(--fontsize-heading-xl); + } +} +@media only screen and (min-width: 1248px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-x-large); + } + .hds-hero__title { + font-size: var(--fontsize-heading-xxl); + letter-spacing: -1.2px; + line-height: var(--lineheight-s); + } + .hds-hero--diagonal-koros .hds-hero__text { + padding-right: var(--spacing-l); + } + .hds-hero__content--two-columns > *:first-child { + margin-right: var(--spacing-2-xl); } + .hds-hero__content--two-columns > *:last-child { + margin-left: var(--spacing-2-xl); + } +} +.hds-highlight { + --accent-line-color: var(--color-bus); + --text-color: var(--color-black-90); + --size-width-s: 264px; + --size-width-m: 536px; + --size-width-l: 680px; + --width: var(--size-width-m); + --margin: var(--spacing-m) 0; + border-left: 8px solid var(--accent-line-color); + color: var(--text-color); + display: flex; + flex-direction: column; + justify-content: center; + margin: var(--margin); + max-width: 100%; + padding: 0; + padding-left: var(--spacing-s); + grid-row-gap: var(--spacing-m); + row-gap: var(--spacing-m); + width: var(--width); +} +.hds-blockquote { + margin: 0; + padding: 0; +} +.hds-highlight__text { + color: var(--text-color); + font-size: var(--fontsize-heading-m); + letter-spacing: -0.2px; + line-height: var(--lineheight-m); + margin: 0; + padding: 0; +} +.hds-highlight--small { + --margin: var(--spacing-s) 0; + --width: var(--size-width-s); +} +.hds-highlight--large { + --margin: var(--spacing-l) 0; + --width: var(--size-width-l); +} +.hds-highlight--large .hds-highlight__text { + font-size: var(--fontsize-heading-l); + letter-spacing: -0.4px; + line-height: var(--lineheight-l); +} +.hds-highlight__quote:before, +.hds-highlight__quote:after { + content: '"'; + display: inline; +} +.hds-highlight__reference { + font-size: var(--fontsize-heading-xs); + line-height: var(--lineheight-m); } - .hds-koros { - width: 100%; line-height: 0; + width: 100%; } - -.hds-koros--flip-horizontal { +.hds-koros--flip-vertical { transform: scaleY(-1); } - +.hds-koros--45deg { + transform: rotate(45deg); + will-change: transform; /* The browser should use a new compositing layer when rotating. Otherwise, it will draw an annoying hairline on top of the Koros. */ +} +.hds-koros--90deg { + transform: rotate(90deg); + will-change: transform; +} +.hds-koros--135deg { + transform: rotate(135deg); + will-change: transform; +} +.hds-koros--180deg { + transform: rotate(180deg); + will-change: transform; +} +.hds-koros--225deg { + transform: rotate(225deg); + will-change: transform; +} +.hds-koros--270deg { + transform: rotate(270deg); + will-change: transform; +} +.hds-koros--315deg { + transform: rotate(315deg); + will-change: transform; +} +@use "../../icons/icon.css"; +@use "../../icons/link-external.css"; .hds-link { --link-visited-color: #551a8b; --link-color: var(--color-bus); - text-decoration: underline; - color: var(--link-color); - box-sizing: border-box; border: 3px solid transparent; + box-sizing: border-box; + color: var(--link-color); + text-decoration: underline; } - .hds-link:visited { color: var(--link-visited-color); } - .hds-link:visited svg g path { /* Fixes external link icon visited color for Safari */ fill: var(--link-visited-color); } - .hds-link:focus { - border: 3px solid var(--color-coat-of-arms); + border: 3px solid var(--color-focus-outline); outline: none; } - .hds-link.focus-visible { outline: none; } - .hds-link:focus-visible { outline: none; } - -.hds-link .vertical-align-small-or-medium-icon { +.hds-link .vertical-align-medium-icon { vertical-align: sub; } - .hds-link .vertical-align-big-icon { vertical-align: middle; } - +.hds-link .vertical-align-small-icon { + vertical-align: text-top; +} .hds-link--disable-visited-styles:visited { color: var(--color-bus); } - .hds-link--small { font-size: 14px; } - .hds-link--medium { font-size: 16px; } - .hds-link--large { - font-size: 18px; display: block; + font-size: 18px; + width: -moz-fit-content; width: fit-content; } - /* ICONS */ - .hds-link--small .icon { margin-left: 7px; } - .hds-link--medium .icon { margin-left: var(--spacing-2-xs); margin-top: -3px; /* Fixes lineheight problem for external inline link */ } - .hds-link--large .icon { margin-left: var(--spacing-s); } - -.hds-link--small .hds-icon-left { +.hds-link--small .hds-icon-start { margin-right: 4px; vertical-align: text-top; } - -.hds-link--medium .hds-icon-left { +.hds-link--medium .hds-icon-start { margin-right: 8px; vertical-align: sub; } - -.hds-link--large .hds-icon-left { +.hds-link--large .hds-icon-start { margin-right: 16px; vertical-align: middle; } - .hds-loading-spinner { --spinner-size: 4rem; --spinner-color: var(--color-coat-of-arms); --spinner-thickness: 0.5rem; --spinner-rotation-animation-duration: 1.5s; --spinner-color-animation-duration: 4.5s; - --spinner-color-stage1: var(--color-coat-of-arms); --spinner-color-stage2: var(--color-copper); --spinner-color-stage3: var(--color-suomenlinna); - + border-top-color: var(--spinner-color); + height: var(--spinner-size); position: relative; width: var(--spinner-size); - height: var(--spinner-size); - border-top-color: var(--spinner-color); } - .hds-loading-spinner--multicolor { - border-top-color: var(--spinner-color-stage1); animation: spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite; + border-top-color: var(--spinner-color-stage1); } - .hds-loading-spinner--small { --spinner-size: 1.5rem; --spinner-thickness: 0.1875rem; } - .hds-loading-spinner div { - position: absolute; - box-sizing: border-box; - width: 100%; - height: 100%; + animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite; border: var(--spinner-thickness) solid transparent; - border-top-color: inherit; border-radius: 50%; - animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite; + border-top-color: inherit; + box-sizing: border-box; + height: 100%; + position: absolute; + width: 100%; } - .hds-loading-spinner div:nth-child(2) { animation-delay: -0.15s; } - .hds-loading-spinner div:nth-child(3) { animation-delay: -0.3s; } - @keyframes spinner-rotation-animation { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } - @keyframes spinner-color-animation { - 0% {} - 33.3% { border-top-color: var(--spinner-color-stage2) } - 66.6% { border-top-color: var(--spinner-color-stage3) } - 100% {} -} - -.hds-notification { - --notification-background-color: var(--color-info-light); - --notification-border-color: var(--color-info); - --notification-border-width: var(--spacing-2-xs); - --notification-icon-color: var(--color-info); - --notification-color: var(--color-black-90); - --notification-focus-outline-color: var(--color-coat-of-arms); - --notification-max-width-inline: none; - --notification-max-width-toast: 21rem; - --notification-z-index-inline: auto; - --notification-z-index-toast: 99; - --notification-offset: var(--spacing-layout-s); - --notification-padding: var(--spacing-s); - - background-color: var(--notification-background-color); - border: solid var(--notification-border-color); - border-width: 0 0 0 var(--notification-border-width); - box-sizing: border-box; - color: var(--notification-color); - max-width: var(--notification-max-width-inline); - padding: var(--notification-padding); - position: relative; - width: 100%; - z-index: var(--notification-z-index-inline); -} - -/* CONTENT */ - -.hds-notification__content { - display: grid; - grid-gap: var(--spacing-s); - gap: var(--spacing-s); -} - -/* LABEL */ - -.hds-notification__label { - align-items: flex-start; - display: flex; - font-weight: bold; - font-size: var(--fontsize-body-l); - margin-right: var(--spacing-l); -} - -.hds-notification__label > .hds-icon { - color: var(--notification-icon-color); - margin-right: var(--spacing-2-xs); -} - -/* SMALL */ - -.hds-notification--small { - --notification-padding: var(--spacing-2-xs); -} - -.hds-notification--small .hds-notification__content { - display: flex; - grid-gap: 0; - gap: 0; -} - -.hds-notification--small .hds-notification__label { - margin-right: 0; -} - -.hds-notification--small .hds-notification__body { - margin-right: var(--spacing-l); -} - -/* LARGE */ - -.hds-notification--large { - --notification-padding: var(--spacing-l); -} - -.hds-notification--large .hds-notification__label { - margin-right: 0; -} - -/* ICON */ - -.hds-notification .hds-icon { - --icon-size: var(--spacing-layout-xs); -} - -.hds-notification__label > .hds-icon { - flex: none; -} - -.hds-notification:not(.hds-notification--small) .hds-notification__label > .hds-icon { - transform: translateY(var(--spacing-4-xs)); -} - -/* CLOSE BUTTON */ - -.hds-notification__close-button { - --notification-close-button-offset: var(--spacing-s); - background: none; - border: none; - cursor: pointer; - display: flex; - outline: none; - padding: 0; - position: absolute; - right: var(--notification-close-button-offset); - top: var(--notification-close-button-offset); -} - -.hds-notification--small .hds-notification__close-button, -.hds-notification--large .hds-notification__close-button { - --notification-close-button-offset: var(--spacing-2-xs); -} - -.hds-notification__close-button:focus { - box-shadow: 0 0 0 3px var(--notification-focus-outline-color); -} - -/* TOAST POSITIONS */ - -.hds-notification--top-left, -.hds-notification--top-center, -.hds-notification--top-right, -.hds-notification--bottom-left, -.hds-notification--bottom-center, -.hds-notification--bottom-right { - border-width: var(--notification-border-width) 0 0; - max-width: var(--notification-max-width-toast); - position: fixed; - width: calc(100% - var(--spacing-l)); - z-index: var(--notification-z-index-toast); -} - -.hds-notification--top-left { - top: var(--notification-offset); - left: var(--notification-offset); -} - -.hds-notification--top-center { - top: var(--notification-offset); - left: 50%; - transform: translateX(-50%); -} - -.hds-notification--top-right { - top: var(--notification-offset); - right: var(--notification-offset); + 0% { /* empty */ } + 33.3% { + border-top-color: var(--spinner-color-stage2); + } + 66.6% { + border-top-color: var(--spinner-color-stage3); + } + 100% { /* empty */ } } - -.hds-notification--bottom-left { - bottom: var(--notification-offset); - left: var(--notification-offset); +@use "../../icons/icon.css"; +@use "../../icons/angle-right.css"; +@use "../../icons/angle-left.css"; +.hds-pagination-container { + text-align: center; } - -.hds-notification--bottom-center { - bottom: var(--notification-offset); - left: 50%; - transform: translateX(-50%); +.hds-pagination { + display: inline-block; /* Allows centering */ + font-size: var(--fontsize-body-m); + font-weight: bold; + line-height: var(--lineheight-l); + position: relative; /* Enables position absolute for btn--next */ + transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */ + --active-page-background-color: var(--color-black); + --link-height: 40px; +} +/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next, +we can not use this position for the actual button as it's in incorrect source order for tabbing */ +.hds-pagination:before { + content: attr(data-next); /* Trick to keep floating element same size as btn--next */ + content: attr(data-next)/""; /* Removes this pseudo-element from screen readers where supported */ + display: block; + float: right; /* Floated pseudo-element wraps the inline ul around it */ + line-height: 56px; + padding-left: 100px; + speak: never; /* Removes this pseudo-element from screen readers where supported */ + visibility: hidden; } - -.hds-notification--bottom-right { - bottom: var(--notification-offset); - right: var(--notification-offset); +.hds-pagination .hds-pagination__button-prev { + float: left; + margin-right: 8px; + transform: scaleY(-1); /* Flip the element back from upside down */ + white-space: nowrap; } - -@media only screen and (max-width: 765.98px) { - .hds-notification { - --notification-offset: var(--spacing-s); - } +.hds-pagination .hds-pagination__button-next { + position: absolute; + right: 0; + top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */ + transform: scaleY(-1); /* Flip the element back from upside down */ + white-space: nowrap; } - -/* TYPES */ - -.hds-notification--success { - --notification-background-color: var(--color-success-light); - --notification-border-color: var(--color-success); - --notification-icon-color: var(--color-success); +.hds-pagination__pages { + display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */ + flex-wrap: wrap; /* Allow wrapping of the li-elements */ + grid-gap: var(--spacing-2-xs); + gap: var(--spacing-2-xs); + justify-content: center; /* Center the li-elements */ + list-style: none; + margin-bottom: 0; + margin-top: 8px; + padding: 0; + transform: scaleY(-1); /* Flip the element back from upside down */ } - -.hds-notification--alert { - --notification-background-color: var(--color-alert-light); - --notification-border-color: var(--color-alert-dark); - --notification-icon-color: var(--color-alert-dark); +.hds-pagination__item-link { + align-items: center; + border-radius: 21px; + color: var(--color-black-90); + display: flex; + height: var(--link-height); + justify-content: center; + min-width: 32px; + padding-left: var(--spacing-3-xs); + padding-right: var(--spacing-3-xs); + text-decoration: none; } - -.hds-notification--error { - --notification-background-color: var(--color-error-light); - --notification-border-color: var(--color-error); - --notification-icon-color: var(--color-error); +.hds-pagination__item-link:hover { + text-decoration: underline; } - -.hds-error-summary__body { - font-size: var(--fontsize-body-s); - line-height: 1.625rem; +.hds-pagination__item-link:focus, .hds-pagination__item-link:active { + outline: solid var(--color-focus-outline) 3px; + outline-offset: 1px; } - -.hds-error-summary__body ul { - margin: 0; - padding: 0 0 0 var(--spacing-s); +.hds-pagination__item-link.hds-pagination__item-link--active { + background-color: var(--active-page-background-color); + color: var(--color-white); } - -.hds-error-summary__body li { - margin-bottom: 0.125rem; +.hds-pagination__item-link.hds-pagination__item-link--active:hover { + text-decoration: none; } - -.hds-error-summary__body a { - color: var(--color-bus); +.hds-pagination__item-ellipsis { + align-items: center; + color: var(--color-black-90); + display: flex; + height: var(--link-height); + justify-content: center; + width: 40px; } - .hds-radio-button { --size: 24px; /* icon (circle) size relative to the radio button size (--size) */ @@ -1179,13 +1687,11 @@ input[type="submit"].hds-button--small { --outline-width: 3px; --label-font-size: var(--fontsize-body-m); --label-padding: var(--spacing-2-xs); - --background: var(--color-white); --background-hover: var(--color-white); --background-focus: var(--color-white); --background-unselected-disabled: var(--color-black-10); --background-selected-disabled: var(--color-white); - --border-color-focus: var(--color-black-90); --border-color-selected: var(--color-bus); --border-color-selected-hover: var(--color-bus-dark); @@ -1193,200 +1699,163 @@ input[type="submit"].hds-button--small { --border-color-unselected: var(--color-black-50); --border-color-unselected-hover: var(--color-black-90); --border-color-unselected-disabled: var(--color-black-10); - --icon-color-selected: var(--color-bus); --icon-color-unselected: transparent; --icon-color-hover: var(--color-bus-dark); --icon-color-disabled: var(--color-black-10); - - --focus-outline-color: var(--color-coat-of-arms); - --label-color: var(--color-black-90); --label-color-disabled: var(--color-black-40); - display: flex; + flex-wrap: wrap; min-height: var(--size); position: relative; } - .hds-radio-button, .hds-radio-button *, -.hds-radio-button *::before, -.hds-radio-button *::after { +.hds-radio-button *:before, +.hds-radio-button *:after { box-sizing: border-box; } - .hds-radio-button:not(:first-of-type) { margin-top: var(--spacing-2-xs); } - +.hds-radio-button .hds-radio-button__label:before, +.hds-radio-button .hds-radio-button__label:after { + border-radius: 50%; + content: ""; + left: 0; + position: absolute; + top: 0; +} +/* inner circle */ +.hds-radio-button .hds-radio-button__label:after { + background-clip: content-box; + background-color: var(--icon-color-unselected); + border: var(--border-width) solid var(--border-color-unselected); + height: var(--size); + padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale))); + width: var(--size); +} +/* inner circle - selected */ +.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after { + background-color: var(--icon-color-selected); + border-color: var(--border-color-selected); +} /* radio button transitions */ - -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::after { +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after { transition: 85ms ease-out; transition-property: background-color, border-color; } - -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::before, -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::before { +/* inner circle - disabled */ +.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after { + border-color: var(--border-color-unselected-disabled); +} +/* inner circle - selected - disabled */ +.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after { + background-color: var(--icon-color-disabled); + border-color: var(--border-color-selected-disabled); +} +/* inner circle - focus */ +.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after { + border-color: var(--border-color-focus); +} +/* inner circle - unselected - hover */ +.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after { + border-color: var(--border-color-unselected-hover); +} +/* background & focus outline */ +.hds-radio-button .hds-radio-button__label:before { + background-color: var(--background); + height: var(--size); + width: var(--size); +} +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before, +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before { transition: 85ms ease-out; transition-property: background-color, box-shadow, transform; } - /* NATIVE INPUT */ - .hds-radio-button .hds-radio-button__input { + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ height: var(--size); left: 0; + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ opacity: 0; position: absolute; top: 0; width: var(--size); } - /* LABEL */ - .hds-radio-button .hds-radio-button__label { color: var(--label-color); cursor: pointer; font-size: var(--label-font-size); line-height: var(--lineheight-m); padding-left: calc(var(--size) + var(--label-padding)); - padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2); + padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2); position: relative; } - /* CUSTOM RADIO BUTTON */ - -.hds-radio-button .hds-radio-button__label::before, -.hds-radio-button .hds-radio-button__label::after { - border-radius: 50%; - content: ""; - left: 0; - position: absolute; - top: 0; -} - -/* background & focus outline */ - -.hds-radio-button .hds-radio-button__label::before { - background-color: var(--background); - height: var(--size); - width: var(--size); -} - /* background - hover */ - -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before { background-color: var(--background-hover); } - /* background - focus */ - -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::before { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); transform: translate3d(0, 0, 0); } - -/* inner circle */ - -.hds-radio-button .hds-radio-button__label::after { - background-clip: content-box; - background-color: var(--icon-color-unselected); - border: var(--border-width) solid var(--border-color-unselected); - height: var(--size); - padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale))); - width: var(--size); -} - -/* inner circle - selected */ - -.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label::after { - background-color: var(--icon-color-selected); - border-color: var(--border-color-selected); -} - /* inner circle - selected - hover */ - -.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label::after { +.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after { background-color: var(--icon-color-hover); border-color: var(--border-color-selected-hover); } - -/* inner circle - unselected - hover */ - -.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label::after { - border-color: var(--border-color-unselected-hover); -} - -/* inner circle - focus */ - -.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label::after { - border-color: var(--border-color-focus); -} - /* DISABLED */ - /* label */ - .hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label { color: var(--label-color-disabled); } - /* background */ - -.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before { background-color: var(--background-unselected-disabled); } - /* background - selected */ - -.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before { background-color: var(--background-selected-disabled); } - -/* inner circle - disabled */ - -.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label::after { - border-color: var(--border-color-unselected-disabled); -} - -/* inner circle - selected - disabled */ - -.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label::after { - background-color: var(--icon-color-disabled); - border-color: var(--border-color-selected-disabled); -} - .hds-radio-button .hds-radio-button__input:disabled, .hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label { cursor: not-allowed; } - +@use "../../icons/icon.css"; +@use "../../icons/search.css"; .hds-search-input { --border-width: 2px; --outline-width: 3px; --input-height: 56px; - --helper-color-default: var(--color-black-60); --input-background-default: var(--color-white); --input-border-color-default: var(--color-black-50); - --input-border-color-hover : var(--color-black-90); + --input-border-color-hover: var(--color-black-90); --input-border-color-focus: var(--color-black-90); --input-color-default: var(--color-black-90); --label-color-default: var(--color-black-90); - --focus-outline-color: var(--color-coat-of-arms); } - -.hds-search-input .hds-search-input__input:hover { - transition: border-color 85ms ease-out; -} - /* LABEL */ - .hds-search-input__label { color: var(--label-color-default); display: block; @@ -1394,15 +1863,12 @@ input[type="submit"].hds-button--small { font-weight: 500; margin-bottom: var(--spacing-3-xs); } - /* INPUT */ - .hds-search-input__input-wrapper { display: flex; height: 100%; position: relative; } - .hds-search-input .hds-search-input__input { -webkit-appearance: none; background-color: var(--input-background-default); @@ -1415,84 +1881,92 @@ input[type="submit"].hds-button--small { padding: 0 var(--spacing-s); width: 100%; } - .hds-search-input .hds-search-input__input:hover { border-color: var(--input-border-color-hover); + transition: border-color 85ms ease-out; } - .hds-search-input .hds-search-input__input:focus { border-color: var(--input-border-color-focus); outline: none; } - /* FOCUS OUTLINE */ - .hds-search-input .hds-search-input__input:not([readonly]):focus { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); + outline: var(--outline-width) solid var(--color-focus-outline); transform: translate3d(0, 0, 0); } - /* BUTTON */ - .hds-search-input__buttons { - position: absolute; - right: var(--spacing-s); - top: var(--spacing-s); - transform: translateY(0); - display: flex; align-items: center; + bottom: 0; + display: flex; + font-size: 1rem; justify-content: center; + margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2); + position: absolute; + right: 0; + top: 0; } - -.hds-search-input__buttons .hds-search-input__button { +.hds-search-input__button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background: none; border: none; color: inherit; + color: var(--dropdown-color-default); cursor: pointer; + display: flex; font: inherit; - padding: 0; - color: var(--dropdown-color-default); outline: none; - display: flex; - margin-left: var(--spacing-xs); + padding: var(--spacing-xs) calc(var(--spacing-xs) / 2); } - .hds-search-input__buttons .hds-search-input__button:focus { - outline: none; - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); + outline: var(--outline-width) solid var(--color-focus-outline); } - /* HELPER TEXT */ - .hds-search-input__helper-text { color: var(--helper-color-default); display: block; font-size: var(--fontsize-body-m); margin-top: var(--spacing-3-xs); } - .hds-selection-group { --spacing-col: 1.25rem; --spacing-row: var(--spacing-s); + --spacing-legend: var(--spacing-xs); --label-color-default: var(--color-black-90); --icon-size: var(--spacing-m); - border: 0; + display: flex; + flex-direction: column; + margin: 0; padding: 0; } - .hds-selection-group > *:not(.hds-selection-group__items) { float: left; } - .hds-selection-group__legend { + /* + * Normalized rules + * 1. Correct the text wrapping in Edge and IE. + * `fieldset` elements in all browsers. + */ + box-sizing: border-box; /* 1 */ color: var(--label-color-default); display: block; font-size: var(--fontsize-body-m); font-weight: 500; - margin-bottom: var(--spacing-row); + margin-bottom: var(--spacing-legend); + /* + * Normalized rules + * 1. Correct the text wrapping in Edge and IE. + * 2. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + max-width: 100%; /* 1 */ + padding: 0; /* 2 */ + white-space: normal; /* 1 */ } - .hds-selection-group__required { color: var(--label-color-default); display: inline-block; @@ -1501,316 +1975,280 @@ input[type="submit"].hds-button--small { margin-left: var(--spacing-2-xs); transform: translateY(var(--spacing-3-xs)); } - .hds-selection-group__items { - clear: left; - display: grid; - grid-gap: var(--spacing-row) var(--spacing-col); - gap: var(--spacing-row) var(--spacing-col); - justify-content: start; -} - -.hds-selection-group__items--vertical { - grid-auto-flow: row; -} - -.hds-selection-group__items--horizontal { - grid-auto-flow: column; -} - -.hds-selection-group__error-text { - position: relative; - color: var(--color-error); - display: block; - font-size: var(--fontsize-body-m); - margin-top: var(--spacing-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); -} - -.hds-selection-group__error-text::before { - background: var(--color-error); - content: ''; - height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - pointer-events: none; - position: absolute; - left: 0; - top: 0; - width: var(--icon-size); -} - -.hds-status-label { - --status-label-background: var(--color-black-10); - --status-label-color: var(--color-black-90); - --status-label-height: 32px; - - background-color: var(--status-label-background); - color: var(--status-label-color); - display: inline-block; - font-size: var(--fontsize-body-s); - min-height: var(--status-label-height); - line-height: var(--status-label-height); - padding: 0 var(--spacing-2-xs); - vertical-align: middle; -} - -.hds-status-label--with-icon { - align-items: center; - display: inline-flex; - padding-left: var(--spacing-3-xs); -} - -.hds-status-label-icon { - height: var(--spacing-m); - margin-right: var(--spacing-3-xs); - width: var(--spacing-m); -} - -.hds-status-label--info { - --status-label-background: var(--color-info); - --status-label-color: var(--color-white); -} - -.hds-status-label--success { - --status-label-background: var(--color-success); - --status-label-color: var(--color-white); -} - -.hds-status-label--alert { - --status-label-background: var(--color-alert); -} - -.hds-status-label--error { - --status-label-background: var(--color-error); - --status-label-color: var(--color-white); -} - -.hds-table-container { - overflow-x: auto; -} - -.hds-table-container:focus { - outline: var(--color-coat-of-arms) 3px solid; -} - -.hds-table { - border-collapse: collapse; - width: 100%; - line-height: 1.5; -} - -.hds-table th { - border-bottom: 1px solid var(--color-black-20); - white-space: nowrap; - text-align: left; - font-weight: 500; - font-size: var(--fontsize-heading-xxs); - padding: var(--spacing-xs) var(--spacing-m); -} - -.hds-table__content tr td { - font-weight: 400; - padding: var(--spacing-xs) var(--spacing-m); - border-bottom: 1px solid var(--color-black-50); - font-size: var(--fontsize-body-m); - color: var(--color-black-90); -} - -.hds-table__header-row { - background-color: var(--background-color); -} - -.hds-table__caption { - text-align: left; - margin-bottom: var(--spacing-s); - font-size: var(--fontsize-heading-xs); - line-height: var(--lineheight-l); -} - -/* DARK VARIANT */ - -.hds-table--dark { - --background-color: var(--color-bus); -} - -.hds-table.hds-table--dark th { - color: var(--color-white); + clear: left; + display: grid; + grid-gap: var(--spacing-row) var(--spacing-col); + gap: var(--spacing-row) var(--spacing-col); + justify-content: start; } - -/* LIGHT VARIANT */ - -.hds-table--light { - --background-color: var(--color-silver); +.hds-selection-group__items--vertical { + grid-auto-flow: row; } - -.hds-table.hds-table--light th { - color: var(--color-black-90); +.hds-selection-group__items--horizontal { + grid-auto-flow: column; } - -/* DENSE VARIANT */ - -.hds-table--dense.hds-table th { - font-weight: bold; - font-size: var(--fontsize-body-s); - padding: 9px var(--spacing-s); +.hds-selection-group__error-text { + background-color: var(--color-error-light); + border-left: 8px solid var(--color-error); + color: var(--color-black); + display: flex; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-legend); + padding: var(--spacing-2-xs); + position: relative; } - -.hds-table--dense .hds-table__content tr td { - padding: 9px var(--spacing-s); - font-size: var(--fontsize-body-s); +.hds-selection-group__error-text:before { + background: var(--color-error); + content: ""; + display: inline-block; + height: var(--icon-size); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + pointer-events: none; + width: var(--icon-size); } - -.hds-table--dense .hds-table__caption { - margin-bottom: var(--spacing-xs); - font-size: var(--fontsize-heading-xxs); +.hds-selection-group__helper-text-gap { + margin-top: var(--spacing-legend); } - -/* ZEBRA VARIANT */ - -.hds-table--zebra .hds-table__content tr:nth-child(even) td { - background-color: var(--color-black-10); +.hds-step-by-step__container { + position: relative; } - -.hds-table--zebra .hds-table__content tr td { - border-bottom: none; +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +.hds-step-by-step__container h1 { + font-size: 2em; + margin: 0.67em 0; +} +.hds-step-by-step__steps-container { + --title-font-size: var(--fontsize-heading-m); + --title-line-height: var(--lineheight-xl); + counter-reset: item; + letter-spacing: -0.2px; + margin: 0; + padding: 0; } - -/* VERTICAL LINES VARIANT */ - -.hds-table--with-vertical-lines .hds-table__content td { - border-right: 1px solid var(--color-black-50); +ol.hds-step-by-step__steps-container { + --circle-size: 48px; + --step-left-padding: 96px; } - -.hds-table--with-vertical-lines .hds-table__content { - border-left: 1px solid var(--color-black-50); +.hds-step-by-step__step-item:before, +.hds-step-by-step__step-item:after { + box-sizing: border-box; + content: ""; + display: block; + left: calc(var(--circle-size) / 2 + var(--step-left-padding) / 2); + position: absolute; + top: calc(var(--spacing-l) + var(--title-font-size) * var(--title-line-height) / 2 - var(--circle-size) / 2); } - -.hds-table--with-vertical-lines .hds-table__header-row { - border-right: 1px solid var(--background-color); - border-left: 1px solid var(--background-color); +.hds-step-by-step__step-item:after { + background-color: #fff; + border: 3px solid #000; + border-radius: 50%; + height: var(--circle-size); + transform: translateX(-100%); + width: var(--circle-size); + z-index: 2; } - -/* VERTICAL HEADER VARIANT */ - -.hds-table__vertical-header-column { - background-color: var(--background-color); +ol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after { + --line-height: 1.3; + align-items: center; + content: counter(item); + counter-increment: item; + display: flex; + font-size: 1.25rem; + font-weight: 500; + justify-content: center; + line-height: var(--line-height); } - -.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content { - border-left: none; +.hds-step-by-step__step-item { + background-color: var(--color-coat-of-arms-light); + list-style: none; + margin: var(--spacing-l) 0; + padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding); + position: relative; } - -.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row { - border-left: none; +ol.hds-step-by-step__steps-container .hds-step-by-step__step-item { + padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding); } - -/* MOBILE STYLES */ - -@media (max-width: 767px) { - .hds-table th { - font-weight: bold; - font-size: var(--fontsize-body-s); - padding: 9px var(--spacing-s); - } - - .hds-table__content tr td { - padding: 9px var(--spacing-s); - font-size: var(--fontsize-body-s); - } - - .hds-table__caption { - margin-bottom: var(--spacing-xs); - font-size: var(--fontsize-heading-xxs); - } +ul.hds-step-by-step__steps-container { + --circle-size: 18px; + --step-left-padding: var(--spacing-5-xl); } - -/* UTILITY */ - -.hds-table--text-align-right { - text-align: right; +.hds-step-by-step__step-item-title { + font-size: var(--title-font-size); + font-weight: 500; + line-height: var(--title-line-height); + margin: 0 0 16px; +} +.hds-step-by-step__step-item:before { + background-color: #000; + height: calc(100% + var(--spacing-l)); + transform: translateX(-50%) translateX(calc(-0.5 * var(--circle-size))); + width: 2px; + z-index: 1; } - -.hds-table__content--text-align-td-right td { - text-align: right; +.hds-step-by-step__step-item:last-of-type:before { + display: none; } - +@use "../../icons/icon.css"; +@use "../../icons/cross.css"; .hds-tag { - --tag-background: var(--color-black-10); - --tag-color: var(--color-black-90); - --tag-focus-outline-color: var(--color-coat-of-arms); - --tag-height: 32px; - + /* logics, always falls back to previous (upper) if not given -> + (no) active color -> (no) hover color -> (no) focus color -> default color + */ + --computed-background-color: var(--background-color, var(--color-black-10)); + --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent)); + --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent)); + --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent)); + --computed-border-color: var(--border-color, var(--computed-background-color)); + --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent)); + --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent)); + --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent)); + --computed-color: var(--color, --color-black-90); + --computed-color-focus: var(--color-focus, var(--computed-color, inherit)); + --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit)); + --computed-color-active: var(--color-active, var(--computed-color-hover, inherit)); + --computed-outline-color: var(--outline-color, transparent); + --font-size: var(--fontsize-body-s); + --gap: var(--spacing-3-xs); + --height: 32px; + --icon-reposition: -4px; + --icon-size: 24px; + --outline-width: 2px; + --padding-horizontal: 12px; + --padding-vertical: 3px; align-items: center; - background-color: var(--tag-background); - color: var(--tag-color); + background-color: var(--computed-background-color); + border-radius: calc(var(--height) / 2); + box-sizing: border-box; + color: var(--computed-color, inherit); display: inline-flex; - flex-direction: row-reverse; - font-size: var(--fontsize-body-s); - min-height: var(--tag-height); - line-height: var(--tag-height); + flex-direction: row; + font-size: var(--font-size); + font-weight: 500; + grid-gap: var(--gap); + gap: var(--gap); + justify-content: center; + line-height: var(--lineheight-l); + max-width: 100%; + min-height: var(--height); outline: none; + outline-offset: 2px; + overflow: hidden; + padding: var(--padding-vertical) var(--padding-horizontal); + /* repositioning the icons, after & before usage */ + &:after { + flex-shrink: 0; + margin-right: var(--icon-reposition); + } + &:before { + flex-shrink: 0; + margin-left: var(--icon-reposition); + } + > span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } - -.hds-tag:focus, -.hds-tag[focus-within] { - box-shadow: 0 0 0 3px var(--tag-focus-outline-color); -} - -.hds-tag:focus, -.hds-tag:focus-within { - box-shadow: 0 0 0 3px var(--tag-focus-outline-color); +.hds-tag--large { + --font-size: var(--fontsize-body-m); + --gap: var(--spacing-2-xs); + --height: 48px; + --icon-reposition: -8px; + --outline-width: 3px; + --padding-horizontal: 20px; + --padding-vertical: 10px; } - -.hds-tag[tabindex='0'] { - cursor: pointer; +.hds-tag--action { + --border-color: var(--color-black-90); + border: 1px solid var(--computed-border-color); + padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px); +} +.hds-tag--multiline { + > span { + -webkit-hyphens: auto; + hyphens: auto; + white-space: initial; + } } - -.hds-tag__label { - line-height: var(--lineheight-m); - padding: var(--spacing-3-xs) var(--spacing-2-xs); +.hds-tag--link { + text-decoration: underline; } - -.hds-tag__label:not(:only-child) { - padding: 0 var(--spacing-2-xs) 0 0; +.hds-tag--action, .hds-tag--link { + --background-color-hover: var(--color-black-20); + --outline-color: var(--color-focus-outline); + cursor: pointer; + /* focus */ + &.focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + } + &:focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + } + /* hover */ + &:hover { + background-color: var(--computed-background-color-hover); + border-color: var(--computed-border-color-hover); + color: var(--computed-color-hover); + } + /* active */ + &:active { + background-color: var(--computed-background-color-active); + border-color: var(--computed-border-color-active); + color: var(--computed-color-active); + } + &.focus-visible, &:active:hover { + box-shadow: none; + outline: var(--outline-width) solid var(--computed-outline-color); + } + &:focus-visible, &:active:hover { + box-shadow: none; + outline: var(--outline-width) solid var(--computed-outline-color); + } } - -.hds-tag__delete-button { - display: flex; - outline: none; +.hds-tag__icon, .hds-icon.hds-tag__icon { + flex-shrink: 0; + height: var(--icon-size); + width: var(--icon-size); } - -.hds-tag__delete-button .hds-icon { - height: var(--spacing-m); - width: var(--spacing-m); +.hds-tag__icon:first-child { + margin-left: var(--icon-reposition); } - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +.hds-tag__icon:last-child { + margin-right: var(--icon-reposition); } - +@use "../../utils/animations.css"; .hds-text-input { --border-width: 2px; --outline-width: 3px; + --outline-offset-readonly: 4px; --input-height: 56px; --textarea-height: 149px; --icon-size: var(--spacing-m); - + --icon-color: var(--color-black); --helper-color-default: var(--color-black-60); - --helper-color-invalid: var(--color-error); - --helper-color-success: var(--color-success); - --helper-color-info: var(--color-black-90); - --helper-color-info-icon: var(--color-coat-of-arms); - --icon-color-invalid: var(--color-error); + --helper-color-invalid: var(--color-black); + --helper-background-color-invalid: var(--color-error-light); + --helper-icon-color-invalid: var(--color-error); + --helper-color-success: var(--color-black); + --helper-background-color-success: var(--color-success-light); + --helper-icon-color-success: var(--color-success); + --helper-color-info: var(--color-black); + --helper-background-color-info: var(--color-info-light); + --helper-icon-color-info: var(--color-info); --input-background-default: var(--color-white); --input-background-disabled: var(--color-black-10); --input-border-color-default: var(--color-black-50); - --input-border-color-hover : var(--color-black-90); + --input-border-color-hover: var(--color-black-90); --input-border-color-focus: var(--color-black-90); --input-border-color-invalid: var(--color-error); --input-border-color-disabled: var(--color-black-10); @@ -1820,31 +2258,61 @@ input[type="submit"].hds-button--small { --label-color-default: var(--color-black-90); --label-color-invalid: var(--color-black-90); --placeholder-color: var(--color-black-60); - --focus-outline-color: var(--color-coat-of-arms); } - +.hds-text-input .hds-text-input__input { + /* removes the input shadow on iOS */ + -webkit-appearance: none; + background-color: var(--input-background-default); + border: var(--border-width) solid var(--input-border-color-default); + /* removes the border radius on iOS */ + border-radius: 0; + box-sizing: border-box; + color: var(--input-color-default); + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ + font-size: 1.125em; + height: var(--input-height); + line-height: normal; + /* + * Normalize.css rules + * 2. Remove the margin in Firefox and Safari. + */ + margin: 0; /* 2 */ + padding: 0 var(--spacing-s); + width: 100%; + will-change: transform, box-shadow; +} +.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear, +.hds-text-input__input-clear::-webkit-search-cancel-button { + display: none; +} +.hds-text-input .hds-text-input__button-clear > * { + pointer-events: none; +} /* text-input transitions */ - .hds-text-input .hds-text-input__input:hover { + border-color: var(--input-border-color-hover); transition: border-color 85ms ease-out; } - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]) { - transition: 85ms ease-out; - transition-property: box-shadow, transform; +.hds-text-input__input-wrapper:focus-within .hds-text-input__input { + border-color: var(--input-border-color-focus); + outline: none; +} +.hds-text-input.hds-text-input--invalid .hds-text-input__input { + border-color: var(--input-border-color-invalid); +} +.hds-text-input.hds-text-input--success .hds-text-input__input { + border-color: var(--input-border-color-success); } - .hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); + transform: translate3d(0, 0, 0); transition: 85ms ease-out; transition-property: box-shadow, transform; } - -.hds-text-input--invalid .hds-text-input__label { - transition: color 85ms linear; -} - -/* LABEL */ - .hds-text-input__label { color: var(--label-color-default); display: block; @@ -1852,242 +2320,203 @@ input[type="submit"].hds-button--small { font-weight: 500; margin-bottom: var(--spacing-3-xs); } - +.hds-text-input--invalid .hds-text-input__label { + color: var(--label-color-invalid); + transition: color 85ms linear; +} /* REQUIRED */ - .hds-text-input__required { - color: var(--color-black-90); display: inline-block; font-size: var(--fontsize-body-xl); line-height: 1; margin-left: var(--spacing-2-xs); transform: translateY(var(--spacing-3-xs)); } - /* INPUT */ - .hds-text-input__input-wrapper { display: flex; position: relative; } - -.hds-text-input .hds-text-input__input { - /* removes the input shadow on iOS */ - -webkit-appearance: none; - background-color: var(--input-background-default); - border: var(--border-width) solid var(--input-border-color-default); - box-sizing: border-box; - color: var(--input-color-default); - font-size: 1.125em; - height: var(--input-height); - line-height: normal; - padding: 0 var(--spacing-s); - width: 100%; - will-change: transform, box-shadow; -} - .hds-text-input textarea.hds-text-input__input { + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ height: var(--textarea-height); + /* + * Normalize.css rules + * 2. Remove the margin in Firefox and Safari. + */ + margin: 0; /* 2 */ min-height: var(--input-height); + /* + * Normalize.css rule + * 1. Remove the default vertical scrollbar in IE 10+. + */ + overflow: auto; /* 1 */ padding: var(--spacing-s); resize: vertical; } - -.hds-text-input .hds-text-input__input:hover { - border-color: var(--input-border-color-hover); -} - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input { - border-color: var(--input-border-color-focus); - outline: none; -} - -.hds-text-input__input-wrapper:focus-within .hds-text-input__input { - border-color: var(--input-border-color-focus); - outline: none; +.hds-text-input .hds-text-input__input::-ms-reveal { + display: none; } - -.hds-text-input .hds-text-input__input:-ms-input-placeholder { +.hds-text-input .hds-text-input__input::-moz-placeholder { color: var(--placeholder-color); opacity: 1; } - .hds-text-input .hds-text-input__input::placeholder { color: var(--placeholder-color); opacity: 1; } - -/* FOCUS OUTLINE */ - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]) { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); - transform: translate3d(0, 0, 0); -} - -.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); - transform: translate3d(0, 0, 0); -} - /* HELPER TEXT */ - .hds-text-input__helper-text { color: var(--helper-color-default); display: block; - line-height: var(--lineheight-l); font-size: var(--fontsize-body-m); + line-height: var(--lineheight-l); margin-top: var(--spacing-3-xs); white-space: pre-line; } - /* ERROR TEXT */ - .hds-text-input__error-text { - position: relative; + background-color: var(--helper-background-color-invalid); + border-left: 8px solid var(--color-error); color: var(--helper-color-invalid); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); white-space: pre-line; } - .hds-text-input__error-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__error-text::before { +.hds-text-input__error-text:before { animation: fadeIn 85ms ease-out; - background: var(--icon-color-invalid); - content: ''; + background: var(--helper-icon-color-invalid); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - -/* INVALID */ - -.hds-text-input--invalid .hds-text-input__label { - color: var(--label-color-invalid); -} - -.hds-text-input.hds-text-input--invalid .hds-text-input__input { - border-color: var(--input-border-color-invalid); -} - -/* SUCCESS */ - -.hds-text-input.hds-text-input--success .hds-text-input__input { - border-color: var(--input-border-color-success); -} - .hds-text-input__success-text { - position: relative; + background-color: var(--helper-background-color-success); + border-left: 8px solid var(--color-success); color: var(--helper-color-success); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; white-space: pre-wrap; } - .hds-text-input__success-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__success-text::before { +.hds-text-input__success-text:before { animation: fadeIn 85ms ease-out; - background: var(--helper-color-success); - content: ''; + background: var(--helper-icon-color-success); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - /* INFO TEXT */ - .hds-text-input__info-text { - position: relative; + background-color: var(--helper-background-color-info); + border-left: 8px solid var(--color-info); color: var(--helper-color-info); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; } - .hds-text-input__info-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__info-text::before { +.hds-text-input__info-text:before { animation: fadeIn 85ms ease-out; - background: var(--helper-color-info-icon); - content: ''; + background: var(--helper-icon-color-info); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - /* DISABLED */ - .hds-text-input .hds-text-input__input[disabled] { background-color: var(--input-background-disabled); border-color: var(--input-border-color-disabled); color: var(--input-color-disabled); cursor: not-allowed; } - /* READ-ONLY */ - .hds-text-input .hds-text-input__input[readonly] { background-color: transparent; border: 0; color: var(--input-color-default); + outline-offset: var(--outline-offset-readonly); padding: 0; /* fixes faded text color on Safari */ -webkit-text-fill-color: var(--input-color-default); + transform: translate3d(0, 0, 0); + transition: 85ms ease-out; + transition-property: outline, transform; +} +.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] { + /* the following calculation and margin is needed to keep the outline not to overlap + the other content vertically and make it look nice */ + height: calc(var(--input-height) - 2 * var(--outline-offset-readonly)); + margin: var(--outline-offset-readonly) 0; + outline: var(--color-focus-outline) solid var(--outline-width); +} +.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] { + outline: var(--color-focus-outline) solid var(--outline-width); } - /* BUTTON */ - .hds-text-input__buttons { - position: absolute; - top: 0; - right: 0; + align-items: center; bottom: 0; display: flex; - align-items: center; - justify-content: center; - margin-right: var(--spacing-s); font-size: 1rem; + justify-content: center; + margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2); + position: absolute; + right: 0; + top: 0; } - .hds-text-input__button { - padding: 0; - appearance: none; - background: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: none; + color: var(--icon-color); cursor: pointer; - border: 0; - width: 1.5rem; - height: 1.5rem; - overflow: hidden; - font-size: 1rem; + display: flex; + font: inherit; + outline: none; + padding: var(--spacing-xs) calc(var(--spacing-xs) / 2); } +.hds-text-input__button:focus { + outline: var(--outline-width) solid var(--color-focus-outline); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/all.min.css b/src/scss/xx_external/hds-core/lib/components/all.min.css index dc1901696..620edbe64 100644 --- a/src/scss/xx_external/hds-core/lib/components/all.min.css +++ b/src/scss/xx_external/hds-core/lib/components/all.min.css @@ -1 +1 @@ -.hds-button{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-weight:500;justify-content:center;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;vertical-align:top}.hds-button,.hds-button *,.hds-button:after,.hds-button :after,.hds-button:before,.hds-button :before{box-sizing:border-box}.hds-button:focus,.hds-button:hover{transition-property:background-color,border-color,color;transition-duration:85ms;transition-timing-function:ease-out}.hds-button:hover{background-color:transparent;background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.hds-button:focus{background-color:transparent;background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.hds-button:focus:hover{background-color:transparent;background-color:var(--background-color-hover-focus,transparent)}.hds-button:disabled{background-color:transparent;background-color:var(--background-color-disabled,transparent);border-color:transparent;border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.hds-button:not(:disabled){border-color:transparent;border-color:var(--border-color,transparent)}.hds-button:not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover,transparent)}.hds-button:not(:disabled):focus{border-color:transparent;border-color:var(--border-color-focus,transparent)}.hds-button:not(:disabled):focus:hover{border-color:transparent;border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.hds-button:after{--size:100%;border:var(--outline-width) solid transparent;content:"";height:var(--size);position:absolute;width:var(--size)}.hds-button:focus:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--focus-outline-color)}input[type=submit].hds-button:focus{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.hds-button__label,input[type=submit].hds-button{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].hds-button{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}.hds-button__label:only-child{margin:0 var(--spacing-2-xs)}.hds-button--supplementary .hds-button__label:first-child{padding-right:var(--spacing-3-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:last-child{padding-left:var(--spacing-3-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:not(:last-child){padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs)}.hds-button--small{padding:0}.hds-button--small .hds-button__label,input[type=submit].hds-button--small{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}input[type=submit].hds-button--small{padding:var(--spacing-2-xs) var(--spacing-m)}.hds-button--small .hds-button__label:only-child{margin:0 var(--spacing-xs)}.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button .hds-icon{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.hds-button__label~.hds-icon{margin:0 var(--spacing-s) 0 0}.hds-button--small .hds-icon{margin-left:var(--spacing-2-xs)}.hds-button .hds-button--small .hds-button__label~.hds-icon{margin:0 var(--spacing-2-xs) 0 0}.hds-button .hds-icon:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.hds-button .hds-icon:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.hds-button--small .hds-icon:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.hds-button--small .hds-icon:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.hds-button--primary{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--submit-input-focus-gutter-color:var(--color-white)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50);--focus-outline-color:var(--color-coat-of-arms);--submit-input-focus-gutter-color:var(--color-white)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.hds-button--supplementary{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.hds-button--loading{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.hds-button--success{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.hds-button--danger,.hds-button--success{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-coat-of-arms)}.hds-button--danger{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.hds-button--primary.hds-button--theme-coat{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms)}.hds-button--primary.hds-button--theme-black{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.hds-card{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-card--border{border:var(--border-width) solid var(--border-color)}.hds-card__body{display:grid;grid-gap:var(--spacing-m);gap:var(--spacing-m);margin-bottom:var(--spacing-l)}.hds-card__body:last-child{margin-bottom:0}.hds-card__heading{font-size:var(--fontsize-heading-m);font-weight:700;line-height:var(--lineheight-m)}.hds-card__text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer;height:var(--size);left:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.hds-checkbox__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));flex-basis:100%}.hds-checkbox__error-text:before{background:var(--color-error);height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-checkbox .hds-checkbox__input:before,.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before,.hds-checkbox__error-text:before{content:"";position:absolute;left:0;top:0}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);height:var(--size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:calc(var(--size) * var(--icon-scale));-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));width:var(--size);transform:scale(.6);z-index:1}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:checked+.hds-checkbox__label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+.hds-checkbox__label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+.hds-checkbox__label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{cursor:not-allowed}.hds-container{box-sizing:border-box}@media (min-width:320px){.hds-container{max-width:var(--container-width-xs)}}@media (min-width:576px){.hds-container{max-width:var(--container-width-s)}}@media (min-width:768px){.hds-container{max-width:var(--container-width-m)}}@media (min-width:992px){.hds-container{max-width:var(--container-width-l)}}@media (min-width:1248px){.hds-container{max-width:var(--container-width-xl)}}.hds-koros{width:100%;line-height:0}.hds-koros--flip-horizontal{transform:scaleY(-1)}.hds-link{--link-visited-color:#551a8b;--link-color:var(--color-bus);text-decoration:underline;color:var(--link-color);box-sizing:border-box;border:3px solid transparent}.hds-link:visited{color:var(--link-visited-color)}.hds-link:visited svg g path{fill:var(--link-visited-color)}.hds-link:focus{border:3px solid var(--color-coat-of-arms);outline:none}.hds-link.focus-visible,.hds-link:focus-visible{outline:none}.hds-link .vertical-align-small-or-medium-icon{vertical-align:sub}.hds-link .vertical-align-big-icon{vertical-align:middle}.hds-link--disable-visited-styles:visited{color:var(--color-bus)}.hds-link--small{font-size:14px}.hds-link--medium{font-size:16px}.hds-link--large{font-size:18px;display:block;width:fit-content}.hds-link--small .icon{margin-left:7px}.hds-link--medium .icon{margin-left:var(--spacing-2-xs);margin-top:-3px}.hds-link--large .icon{margin-left:var(--spacing-s)}.hds-link--small .hds-icon-left{margin-right:4px;vertical-align:text-top}.hds-link--medium .hds-icon-left{margin-right:8px;vertical-align:sub}.hds-link--large .hds-icon-left{margin-right:16px;vertical-align:middle}.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:var(--spinner-size);height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid transparent;border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-focus-outline-color:var(--color-coat-of-arms);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:flex-start;display:flex;font-weight:700;font-size:var(--fontsize-body-l);margin-right:var(--spacing-l)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);margin-right:var(--spacing-2-xs)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{flex:none}.hds-notification:not(.hds-notification--small) .hds-notification__label>.hds-icon{transform:translateY(var(--spacing-4-xs))}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification--large .hds-notification__close-button,.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--notification-focus-outline-color)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{top:var(--notification-offset);left:var(--notification-offset)}.hds-notification--top-center{top:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--top-right{top:var(--notification-offset);right:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-error-summary__body{font-size:var(--fontsize-body-s);line-height:1.625rem}.hds-error-summary__body ul{margin:0;padding:0 0 0 var(--spacing-s)}.hds-error-summary__body li{margin-bottom:.125rem}.hds-error-summary__body a{color:var(--color-bus)}.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{height:var(--size);left:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed}.hds-search-input{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90);--focus-outline-color:var(--color-coat-of-arms)}.hds-search-input .hds-search-input__input:hover{transition:border-color 85ms ease-out}.hds-search-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-search-input__input-wrapper{display:flex;height:100%;position:relative}.hds-search-input .hds-search-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.hds-search-input .hds-search-input__input:hover{border-color:var(--input-border-color-hover)}.hds-search-input .hds-search-input__input:focus{border-color:var(--input-border-color-focus);outline:none}.hds-search-input .hds-search-input__input:not([readonly]):focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-search-input__buttons{position:absolute;right:var(--spacing-s);top:var(--spacing-s);transform:translateY(0);display:flex;align-items:center;justify-content:center}.hds-search-input__buttons .hds-search-input__button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0;color:var(--dropdown-color-default);outline:none;display:flex;margin-left:var(--spacing-xs)}.hds-search-input__buttons .hds-search-input__button:focus{outline:none;box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color)}.hds-search-input__helper-text{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row)}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-selection-group__error-text:before{background:var(--color-error);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);min-height:var(--status-label-height);line-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-coat-of-arms) 3px solid}.hds-table{border-collapse:collapse;width:100%;line-height:1.5}.hds-table th{border-bottom:1px solid var(--color-black-20);white-space:nowrap;text-align:left;font-weight:500;font-size:var(--fontsize-heading-xxs)}.hds-table__content tr td,.hds-table th{padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{font-weight:400;border-bottom:1px solid var(--color-black-50);font-size:var(--fontsize-body-m);color:var(--color-black-90)}.hds-table__header-row{background-color:var(--background-color)}.hds-table__caption{text-align:left;margin-bottom:var(--spacing-s);font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-l)}.hds-table--dark{--background-color:var(--color-bus)}.hds-table.hds-table--dark th{color:var(--color-white)}.hds-table--light{--background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}.hds-table--dense.hds-table th{font-weight:700}.hds-table--dense .hds-table__content tr td,.hds-table--dense.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table--dense .hds-table__caption{margin-bottom:var(--spacing-xs);font-size:var(--fontsize-heading-xxs)}.hds-table--zebra .hds-table__content tr:nth-child(2n) td{background-color:var(--color-black-10)}.hds-table--zebra .hds-table__content tr td{border-bottom:none}.hds-table--with-vertical-lines .hds-table__content td{border-right:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__content{border-left:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__header-row{border-right:1px solid var(--background-color);border-left:1px solid var(--background-color)}.hds-table__vertical-header-column{background-color:var(--background-color)}.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content,.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row{border-left:none}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{margin-bottom:var(--spacing-xs);font-size:var(--fontsize-heading-xxs)}}.hds-table--text-align-right,.hds-table__content--text-align-td-right td{text-align:right}.hds-tag{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-focus-outline-color:var(--color-coat-of-arms);--tag-height:32px;align-items:center;background-color:var(--tag-background);color:var(--tag-color);display:inline-flex;flex-direction:row-reverse;font-size:var(--fontsize-body-s);min-height:var(--tag-height);line-height:var(--tag-height);outline:none}.hds-tag:focus,.hds-tag[focus-within]{box-shadow:0 0 0 3px var(--tag-focus-outline-color)}.hds-tag:focus,.hds-tag:focus-within{box-shadow:0 0 0 3px var(--tag-focus-outline-color)}.hds-tag[tabindex="0"]{cursor:pointer}.hds-tag__label{line-height:var(--lineheight-m);padding:var(--spacing-3-xs) var(--spacing-2-xs)}.hds-tag__label:not(:only-child){padding:0 var(--spacing-2-xs) 0 0}.hds-tag__delete-button{display:flex;outline:none}.hds-tag__delete-button .hds-icon{height:var(--spacing-m);width:var(--spacing-m)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60);--focus-outline-color:var(--color-coat-of-arms)}.hds-text-input .hds-text-input__input:hover{transition:border-color 85ms ease-out}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input--invalid .hds-text-input__label{transition:color 85ms linear}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input__required{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input textarea.hds-text-input__input{height:var(--textarea-height);min-height:var(--input-height);padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover)}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input .hds-text-input__input:-ms-input-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__helper-text{color:var(--helper-color-default)}.hds-text-input__error-text,.hds-text-input__helper-text{display:block;line-height:var(--lineheight-l);font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs);white-space:pre-line}.hds-text-input__error-text{position:relative;color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--icon-color-invalid);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid)}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__success-text{position:relative;color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-success);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input__info-text{position:relative;color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-info-icon);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.hds-text-input__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-s);font-size:1rem}.hds-text-input__button{padding:0;appearance:none;background:transparent;cursor:pointer;border:0;width:1.5rem;height:1.5rem;overflow:hidden;font-size:1rem} \ No newline at end of file +.hds-breadcrumb{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.hds-breadcrumb__list{align-items:center;flex-direction:row;word-wrap:break-word}.hds-breadcrumb__list-item{align-items:center;display:flex;line-height:var(--lineheight-l)}.hds-breadcrumb__link.hds-breadcrumb__link{--link-visited-color:none;--link-color:var(--color-black-90)}.hds-breadcrumb__link:focus,.hds-breadcrumb__link:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.hds-breadcrumb__separator.hds-breadcrumb__separator{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-medium)}}@media (min-width:992px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-x-large)}}.hds-breadcrumb__list-item--active{font-weight:700;padding:3px}.hds-breadcrumb__list--mobile{display:flex}.hds-breadcrumb__list--mobile .hds-breadcrumb__link{font-size:var(--fontsize-body-l)}@media (min-width:768px){.hds-breadcrumb__list--mobile{display:none}}.hds-breadcrumb__list--desktop{display:none}@media (min-width:768px){.hds-breadcrumb__list--desktop{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}.hds-button{--border-width:2px;--outline-width-focus:3px;--padding-horizontal:var(--spacing-l);--min-size:56px;--padding-vertical:var(--spacing-s);--padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));--icon-reposition:calc(-1 * var(--spacing-2-xs));--computed-background-color:var(--background-color,transparent);--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-background-color-disabled:var(--background-color-disabled,var(--color-black-20,transparent));--computed-color:var(--color,inherit);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-color-disabled:var(--color-disabled,var(--color-white,inherit));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-border-color-disabled:var(--border-color-disabled,var(--computed-background-color-disabled,transparent));--computed-outline-color-focus:var(--outline-color-focus,transparent);--computed-icon-size:var(--icon-size,var(--spacing-m));align-content:flex-start;align-items:center;background-color:var(--computed-background-color);border:var(--border-width) solid var(--computed-border-color);border-radius:0;box-sizing:border-box;color:var(--computed-color,inherit);grid-column-gap:var(--spacing-2-xs);-moz-column-gap:var(--spacing-2-xs);column-gap:var(--spacing-2-xs);cursor:var(--cursor,pointer);display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;-webkit-hyphens:auto;hyphens:auto;justify-content:center;line-height:var(--lineheight-l);margin:0;min-height:var(--min-size);min-width:var(--min-size);outline:none;outline-offset:2px;overflow:hidden;overflow-wrap:anywhere;padding:var(--padding);position:relative;text-align:center;text-decoration:none;text-transform:none;vertical-align:top}.hds-button:after{margin-right:var(--icon-reposition)}.hds-button:before{margin-left:var(--icon-reposition)}.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button.focus-visible,.hds-button:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-button:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:disabled{--cursor:not-allowed;background-color:var(--computed-background-color-disabled);border-color:var(--computed-border-color-disabled);color:var(--computed-color-disabled);outline:none}button.button{-webkit-appearance:button}.hds-button .hds-icon{flex-shrink:0;height:var(--computed-icon-size);width:var(--computed-icon-size)}.hds-button .hds-icon:first-child:not(:last-child){margin-left:var(--icon-reposition)}.hds-button .hds-icon:last-child:not(:first-child){margin-right:var(--icon-reposition)}.hds-button--small{--min-size:44px;--padding-horizontal:var(--spacing-m);--padding-vertical:var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button--primary{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-disabled:var(--color-black-20);--border-color:transparent;--color:var(--color-white);--color-disabled:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-disabled:var(--color-disabled)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-disabled:transparent;--color:var(--color-bus);--color-disabled:var(--color-black-40);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--clear,.hds-button--supplementary{--border-color:transparent;--border-color-disabled:transparent}.hds-button--clear{--background-color:transparent;--background-color-disabled:transparent;--color:var(--color-black-90);--color-disabled:var(--color-black-90)}.hds-button--success{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success)}.hds-button--danger,.hds-button--success{--color:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--danger{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error)}.hds-button--primary.hds-button--theme-coat{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--color:var(--color-white)}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--color:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent}.hds-button--primary.hds-button--theme-black{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent}.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));position:absolute;top:0;transform:scale(.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}.hds-table{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-focus-outline) 3px solid}.hds-table th{border-bottom:1px solid var(--color-black-20);font-weight:500;line-height:var(--lineheight-l);text-align:left;white-space:nowrap}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-m);padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-weight:400;line-height:24px}.hds-table__header-row{background-color:var(--header-background-color)}.hds-table__content--text-align-td-right td{text-align:right}.hds-table__caption{font-size:var(--fontsize-body-l);font-weight:400;line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);text-align:left}.hds-table--dark{--header-background-color:var(--color-bus)}.hds-table.hds-table--dark th{color:var(--color-white)}.hds-table--light{--header-background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}.hds-table--with-vertical-lines .hds-table__content{border-left:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__content td{border-right:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__header-row{border-left:1px solid var(--header-background-color);border-right:1px solid var(--header-background-color)}.hds-table--dense.hds-table th{font-weight:700}.hds-table--dense .hds-table__content tr td,.hds-table--dense.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table--dense .hds-table__caption{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}.hds-table--zebra .hds-table__content tr td{border-bottom:none}.hds-table--zebra .hds-table__content tr:nth-child(2n) td{background-color:var(--color-black-10)}.hds-table__vertical-header-column{background-color:var(--header-background-color)}.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content,.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row{border-left:none}.hds-table--text-align-right{text-align:right}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{font-size:var(--fontsize-heading-xxs);letter-spacing:.2px;line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}}.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification--large .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{left:var(--notification-offset);top:var(--notification-offset)}.hds-notification--top-center{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.hds-notification--top-right{right:var(--notification-offset);top:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-notification--box-shadow{box-shadow:var(--box-shadow-l)}.hds-card{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-card--border{border:var(--border-width) solid var(--border-color)}.hds-card--box-shadow{box-shadow:var(--box-shadow-m)}.hds-card__body{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.hds-card__body:last-child{margin-bottom:0}.hds-card__text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.hds-container{box-sizing:border-box;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs)}@media (min-width:768px){.hds-container{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.hds-container{max-width:var(--container-width-xl);padding-left:0;padding-right:0}}.hds-error-summary__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-error-summary__body ul{margin:0;padding:0 0 0 var(--spacing-s)}.hds-error-summary__body li{margin-bottom:.125rem}.hds-error-summary__body a{color:var(--color-bus)}.hds-fieldset{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.hds-fieldset-legend{font-weight:700;padding:0}.hds-fieldset--border{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.hds-fieldset--border>.hds-fieldset-legend{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.hds-hero{--arrow-icon-color:var(--color);--arrow-icon-size:128px;--background-color:var(--color-white);--color:var(--color-black-90);--diagonal-koros-position:45%;--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--image-position:bottom right;--koros-color:var(--color-white);--bottom-koros-color:var(--koros-color);--koros-height:85px;--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);--z-index:1;--bottom-background-color:transparent;--information-padding-top:0;--information-color:inherit;background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:var(--z-index)}.hds-hero__bottom-container{background-color:var(--bottom-background-color);width:100%}.hds-hero__bottom-content-aligner{justify-content:space-between;margin:0 auto;max-width:var(--container-width-xl);width:100%}.hds-hero__arrow-icon-container,.hds-hero__bottom-content-aligner{display:flex;position:relative;z-index:calc(var(--z-index) + 1)}.hds-hero--arrow-icon{--icon-size:var(--arrow-icon-size)!important;color:var(--arrow-icon-color);margin-left:calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4);margin-top:calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs))}.hds-hero__information-container{display:flex;flex-grow:1;justify-content:flex-end;padding-top:var(--information-padding-top)}.hds-hero__information-container span{color:var(--information-color);padding:var(--spacing-2-xs) var(--spacing-s)}.hds-hero__title{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s);margin:0 0 var(--spacing-s) 0}.hds-hero__text{font-size:var(--fontsize-body-l);margin:0 0 var(--spacing-s) 0}.hds-hero__text:last-of-type{margin:0 0 var(--spacing-l) 0}.hds-hero__container{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hds-hero__content{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero__content--single-column,.hds-hero__content--two-columns{display:flex;flex-direction:column}.hds-hero__content--two-columns{align-items:center}.hds-hero__content--two-columns__image-container{display:none}.hds-hero__card{display:block;max-width:var(--container-width-xl)}.hds-hero__koros-container,.hds-hero__koros-container--inward-koros,.hds-hero__koros-container--overflow-bottom{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hds-hero__koros-container--inward-koros{position:relative}.hds-hero__koros-container--overflow-bottom{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hds-hero__koros-container>div{bottom:0;height:100%;position:absolute;width:100%}.hds-hero__card--centered-content{text-align:center;width:100%}.hds-hero__image{display:block;width:100%}.hds-hero__koros-and-image-container{display:block;position:relative}.hds-hero__image-below-koros{display:block}.hds-hero__image-below-koros .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__container{position:relative}.hds-hero--with-background__background{position:relative;width:100%}.hds-hero--with-background__background .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__content-columns{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--with-background__empty-column{display:none}.hds-hero--background-image .hds-hero__content{padding:0}.hds-hero--background-image .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image__koros{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hds-hero--diagonal-koros .hds-hero--with-background__container{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hds-hero--diagonal-koros .hds-hero__content{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hds-hero--diagonal-koros .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--diagonal-koros__koros-and-background{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hds-hero--diagonal-koros__koros-aligner{position:relative;z-index:1}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:300px}@media only screen and (min-width:768px){.hds-hero{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m);--arrow-icon-size:164px}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:400px}.hds-hero__information-container span{padding-bottom:var(--spacing-xs);padding-right:var(--spacing-m);padding-top:var(--spacing-xs)}}@media only screen and (min-width:992px){.hds-hero{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hds-hero__text{font-size:var(--fontsize-body-xl)}.hds-hero--image-left .hds-hero__image-below-koros,.hds-hero--image-right .hds-hero__image-below-koros{display:none}.hds-hero--image-left .hds-hero__information-container,.hds-hero--image-right .hds-hero__information-container{--information-padding-top:var(--koros-height)}.hds-hero__content--two-columns{flex-direction:row}.hds-hero__content--two-columns>*{width:50%}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-xl)}.hds-hero__content--two-columns__image-container{display:block}.hds-hero--background-image .hds-hero--with-background__container{padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image .hds-hero__content{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--background-image .hds-hero__card{width:50%}.hds-hero--with-background__background{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hds-hero--with-background__empty-column{display:block;width:45%}.hds-hero--diagonal-koros .hds-hero__content{background-color:transparent;padding:var(--padding-vertical) 0}.hds-hero--diagonal-koros .hds-hero__card{background:none;padding:0 var(--padding-horizontal);width:55%}.hds-hero--diagonal-koros__koros-aligner{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hds-hero--diagonal-koros__koros-and-background{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hds-hero--diagonal-koros__koros-and-background:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hds-hero--background-image__koros{--koros-color:var(--bottom-koros-color)}.hds-hero__title{font-size:var(--fontsize-heading-xl)}}@media only screen and (min-width:1248px){.hds-hero{--padding-horizontal:var(--horizontal-padding-x-large)}.hds-hero__title{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px;line-height:var(--lineheight-s)}.hds-hero--diagonal-koros .hds-hero__text{padding-right:var(--spacing-l)}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-2-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-2-xl)}}.hds-highlight{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.hds-blockquote{margin:0;padding:0}.hds-highlight__text{color:var(--text-color);font-size:var(--fontsize-heading-m);letter-spacing:-.2px;line-height:var(--lineheight-m);margin:0;padding:0}.hds-highlight--small{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.hds-highlight--large{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.hds-highlight--large .hds-highlight__text{font-size:var(--fontsize-heading-l);letter-spacing:-.4px;line-height:var(--lineheight-l)}.hds-highlight__quote:after,.hds-highlight__quote:before{content:'"';display:inline}.hds-highlight__reference{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}.hds-koros{line-height:0;width:100%}.hds-koros--flip-vertical{transform:scaleY(-1)}.hds-koros--45deg{transform:rotate(45deg);will-change:transform}.hds-koros--90deg{transform:rotate(90deg);will-change:transform}.hds-koros--135deg{transform:rotate(135deg);will-change:transform}.hds-koros--180deg{transform:rotate(180deg);will-change:transform}.hds-koros--225deg{transform:rotate(225deg);will-change:transform}.hds-koros--270deg{transform:rotate(270deg);will-change:transform}.hds-koros--315deg{transform:rotate(315deg);will-change:transform}@use "../../icons/link-external.css";.hds-link{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.hds-link:visited{color:var(--link-visited-color)}.hds-link:visited svg g path{fill:var(--link-visited-color)}.hds-link:focus{border:3px solid var(--color-focus-outline);outline:none}.hds-link.focus-visible,.hds-link:focus-visible{outline:none}.hds-link .vertical-align-medium-icon{vertical-align:sub}.hds-link .vertical-align-big-icon{vertical-align:middle}.hds-link .vertical-align-small-icon{vertical-align:text-top}.hds-link--disable-visited-styles:visited{color:var(--color-bus)}.hds-link--small{font-size:14px}.hds-link--medium{font-size:16px}.hds-link--large{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.hds-link--small .icon{margin-left:7px}.hds-link--medium .icon{margin-left:var(--spacing-2-xs);margin-top:-3px}.hds-link--large .icon{margin-left:var(--spacing-s)}.hds-link--small .hds-icon-start{margin-right:4px;vertical-align:text-top}.hds-link--medium .hds-icon-start{margin-right:8px;vertical-align:sub}.hds-link--large .hds-icon-start{margin-right:16px;vertical-align:middle}.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:var(--spinner-size);position:relative;width:var(--spinner-size)}.hds-loading-spinner--multicolor{animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite;border-top-color:var(--spinner-color-stage1)}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite;border:var(--spinner-thickness) solid transparent;border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.hds-loading-spinner div:nth-child(2){animation-delay:-.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}}@use "../../icons/angle-right.css";@use "../../icons/angle-left.css";.hds-pagination-container{text-align:center}.hds-pagination{display:inline-block;font-size:var(--fontsize-body-m);font-weight:700;line-height:var(--lineheight-l);position:relative;transform:scaleY(-1);--active-page-background-color:var(--color-black);--link-height:40px}.hds-pagination:before{content:attr(data-next);content:attr(data-next)/"";display:block;float:right;line-height:56px;padding-left:100px;speak:never;visibility:hidden}.hds-pagination .hds-pagination__button-prev{float:left;margin-right:8px;transform:scaleY(-1);white-space:nowrap}.hds-pagination .hds-pagination__button-next{position:absolute;right:0;top:0;transform:scaleY(-1);white-space:nowrap}.hds-pagination__pages{display:inline-flex;flex-wrap:wrap;grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;list-style:none;margin-bottom:0;margin-top:8px;padding:0;transform:scaleY(-1)}.hds-pagination__item-link{align-items:center;border-radius:21px;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;min-width:32px;padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs);text-decoration:none}.hds-pagination__item-link:hover{text-decoration:underline}.hds-pagination__item-link:active,.hds-pagination__item-link:focus{outline:solid var(--color-focus-outline) 3px;outline-offset:1px}.hds-pagination__item-link.hds-pagination__item-link--active{background-color:var(--active-page-background-color);color:var(--color-white)}.hds-pagination__item-link.hds-pagination__item-link--active:hover{text-decoration:none}.hds-pagination__item-ellipsis{align-items:center;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;width:40px}.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed}@use "../../icons/search.css";.hds-search-input{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90)}.hds-search-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-search-input__input-wrapper{display:flex;height:100%;position:relative}.hds-search-input .hds-search-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.hds-search-input .hds-search-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-search-input .hds-search-input__input:focus{border-color:var(--input-border-color-focus);outline:none}.hds-search-input .hds-search-input__input:not([readonly]):focus{outline:var(--outline-width) solid var(--color-focus-outline);transform:translateZ(0)}.hds-search-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-search-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;color:var(--dropdown-color-default);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-search-input__buttons .hds-search-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.hds-search-input__helper-text{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--spacing-legend:var(--spacing-xs);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;display:flex;flex-direction:column;margin:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-legend);max-width:100%;padding:0;white-space:normal}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;font-size:var(--fontsize-body-m);margin-top:var(--spacing-legend);padding:var(--spacing-2-xs);position:relative}.hds-selection-group__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-selection-group__helper-text-gap{margin-top:var(--spacing-legend)}.hds-step-by-step__container{position:relative}.hds-step-by-step__container h1{font-size:2em;margin:.67em 0}.hds-step-by-step__steps-container{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;letter-spacing:-.2px;margin:0;padding:0}ol.hds-step-by-step__steps-container{--circle-size:48px;--step-left-padding:96px}.hds-step-by-step__step-item:after,.hds-step-by-step__step-item:before{box-sizing:border-box;content:"";display:block;left:calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);position:absolute;top:calc(var(--spacing-l) + var(--title-font-size) * var(--title-line-height) / 2 - var(--circle-size) / 2)}.hds-step-by-step__step-item:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.hds-step-by-step__step-item{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.hds-step-by-step__step-item,ol.hds-step-by-step__steps-container .hds-step-by-step__step-item{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.hds-step-by-step__steps-container{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.hds-step-by-step__step-item-title{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.hds-step-by-step__step-item:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(-.5 * var(--circle-size)));width:2px;z-index:1}.hds-step-by-step__step-item:last-of-type:before{display:none}@use "../../icons/icon.css";@use "../../icons/cross.css";.hds-tag{--computed-background-color:var(--background-color,var(--color-black-10));--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-color:var(--color,--color-black-90);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-outline-color:var(--outline-color,transparent);--font-size:var(--fontsize-body-s);--gap:var(--spacing-3-xs);--height:32px;--icon-reposition:-4px;--icon-size:24px;--outline-width:2px;--padding-horizontal:12px;--padding-vertical:3px;align-items:center;background-color:var(--computed-background-color);border-radius:calc(var(--height) / 2);box-sizing:border-box;color:var(--computed-color,inherit);display:inline-flex;flex-direction:row;font-size:var(--font-size);font-weight:500;grid-gap:var(--gap);gap:var(--gap);justify-content:center;line-height:var(--lineheight-l);max-width:100%;min-height:var(--height);outline:none;outline-offset:2px;overflow:hidden;padding:var(--padding-vertical) var(--padding-horizontal);&:after{flex-shrink:0;margin-right:var(--icon-reposition)}&:before{flex-shrink:0;margin-left:var(--icon-reposition)}>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.hds-tag--large{--font-size:var(--fontsize-body-m);--gap:var(--spacing-2-xs);--height:48px;--icon-reposition:-8px;--outline-width:3px;--padding-horizontal:20px;--padding-vertical:10px}.hds-tag--action{--border-color:var(--color-black-90);border:1px solid var(--computed-border-color);padding:calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px)}.hds-tag--multiline{>span{-webkit-hyphens:auto;hyphens:auto;white-space:normal}}.hds-tag--link{text-decoration:underline}.hds-tag--action,.hds-tag--link{--background-color-hover:var(--color-black-20);--outline-color:var(--color-focus-outline);cursor:pointer;&.focus-visible,&:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus)}&:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}&:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active)}&.focus-visible,&:active:hover,&:focus-visible{box-shadow:none;outline:var(--outline-width) solid var(--computed-outline-color)}}.hds-icon.hds-tag__icon,.hds-tag__icon{flex-shrink:0;height:var(--icon-size);width:var(--icon-size)}.hds-tag__icon:first-child{margin-left:var(--icon-reposition)}.hds-tag__icon:last-child{margin-right:var(--icon-reposition)}@use "../../utils/animations.css";.hds-text-input{--border-width:2px;--outline-width:3px;--outline-offset-readonly:4px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--icon-color:var(--color-black);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-black);--helper-background-color-invalid:var(--color-error-light);--helper-icon-color-invalid:var(--color-error);--helper-color-success:var(--color-black);--helper-background-color-success:var(--color-success-light);--helper-icon-color-success:var(--color-success);--helper-color-info:var(--color-black);--helper-background-color-info:var(--color-info-light);--helper-icon-color-info:var(--color-info);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,.hds-text-input__input-clear::-webkit-search-cancel-button{display:none}.hds-text-input .hds-text-input__button-clear>*{pointer-events:none}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid);transition:color 85ms linear}.hds-text-input__required{display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input textarea.hds-text-input__input{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input::-ms-reveal{display:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__helper-text{color:var(--helper-color-default);display:block;margin-top:var(--spacing-3-xs)}.hds-text-input__error-text,.hds-text-input__helper-text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);white-space:pre-line}.hds-text-input__error-text{background-color:var(--helper-background-color-invalid);border-left:8px solid var(--color-error);color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs)}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-invalid);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__success-text{background-color:var(--helper-background-color-success);border-left:8px solid var(--color-success);color:var(--helper-color-success);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative;white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-success);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__info-text{background-color:var(--helper-background-color-info);border-left:8px solid var(--color-info);color:var(--helper-color-info);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-info);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:transparent;border:0;color:var(--input-color-default);outline-offset:var(--outline-offset-readonly);padding:0;-webkit-text-fill-color:var(--input-color-default);transform:translateZ(0);transition:85ms ease-out;transition-property:outline,transform}.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly]{height:calc(var(--input-height) - 2 * var(--outline-offset-readonly));margin:var(--outline-offset-readonly) 0;outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly]{outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-text-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--icon-color);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-text-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.css b/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.css new file mode 100644 index 000000000..f8a049479 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.css @@ -0,0 +1,83 @@ +.hds-breadcrumb { + --horizontal-margin-small: var(--spacing-layout-2-xs); + --horizontal-margin-medium: var(--spacing-layout-xs); + --horizontal-margin-large: var(--spacing-layout-xs); + --horizontal-margin-x-large: var(--spacing-layout-s); + --horizontal-margin: var(--horizontal-margin-small); + display: flex; + margin: 0 var(--horizontal-margin); + padding: var(--spacing-s) 0; +} +.hds-breadcrumb__list { + align-items: center; + flex-direction: row; + word-wrap: break-word; +} +.hds-breadcrumb__list-item { + align-items: center; + display: flex; + line-height: var(--lineheight-l); +} +.hds-breadcrumb__link.hds-breadcrumb__link { + --link-visited-color: none; + --link-color: var(--color-black-90); +} +.hds-breadcrumb__link:hover, .hds-breadcrumb__link:focus { + -webkit-text-decoration-color: var(--color-black-90); + text-decoration-color: var(--color-black-90); +} +.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow { + display: inline-flex; + /* compensate the white space in the icon */ + margin-left: -5px; + margin-right: -3px; + --icon-size: var(--spacing-m); +} +.hds-breadcrumb__separator.hds-breadcrumb__separator { + display: inline-flex; + padding-left: var(--spacing-3-xs); + --icon-size: var(--spacing-s); +} +@media (min-width: 768px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-medium); + } +} +@media (min-width: 992px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-large); + } +} +@media (min-width: 1248px) { + .hds-breadcrumb { + --horizontal-margin: var(--horizontal-margin-x-large); + } +} +.hds-breadcrumb__list-item--active { + font-weight: 700; + /* to match 3px border around links */ + padding: 3px; +} +.hds-breadcrumb__list--mobile { + display: flex; +} +.hds-breadcrumb__list--mobile .hds-breadcrumb__link { + font-size: var(--fontsize-body-l); +} +@media (min-width: 768px) { + .hds-breadcrumb__list--mobile { + display: none; + } +} +.hds-breadcrumb__list--desktop { + display: none; +} +@media (min-width: 768px) { + .hds-breadcrumb__list--desktop { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + } +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.min.css b/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.min.css new file mode 100644 index 000000000..7ad3b3712 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/breadcrumb/breadcrumb.min.css @@ -0,0 +1 @@ +.hds-breadcrumb{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.hds-breadcrumb__list{align-items:center;flex-direction:row;word-wrap:break-word}.hds-breadcrumb__list-item{align-items:center;display:flex;line-height:var(--lineheight-l)}.hds-breadcrumb__link.hds-breadcrumb__link{--link-visited-color:none;--link-color:var(--color-black-90)}.hds-breadcrumb__link:focus,.hds-breadcrumb__link:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.hds-breadcrumb__separator.hds-breadcrumb__separator{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-medium)}}@media (min-width:992px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-x-large)}}.hds-breadcrumb__list-item--active{font-weight:700;padding:3px}.hds-breadcrumb__list--mobile{display:flex}.hds-breadcrumb__list--mobile .hds-breadcrumb__link{font-size:var(--fontsize-body-l)}@media (min-width:768px){.hds-breadcrumb__list--mobile{display:none}}.hds-breadcrumb__list--desktop{display:none}@media (min-width:768px){.hds-breadcrumb__list--desktop{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/button/button.css b/src/scss/xx_external/hds-core/lib/components/button/button.css index 7242dbaf4..7d1e8c843 100644 --- a/src/scss/xx_external/hds-core/lib/components/button/button.css +++ b/src/scss/xx_external/hds-core/lib/components/button/button.css @@ -1,494 +1,256 @@ +/* PRIMARY */ +/* default (bus) */ +/* SECONDARY */ +/* default (bus) */ +/* SUPPLEMENTARY */ +/* CLEAR */ +/* UTILITY */ +/* success */ +/* danger */ +/* THEMES */ +/* coat */ +/* black */ .hds-button { --border-width: 2px; - --color: inherit; - --min-size: 44px; - --outline-gutter: 2px; - --outline-width: 3px; - + --outline-width-focus: 3px; + --padding-horizontal: var(--spacing-l); + --min-size: 56px; + --padding-vertical: var(--spacing-s); + --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width)); + --icon-reposition: calc(-1 * var(--spacing-2-xs)); + /* logics, always falls back to previous (upper) if not given -> + (no) active color -> (no) hover color -> (no) focus color -> default color + */ + --computed-background-color: var(--background-color, transparent); + --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent)); + --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent)); + --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent)); + --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent)); + --computed-color: var(--color, inherit); + --computed-color-focus: var(--color-focus, var(--computed-color, inherit)); + --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit)); + --computed-color-active: var(--color-active, var(--computed-color-hover, inherit)); + --computed-color-disabled: var(--color-disabled, var(--color-white, inherit)); + --computed-border-color: var(--border-color, var(--computed-background-color)); + --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent)); + --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent)); + --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent)); + --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent)); + --computed-outline-color-focus: var(--outline-color-focus, transparent); + --computed-icon-size: var(--icon-size, var(--spacing-m)); align-content: flex-start; align-items: center; - background-color: transparent; - background-color: var(--background-color, transparent); - border: var(--border-width) solid transparent; - border: var(--border-width) solid var(--border-color, transparent); + background-color: var(--computed-background-color); + border: var(--border-width) solid var(--computed-border-color); border-radius: 0; - color: var(--color); - cursor: pointer; + box-sizing: border-box; + color: var(--computed-color, inherit); + grid-column-gap: var(--spacing-2-xs); + -moz-column-gap: var(--spacing-2-xs); + column-gap: var(--spacing-2-xs); + cursor: var(--cursor, pointer); display: inline-flex; + font-family: inherit; + font-size: 100%; font-weight: 500; + -webkit-hyphens: auto; + hyphens: auto; justify-content: center; + line-height: var(--lineheight-l); + margin: 0; min-height: var(--min-size); min-width: var(--min-size); - padding: 0 var(--spacing-2-xs); + outline: none; + outline-offset: 2px; + overflow: hidden; + overflow-wrap: anywhere; + padding: var(--padding); position: relative; + text-align: center; + text-decoration: none; + text-transform: none; vertical-align: top; + /* repositioning the icons, after & before usage */ + /* focus */ + /* hover */ + /* active */ + /* disabled */ } - -.hds-button, -.hds-button::before, -.hds-button::after, -.hds-button *, -.hds-button *::before, -.hds-button *::after { - box-sizing: border-box; +.hds-button:after { + margin-right: var(--icon-reposition); } - -/* button transitions */ - -.hds-button:hover, -.hds-button:focus { - transition-property: background-color, border-color, color; - transition-duration: 85ms; - transition-timing-function: ease-out; +.hds-button:before { + margin-left: var(--icon-reposition); } - -.hds-button:hover { - background-color: transparent; - background-color: var(--background-color-hover, transparent); - color: var(--color-hover); -} - -.hds-button:focus { - background-color: transparent; - background-color: var(--background-color-focus, transparent); - color: var(--color-focus); - outline: none; +.hds-button, .hds-button[type=button], .hds-button[type=reset], .hds-button[type=submit] { + -webkit-appearance: button; } - -.hds-button:focus:hover { - background-color: transparent; - background-color: var(--background-color-hover-focus, transparent); +.hds-button.focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -.hds-button:disabled { - background-color: transparent; - background-color: var(--background-color-disabled, transparent); - border-color: transparent; - border-color: var(--border-color-disabled, transparent); - color: var(--color-disabled); - cursor: not-allowed; +.hds-button:focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -.hds-button:not(:disabled) { - border-color: transparent; - border-color: var(--border-color, transparent); -} - -.hds-button:not(:disabled):hover { - border-color: transparent; - border-color: var(--border-color-hover, transparent); -} - -.hds-button:not(:disabled):focus { - border-color: transparent; - border-color: var(--border-color-focus, transparent); -} - -.hds-button:not(:disabled):focus:hover { - border-color: transparent; - border-color: var(--border-color-hover-focus, transparent); - color: var(--color-hover-focus); -} - -/* FOCUS OUTLINE */ - -.hds-button::after { - --size: 100%; - - border: var(--outline-width) solid transparent; - content: ''; - height: var(--size); - position: absolute; - width: var(--size); -} - -.hds-button:focus::after { - --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2)); - border-color: var(--focus-outline-color); -} - -/* submit input */ - -input[type="submit"].hds-button:focus { - box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color); +.hds-button:hover { + background-color: var(--computed-background-color-hover); + border-color: var(--computed-border-color-hover); + color: var(--computed-color-hover); } - -/* LABEL */ - -input[type="submit"].hds-button, -.hds-button__label { - font-weight: inherit; - line-height: 1.25em; - padding: var(--spacing-s); +.hds-button:active { + background-color: var(--computed-background-color-active); + border-color: var(--computed-border-color-active); + color: var(--computed-color-active); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); } - -input[type="submit"].hds-button { - cursor: pointer; - padding: var(--spacing-s) var(--spacing-l); +.hds-button:disabled { + --cursor: not-allowed; + background-color: var(--computed-background-color-disabled); + border-color: var(--computed-border-color-disabled); + color: var(--computed-color-disabled); + outline: none; } - -/* no icons */ - -.hds-button__label:only-child { - margin: 0 var(--spacing-2-xs); +button.button { + -webkit-appearance: button; } - -/* supplementary with right icon */ - -.hds-button--supplementary .hds-button__label:first-child { - padding-right: var(--spacing-3-xs); +.hds-button .hds-icon { + flex-shrink: 0; + height: var(--computed-icon-size); + width: var(--computed-icon-size); + /* start-side icon */ + /* end-side icon */ } - -/* supplementary with left icon */ - -.hds-button--supplementary .hds-icon + .hds-button__label:last-child { - padding-left: var(--spacing-3-xs); +.hds-button .hds-icon:first-child:not(:last-child) { + margin-left: var(--icon-reposition); } - -/* supplementary with both icons */ - -.hds-button--supplementary .hds-icon + .hds-button__label:not(:last-child) { - padding-left: var(--spacing-3-xs); - padding-right: var(--spacing-3-xs); +.hds-button .hds-icon:last-child:not(:first-child) { + margin-right: var(--icon-reposition); } - -/* SMALL */ - .hds-button--small { - padding: 0; -} - -input[type="submit"].hds-button--small, -.hds-button--small .hds-button__label { - line-height: var(--lineheight-s); - padding: var(--spacing-2-xs) var(--spacing-xs); -} - -input[type="submit"].hds-button--small { - padding: var(--spacing-2-xs) var(--spacing-m); -} - -/* no icons */ - -.hds-button--small .hds-button__label:only-child { - margin: 0 var(--spacing-xs); -} - -/* both icons */ - -.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type) { - padding: var(--spacing-2-xs) var(--spacing-2-xs); + --min-size: 44px; + --padding-horizontal: var(--spacing-m); + --padding-vertical: var(--spacing-2-xs); } - -/* FULL WIDTH */ - .hds-button--fullwidth { width: 100%; } - -/* ICONS */ - -/* left */ - -.hds-button .hds-icon { - height: var(--spacing-m); - margin-left: var(--spacing-s); - width: var(--spacing-m); -} - -/* right */ - -.hds-button__label ~ .hds-icon { - margin: 0 var(--spacing-s) 0 0; -} - -/* left - small */ - -.hds-button--small .hds-icon { - margin-left: var(--spacing-2-xs); -} - -/* right - small */ - -.hds-button .hds-button--small .hds-button__label ~ .hds-icon { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* both icons - left */ - -.hds-button .hds-icon:first-of-type:not(:last-of-type) { - margin: 0 0 0 var(--spacing-2-xs); -} - -/* both icons - right */ - -.hds-button .hds-icon:last-of-type:not(:first-of-type) { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* both icons - left - small */ - -.hds-button--small .hds-icon:first-child:not(:last-of-type) { - margin: 0 0 0 var(--spacing-2-xs); -} - -/* both icons - right - small */ - -.hds-button--small .hds-icon:last-child:not(:first-of-type) { - margin: 0 var(--spacing-2-xs) 0 0; -} - -/* PRIMARY */ - -/* default (bus) */ - .hds-button--primary { --background-color: var(--color-bus); --background-color-hover: var(--color-bus-dark); --background-color-focus: var(--color-bus); - --background-color-hover-focus: var(--color-bus-dark); --background-color-disabled: var(--color-black-20); - - --border-color: var(--color-bus); - --border-color-hover: var(--color-bus-dark); - --border-color-focus: var(--color-bus); - --border-color-hover-focus: var(--color-bus-dark); - --border-color-disabled: var(--color-black-20); - + --border-color: transparent; --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); --color-disabled: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); - --submit-input-focus-gutter-color: var(--color-white); + --outline-color-focus: var(--color-coat-of-arms); } - -/* SECONDARY */ - -/* default (bus) */ - .hds-button--secondary { --background-color: transparent; --background-color-hover: var(--color-bus-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-bus-light); --background-color-disabled: transparent; - --border-color: var(--color-bus); - --border-color-hover: var(--color-bus-dark); - --border-color-focus: var(--color-bus); - --border-color-hover-focus: var(--color-bus-dark); - --border-color-disabled: var(--color-black-50); - + --border-color-disabled: var(--color-disabled); --color: var(--color-bus); - --color-hover: var(--color-bus-dark); - --color-focus: var(--color-bus); - --color-hover-focus: var(--color-bus-dark); --color-disabled: var(--color-black-40); - - --focus-outline-color: var(--color-coat-of-arms); - --submit-input-focus-gutter-color: var(--color-white); + --outline-color-focus: var(--color-coat-of-arms); } - -/* SUPPLEMENTARY */ - .hds-button--supplementary { --background-color: transparent; --background-color-hover: var(--color-bus-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-bus-light); --background-color-disabled: transparent; - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms); --border-color-disabled: transparent; - --color: var(--color-bus); - --color-hover: var(--color-bus-dark); - --color-focus: var(--color-bus); - --color-hover-focus: var(--color-bus-dark); --color-disabled: var(--color-black-40); - - --focus-outline-color: transparent; - --submit-input-focus-gutter-color: transparent; + --outline-color-focus: var(--color-coat-of-arms); } - -/* LOADING */ - -.hds-button--loading { +.hds-button--clear { --background-color: transparent; - --background-color-hover: transparent; - --background-color-focus: transparent; - --background-color-hover-focus: transparent; --background-color-disabled: transparent; - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: transparent; - --border-color-hover-focus: transparent; --border-color-disabled: transparent; - --color: var(--color-black-90); - --color-hover: var(--color-black-90); - --color-focus: var(--color-black-90); - --color-hover-focus: var(--color-black-90); --color-disabled: var(--color-black-90); - - cursor: wait; } - -/* UTILITY */ - -/* success */ - .hds-button--success { --background-color: var(--color-success); --background-color-hover: var(--color-success-dark); --background-color-focus: var(--color-success); - --background-color-hover-focus: var(--color-success-dark); - --border-color: var(--color-success); --border-color-hover: var(--color-success-dark); --border-color-focus: var(--color-success); - --border-color-hover-focus: var(--color-success-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); + --outline-color-focus: var(--color-coat-of-arms); } - -/* danger */ - .hds-button--danger { --background-color: var(--color-error); --background-color-hover: var(--color-error-dark); --background-color-focus: var(--color-error); - --background-color-hover-focus: var(--color-error-dark); - --border-color: var(--color-error); --border-color-hover: var(--color-error-dark); --border-color-focus: var(--color-error); - --border-color-hover-focus: var(--color-error-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); + --outline-color-focus: var(--color-coat-of-arms); } - -/* THEMES */ - -/* coat */ - .hds-button--primary.hds-button--theme-coat { --background-color: var(--color-coat-of-arms); --background-color-hover: var(--color-coat-of-arms-dark); --background-color-focus: var(--color-coat-of-arms); - --background-color-hover-focus: var(--color-coat-of-arms-dark); - --border-color: var(--color-coat-of-arms); --border-color-hover: var(--color-coat-of-arms-dark); --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms-dark); - --color: var(--color-white); - --color-hover: var(--color-white); - --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); } - .hds-button--secondary.hds-button--theme-coat { --background-color: transparent; --background-color-hover: var(--color-coat-of-arms-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-coat-of-arms-light); - --border-color: var(--color-coat-of-arms); - --border-color-hover: var(--color-coat-of-arms-dark); - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms-dark); - --color: var(--color-coat-of-arms); - --color-hover: var(--color-coat-of-arms); - --color-focus: var(--color-coat-of-arms); - --color-hover-focus: var(--color-coat-of-arms); } - .hds-button--supplementary.hds-button--theme-coat { --background-color: transparent; --background-color-hover: var(--color-coat-of-arms-light); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-coat-of-arms-light); - --border-color: transparent; - --border-color-hover: transparent; - --border-color-focus: var(--color-coat-of-arms); - --border-color-hover-focus: var(--color-coat-of-arms); - --color: var(--color-coat-of-arms); - --color-hover: var(--color-coat-of-arms); - --color-focus: var(--color-coat-of-arms); - --color-hover-focus: var(--color-coat-of-arms); } - -/* black */ - .hds-button--primary.hds-button--theme-black { --background-color: var(--color-black); --background-color-hover: var(--color-black); --background-color-focus: var(--color-black); - --background-color-hover-focus: var(--color-black); - --border-color: var(--color-black); --border-color-hover: var(--color-black); --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-white); --color-hover: var(--color-white); --color-focus: var(--color-white); - --color-hover-focus: var(--color-white); } - .hds-button--secondary.hds-button--theme-black { --background-color: transparent; --background-color-hover: var(--color-black-5); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-black-5); - --border-color: var(--color-black); --border-color-hover: var(--color-black); --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black); - --color-hover-focus: var(--color-black); } - .hds-button--supplementary.hds-button--theme-black { --background-color: transparent; --background-color-hover: var(--color-black-5); --background-color-focus: transparent; - --background-color-hover-focus: var(--color-black-5); - --border-color: transparent; --border-color-hover: transparent; - --border-color-focus: var(--color-black); - --border-color-hover-focus: var(--color-black); - --color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black); - --color-hover-focus: var(--color-black); -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/button/button.min.css b/src/scss/xx_external/hds-core/lib/components/button/button.min.css index 0dc5a1c6e..f8b12a5c5 100644 --- a/src/scss/xx_external/hds-core/lib/components/button/button.min.css +++ b/src/scss/xx_external/hds-core/lib/components/button/button.min.css @@ -1 +1 @@ -.hds-button{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-weight:500;justify-content:center;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;vertical-align:top}.hds-button,.hds-button *,.hds-button:after,.hds-button :after,.hds-button:before,.hds-button :before{box-sizing:border-box}.hds-button:focus,.hds-button:hover{transition-property:background-color,border-color,color;transition-duration:85ms;transition-timing-function:ease-out}.hds-button:hover{background-color:transparent;background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.hds-button:focus{background-color:transparent;background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.hds-button:focus:hover{background-color:transparent;background-color:var(--background-color-hover-focus,transparent)}.hds-button:disabled{background-color:transparent;background-color:var(--background-color-disabled,transparent);border-color:transparent;border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.hds-button:not(:disabled){border-color:transparent;border-color:var(--border-color,transparent)}.hds-button:not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover,transparent)}.hds-button:not(:disabled):focus{border-color:transparent;border-color:var(--border-color-focus,transparent)}.hds-button:not(:disabled):focus:hover{border-color:transparent;border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.hds-button:after{--size:100%;border:var(--outline-width) solid transparent;content:"";height:var(--size);position:absolute;width:var(--size)}.hds-button:focus:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--focus-outline-color)}input[type=submit].hds-button:focus{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.hds-button__label,input[type=submit].hds-button{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].hds-button{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}.hds-button__label:only-child{margin:0 var(--spacing-2-xs)}.hds-button--supplementary .hds-button__label:first-child{padding-right:var(--spacing-3-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:last-child{padding-left:var(--spacing-3-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:not(:last-child){padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs)}.hds-button--small{padding:0}.hds-button--small .hds-button__label,input[type=submit].hds-button--small{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}input[type=submit].hds-button--small{padding:var(--spacing-2-xs) var(--spacing-m)}.hds-button--small .hds-button__label:only-child{margin:0 var(--spacing-xs)}.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button .hds-icon{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.hds-button__label~.hds-icon{margin:0 var(--spacing-s) 0 0}.hds-button--small .hds-icon{margin-left:var(--spacing-2-xs)}.hds-button .hds-button--small .hds-button__label~.hds-icon{margin:0 var(--spacing-2-xs) 0 0}.hds-button .hds-icon:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.hds-button .hds-icon:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.hds-button--small .hds-icon:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.hds-button--small .hds-icon:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.hds-button--primary{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--submit-input-focus-gutter-color:var(--color-white)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50);--focus-outline-color:var(--color-coat-of-arms);--submit-input-focus-gutter-color:var(--color-white)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.hds-button--supplementary{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.hds-button--loading{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.hds-button--success{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.hds-button--danger,.hds-button--success{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-coat-of-arms)}.hds-button--danger{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.hds-button--primary.hds-button--theme-coat{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms)}.hds-button--primary.hds-button--theme-black{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)} \ No newline at end of file +.hds-button{--border-width:2px;--outline-width-focus:3px;--padding-horizontal:var(--spacing-l);--min-size:56px;--padding-vertical:var(--spacing-s);--padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));--icon-reposition:calc(-1 * var(--spacing-2-xs));--computed-background-color:var(--background-color,transparent);--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-background-color-disabled:var(--background-color-disabled,var(--color-black-20,transparent));--computed-color:var(--color,inherit);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-color-disabled:var(--color-disabled,var(--color-white,inherit));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-border-color-disabled:var(--border-color-disabled,var(--computed-background-color-disabled,transparent));--computed-outline-color-focus:var(--outline-color-focus,transparent);--computed-icon-size:var(--icon-size,var(--spacing-m));align-content:flex-start;align-items:center;background-color:var(--computed-background-color);border:var(--border-width) solid var(--computed-border-color);border-radius:0;box-sizing:border-box;color:var(--computed-color,inherit);grid-column-gap:var(--spacing-2-xs);-moz-column-gap:var(--spacing-2-xs);column-gap:var(--spacing-2-xs);cursor:var(--cursor,pointer);display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;-webkit-hyphens:auto;hyphens:auto;justify-content:center;line-height:var(--lineheight-l);margin:0;min-height:var(--min-size);min-width:var(--min-size);outline:none;outline-offset:2px;overflow:hidden;overflow-wrap:anywhere;padding:var(--padding);position:relative;text-align:center;text-decoration:none;text-transform:none;vertical-align:top}.hds-button:after{margin-right:var(--icon-reposition)}.hds-button:before{margin-left:var(--icon-reposition)}.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button.focus-visible,.hds-button:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-button:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:disabled{--cursor:not-allowed;background-color:var(--computed-background-color-disabled);border-color:var(--computed-border-color-disabled);color:var(--computed-color-disabled);outline:none}button.button{-webkit-appearance:button}.hds-button .hds-icon{flex-shrink:0;height:var(--computed-icon-size);width:var(--computed-icon-size)}.hds-button .hds-icon:first-child:not(:last-child){margin-left:var(--icon-reposition)}.hds-button .hds-icon:last-child:not(:first-child){margin-right:var(--icon-reposition)}.hds-button--small{--min-size:44px;--padding-horizontal:var(--spacing-m);--padding-vertical:var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button--primary{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-disabled:var(--color-black-20);--border-color:transparent;--color:var(--color-white);--color-disabled:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-disabled:var(--color-disabled)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-disabled:transparent;--color:var(--color-bus);--color-disabled:var(--color-black-40);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--clear,.hds-button--supplementary{--border-color:transparent;--border-color-disabled:transparent}.hds-button--clear{--background-color:transparent;--background-color-disabled:transparent;--color:var(--color-black-90);--color-disabled:var(--color-black-90)}.hds-button--success{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success)}.hds-button--danger,.hds-button--success{--color:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--danger{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error)}.hds-button--primary.hds-button--theme-coat{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--color:var(--color-white)}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--color:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent}.hds-button--primary.hds-button--theme-black{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/card/card.css b/src/scss/xx_external/hds-core/lib/components/card/card.css index 75dd58eaf..fd93b9c8b 100644 --- a/src/scss/xx_external/hds-core/lib/components/card/card.css +++ b/src/scss/xx_external/hds-core/lib/components/card/card.css @@ -5,7 +5,6 @@ --border-width: 2px; --padding-horizontal: var(--spacing-l); --padding-vertical: var(--spacing-m); - background-color: var(--background-color); color: var(--color); padding: var(--padding-vertical) var(--padding-horizontal); @@ -17,12 +16,18 @@ border: var(--border-width) solid var(--border-color); } +/* WITH BOX-SHADOW */ + +.hds-card--box-shadow { + box-shadow: var(--box-shadow-m); +} + /* BODY */ .hds-card__body { display: grid; - grid-gap: var(--spacing-m); - gap: var(--spacing-m); + grid-gap: var(--spacing-s); + gap: var(--spacing-s); margin-bottom: var(--spacing-l); } @@ -30,17 +35,9 @@ margin-bottom: 0; } -/* HEADING */ - -.hds-card__heading { - font-size: var(--fontsize-heading-m); - font-weight: bold; - line-height: var(--lineheight-m); -} - /* BODY TEXT */ .hds-card__text { font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/card/card.min.css b/src/scss/xx_external/hds-core/lib/components/card/card.min.css index b518511a0..371a2cb42 100644 --- a/src/scss/xx_external/hds-core/lib/components/card/card.min.css +++ b/src/scss/xx_external/hds-core/lib/components/card/card.min.css @@ -1 +1 @@ -.hds-card{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-card--border{border:var(--border-width) solid var(--border-color)}.hds-card__body{display:grid;grid-gap:var(--spacing-m);gap:var(--spacing-m);margin-bottom:var(--spacing-l)}.hds-card__body:last-child{margin-bottom:0}.hds-card__heading{font-size:var(--fontsize-heading-m);font-weight:700;line-height:var(--lineheight-m)}.hds-card__text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)} \ No newline at end of file +.hds-card{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-card--border{border:var(--border-width) solid var(--border-color)}.hds-card--box-shadow{box-shadow:var(--box-shadow-m)}.hds-card__body{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.hds-card__body:last-child{margin-bottom:0}.hds-card__text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.css b/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.css index 2df87990e..1267d9984 100644 --- a/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.css +++ b/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.css @@ -1,17 +1,14 @@ .hds-checkbox { --size: 24px; - /* icon size relative to the checkbox size (--size) */ --icon-scale: 1; --border-width: 2px; --outline-width: 3px; --label-font-size: var(--fontsize-body-m); --label-padding: var(--spacing-2-xs); - --background-unselected: transparent; --background-selected: var(--color-bus); --background-hover: var(--color-bus-dark); --background-disabled: var(--color-black-10); - --border-color-selected: var(--color-bus); --border-color-selected-hover: var(--color-bus-dark); --border-color-selected-focus: var(--color-bus); @@ -19,175 +16,156 @@ --border-color-unselected-hover: var(--color-black-90); --border-color-unselected-focus: var(--color-black-90); --border-color-disabled: var(--color-black-10); - --icon-color-unselected: transparent; --icon-color-selected: var(--color-white); --icon-color-disabled: var(--color-white); - - --focus-outline-color: var(--color-coat-of-arms); - --label-color: var(--color-black-90); --label-color-disabled: var(--color-black-40); - --icon-size: var(--spacing-m); - display: flex; flex-wrap: wrap; min-height: var(--size); position: relative; + /* stylelint-disable no-descending-specificity */ } -.hds-checkbox, -.hds-checkbox *, -.hds-checkbox *::before, -.hds-checkbox *::after { +.hds-checkbox, .hds-checkbox *, .hds-checkbox *:before, .hds-checkbox *:after { box-sizing: border-box; } .hds-checkbox:not(:first-of-type) { margin-top: var(--spacing-2-xs); } -/* checkbox transitions */ -.hds-checkbox .hds-checkbox__input:hover::before, -.hds-checkbox .hds-checkbox__input:focus::before, -.hds-checkbox .hds-checkbox__input:hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::after { - transition: 85ms ease-out; - transition-property: background-color, border-color, transform; -} -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::before { - transition: 85ms ease-out; - transition-property: box-shadow, transform; -} -/* NATIVE INPUT */ .hds-checkbox .hds-checkbox__input { - appearance: none; - -moz-appearance: none; -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; + font-family: inherit; + font-size: 100%; height: var(--size); left: 0; + line-height: 1.15; + margin: 0; outline: none; position: absolute; top: 0; width: var(--size); } -/* LABEL */ -.hds-checkbox .hds-checkbox__label { - color: var(--label-color); - cursor: pointer; - font-size: var(--label-font-size); - line-height: var(--lineheight-m); - padding-left: calc(var(--size) + var(--label-padding)); - padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2); - position: relative; -} -/* ERROR */ -.hds-checkbox__error-text { - position: relative; - color: var(--color-error); - display: block; - font-size: var(--fontsize-body-m); - margin-top: var(--spacing-2-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); - flex-basis: 100%; -} -.hds-checkbox__error-text::before { - background: var(--color-error); - content: ''; - height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - pointer-events: none; - position: absolute; - left: 0; - top: 0; - width: var(--icon-size); -} -/* CUSTOM CHECKBOX */ -.hds-checkbox .hds-checkbox__input::before, -.hds-checkbox .hds-checkbox__label::before, -.hds-checkbox .hds-checkbox__label::after { - content: ""; - left: 0; - position: absolute; - top: 0; -} -/* checkbox icon */ -.hds-checkbox .hds-checkbox__input::before { +.hds-checkbox .hds-checkbox__input:before { background-color: var(--icon-color-unselected); + content: ""; height: var(--size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: calc(var(--size) * var(--icon-scale)); + left: 0; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); -webkit-mask-position: center; + mask-position: center; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: calc(var(--size) * var(--icon-scale)); - width: var(--size); + mask-size: calc(var(--size) * var(--icon-scale)); + position: absolute; + top: 0; transform: scale(0.6); + width: var(--size); z-index: 1; } -/* checkbox icon - selected */ -.hds-checkbox .hds-checkbox__input:checked::before { - background-color: var(--icon-color-selected); - transform: scale(1); +.hds-checkbox .hds-checkbox__input:disabled + label { + color: var(--label-color-disabled); } -/* focus outline */ -.hds-checkbox .hds-checkbox__label::before { - height: var(--size); - width: var(--size); +.hds-checkbox .hds-checkbox__input:checked:disabled:before { + background-color: var(--icon-color-disabled); +} +.hds-checkbox .hds-checkbox__input:disabled, .hds-checkbox .hds-checkbox__input:disabled + label { + cursor: not-allowed; } -/* focus outline - focus */ -.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label::before { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); +.hds-checkbox .hds-checkbox__input:hover:before, .hds-checkbox .hds-checkbox__input:focus:before, .hds-checkbox .hds-checkbox__input:hover + label:after, .hds-checkbox .hds-checkbox__input:focus + label:after { + transition: 85ms ease-out; + transition-property: background-color, border-color, transform; +} +.hds-checkbox .hds-checkbox__input:focus + label:before { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); transform: translate3d(0, 0, 0); + transition: 85ms ease-out; + transition-property: box-shadow, transform; } -/* background */ -.hds-checkbox .hds-checkbox__label::after { - background-color: var(--background-unselected); - border: var(--border-width) solid var(--border-color-unselected); - height: var(--size); - width: var(--size); +.hds-checkbox .hds-checkbox__input:checked:before { + background-color: var(--icon-color-selected); + transform: scale(1); +} +.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before { + background-color: var(--icon-color-selected); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + transform: scale(1); } -/* background - selected */ -.hds-checkbox .hds-checkbox__input:checked + .hds-checkbox__label::after { +.hds-checkbox .hds-checkbox__input:checked + label:after, .hds-checkbox .hds-checkbox__input:indeterminate + label:after { background-color: var(--background-selected); border-color: var(--border-color-selected); } -/* background - selected - hover */ -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + .hds-checkbox__label::after { - background-color: var(--background-hover); - border-color: var(--border-color-selected-hover); -} -/* background - unselected - hover */ -.hds-checkbox .hds-checkbox__input:not(:disabled):hover + .hds-checkbox__label::after, -.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + .hds-checkbox__label::after { - border-color: var(--border-color-unselected-hover); +.hds-checkbox .hds-checkbox__input:disabled + label:after { + background-color: var(--background-disabled); + border-color: var(--border-color-disabled); } -/* background - unselected - focus */ -.hds-checkbox .hds-checkbox__input:not(:disabled):focus + .hds-checkbox__label::after { +.hds-checkbox .hds-checkbox__input:not(:disabled):focus + label:after { border-color: var(--border-color-unselected-focus); } -/* background - selected - focus */ -.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + .hds-checkbox__label::after { +.hds-checkbox .hds-checkbox__input:not(:disabled):hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + label:after { + border-color: var(--border-color-unselected-hover); +} +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus + label:after { border-color: var(--border-color-selected-focus); } -/* DISABLED */ -/* label */ -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label { - color: var(--label-color-disabled); +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus + label:after { + background-color: var(--background-hover); + border-color: var(--border-color-selected-hover); } -/* checkbox icon - disabled */ -.hds-checkbox .hds-checkbox__input:checked:disabled::before { - background-color: var(--icon-color-disabled); +.hds-checkbox .hds-checkbox__label { + color: var(--label-color); + cursor: pointer; + font-size: var(--label-font-size); + line-height: var(--lineheight-m); + padding-left: calc(var(--size) + var(--label-padding)); + padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2); + position: relative; } -/* background */ -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label::after { - background-color: var(--background-disabled); - border-color: var(--border-color-disabled); +.hds-checkbox .hds-checkbox__label:before, .hds-checkbox .hds-checkbox__label:after { + content: ""; + left: 0; + position: absolute; + top: 0; } -.hds-checkbox .hds-checkbox__input:disabled, -.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label { - cursor: not-allowed; +.hds-checkbox .hds-checkbox__label:before { + height: var(--size); + width: var(--size); +} +.hds-checkbox .hds-checkbox__label:after { + background-color: var(--background-unselected); + border: var(--border-width) solid var(--border-color-unselected); + height: var(--size); + width: var(--size); +} +.hds-checkbox__label .hds-checkbox__label--hidden { + padding-left: var(--size); } +.hds-checkbox .hds-checkbox__error-text { + background-color: var(--color-error-light); + border-left: 8px solid var(--color-error); + color: var(--color-black); + display: flex; + flex-basis: 100%; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; +} +.hds-checkbox .hds-checkbox__error-text:before { + background: var(--color-error); + content: ""; + display: inline-block; + height: var(--icon-size); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + pointer-events: none; + width: var(--icon-size); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.min.css b/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.min.css index 060514da4..89714e509 100644 --- a/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.min.css +++ b/src/scss/xx_external/hds-core/lib/components/checkbox/checkbox.min.css @@ -1 +1 @@ -.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer;height:var(--size);left:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.hds-checkbox__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));flex-basis:100%}.hds-checkbox__error-text:before{background:var(--color-error);height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-checkbox .hds-checkbox__input:before,.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before,.hds-checkbox__error-text:before{content:"";position:absolute;left:0;top:0}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);height:var(--size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:calc(var(--size) * var(--icon-scale));-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));width:var(--size);transform:scale(.6);z-index:1}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:checked+.hds-checkbox__label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+.hds-checkbox__label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+.hds-checkbox__label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{cursor:not-allowed} \ No newline at end of file +.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));position:absolute;top:0;transform:scale(.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/container/container.css b/src/scss/xx_external/hds-core/lib/components/container/container.css index 7ab8273c7..dea6a92c1 100644 --- a/src/scss/xx_external/hds-core/lib/components/container/container.css +++ b/src/scss/xx_external/hds-core/lib/components/container/container.css @@ -1,33 +1,20 @@ .hds-container { box-sizing: border-box; -} - -@media (min-width: 320px) { - .hds-container { - max-width: var(--container-width-xs); - } -} - -@media (min-width: 576px) { - .hds-container { - max-width: var(--container-width-s); - } + padding-left: var(--spacing-layout-2-xs); + padding-right: var(--spacing-layout-2-xs); } @media (min-width: 768px) { .hds-container { - max-width: var(--container-width-m); - } -} - -@media (min-width: 992px) { - .hds-container { - max-width: var(--container-width-l); + padding-left: var(--spacing-layout-xs); + padding-right: var(--spacing-layout-xs); } } @media (min-width: 1248px) { .hds-container { max-width: var(--container-width-xl); + padding-left: 0; + padding-right: 0; } -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/container/container.min.css b/src/scss/xx_external/hds-core/lib/components/container/container.min.css index 6993a17c6..431f0d263 100644 --- a/src/scss/xx_external/hds-core/lib/components/container/container.min.css +++ b/src/scss/xx_external/hds-core/lib/components/container/container.min.css @@ -1 +1 @@ -.hds-container{box-sizing:border-box}@media (min-width:320px){.hds-container{max-width:var(--container-width-xs)}}@media (min-width:576px){.hds-container{max-width:var(--container-width-s)}}@media (min-width:768px){.hds-container{max-width:var(--container-width-m)}}@media (min-width:992px){.hds-container{max-width:var(--container-width-l)}}@media (min-width:1248px){.hds-container{max-width:var(--container-width-xl)}} \ No newline at end of file +.hds-container{box-sizing:border-box;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs)}@media (min-width:768px){.hds-container{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.hds-container{max-width:var(--container-width-xl);padding-left:0;padding-right:0}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.css b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.css new file mode 100644 index 000000000..30d5b156d --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.css @@ -0,0 +1,1025 @@ +/* stylelint-disable color-hex-length */ +/* This is copy of design-tokens/all.css. Could not import with out scss mixins. */ +:host { + --breakpoint-xs: 320px; + --breakpoint-s: 576px; + --breakpoint-m: 768px; + --breakpoint-l: 992px; + --breakpoint-xl: 1248px; + --container-width-xs: 288px; + --container-width-s: 544px; + --container-width-m: 720px; + --container-width-l: 944px; + --container-width-xl: 1200px; + --color-brick: #bd2719; + --color-brick-light: #ffeeed; + --color-brick-medium-light: #facbc8; + --color-brick-dark: #800e04; + --color-bus: #0000bf; + --color-bus-light: #f0f0ff; + --color-bus-medium-light: #ccccff; + --color-bus-dark: #00005e; + --color-coat-of-arms: #0072c6; + --color-coat-of-arms-light: #e6f4ff; + --color-coat-of-arms-medium-light: #b5daf7; + --color-coat-of-arms-dark: #005799; + --color-copper: #00d7a7; + --color-copper-light: #cffaf1; + --color-copper-medium-light: #9ef0de; + --color-copper-dark: #00a17d; + --color-engel: #ffe977; + --color-engel-light: #fff9db; + --color-engel-medium-light: #fff3b8; + --color-engel-dark: #dbc030; + --color-fog: #9fc9eb; + --color-fog-light: #e8f3fc; + --color-fog-medium-light: #d0e6f7; + --color-fog-dark: #72a5cf; + --color-gold: #c2a251; + --color-gold-light: #f7f2e4; + --color-gold-medium-light: #e8d7a7; + --color-gold-dark: #9e823c; + --color-metro: #fd4f00; + --color-metro-light: #ffeee6; + --color-metro-medium-light: #ffcab3; + --color-metro-dark: #bd2f00; + --color-silver: #dedfe1; + --color-silver-light: #f7f7f8; + --color-silver-medium-light: #efeff0; + --color-silver-dark: #b0b8bf; + --color-summer: #ffc61e; + --color-summer-light: #fff4d4; + --color-summer-medium-light: #ffe49c; + --color-summer-dark: #cc9200; + --color-suomenlinna: #f5a3c7; + --color-suomenlinna-light: #fff0f7; + --color-suomenlinna-medium-light: #ffdbeb; + --color-suomenlinna-dark: #e673a5; + --color-tram: #008741; + --color-tram-light: #dff7eb; + --color-tram-medium-light: #a3e3c2; + --color-tram-dark: #006631; + --color-focus-outline: #0072c6; + --color-black: #000000; + --color-white: #ffffff; + --color-black-5: #f2f2f2; + --color-black-10: #e6e6e6; + --color-black-20: #cccccc; + --color-black-30: #b3b3b3; + --color-black-40: #999999; + --color-black-50: #808080; + --color-black-60: #595959; + --color-black-70: #4d4d4d; + --color-black-80: #333333; + --color-black-90: #1a1a1a; + --color-error: #b01038; + --color-error-light: #f6e2e6; + --color-error-dark: #8d0d2d; + --color-success: #007a64; + --color-success-light: #e2f5f3; + --color-success-dark: #006250; + --color-alert: #ffda07; + --color-alert-light: #fff4b4; + --color-alert-dark: #d18200; + --color-info: #0062b9; + --color-info-light: #e5eff8; + --color-info-dark: #004f94; + --box-shadow-s: 0px 2px 10px 0px rgb(0 0 0 / 0.07); + --box-shadow-m: 0px 2px 10px 0px rgb(0 0 0 / 0.1); + --box-shadow-l: 0px 2px 20px 0px rgb(0 0 0 / 0.2); + --spacing-layout-2-xs: 1rem; + --spacing-layout-xs: 1.5rem; + --spacing-layout-s: 2rem; + --spacing-layout-m: 3rem; + --spacing-layout-l: 4rem; + --spacing-layout-xl: 6rem; + --spacing-layout-2-xl: 8rem; + --spacing-4-xs: 0.125rem; + --spacing-3-xs: 0.25rem; + --spacing-2-xs: 0.5rem; + --spacing-xs: 0.75rem; + --spacing-s: 1rem; + --spacing-m: 1.5rem; + --spacing-l: 2rem; + --spacing-xl: 2.5rem; + --spacing-2-xl: 3rem; + --spacing-3-xl: 3.5rem; + --spacing-4-xl: 4rem; + --spacing-5-xl: 4.5rem; + --fontsize-heading-xxl: 4rem; + --fontsize-heading-xl: 3rem; + --fontsize-heading-xl-mobile: 2.5rem; + --fontsize-heading-l: 2rem; + --fontsize-heading-m: 1.5rem; + --fontsize-heading-s: 1.25rem; + --fontsize-heading-xs: 1.125rem; + --fontsize-heading-xxs: 1rem; + --fontsize-body-s: 0.875rem; + --fontsize-body-m: 1rem; + --fontsize-body-l: 1.125rem; + --fontsize-body-xl: 1.25rem; + --font-default: helsinkigrotesk, arial, sans-serif; + --lineheight-s: 1; + --lineheight-m: 1.2; + --lineheight-l: 1.5; + --lineheight-xl: 1.75; +} +/* PRIMARY */ +/* default (bus) */ +/* SECONDARY */ +/* default (bus) */ +/* SUPPLEMENTARY */ +/* CLEAR */ +/* UTILITY */ +/* success */ +/* danger */ +/* THEMES */ +/* coat */ +/* black */ +.hds-icon--angle-down { + --mask-image-angle-down: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-angle-down); +} +.hds-icon-start--angle-down { + --mask-image-before: var(--mask-image-angle-down); +} +.hds-icon-end--angle-down { + --mask-image-after: var(--mask-image-angle-down); +} +.hds-icon--check-circle-fill { + --mask-image-check-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-check-circle-fill); +} +.hds-icon-start--check-circle-fill { + --mask-image-before: var(--mask-image-check-circle-fill); +} +.hds-icon-end--check-circle-fill { + --mask-image-after: var(--mask-image-check-circle-fill); +} +.hds-icon--info-circle-fill { + --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-info-circle-fill); +} +.hds-icon-start--info-circle-fill { + --mask-image-before: var(--mask-image-info-circle-fill); +} +.hds-icon-end--info-circle-fill { + --mask-image-after: var(--mask-image-info-circle-fill); +} +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} +.hds-icon--alert-circle-fill { + --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-alert-circle-fill); +} +.hds-icon-start--alert-circle-fill { + --mask-image-before: var(--mask-image-alert-circle-fill); +} +.hds-icon-end--alert-circle-fill { + --mask-image-after: var(--mask-image-alert-circle-fill); +} +.hds-icon--error-fill { + --mask-image-error-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-error-fill); +} +.hds-icon-start--error-fill { + --mask-image-before: var(--mask-image-error-fill); +} +.hds-icon-end--error-fill { + --mask-image-after: var(--mask-image-error-fill); +} +.hds-button { + --border-width: 2px; + --outline-width-focus: 3px; + --padding-horizontal: var(--spacing-l); + --min-size: 56px; + --padding-vertical: var(--spacing-s); + --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width)); + --icon-reposition: calc(-1 * var(--spacing-2-xs)); + /* logics, always falls back to previous (upper) if not given -> + (no) active color -> (no) hover color -> (no) focus color -> default color + */ + --computed-background-color: var(--background-color, transparent); + --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent)); + --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent)); + --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent)); + --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent)); + --computed-color: var(--color, inherit); + --computed-color-focus: var(--color-focus, var(--computed-color, inherit)); + --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit)); + --computed-color-active: var(--color-active, var(--computed-color-hover, inherit)); + --computed-color-disabled: var(--color-disabled, var(--color-white, inherit)); + --computed-border-color: var(--border-color, var(--computed-background-color)); + --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent)); + --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent)); + --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent)); + --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent)); + --computed-outline-color-focus: var(--outline-color-focus, transparent); + --computed-icon-size: var(--icon-size, var(--spacing-m)); + align-content: flex-start; + align-items: center; + background-color: var(--computed-background-color); + border: var(--border-width) solid var(--computed-border-color); + border-radius: 0; + box-sizing: border-box; + color: var(--computed-color, inherit); + grid-column-gap: var(--spacing-2-xs); + -moz-column-gap: var(--spacing-2-xs); + column-gap: var(--spacing-2-xs); + cursor: var(--cursor, pointer); + display: inline-flex; + font-family: inherit; + font-size: 100%; + font-weight: 500; + -webkit-hyphens: auto; + hyphens: auto; + justify-content: center; + line-height: var(--lineheight-l); + margin: 0; + min-height: var(--min-size); + min-width: var(--min-size); + outline: none; + outline-offset: 2px; + overflow: hidden; + overflow-wrap: anywhere; + padding: var(--padding); + position: relative; + text-align: center; + text-decoration: none; + text-transform: none; + vertical-align: top; + /* repositioning the icons, after & before usage */ + /* focus */ + /* hover */ + /* active */ + /* disabled */ +} +.hds-button:after { + margin-right: var(--icon-reposition); +} +.hds-button:before { + margin-left: var(--icon-reposition); +} +.hds-button, .hds-button[type=button], .hds-button[type=reset], .hds-button[type=submit] { + -webkit-appearance: button; +} +.hds-button.focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); +} +.hds-button:focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); +} +.hds-button:hover { + background-color: var(--computed-background-color-hover); + border-color: var(--computed-border-color-hover); + color: var(--computed-color-hover); +} +.hds-button:active { + background-color: var(--computed-background-color-active); + border-color: var(--computed-border-color-active); + color: var(--computed-color-active); + outline: var(--outline-width-focus) solid var(--computed-outline-color-focus); +} +.hds-button:disabled { + --cursor: not-allowed; + background-color: var(--computed-background-color-disabled); + border-color: var(--computed-border-color-disabled); + color: var(--computed-color-disabled); + outline: none; +} +button.button { + -webkit-appearance: button; +} +.hds-button .hds-icon { + flex-shrink: 0; + height: var(--computed-icon-size); + width: var(--computed-icon-size); + /* start-side icon */ + /* end-side icon */ +} +.hds-button .hds-icon:first-child:not(:last-child) { + margin-left: var(--icon-reposition); +} +.hds-button .hds-icon:last-child:not(:first-child) { + margin-right: var(--icon-reposition); +} +.hds-button--small { + --min-size: 44px; + --padding-horizontal: var(--spacing-m); + --padding-vertical: var(--spacing-2-xs); +} +.hds-button--secondary { + --background-color: transparent; + --background-color-hover: var(--color-bus-light); + --background-color-focus: transparent; + --background-color-disabled: transparent; + --border-color: var(--color-bus); + --border-color-disabled: var(--color-disabled); + --color: var(--color-bus); + --color-disabled: var(--color-black-40); + --outline-color-focus: var(--color-coat-of-arms); +} +.hds-button--supplementary { + --background-color: transparent; + --background-color-hover: var(--color-bus-light); + --background-color-focus: transparent; + --background-color-disabled: transparent; + --border-color: transparent; + --border-color-disabled: transparent; + --color: var(--color-bus); + --color-disabled: var(--color-black-40); + --outline-color-focus: var(--color-coat-of-arms); +} +.hds-button--secondary.hds-button--theme-coat { + --background-color: transparent; + --background-color-hover: var(--color-coat-of-arms-light); + --background-color-focus: transparent; + --border-color: var(--color-coat-of-arms); + --color: var(--color-coat-of-arms); +} +.hds-button--supplementary.hds-button--theme-coat { + --background-color: transparent; + --background-color-hover: var(--color-coat-of-arms-light); + --background-color-focus: transparent; + --border-color: transparent; + --color: var(--color-coat-of-arms); +} +.hds-button--secondary.hds-button--theme-black { + --background-color: transparent; + --background-color-hover: var(--color-black-5); + --background-color-focus: transparent; + --border-color: var(--color-black); + --border-color-hover: var(--color-black); + --border-color-focus: var(--color-black); + --color: var(--color-black); + --color-hover: var(--color-black); + --color-focus: var(--color-black); +} +.hds-button--supplementary.hds-button--theme-black { + --background-color: transparent; + --background-color-hover: var(--color-black-5); + --background-color-focus: transparent; + --border-color: transparent; + --border-color-hover: transparent; + --color: var(--color-black); + --color-hover: var(--color-black); + --color-focus: var(--color-black); +} +.hds-checkbox { + --size: 24px; + --icon-scale: 1; + --border-width: 2px; + --outline-width: 3px; + --label-font-size: var(--fontsize-body-m); + --label-padding: var(--spacing-2-xs); + --background-unselected: transparent; + --background-selected: var(--color-bus); + --background-hover: var(--color-bus-dark); + --background-disabled: var(--color-black-10); + --border-color-selected: var(--color-bus); + --border-color-selected-hover: var(--color-bus-dark); + --border-color-selected-focus: var(--color-bus); + --border-color-unselected: var(--color-black-50); + --border-color-unselected-hover: var(--color-black-90); + --border-color-unselected-focus: var(--color-black-90); + --border-color-disabled: var(--color-black-10); + --icon-color-unselected: transparent; + --icon-color-selected: var(--color-white); + --icon-color-disabled: var(--color-white); + --label-color: var(--color-black-90); + --label-color-disabled: var(--color-black-40); + --icon-size: var(--spacing-m); + display: flex; + flex-wrap: wrap; + min-height: var(--size); + position: relative; + /* stylelint-disable no-descending-specificity */ +} +.hds-checkbox, .hds-checkbox *, .hds-checkbox *:before, .hds-checkbox *:after { + box-sizing: border-box; +} +.hds-checkbox:not(:first-of-type) { + margin-top: var(--spacing-2-xs); +} +.hds-checkbox .hds-checkbox__input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + font-family: inherit; + font-size: 100%; + height: var(--size); + left: 0; + line-height: 1.15; + margin: 0; + outline: none; + position: absolute; + top: 0; + width: var(--size); +} +.hds-checkbox .hds-checkbox__input:before { + background-color: var(--icon-color-unselected); + content: ""; + height: var(--size); + left: 0; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: calc(var(--size) * var(--icon-scale)); + mask-size: calc(var(--size) * var(--icon-scale)); + position: absolute; + top: 0; + transform: scale(0.6); + width: var(--size); + z-index: 1; +} +.hds-checkbox .hds-checkbox__input:disabled + label { + color: var(--label-color-disabled); +} +.hds-checkbox .hds-checkbox__input:checked:disabled:before { + background-color: var(--icon-color-disabled); +} +.hds-checkbox .hds-checkbox__input:disabled, .hds-checkbox .hds-checkbox__input:disabled + label { + cursor: not-allowed; +} +.hds-checkbox .hds-checkbox__input:hover:before, .hds-checkbox .hds-checkbox__input:focus:before, .hds-checkbox .hds-checkbox__input:hover + label:after, .hds-checkbox .hds-checkbox__input:focus + label:after { + transition: 85ms ease-out; + transition-property: background-color, border-color, transform; +} +.hds-checkbox .hds-checkbox__input:focus + label:before { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); + transform: translate3d(0, 0, 0); + transition: 85ms ease-out; + transition-property: box-shadow, transform; +} +.hds-checkbox .hds-checkbox__input:checked:before { + background-color: var(--icon-color-selected); + transform: scale(1); +} +.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before { + background-color: var(--icon-color-selected); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E"); + transform: scale(1); +} +.hds-checkbox .hds-checkbox__input:checked + label:after, .hds-checkbox .hds-checkbox__input:indeterminate + label:after { + background-color: var(--background-selected); + border-color: var(--border-color-selected); +} +.hds-checkbox .hds-checkbox__input:disabled + label:after { + background-color: var(--background-disabled); + border-color: var(--border-color-disabled); +} +.hds-checkbox .hds-checkbox__input:not(:disabled):focus + label:after { + border-color: var(--border-color-unselected-focus); +} +.hds-checkbox .hds-checkbox__input:not(:disabled):hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + label:after { + border-color: var(--border-color-unselected-hover); +} +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus + label:after { + border-color: var(--border-color-selected-focus); +} +.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus + label:after { + background-color: var(--background-hover); + border-color: var(--border-color-selected-hover); +} +.hds-checkbox .hds-checkbox__label { + color: var(--label-color); + cursor: pointer; + font-size: var(--label-font-size); + line-height: var(--lineheight-m); + padding-left: calc(var(--size) + var(--label-padding)); + padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2); + position: relative; +} +.hds-checkbox .hds-checkbox__label:before, .hds-checkbox .hds-checkbox__label:after { + content: ""; + left: 0; + position: absolute; + top: 0; +} +.hds-checkbox .hds-checkbox__label:before { + height: var(--size); + width: var(--size); +} +.hds-checkbox .hds-checkbox__label:after { + background-color: var(--background-unselected); + border: var(--border-width) solid var(--border-color-unselected); + height: var(--size); + width: var(--size); +} +.hds-checkbox__label .hds-checkbox__label--hidden { + padding-left: var(--size); +} +.hds-checkbox .hds-checkbox__error-text { + background-color: var(--color-error-light); + border-left: 8px solid var(--color-error); + color: var(--color-black); + display: flex; + flex-basis: 100%; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; +} +.hds-checkbox .hds-checkbox__error-text:before { + background: var(--color-error); + content: ""; + display: inline-block; + height: var(--icon-size); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + pointer-events: none; + width: var(--icon-size); +} +.hds-theme--coat .hds-checkbox { + --background-selected: var(--color-coat-of-arms); + --background-hover: var(--color-coat-of-arms-dark); + --border-color-selected: var(--color-coat-of-arms); + --border-color-selected-hover: var(--color-coat-of-arms-dark); + --border-color-selected-focus: var(--color-coat-of-arms); +} +.hds-theme--black .hds-checkbox { + --background-selected: var(--color-black); + --background-hover: var(--color-black-80); + --border-color-selected: var(--color-black); + --border-color-selected-hover: var(--color-black-80); + --border-color-selected-focus: var(--color-black); +} +:host .hds-cc__form .hds-checkbox { + --label-color-disabled: var(--color-black-60); +} +.hds-icon { + --icon-size: 100%; + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} +.hds-notification { + --notification-background-color: var(--color-info-light); + --notification-border-color: var(--color-info); + --notification-border-width: var(--spacing-2-xs); + --notification-icon-color: var(--color-info); + --notification-color: var(--color-black-90); + --notification-max-width-inline: none; + --notification-max-width-toast: 21rem; + --notification-z-index-inline: auto; + --notification-z-index-toast: 99; + --notification-offset: var(--spacing-layout-s); + --notification-padding: var(--spacing-s); + background-color: var(--notification-background-color); + border: solid var(--notification-border-color); + border-width: 0 0 0 var(--notification-border-width); + box-sizing: border-box; + color: var(--notification-color); + max-width: var(--notification-max-width-inline); + padding: var(--notification-padding); + position: relative; + width: 100%; + z-index: var(--notification-z-index-inline); +} +.hds-notification__content { + display: grid; + grid-gap: var(--spacing-s); + gap: var(--spacing-s); +} +.hds-notification__label { + align-items: center; + display: flex; + font-size: var(--fontsize-heading-xs); + font-weight: bold; + letter-spacing: 0; + line-height: 24px; + margin-right: var(--spacing-l); +} +.hds-notification .hds-icon { + --icon-size: var(--spacing-layout-xs); +} +.hds-notification__label > .hds-icon { + color: var(--notification-icon-color); + flex: none; + margin-right: var(--spacing-2-xs); +} +.hds-notification__body { + font-size: var(--fontsize-body-s); + line-height: 24px; +} +.hds-notification__close-button { + --notification-close-button-offset: var(--spacing-s); + background: none; + border: none; + cursor: pointer; + display: flex; + outline: none; + padding: 0; + position: absolute; + right: var(--notification-close-button-offset); + top: var(--notification-close-button-offset); +} +.hds-notification__close-button:focus { + box-shadow: 0 0 0 3px var(--color-focus-outline); +} +.hds-notification--small { + --notification-padding: var(--spacing-2-xs); +} +.hds-notification--small .hds-notification__content { + display: flex; + grid-gap: 0; + gap: 0; +} +.hds-notification--small .hds-notification__label { + margin-right: 0; +} +.hds-notification--small .hds-notification__body { + margin-right: var(--spacing-l); +} +.hds-notification--small .hds-notification__close-button { + --notification-close-button-offset: var(--spacing-2-xs); +} +.hds-notification--success { + --notification-background-color: var(--color-success-light); + --notification-border-color: var(--color-success); + --notification-icon-color: var(--color-success); +} +.hds-table { + --content-background-color: var(--color-white); + border-collapse: collapse; + line-height: 1.5; + width: 100%; +} +.hds-table-container { + overflow-x: auto; +} +.hds-table-container:focus { + outline: var(--color-focus-outline) 3px solid; +} +.hds-table th { + border-bottom: 1px solid var(--color-black-20); + font-size: var(--fontsize-body-m); + font-weight: 500; + line-height: var(--lineheight-l); + padding: var(--spacing-xs) var(--spacing-m); + text-align: left; + white-space: nowrap; +} +.hds-table__content tr td { + background-color: var(--content-background-color); + border-bottom: 1px solid var(--color-black-50); + color: var(--color-black-90); + font-size: var(--fontsize-body-m); + font-weight: 400; + line-height: 24px; + padding: var(--spacing-xs) var(--spacing-m); +} +.hds-table__header-row { + background-color: var(--header-background-color); +} +.hds-table--light { + --header-background-color: var(--color-silver); +} +.hds-table.hds-table--light th { + color: var(--color-black-90); +} +@media (max-width: 767px) { + .hds-table th { + font-size: var(--fontsize-body-s); + font-weight: bold; + padding: 9px var(--spacing-s); + } + .hds-table__content tr td { + font-size: var(--fontsize-body-s); + padding: 9px var(--spacing-s); + } + .hds-table__caption { + font-size: var(--fontsize-heading-xxs); + letter-spacing: 0.2px; + line-height: var(--lineheight-l); + margin-bottom: var(--spacing-xs); + } +} +.hds-theme--coat, +.hds-theme--coat-of-arms { + --hds-cc-border-color: var(--color-coat-of-arms); +} +.hds-cc--page { + margin-top: var(--spacing-layout-xs); + margin-bottom: var(--spacing-layout-xs); +} +*, +*:before, +*:after { + box-sizing: inherit; +} +/* + * Normalize.css rule + */ +html { + -webkit-text-size-adjust: 100%; +} +.hds-cc { + --autoheight-open-time: 0.15s; + --common-spacing: var(--spacing-s); + --focus-outline-color: var(--focus-outline-color-override, var(--color-focus-outline, var(--color-coat-of-arms))); + --outline-width: 3px; + color: var(--color-black-90); + font-family: var(--font-default); + font-size: var(--fontsize-body-m); +} +.hds-cc.hds-cc--banner { + bottom: 0; + left: 0; + overscroll-behavior: contain; + position: fixed; + width: 100vw; + z-index: 999; +} +.hds-cc.hds-cc--page { + padding-top: var(--spacing-layout-xs); +} +.hds-cc__container { + background: var(--color-white); +} +.hds-cc--banner .hds-cc__container { + border-top: 8px solid var(--hds-cc-border-color, var(--color-bus)); + bottom: 0; + max-height: 80vh; + overflow-y: auto; + position: absolute; + width: 100%; + z-index: 2; +} +.hds-cc__aligner { + margin-left: auto; + margin-right: auto; + max-width: var(--container-width-override, var(--container-width-xl)); +} +.hds-cc--banner .hds-cc__aligner { + padding: var(--spacing-layout-2-xs); +} +@media (min-width: 768px) { + .hds-cc--banner .hds-cc__aligner { + padding: var(--spacing-layout-s) var(--spacing-layout-xs); + } +} +.visually-hidden { + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.hds-cc__heading { + font-size: 2rem; + font-weight: 400; + line-height: 1; + margin: 0; +} +.hds-cc__heading:focus { + outline: var(--outline-width, 3px) solid var(--focus-outline-color, #000); + outline-offset: var(--outline-gutter, 2px); +} +.hds-cc__description, +.hds-cc__form p { + max-width: 860px; +} +.hds-cc__description { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin-bottom: var(--spacing-layout-2-xs); +} +.hds-cc__accordion-button .hds-icon { + transition: transform linear 0.15s; +} +.hds-cc__accordion-button[aria-expanded=true] .hds-icon { + transform: rotate(180deg); +} +.hds-cc__accordion-button .hds-button__label { + padding-left: var(--spacing-2-xs); + padding-right: var(--spacing-2-xs); +} +.hds-cc__accordion-button:not(.hds-cc__accordion-button--read-more) { + margin-bottom: 16px; + padding-right: 6px; +} +.hds-cc__accordion-button--read-more { + display: none; + font-size: 1rem; + grid-area: readmore; + line-height: 2; +} +.hds-cc--banner .hds-cc__form { + --internal-autoheight-open-time: var(--autoheight-open-time, 0.3s); + display: grid; + grid-template-rows: 1fr; + transition: grid-template-rows var(--internal-autoheight-open-time) linear; +} +@media (prefers-reduced-motion) { + .hds-cc--banner .hds-cc__form { + --internal-autoheight-open-time: 0s; + } +} +.hds-cc__form__animator { + margin-left: -5px; + margin-right: -5px; + overflow: hidden; + padding-left: 5px; + padding-right: 5px; + transform: translateY(0); +} +.hds-cc--banner :not([aria-expanded=true]) + .hds-cc__form { + grid-template-rows: 0fr; /* 5 */ +} +.hds-cc--banner :not([aria-expanded=true]) + .hds-cc__form .hds-cc__form__animator { + transition: visibility 0s linear var(--internal-autoheight-open-time); + visibility: hidden; +} +.hds-cc--page .hds-cc__accordion-button--details { + display: none; +} +.hds-cc__groups { + padding-bottom: var(--spacing-layout-s); +} +.hds-cc__notification_container .hds-notification { + margin-bottom: var(--spacing-layout-s); +} +@keyframes entryAnimation { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes exitAnimation { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(20px); + } +} +.hds-notification.enter { + animation: entryAnimation 0.5s ease-out forwards; +} +.hds-notification.exit { + animation: exitAnimation 0.5s ease-out forwards; +} +@media (prefers-reduced-motion: reduce) { + .hds-notification.enter, + .hds-notification.exit { + animation-duration: 0s !important; + } +} +.hds-cc__group { + border-bottom: 1px solid var(--color-black-60); + padding-bottom: var(--spacing-layout-2-xs); + padding-top: var(--spacing-layout-s); +} +.hds-cc__group:first-of-type { + border-top: 1px solid var(--color-black-60); +} +.hds-cc__group .hds-notification { + display: none; +} +.hds-cc__group--highlight .hds-notification { + display: block; + margin-top: var(--spacing-layout-2-xs); +} +.hds-cc__group-details { + --internal-autoheight-open-time: var(--autoheight-open-time, 0.3s); + display: grid; + grid-template-rows: 1fr; + transition: grid-template-rows var(--internal-autoheight-open-time) linear; +} +@media (prefers-reduced-motion) { + .hds-cc__group-details { + --internal-autoheight-open-time: 0s; + } +} +.hds-cc__group-details__animator { + margin-left: -5px; + margin-right: -5px; + overflow: hidden; + padding-left: 5px; + padding-right: 5px; + transform: translateY(0); +} +:not([aria-expanded=true]) + .hds-cc__group-details { + grid-template-rows: 0fr; /* 5 */ +} +:not([aria-expanded=true]) + .hds-cc__group-details .hds-cc__group-details__animator { + transition: visibility 0s linear var(--internal-autoheight-open-time); + visibility: hidden; +} +.hds-cc__group-details__animator .hds-table-container { + margin-top: 5px; + margin-bottom: 5px; +} +:not([aria-expanded=true]) > .hds-cc__accordion-button-hide, +[aria-expanded=true] > .hds-cc__accordion-button-show, +.hds-cc--page .hds-cc__all-cookies-button, +[aria-controls=hds-cc-form][aria-expanded=true] ~ .hds-cc__buttons .hds-cc__all-cookies-button, +.hds-cc--banner [aria-controls=hds-cc-form]:not([aria-expanded=true]) ~ .hds-cc__buttons .hds-cc__selected-cookies-button { + display: none; +} +.hds-cc__form { + --autoheight-open-time: 0.2s; +} +.hds-cc__buttons { + grid-column-gap: 32px; + -moz-column-gap: 32px; + column-gap: 32px; + display: flex; + flex-direction: column; + grid-row-gap: 16px; + row-gap: 16px; +} +@media (min-width: 768px) { + .hds-cc__buttons { + flex-direction: row; + } +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.min.css b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.min.css new file mode 100644 index 000000000..1ace7c7e7 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.min.css @@ -0,0 +1 @@ +:host{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#595959;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:helsinkigrotesk,arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}.hds-icon--angle-down{--mask-image-angle-down:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5l5-5 1.5 1.5-6.5 6.5L5.5 10 7 8.5l5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-down)}.hds-icon-start--angle-down{--mask-image-before:var(--mask-image-angle-down)}.hds-icon-end--angle-down{--mask-image-after:var(--mask-image-angle-down)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-icon{-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-button{--border-width:2px;--outline-width-focus:3px;--padding-horizontal:var(--spacing-l);--min-size:56px;--padding-vertical:var(--spacing-s);--padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));--icon-reposition:calc(-1 * var(--spacing-2-xs));--computed-background-color:var(--background-color,transparent);--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-background-color-disabled:var(--background-color-disabled,var(--color-black-20,transparent));--computed-color:var(--color,inherit);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-color-disabled:var(--color-disabled,var(--color-white,inherit));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-border-color-disabled:var(--border-color-disabled,var(--computed-background-color-disabled,transparent));--computed-outline-color-focus:var(--outline-color-focus,transparent);--computed-icon-size:var(--icon-size,var(--spacing-m));align-content:flex-start;align-items:center;background-color:var(--computed-background-color);border:var(--border-width) solid var(--computed-border-color);border-radius:0;box-sizing:border-box;color:var(--computed-color,inherit);grid-column-gap:var(--spacing-2-xs);-moz-column-gap:var(--spacing-2-xs);column-gap:var(--spacing-2-xs);cursor:var(--cursor,pointer);display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;-webkit-hyphens:auto;hyphens:auto;justify-content:center;line-height:var(--lineheight-l);margin:0;min-height:var(--min-size);min-width:var(--min-size);outline:none;outline-offset:2px;overflow:hidden;overflow-wrap:anywhere;padding:var(--padding);position:relative;text-align:center;text-decoration:none;text-transform:none;vertical-align:top}.hds-button:after{margin-right:var(--icon-reposition)}.hds-button:before{margin-left:var(--icon-reposition)}.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button.focus-visible,.hds-button:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-button:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:disabled{--cursor:not-allowed;background-color:var(--computed-background-color-disabled);border-color:var(--computed-border-color-disabled);color:var(--computed-color-disabled);outline:none}button.button{-webkit-appearance:button}.hds-button .hds-icon{flex-shrink:0;height:var(--computed-icon-size);width:var(--computed-icon-size)}.hds-button .hds-icon:first-child:not(:last-child){margin-left:var(--icon-reposition)}.hds-button .hds-icon:last-child:not(:first-child){margin-right:var(--icon-reposition)}.hds-button--small{--min-size:44px;--padding-horizontal:var(--spacing-m);--padding-vertical:var(--spacing-2-xs)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-disabled:var(--color-disabled)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-disabled:transparent;--color:var(--color-bus);--color-disabled:var(--color-black-40);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--supplementary{--border-color:transparent;--border-color-disabled:transparent}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--color:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent}.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));position:absolute;top:0;transform:scale(.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-theme--coat .hds-checkbox{--background-selected:var(--color-coat-of-arms);--background-hover:var(--color-coat-of-arms-dark);--border-color-selected:var(--color-coat-of-arms);--border-color-selected-hover:var(--color-coat-of-arms-dark);--border-color-selected-focus:var(--color-coat-of-arms)}.hds-theme--black .hds-checkbox{--background-selected:var(--color-black);--background-hover:var(--color-black-80);--border-color-selected:var(--color-black);--border-color-selected-hover:var(--color-black-80);--border-color-selected-focus:var(--color-black)}:host .hds-cc__form .hds-checkbox{--label-color-disabled:var(--color-black-60)}.hds-icon{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-table{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-focus-outline) 3px solid}.hds-table th{border-bottom:1px solid var(--color-black-20);font-weight:500;line-height:var(--lineheight-l);text-align:left;white-space:nowrap}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-m);padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-weight:400;line-height:24px}.hds-table__header-row{background-color:var(--header-background-color)}.hds-table--light{--header-background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{font-size:var(--fontsize-heading-xxs);letter-spacing:.2px;line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}}.hds-theme--coat,.hds-theme--coat-of-arms{--hds-cc-border-color:var(--color-coat-of-arms)}.hds-cc--page{margin-top:var(--spacing-layout-xs);margin-bottom:var(--spacing-layout-xs)}*,:after,:before{box-sizing:inherit}html{-webkit-text-size-adjust:100%}.hds-cc{--autoheight-open-time:0.15s;--common-spacing:var(--spacing-s);--focus-outline-color:var(--focus-outline-color-override,var(--color-focus-outline,var(--color-coat-of-arms)));--outline-width:3px;color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m)}.hds-cc.hds-cc--banner{bottom:0;left:0;overscroll-behavior:contain;position:fixed;width:100vw;z-index:999}.hds-cc.hds-cc--page{padding-top:var(--spacing-layout-xs)}.hds-cc__container{background:var(--color-white)}.hds-cc--banner .hds-cc__container{border-top:8px solid var(--hds-cc-border-color,var(--color-bus));bottom:0;max-height:80vh;overflow-y:auto;position:absolute;width:100%;z-index:2}.hds-cc__aligner{margin-left:auto;margin-right:auto;max-width:var(--container-width-override,var(--container-width-xl))}.hds-cc--banner .hds-cc__aligner{padding:var(--spacing-layout-2-xs)}@media (min-width:768px){.hds-cc--banner .hds-cc__aligner{padding:var(--spacing-layout-s) var(--spacing-layout-xs)}}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hds-cc__heading{font-size:2rem;font-weight:400;line-height:1;margin:0}.hds-cc__heading:focus{outline:var(--outline-width,3px) solid var(--focus-outline-color,#000);outline-offset:var(--outline-gutter,2px)}.hds-cc__description,.hds-cc__form p{max-width:860px}.hds-cc__description{font-size:1rem;font-weight:400;line-height:1.5;margin-bottom:var(--spacing-layout-2-xs)}.hds-cc__accordion-button .hds-icon{transition:transform .15s linear}.hds-cc__accordion-button[aria-expanded=true] .hds-icon{transform:rotate(180deg)}.hds-cc__accordion-button .hds-button__label{padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.hds-cc__accordion-button:not(.hds-cc__accordion-button--read-more){margin-bottom:16px;padding-right:6px}.hds-cc__accordion-button--read-more{display:none;font-size:1rem;grid-area:readmore;line-height:2}.hds-cc--banner .hds-cc__form{--internal-autoheight-open-time:var(--autoheight-open-time,0.3s);display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--internal-autoheight-open-time) linear}@media (prefers-reduced-motion){.hds-cc--banner .hds-cc__form{--internal-autoheight-open-time:0s}}.hds-cc__form__animator{margin-left:-5px;margin-right:-5px;overflow:hidden;padding-left:5px;padding-right:5px;transform:translateY(0)}.hds-cc--banner :not([aria-expanded=true])+.hds-cc__form{grid-template-rows:0fr}.hds-cc--banner :not([aria-expanded=true])+.hds-cc__form .hds-cc__form__animator{transition:visibility 0s linear var(--internal-autoheight-open-time);visibility:hidden}.hds-cc--page .hds-cc__accordion-button--details{display:none}.hds-cc__groups{padding-bottom:var(--spacing-layout-s)}.hds-cc__notification_container .hds-notification{margin-bottom:var(--spacing-layout-s)}@keyframes entryAnimation{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes exitAnimation{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.hds-notification.enter{animation:entryAnimation .5s ease-out forwards}.hds-notification.exit{animation:exitAnimation .5s ease-out forwards}@media (prefers-reduced-motion:reduce){.hds-notification.enter,.hds-notification.exit{animation-duration:0s!important}}.hds-cc__group{border-bottom:1px solid var(--color-black-60);padding-bottom:var(--spacing-layout-2-xs);padding-top:var(--spacing-layout-s)}.hds-cc__group:first-of-type{border-top:1px solid var(--color-black-60)}.hds-cc__group .hds-notification{display:none}.hds-cc__group--highlight .hds-notification{display:block;margin-top:var(--spacing-layout-2-xs)}.hds-cc__group-details{--internal-autoheight-open-time:var(--autoheight-open-time,0.3s);display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--internal-autoheight-open-time) linear}@media (prefers-reduced-motion){.hds-cc__group-details{--internal-autoheight-open-time:0s}}.hds-cc__group-details__animator{margin-left:-5px;margin-right:-5px;overflow:hidden;padding-left:5px;padding-right:5px;transform:translateY(0)}:not([aria-expanded=true])+.hds-cc__group-details{grid-template-rows:0fr}:not([aria-expanded=true])+.hds-cc__group-details .hds-cc__group-details__animator{transition:visibility 0s linear var(--internal-autoheight-open-time);visibility:hidden}.hds-cc__group-details__animator .hds-table-container{margin-top:5px;margin-bottom:5px}.hds-cc--banner [aria-controls=hds-cc-form]:not([aria-expanded=true])~.hds-cc__buttons .hds-cc__selected-cookies-button,.hds-cc--page .hds-cc__all-cookies-button,:not([aria-expanded=true])>.hds-cc__accordion-button-hide,[aria-controls=hds-cc-form][aria-expanded=true]~.hds-cc__buttons .hds-cc__all-cookies-button,[aria-expanded=true]>.hds-cc__accordion-button-show{display:none}.hds-cc__form{--autoheight-open-time:0.2s}.hds-cc__buttons{grid-column-gap:32px;-moz-column-gap:32px;column-gap:32px;display:flex;flex-direction:column;grid-row-gap:16px;row-gap:16px}@media (min-width:768px){.hds-cc__buttons{flex-direction:row}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.ts b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.ts new file mode 100644 index 000000000..00df80a74 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/cookie-consent/cookieConsent.ts @@ -0,0 +1 @@ +export default `:host{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#595959;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:helsinkigrotesk,arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}.hds-icon--angle-down{--mask-image-angle-down:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5l5-5 1.5 1.5-6.5 6.5L5.5 10 7 8.5l5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-down)}.hds-icon-start--angle-down{--mask-image-before:var(--mask-image-angle-down)}.hds-icon-end--angle-down{--mask-image-after:var(--mask-image-angle-down)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-icon{-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-button{--border-width:2px;--outline-width-focus:3px;--padding-horizontal:var(--spacing-l);--min-size:56px;--padding-vertical:var(--spacing-s);--padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));--icon-reposition:calc(-1 * var(--spacing-2-xs));--computed-background-color:var(--background-color,transparent);--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-background-color-disabled:var(--background-color-disabled,var(--color-black-20,transparent));--computed-color:var(--color,inherit);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-color-disabled:var(--color-disabled,var(--color-white,inherit));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-border-color-disabled:var(--border-color-disabled,var(--computed-background-color-disabled,transparent));--computed-outline-color-focus:var(--outline-color-focus,transparent);--computed-icon-size:var(--icon-size,var(--spacing-m));align-content:flex-start;align-items:center;background-color:var(--computed-background-color);border:var(--border-width) solid var(--computed-border-color);border-radius:0;box-sizing:border-box;color:var(--computed-color,inherit);grid-column-gap:var(--spacing-2-xs);-moz-column-gap:var(--spacing-2-xs);column-gap:var(--spacing-2-xs);cursor:var(--cursor,pointer);display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;-webkit-hyphens:auto;hyphens:auto;justify-content:center;line-height:var(--lineheight-l);margin:0;min-height:var(--min-size);min-width:var(--min-size);outline:none;outline-offset:2px;overflow:hidden;overflow-wrap:anywhere;padding:var(--padding);position:relative;text-align:center;text-decoration:none;text-transform:none;vertical-align:top}.hds-button:after{margin-right:var(--icon-reposition)}.hds-button:before{margin-left:var(--icon-reposition)}.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button.focus-visible,.hds-button:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-button:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:disabled{--cursor:not-allowed;background-color:var(--computed-background-color-disabled);border-color:var(--computed-border-color-disabled);color:var(--computed-color-disabled);outline:none}button.button{-webkit-appearance:button}.hds-button .hds-icon{flex-shrink:0;height:var(--computed-icon-size);width:var(--computed-icon-size)}.hds-button .hds-icon:first-child:not(:last-child){margin-left:var(--icon-reposition)}.hds-button .hds-icon:last-child:not(:first-child){margin-right:var(--icon-reposition)}.hds-button--small{--min-size:44px;--padding-horizontal:var(--spacing-m);--padding-vertical:var(--spacing-2-xs)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-disabled:var(--color-disabled)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-disabled:transparent;--color:var(--color-bus);--color-disabled:var(--color-black-40);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--supplementary{--border-color:transparent;--border-color-disabled:transparent}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--color:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent}.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));position:absolute;top:0;transform:scale(.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-theme--coat .hds-checkbox{--background-selected:var(--color-coat-of-arms);--background-hover:var(--color-coat-of-arms-dark);--border-color-selected:var(--color-coat-of-arms);--border-color-selected-hover:var(--color-coat-of-arms-dark);--border-color-selected-focus:var(--color-coat-of-arms)}.hds-theme--black .hds-checkbox{--background-selected:var(--color-black);--background-hover:var(--color-black-80);--border-color-selected:var(--color-black);--border-color-selected-hover:var(--color-black-80);--border-color-selected-focus:var(--color-black)}:host .hds-cc__form .hds-checkbox{--label-color-disabled:var(--color-black-60)}.hds-icon{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-table{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-focus-outline) 3px solid}.hds-table th{border-bottom:1px solid var(--color-black-20);font-weight:500;line-height:var(--lineheight-l);text-align:left;white-space:nowrap}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-m);padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-weight:400;line-height:24px}.hds-table__header-row{background-color:var(--header-background-color)}.hds-table--light{--header-background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{font-size:var(--fontsize-heading-xxs);letter-spacing:.2px;line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}}.hds-theme--coat,.hds-theme--coat-of-arms{--hds-cc-border-color:var(--color-coat-of-arms)}.hds-cc--page{margin-top:var(--spacing-layout-xs);margin-bottom:var(--spacing-layout-xs)}*,:after,:before{box-sizing:inherit}html{-webkit-text-size-adjust:100%}.hds-cc{--autoheight-open-time:0.15s;--common-spacing:var(--spacing-s);--focus-outline-color:var(--focus-outline-color-override,var(--color-focus-outline,var(--color-coat-of-arms)));--outline-width:3px;color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m)}.hds-cc.hds-cc--banner{bottom:0;left:0;overscroll-behavior:contain;position:fixed;width:100vw;z-index:999}.hds-cc.hds-cc--page{padding-top:var(--spacing-layout-xs)}.hds-cc__container{background:var(--color-white)}.hds-cc--banner .hds-cc__container{border-top:8px solid var(--hds-cc-border-color,var(--color-bus));bottom:0;max-height:80vh;overflow-y:auto;position:absolute;width:100%;z-index:2}.hds-cc__aligner{margin-left:auto;margin-right:auto;max-width:var(--container-width-override,var(--container-width-xl))}.hds-cc--banner .hds-cc__aligner{padding:var(--spacing-layout-2-xs)}@media (min-width:768px){.hds-cc--banner .hds-cc__aligner{padding:var(--spacing-layout-s) var(--spacing-layout-xs)}}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hds-cc__heading{font-size:2rem;font-weight:400;line-height:1;margin:0}.hds-cc__heading:focus{outline:var(--outline-width,3px) solid var(--focus-outline-color,#000);outline-offset:var(--outline-gutter,2px)}.hds-cc__description,.hds-cc__form p{max-width:860px}.hds-cc__description{font-size:1rem;font-weight:400;line-height:1.5;margin-bottom:var(--spacing-layout-2-xs)}.hds-cc__accordion-button .hds-icon{transition:transform .15s linear}.hds-cc__accordion-button[aria-expanded=true] .hds-icon{transform:rotate(180deg)}.hds-cc__accordion-button .hds-button__label{padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.hds-cc__accordion-button:not(.hds-cc__accordion-button--read-more){margin-bottom:16px;padding-right:6px}.hds-cc__accordion-button--read-more{display:none;font-size:1rem;grid-area:readmore;line-height:2}.hds-cc--banner .hds-cc__form{--internal-autoheight-open-time:var(--autoheight-open-time,0.3s);display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--internal-autoheight-open-time) linear}@media (prefers-reduced-motion){.hds-cc--banner .hds-cc__form{--internal-autoheight-open-time:0s}}.hds-cc__form__animator{margin-left:-5px;margin-right:-5px;overflow:hidden;padding-left:5px;padding-right:5px;transform:translateY(0)}.hds-cc--banner :not([aria-expanded=true])+.hds-cc__form{grid-template-rows:0fr}.hds-cc--banner :not([aria-expanded=true])+.hds-cc__form .hds-cc__form__animator{transition:visibility 0s linear var(--internal-autoheight-open-time);visibility:hidden}.hds-cc--page .hds-cc__accordion-button--details{display:none}.hds-cc__groups{padding-bottom:var(--spacing-layout-s)}.hds-cc__notification_container .hds-notification{margin-bottom:var(--spacing-layout-s)}@keyframes entryAnimation{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes exitAnimation{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.hds-notification.enter{animation:entryAnimation .5s ease-out forwards}.hds-notification.exit{animation:exitAnimation .5s ease-out forwards}@media (prefers-reduced-motion:reduce){.hds-notification.enter,.hds-notification.exit{animation-duration:0s!important}}.hds-cc__group{border-bottom:1px solid var(--color-black-60);padding-bottom:var(--spacing-layout-2-xs);padding-top:var(--spacing-layout-s)}.hds-cc__group:first-of-type{border-top:1px solid var(--color-black-60)}.hds-cc__group .hds-notification{display:none}.hds-cc__group--highlight .hds-notification{display:block;margin-top:var(--spacing-layout-2-xs)}.hds-cc__group-details{--internal-autoheight-open-time:var(--autoheight-open-time,0.3s);display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--internal-autoheight-open-time) linear}@media (prefers-reduced-motion){.hds-cc__group-details{--internal-autoheight-open-time:0s}}.hds-cc__group-details__animator{margin-left:-5px;margin-right:-5px;overflow:hidden;padding-left:5px;padding-right:5px;transform:translateY(0)}:not([aria-expanded=true])+.hds-cc__group-details{grid-template-rows:0fr}:not([aria-expanded=true])+.hds-cc__group-details .hds-cc__group-details__animator{transition:visibility 0s linear var(--internal-autoheight-open-time);visibility:hidden}.hds-cc__group-details__animator .hds-table-container{margin-top:5px;margin-bottom:5px}.hds-cc--banner [aria-controls=hds-cc-form]:not([aria-expanded=true])~.hds-cc__buttons .hds-cc__selected-cookies-button,.hds-cc--page .hds-cc__all-cookies-button,:not([aria-expanded=true])>.hds-cc__accordion-button-hide,[aria-controls=hds-cc-form][aria-expanded=true]~.hds-cc__buttons .hds-cc__all-cookies-button,[aria-expanded=true]>.hds-cc__accordion-button-show{display:none}.hds-cc__form{--autoheight-open-time:0.2s}.hds-cc__buttons{grid-column-gap:32px;-moz-column-gap:32px;column-gap:32px;display:flex;flex-direction:column;grid-row-gap:16px;row-gap:16px}@media (min-width:768px){.hds-cc__buttons{flex-direction:row}}`; \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.css b/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.css index 1c9c43615..046f7bf2b 100644 --- a/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.css +++ b/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.css @@ -1,14 +1,17 @@ .hds-error-summary__body { font-size: var(--fontsize-body-s); - line-height: 1.625rem; + line-height: 24px; } + .hds-error-summary__body ul { margin: 0; padding: 0 0 0 var(--spacing-s); } + .hds-error-summary__body li { margin-bottom: 0.125rem; } + .hds-error-summary__body a { color: var(--color-bus); -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.min.css b/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.min.css index f7e6425bd..d022eb096 100644 --- a/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.min.css +++ b/src/scss/xx_external/hds-core/lib/components/error-summary/error-summary.min.css @@ -1 +1 @@ -.hds-error-summary__body{font-size:var(--fontsize-body-s);line-height:1.625rem}.hds-error-summary__body ul{margin:0;padding:0 0 0 var(--spacing-s)}.hds-error-summary__body li{margin-bottom:.125rem}.hds-error-summary__body a{color:var(--color-bus)} \ No newline at end of file +.hds-error-summary__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-error-summary__body ul{margin:0;padding:0 0 0 var(--spacing-s)}.hds-error-summary__body li{margin-bottom:.125rem}.hds-error-summary__body a{color:var(--color-bus)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.css b/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.css index a00bc40cf..83b85a822 100644 --- a/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.css +++ b/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.css @@ -3,14 +3,18 @@ --padding-top: 4px; --padding-sides: 0; --padding-bottom: var(--spacing-s); - border: var(--border-style); box-sizing: border-box; - padding: var(--padding-top) var(--padding-sides) var(--padding-bottom) + padding: var(--padding-top) var(--padding-sides) var(--padding-bottom); } .hds-fieldset-legend { font-weight: bold; + /* Normalize.css rule + * Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + padding: 0; } .hds-fieldset--border { @@ -21,5 +25,5 @@ .hds-fieldset--border > .hds-fieldset-legend { margin-left: calc(var(--padding-sides) / -2); - padding: 0 6px 0 6px; -} + padding: 0 6px; +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.min.css b/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.min.css index 5fdbabdd2..c9dc4110a 100644 --- a/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.min.css +++ b/src/scss/xx_external/hds-core/lib/components/fieldset/fieldset.min.css @@ -1 +1 @@ -.hds-fieldset{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.hds-fieldset-legend{font-weight:700}.hds-fieldset--border{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.hds-fieldset--border>.hds-fieldset-legend{margin-left:calc(var(--padding-sides) / -2);padding:0 6px} \ No newline at end of file +.hds-fieldset{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.hds-fieldset-legend{font-weight:700;padding:0}.hds-fieldset--border{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.hds-fieldset--border>.hds-fieldset-legend{margin-left:calc(var(--padding-sides) / -2);padding:0 6px} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/hero/hero.css b/src/scss/xx_external/hds-core/lib/components/hero/hero.css new file mode 100644 index 000000000..706e02858 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/hero/hero.css @@ -0,0 +1,417 @@ +.hds-hero { + --arrow-icon-color: var(--color); + --arrow-icon-size: 128px; + --background-color: var(--color-white); + --color: var(--color-black-90); + --diagonal-koros-position: 45%; + --horizontal-padding-large: var(--spacing-layout-xs); + --horizontal-padding-medium: var(--spacing-layout-xs); + --horizontal-padding-small: var(--spacing-layout-2-xs); + --horizontal-padding-x-large: var(--spacing-layout-xs); + --image-position: bottom right; + --koros-color: var(--color-white); + --bottom-koros-color: var(--koros-color); + --koros-height: 85px; + --padding-horizontal: var(--horizontal-padding-small); + --padding-vertical: var(--spacing-xl); + --z-index: 1; + --bottom-background-color: transparent; + --information-padding-top: 0; + --information-color: inherit; + background-color: var(--background-color); + color: var(--color); + display: flex; + flex-direction: column; + position: relative; + z-index: var(--z-index); +} + +.hds-hero__bottom-container { + background-color: var(--bottom-background-color); + width: 100%; +} + +.hds-hero__bottom-content-aligner { + display: flex; + justify-content: space-between; + margin: 0 auto; + max-width: var(--container-width-xl); + position: relative; + width: 100%; + z-index: calc(var(--z-index) + 1); +} + +.hds-hero__arrow-icon-container { + display: flex; + position: relative; + z-index: calc(var(--z-index) + 1); +} + +.hds-hero--arrow-icon { + --icon-size: var(--arrow-icon-size) !important; + color: var(--arrow-icon-color); + /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account) */ + margin-left: calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4); + margin-top: calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs)); +} + +.hds-hero__information-container { + display: flex; + flex-grow: 1; + justify-content: flex-end; + padding-top: var(--information-padding-top); +} + +.hds-hero__information-container span { + color: var(--information-color); + padding: var(--spacing-2-xs) var(--spacing-s); +} + +.hds-hero__title { + font-size: var(--fontsize-heading-xl-mobile); + font-weight: normal; + letter-spacing: -1px; + line-height: var(--lineheight-s); + margin: 0 0 var(--spacing-s) 0; +} + +.hds-hero__text { + font-size: var(--fontsize-body-l); + margin: 0 0 var(--spacing-s) 0; +} + +.hds-hero__text:last-of-type { + margin: 0 0 var(--spacing-l) 0; +} + +.hds-hero__container { + margin-left: auto; + margin-right: auto; + max-width: var(--container-width-xl); +} + +.hds-hero__content { + display: flex; + padding: var(--padding-vertical) var(--padding-horizontal); +} + +.hds-hero__content--single-column, +.hds-hero__content--two-columns { + display: flex; + flex-direction: column; +} + +.hds-hero__content--two-columns { + align-items: center; +} + +.hds-hero__content--two-columns__image-container { + display: none; +} + +.hds-hero__card { + display: block; + max-width: var(--container-width-xl); +} + +.hds-hero__koros-container, +.hds-hero__koros-container--overflow-bottom, +.hds-hero__koros-container--inward-koros { + height: var(--koros-height); + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + position: absolute; + z-index: 1; +} + +.hds-hero__koros-container--inward-koros { + position: relative; +} + +.hds-hero__koros-container--overflow-bottom { + bottom: calc(-1 * var(--koros-height)); + display: flex; + flex-direction: column; + justify-content: flex-end; + top: auto; +} + +.hds-hero__koros-container > div { + bottom: 0; + height: 100%; + position: absolute; + width: 100%; +} + +.hds-hero__card--centered-content { + text-align: center; + width: 100%; +} + +.hds-hero__image { + display: block; + width: 100%; +} + +.hds-hero__koros-and-image-container { + display: block; + position: relative; +} + +.hds-hero__image-below-koros { + display: block; +} + +.hds-hero__image-below-koros .hds-hero__image { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: var(--image-position); + object-position: var(--image-position); +} + +.hds-hero--with-background__container { + position: relative; +} + +.hds-hero--with-background__background { + position: relative; + width: 100%; +} + +.hds-hero--with-background__background .hds-hero__image { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: var(--image-position); + object-position: var(--image-position); +} + +.hds-hero--with-background__content-columns { + display: flex; + margin: 0 auto; + max-width: var(--container-width-xl); +} + +.hds-hero--with-background__empty-column { + display: none; +} + +.hds-hero--background-image .hds-hero__content { + padding: 0; +} + +.hds-hero--background-image .hds-hero__card { + background-color: var(--background-color); + padding: var(--padding-vertical) var(--padding-horizontal); +} + +.hds-hero--background-image__koros { + bottom: 0; + height: var(--koros-height); + overflow: hidden; + position: absolute; + width: 100%; + --koros-color: var(--top-koros-color); +} + +.hds-hero--diagonal-koros .hds-hero--with-background__container { + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + z-index: 1; +} + +.hds-hero--diagonal-koros .hds-hero__content { + box-sizing: border-box; + display: block; + padding: 0; + width: 100%; + z-index: 2; +} + +.hds-hero--diagonal-koros .hds-hero__card { + background-color: var(--background-color); + padding: var(--padding-vertical) var(--padding-horizontal); +} + +.hds-hero--diagonal-koros__koros-and-background { + height: var(--koros-height); + position: absolute; + transform: rotate(180deg); + width: 100%; +} + +.hds-hero--diagonal-koros__koros-aligner { + position: relative; + z-index: 1; +} + +.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container { + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + width: 100%; +} + +.hds-hero--with-background__background, +.hds-hero__image-below-koros { + height: 300px; +} + +@media only screen and (min-width: 768px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-medium); + --padding-vertical: var(--spacing-layout-m); + --arrow-icon-size: 164px; + } + .hds-hero--with-background__background, + .hds-hero__image-below-koros { + height: 400px; + } + .hds-hero__information-container span { + padding-bottom: var(--spacing-xs); + padding-right: var(--spacing-m); + padding-top: var(--spacing-xs); + } +} + +@media only screen and (min-width: 992px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-large); + --padding-vertical: var(--spacing-layout-xl); + } + .hds-hero__text { + font-size: var(--fontsize-body-xl); + } + .hds-hero--image-left .hds-hero__image-below-koros, + .hds-hero--image-right .hds-hero__image-below-koros { + display: none; + } + .hds-hero--image-left .hds-hero__information-container, + .hds-hero--image-right .hds-hero__information-container { + --information-padding-top: var(--koros-height); + } + .hds-hero__content--two-columns { + flex-direction: row; + } + .hds-hero__content--two-columns > * { + width: 50%; + } + .hds-hero__content--two-columns > *:first-child { + margin-right: var(--spacing-xl); + } + .hds-hero__content--two-columns > *:last-child { + margin-left: var(--spacing-xl); + } + .hds-hero__content--two-columns__image-container { + display: block; + } + .hds-hero--background-image .hds-hero--with-background__container { + padding: var(--padding-vertical) var(--padding-horizontal); + } + .hds-hero--background-image .hds-hero__content { + --padding-vertical: var(--spacing-2-xl); + display: flex; + flex-direction: row; + margin: 0 auto; + max-width: var(--container-width-xl); + } + .hds-hero--background-image .hds-hero__card { + width: 50%; + } + .hds-hero--with-background__background { + height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + width: auto; + z-index: -1; + } + .hds-hero--with-background__empty-column { + display: block; + width: 45%; + } + .hds-hero--diagonal-koros .hds-hero__content { + background-color: transparent; + padding: var(--padding-vertical) 0; + } + .hds-hero--diagonal-koros .hds-hero__card { + background: none; + padding: 0 var(--padding-horizontal); + width: 55%; + } + .hds-hero--diagonal-koros__koros-aligner { + bottom: 0; + max-width: var(--container-width-xl); + position: absolute; + right: var(--diagonal-koros-position); + top: 0; + width: 100%; + z-index: 1; + } + .hds-hero--diagonal-koros__koros-and-background { + display: block; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: visible; + position: absolute; + transform: rotate(135deg); + transform-origin: center; + width: 150%; + } + .hds-hero--diagonal-koros__koros-and-background:after { + background-color: var(--koros-color); + content: ""; + display: block; + height: 1500px; + left: 0; + position: absolute; + top: 50px; + width: 150%; + } + .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container { + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + .hds-hero--background-image__koros { + --koros-color: var(--bottom-koros-color); + } + .hds-hero__title { + font-size: var(--fontsize-heading-xl); + } +} + +@media only screen and (min-width: 1248px) { + .hds-hero { + --padding-horizontal: var(--horizontal-padding-x-large); + } + .hds-hero__title { + font-size: var(--fontsize-heading-xxl); + letter-spacing: -1.2px; + line-height: var(--lineheight-s); + } + .hds-hero--diagonal-koros .hds-hero__text { + padding-right: var(--spacing-l); + } + .hds-hero__content--two-columns > *:first-child { + margin-right: var(--spacing-2-xl); + } + .hds-hero__content--two-columns > *:last-child { + margin-left: var(--spacing-2-xl); + } +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/hero/hero.min.css b/src/scss/xx_external/hds-core/lib/components/hero/hero.min.css new file mode 100644 index 000000000..db02b53f6 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/hero/hero.min.css @@ -0,0 +1 @@ +.hds-hero{--arrow-icon-color:var(--color);--arrow-icon-size:128px;--background-color:var(--color-white);--color:var(--color-black-90);--diagonal-koros-position:45%;--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--image-position:bottom right;--koros-color:var(--color-white);--bottom-koros-color:var(--koros-color);--koros-height:85px;--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);--z-index:1;--bottom-background-color:transparent;--information-padding-top:0;--information-color:inherit;background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:var(--z-index)}.hds-hero__bottom-container{background-color:var(--bottom-background-color);width:100%}.hds-hero__bottom-content-aligner{justify-content:space-between;margin:0 auto;max-width:var(--container-width-xl);width:100%}.hds-hero__arrow-icon-container,.hds-hero__bottom-content-aligner{display:flex;position:relative;z-index:calc(var(--z-index) + 1)}.hds-hero--arrow-icon{--icon-size:var(--arrow-icon-size)!important;color:var(--arrow-icon-color);margin-left:calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4);margin-top:calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs))}.hds-hero__information-container{display:flex;flex-grow:1;justify-content:flex-end;padding-top:var(--information-padding-top)}.hds-hero__information-container span{color:var(--information-color);padding:var(--spacing-2-xs) var(--spacing-s)}.hds-hero__title{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s);margin:0 0 var(--spacing-s) 0}.hds-hero__text{font-size:var(--fontsize-body-l);margin:0 0 var(--spacing-s) 0}.hds-hero__text:last-of-type{margin:0 0 var(--spacing-l) 0}.hds-hero__container{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hds-hero__content{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero__content--single-column,.hds-hero__content--two-columns{display:flex;flex-direction:column}.hds-hero__content--two-columns{align-items:center}.hds-hero__content--two-columns__image-container{display:none}.hds-hero__card{display:block;max-width:var(--container-width-xl)}.hds-hero__koros-container,.hds-hero__koros-container--inward-koros,.hds-hero__koros-container--overflow-bottom{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hds-hero__koros-container--inward-koros{position:relative}.hds-hero__koros-container--overflow-bottom{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hds-hero__koros-container>div{bottom:0;height:100%;position:absolute;width:100%}.hds-hero__card--centered-content{text-align:center;width:100%}.hds-hero__image{display:block;width:100%}.hds-hero__koros-and-image-container{display:block;position:relative}.hds-hero__image-below-koros{display:block}.hds-hero__image-below-koros .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__container{position:relative}.hds-hero--with-background__background{position:relative;width:100%}.hds-hero--with-background__background .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__content-columns{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--with-background__empty-column{display:none}.hds-hero--background-image .hds-hero__content{padding:0}.hds-hero--background-image .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image__koros{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hds-hero--diagonal-koros .hds-hero--with-background__container{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hds-hero--diagonal-koros .hds-hero__content{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hds-hero--diagonal-koros .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--diagonal-koros__koros-and-background{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hds-hero--diagonal-koros__koros-aligner{position:relative;z-index:1}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:300px}@media only screen and (min-width:768px){.hds-hero{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m);--arrow-icon-size:164px}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:400px}.hds-hero__information-container span{padding-bottom:var(--spacing-xs);padding-right:var(--spacing-m);padding-top:var(--spacing-xs)}}@media only screen and (min-width:992px){.hds-hero{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hds-hero__text{font-size:var(--fontsize-body-xl)}.hds-hero--image-left .hds-hero__image-below-koros,.hds-hero--image-right .hds-hero__image-below-koros{display:none}.hds-hero--image-left .hds-hero__information-container,.hds-hero--image-right .hds-hero__information-container{--information-padding-top:var(--koros-height)}.hds-hero__content--two-columns{flex-direction:row}.hds-hero__content--two-columns>*{width:50%}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-xl)}.hds-hero__content--two-columns__image-container{display:block}.hds-hero--background-image .hds-hero--with-background__container{padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image .hds-hero__content{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--background-image .hds-hero__card{width:50%}.hds-hero--with-background__background{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hds-hero--with-background__empty-column{display:block;width:45%}.hds-hero--diagonal-koros .hds-hero__content{background-color:transparent;padding:var(--padding-vertical) 0}.hds-hero--diagonal-koros .hds-hero__card{background:none;padding:0 var(--padding-horizontal);width:55%}.hds-hero--diagonal-koros__koros-aligner{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hds-hero--diagonal-koros__koros-and-background{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hds-hero--diagonal-koros__koros-and-background:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hds-hero--background-image__koros{--koros-color:var(--bottom-koros-color)}.hds-hero__title{font-size:var(--fontsize-heading-xl)}}@media only screen and (min-width:1248px){.hds-hero{--padding-horizontal:var(--horizontal-padding-x-large)}.hds-hero__title{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px;line-height:var(--lineheight-s)}.hds-hero--diagonal-koros .hds-hero__text{padding-right:var(--spacing-l)}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-2-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-2-xl)}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/highlight/highlight.css b/src/scss/xx_external/hds-core/lib/components/highlight/highlight.css new file mode 100644 index 000000000..b426cd57d --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/highlight/highlight.css @@ -0,0 +1,62 @@ +.hds-highlight { + --accent-line-color: var(--color-bus); + --text-color: var(--color-black-90); + --size-width-s: 264px; + --size-width-m: 536px; + --size-width-l: 680px; + --width: var(--size-width-m); + --margin: var(--spacing-m) 0; + border-left: 8px solid var(--accent-line-color); + color: var(--text-color); + display: flex; + flex-direction: column; + justify-content: center; + margin: var(--margin); + max-width: 100%; + padding: 0; + padding-left: var(--spacing-s); + grid-row-gap: var(--spacing-m); + row-gap: var(--spacing-m); + width: var(--width); +} + +.hds-blockquote { + margin: 0; + padding: 0; +} + +.hds-highlight__text { + color: var(--text-color); + font-size: var(--fontsize-heading-m); + letter-spacing: -0.2px; + line-height: var(--lineheight-m); + margin: 0; + padding: 0; +} + +.hds-highlight--small { + --margin: var(--spacing-s) 0; + --width: var(--size-width-s); +} + +.hds-highlight--large { + --margin: var(--spacing-l) 0; + --width: var(--size-width-l); +} + +.hds-highlight--large .hds-highlight__text { + font-size: var(--fontsize-heading-l); + letter-spacing: -0.4px; + line-height: var(--lineheight-l); +} + +.hds-highlight__quote:before, +.hds-highlight__quote:after { + content: '"'; + display: inline; +} + +.hds-highlight__reference { + font-size: var(--fontsize-heading-xs); + line-height: var(--lineheight-m); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/highlight/highlight.min.css b/src/scss/xx_external/hds-core/lib/components/highlight/highlight.min.css new file mode 100644 index 000000000..cec368b1d --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/highlight/highlight.min.css @@ -0,0 +1 @@ +.hds-highlight{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.hds-blockquote{margin:0;padding:0}.hds-highlight__text{color:var(--text-color);font-size:var(--fontsize-heading-m);letter-spacing:-.2px;line-height:var(--lineheight-m);margin:0;padding:0}.hds-highlight--small{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.hds-highlight--large{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.hds-highlight--large .hds-highlight__text{font-size:var(--fontsize-heading-l);letter-spacing:-.4px;line-height:var(--lineheight-l)}.hds-highlight__quote:after,.hds-highlight__quote:before{content:'"';display:inline}.hds-highlight__reference{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/koros/koros.css b/src/scss/xx_external/hds-core/lib/components/koros/koros.css index 4178ceffc..a0aaa0f64 100644 --- a/src/scss/xx_external/hds-core/lib/components/koros/koros.css +++ b/src/scss/xx_external/hds-core/lib/components/koros/koros.css @@ -1,8 +1,43 @@ .hds-koros { - width: 100%; line-height: 0; + width: 100%; } -.hds-koros--flip-horizontal { +.hds-koros--flip-vertical { transform: scaleY(-1); } + +.hds-koros--45deg { + transform: rotate(45deg); + will-change: transform; /* The browser should use a new compositing layer when rotating. Otherwise, it will draw an annoying hairline on top of the Koros. */ +} + +.hds-koros--90deg { + transform: rotate(90deg); + will-change: transform; +} + +.hds-koros--135deg { + transform: rotate(135deg); + will-change: transform; +} + +.hds-koros--180deg { + transform: rotate(180deg); + will-change: transform; +} + +.hds-koros--225deg { + transform: rotate(225deg); + will-change: transform; +} + +.hds-koros--270deg { + transform: rotate(270deg); + will-change: transform; +} + +.hds-koros--315deg { + transform: rotate(315deg); + will-change: transform; +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/koros/koros.min.css b/src/scss/xx_external/hds-core/lib/components/koros/koros.min.css index 1f4220f58..9491e4c4b 100644 --- a/src/scss/xx_external/hds-core/lib/components/koros/koros.min.css +++ b/src/scss/xx_external/hds-core/lib/components/koros/koros.min.css @@ -1 +1 @@ -.hds-koros{width:100%;line-height:0}.hds-koros--flip-horizontal{transform:scaleY(-1)} \ No newline at end of file +.hds-koros{line-height:0;width:100%}.hds-koros--flip-vertical{transform:scaleY(-1)}.hds-koros--45deg{transform:rotate(45deg);will-change:transform}.hds-koros--90deg{transform:rotate(90deg);will-change:transform}.hds-koros--135deg{transform:rotate(135deg);will-change:transform}.hds-koros--180deg{transform:rotate(180deg);will-change:transform}.hds-koros--225deg{transform:rotate(225deg);will-change:transform}.hds-koros--270deg{transform:rotate(270deg);will-change:transform}.hds-koros--315deg{transform:rotate(315deg);will-change:transform} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/link/link.css b/src/scss/xx_external/hds-core/lib/components/link/link.css index b5b3eccac..1035c0a73 100644 --- a/src/scss/xx_external/hds-core/lib/components/link/link.css +++ b/src/scss/xx_external/hds-core/lib/components/link/link.css @@ -1,10 +1,90 @@ +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} + +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} + +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} + +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} + +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} + +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +.hds-icon--link-external { + --mask-image-link-external: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-link-external); +} + +.hds-icon-start--link-external { + --mask-image-before: var(--mask-image-link-external); +} + +.hds-icon-end--link-external { + --mask-image-after: var(--mask-image-link-external); +} + .hds-link { --link-visited-color: #551a8b; --link-color: var(--color-bus); - text-decoration: underline; - color: var(--link-color); - box-sizing: border-box; border: 3px solid transparent; + box-sizing: border-box; + color: var(--link-color); + text-decoration: underline; } .hds-link:visited { @@ -16,7 +96,7 @@ } .hds-link:focus { - border: 3px solid var(--color-coat-of-arms); + border: 3px solid var(--color-focus-outline); outline: none; } @@ -28,7 +108,7 @@ outline: none; } -.hds-link .vertical-align-small-or-medium-icon { +.hds-link .vertical-align-medium-icon { vertical-align: sub; } @@ -36,6 +116,10 @@ vertical-align: middle; } +.hds-link .vertical-align-small-icon { + vertical-align: text-top; +} + .hds-link--disable-visited-styles:visited { color: var(--color-bus); } @@ -49,8 +133,9 @@ } .hds-link--large { - font-size: 18px; display: block; + font-size: 18px; + width: -moz-fit-content; width: fit-content; } @@ -69,17 +154,17 @@ margin-left: var(--spacing-s); } -.hds-link--small .hds-icon-left { +.hds-link--small .hds-icon-start { margin-right: 4px; vertical-align: text-top; } -.hds-link--medium .hds-icon-left { +.hds-link--medium .hds-icon-start { margin-right: 8px; vertical-align: sub; } -.hds-link--large .hds-icon-left { +.hds-link--large .hds-icon-start { margin-right: 16px; vertical-align: middle; -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/link/link.min.css b/src/scss/xx_external/hds-core/lib/components/link/link.min.css index b31e28f19..368b781c6 100644 --- a/src/scss/xx_external/hds-core/lib/components/link/link.min.css +++ b/src/scss/xx_external/hds-core/lib/components/link/link.min.css @@ -1 +1 @@ -.hds-link{--link-visited-color:#551a8b;--link-color:var(--color-bus);text-decoration:underline;color:var(--link-color);box-sizing:border-box;border:3px solid transparent}.hds-link:visited{color:var(--link-visited-color)}.hds-link:visited svg g path{fill:var(--link-visited-color)}.hds-link:focus{border:3px solid var(--color-coat-of-arms);outline:none}.hds-link.focus-visible,.hds-link:focus-visible{outline:none}.hds-link .vertical-align-small-or-medium-icon{vertical-align:sub}.hds-link .vertical-align-big-icon{vertical-align:middle}.hds-link--disable-visited-styles:visited{color:var(--color-bus)}.hds-link--small{font-size:14px}.hds-link--medium{font-size:16px}.hds-link--large{font-size:18px;display:block;width:fit-content}.hds-link--small .icon{margin-left:7px}.hds-link--medium .icon{margin-left:var(--spacing-2-xs);margin-top:-3px}.hds-link--large .icon{margin-left:var(--spacing-s)}.hds-link--small .hds-icon-left{margin-right:4px;vertical-align:text-top}.hds-link--medium .hds-icon-left{margin-right:8px;vertical-align:sub}.hds-link--large .hds-icon-left{margin-right:16px;vertical-align:middle} \ No newline at end of file +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--link-external{--mask-image-link-external:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-link-external)}.hds-icon-start--link-external{--mask-image-before:var(--mask-image-link-external)}.hds-icon-end--link-external{--mask-image-after:var(--mask-image-link-external)}.hds-link{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.hds-link:visited{color:var(--link-visited-color)}.hds-link:visited svg g path{fill:var(--link-visited-color)}.hds-link:focus{border:3px solid var(--color-focus-outline);outline:none}.hds-link.focus-visible,.hds-link:focus-visible{outline:none}.hds-link .vertical-align-medium-icon{vertical-align:sub}.hds-link .vertical-align-big-icon{vertical-align:middle}.hds-link .vertical-align-small-icon{vertical-align:text-top}.hds-link--disable-visited-styles:visited{color:var(--color-bus)}.hds-link--small{font-size:14px}.hds-link--medium{font-size:16px}.hds-link--large{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.hds-link--small .icon{margin-left:7px}.hds-link--medium .icon{margin-left:var(--spacing-2-xs);margin-top:-3px}.hds-link--large .icon{margin-left:var(--spacing-s)}.hds-link--small .hds-icon-start{margin-right:4px;vertical-align:text-top}.hds-link--medium .hds-icon-start{margin-right:8px;vertical-align:sub}.hds-link--large .hds-icon-start{margin-right:16px;vertical-align:middle} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.css b/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.css index dee20e95b..db650d3ca 100644 --- a/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.css +++ b/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.css @@ -4,20 +4,18 @@ --spinner-thickness: 0.5rem; --spinner-rotation-animation-duration: 1.5s; --spinner-color-animation-duration: 4.5s; - --spinner-color-stage1: var(--color-coat-of-arms); --spinner-color-stage2: var(--color-copper); --spinner-color-stage3: var(--color-suomenlinna); - + border-top-color: var(--spinner-color); + height: var(--spinner-size); position: relative; width: var(--spinner-size); - height: var(--spinner-size); - border-top-color: var(--spinner-color); } .hds-loading-spinner--multicolor { - border-top-color: var(--spinner-color-stage1); animation: spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite; + border-top-color: var(--spinner-color-stage1); } .hds-loading-spinner--small { @@ -26,14 +24,14 @@ } .hds-loading-spinner div { - position: absolute; - box-sizing: border-box; - width: 100%; - height: 100%; + animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite; border: var(--spinner-thickness) solid transparent; - border-top-color: inherit; border-radius: 50%; - animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite; + border-top-color: inherit; + box-sizing: border-box; + height: 100%; + position: absolute; + width: 100%; } .hds-loading-spinner div:nth-child(2) { @@ -45,13 +43,21 @@ } @keyframes spinner-rotation-animation { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } @keyframes spinner-color-animation { - 0% {} - 33.3% { border-top-color: var(--spinner-color-stage2) } - 66.6% { border-top-color: var(--spinner-color-stage3) } - 100% {} + 0% { /* empty */ } + 33.3% { + border-top-color: var(--spinner-color-stage2); + } + 66.6% { + border-top-color: var(--spinner-color-stage3); + } + 100% { /* empty */ } } \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css b/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css index 2cc59befc..8cc8bf85b 100644 --- a/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css +++ b/src/scss/xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css @@ -1 +1 @@ -.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:var(--spinner-size);height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid transparent;border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} \ No newline at end of file +.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:var(--spinner-size);position:relative;width:var(--spinner-size)}.hds-loading-spinner--multicolor{animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite;border-top-color:var(--spinner-color-stage1)}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite;border:var(--spinner-thickness) solid transparent;border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.hds-loading-spinner div:nth-child(2){animation-delay:-.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/notification/notification.css b/src/scss/xx_external/hds-core/lib/components/notification/notification.css index 59de9665a..95c9dec31 100644 --- a/src/scss/xx_external/hds-core/lib/components/notification/notification.css +++ b/src/scss/xx_external/hds-core/lib/components/notification/notification.css @@ -1,17 +1,134 @@ +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} + +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} + +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} + +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} + +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} + +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +.hds-icon--alert-circle-fill { + --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-alert-circle-fill); +} + +.hds-icon-start--alert-circle-fill { + --mask-image-before: var(--mask-image-alert-circle-fill); +} + +.hds-icon-end--alert-circle-fill { + --mask-image-after: var(--mask-image-alert-circle-fill); +} + +.hds-icon--check-circle-fill { + --mask-image-check-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-check-circle-fill); +} + +.hds-icon-start--check-circle-fill { + --mask-image-before: var(--mask-image-check-circle-fill); +} + +.hds-icon-end--check-circle-fill { + --mask-image-after: var(--mask-image-check-circle-fill); +} + +.hds-icon--error-fill { + --mask-image-error-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-error-fill); +} + +.hds-icon-start--error-fill { + --mask-image-before: var(--mask-image-error-fill); +} + +.hds-icon-end--error-fill { + --mask-image-after: var(--mask-image-error-fill); +} + +.hds-icon--info-circle-fill { + --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-info-circle-fill); +} + +.hds-icon-start--info-circle-fill { + --mask-image-before: var(--mask-image-info-circle-fill); +} + +.hds-icon-end--info-circle-fill { + --mask-image-after: var(--mask-image-info-circle-fill); +} + .hds-notification { --notification-background-color: var(--color-info-light); --notification-border-color: var(--color-info); --notification-border-width: var(--spacing-2-xs); --notification-icon-color: var(--color-info); --notification-color: var(--color-black-90); - --notification-focus-outline-color: var(--color-coat-of-arms); --notification-max-width-inline: none; --notification-max-width-toast: 21rem; --notification-z-index-inline: auto; --notification-z-index-toast: 99; --notification-offset: var(--spacing-layout-s); --notification-padding: var(--spacing-s); - background-color: var(--notification-background-color); border: solid var(--notification-border-color); border-width: 0 0 0 var(--notification-border-width); @@ -24,30 +141,53 @@ z-index: var(--notification-z-index-inline); } -/* CONTENT */ - .hds-notification__content { display: grid; grid-gap: var(--spacing-s); gap: var(--spacing-s); } -/* LABEL */ - .hds-notification__label { - align-items: flex-start; + align-items: center; display: flex; + font-size: var(--fontsize-heading-xs); font-weight: bold; - font-size: var(--fontsize-body-l); + letter-spacing: 0; + line-height: 24px; margin-right: var(--spacing-l); } +.hds-notification .hds-icon { + --icon-size: var(--spacing-layout-xs); +} + .hds-notification__label > .hds-icon { color: var(--notification-icon-color); + flex: none; margin-right: var(--spacing-2-xs); } -/* SMALL */ +.hds-notification__body { + font-size: var(--fontsize-body-s); + line-height: 24px; +} + +.hds-notification__close-button { + --notification-close-button-offset: var(--spacing-s); + background: none; + border: none; + cursor: pointer; + display: flex; + outline: none; + padding: 0; + position: absolute; + right: var(--notification-close-button-offset); + top: var(--notification-close-button-offset); +} + +.hds-notification__close-button:focus { + box-shadow: 0 0 0 3px var(--color-focus-outline); +} .hds-notification--small { --notification-padding: var(--spacing-2-xs); @@ -67,7 +207,9 @@ margin-right: var(--spacing-l); } -/* LARGE */ +.hds-notification--small .hds-notification__close-button { + --notification-close-button-offset: var(--spacing-2-xs); +} .hds-notification--large { --notification-padding: var(--spacing-l); @@ -77,52 +219,11 @@ margin-right: 0; } -/* ICON */ - -.hds-notification .hds-icon { - --icon-size: var(--spacing-layout-xs); -} - -.hds-notification__label > .hds-icon { - flex: none; -} - -.hds-notification:not(.hds-notification--small) .hds-notification__label > .hds-icon { - transform: translateY(var(--spacing-4-xs)); -} - -/* CLOSE BUTTON */ - -.hds-notification__close-button { - --notification-close-button-offset: var(--spacing-s); - background: none; - border: none; - cursor: pointer; - display: flex; - outline: none; - padding: 0; - position: absolute; - right: var(--notification-close-button-offset); - top: var(--notification-close-button-offset); -} - -.hds-notification--small .hds-notification__close-button, .hds-notification--large .hds-notification__close-button { --notification-close-button-offset: var(--spacing-2-xs); } -.hds-notification__close-button:focus { - box-shadow: 0 0 0 3px var(--notification-focus-outline-color); -} - -/* TOAST POSITIONS */ - -.hds-notification--top-left, -.hds-notification--top-center, -.hds-notification--top-right, -.hds-notification--bottom-left, -.hds-notification--bottom-center, -.hds-notification--bottom-right { +.hds-notification--top-left, .hds-notification--top-center, .hds-notification--top-right, .hds-notification--bottom-left, .hds-notification--bottom-center, .hds-notification--bottom-right { border-width: var(--notification-border-width) 0 0; max-width: var(--notification-max-width-toast); position: fixed; @@ -131,19 +232,19 @@ } .hds-notification--top-left { - top: var(--notification-offset); left: var(--notification-offset); + top: var(--notification-offset); } .hds-notification--top-center { - top: var(--notification-offset); left: 50%; + top: var(--notification-offset); transform: translateX(-50%); } .hds-notification--top-right { - top: var(--notification-offset); right: var(--notification-offset); + top: var(--notification-offset); } .hds-notification--bottom-left { @@ -168,8 +269,6 @@ } } -/* TYPES */ - .hds-notification--success { --notification-background-color: var(--color-success-light); --notification-border-color: var(--color-success); @@ -187,3 +286,7 @@ --notification-border-color: var(--color-error); --notification-icon-color: var(--color-error); } + +.hds-notification--box-shadow { + box-shadow: var(--box-shadow-l); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/notification/notification.min.css b/src/scss/xx_external/hds-core/lib/components/notification/notification.min.css index 57c2d74bf..d9eeceffe 100644 --- a/src/scss/xx_external/hds-core/lib/components/notification/notification.min.css +++ b/src/scss/xx_external/hds-core/lib/components/notification/notification.min.css @@ -1 +1 @@ -.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-focus-outline-color:var(--color-coat-of-arms);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:flex-start;display:flex;font-weight:700;font-size:var(--fontsize-body-l);margin-right:var(--spacing-l)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);margin-right:var(--spacing-2-xs)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{flex:none}.hds-notification:not(.hds-notification--small) .hds-notification__label>.hds-icon{transform:translateY(var(--spacing-4-xs))}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification--large .hds-notification__close-button,.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--notification-focus-outline-color)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{top:var(--notification-offset);left:var(--notification-offset)}.hds-notification--top-center{top:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--top-right{top:var(--notification-offset);right:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)} \ No newline at end of file +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification--large .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{left:var(--notification-offset);top:var(--notification-offset)}.hds-notification--top-center{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.hds-notification--top-right{right:var(--notification-offset);top:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-notification--box-shadow{box-shadow:var(--box-shadow-l)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/pagination/pagination.css b/src/scss/xx_external/hds-core/lib/components/pagination/pagination.css new file mode 100644 index 000000000..a0400b097 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/pagination/pagination.css @@ -0,0 +1,189 @@ +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} + +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} + +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} + +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} + +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} + +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +.hds-icon--angle-right { + --mask-image-angle-right: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-angle-right); +} + +.hds-icon-start--angle-right { + --mask-image-before: var(--mask-image-angle-right); +} + +.hds-icon-end--angle-right { + --mask-image-after: var(--mask-image-angle-right); +} + +.hds-icon--angle-left { + --mask-image-angle-left: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-angle-left); +} + +.hds-icon-start--angle-left { + --mask-image-before: var(--mask-image-angle-left); +} + +.hds-icon-end--angle-left { + --mask-image-after: var(--mask-image-angle-left); +} + +.hds-pagination-container { + text-align: center; +} + +.hds-pagination { + display: inline-block; /* Allows centering */ + font-size: var(--fontsize-body-m); + font-weight: bold; + line-height: var(--lineheight-l); + position: relative; /* Enables position absolute for btn--next */ + transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */ + --active-page-background-color: var(--color-black); + --link-height: 40px; +} + +/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next, +we can not use this position for the actual button as it's in incorrect source order for tabbing */ + +.hds-pagination:before { + content: attr(data-next); /* Trick to keep floating element same size as btn--next */ + content: attr(data-next)/""; /* Removes this pseudo-element from screen readers where supported */ + display: block; + float: right; /* Floated pseudo-element wraps the inline ul around it */ + line-height: 56px; + padding-left: 100px; + speak: never; /* Removes this pseudo-element from screen readers where supported */ + visibility: hidden; +} + +.hds-pagination .hds-pagination__button-prev { + float: left; + margin-right: 8px; + transform: scaleY(-1); /* Flip the element back from upside down */ + white-space: nowrap; +} + +.hds-pagination .hds-pagination__button-next { + position: absolute; + right: 0; + top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */ + transform: scaleY(-1); /* Flip the element back from upside down */ + white-space: nowrap; +} + +.hds-pagination__pages { + display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */ + flex-wrap: wrap; /* Allow wrapping of the li-elements */ + grid-gap: var(--spacing-2-xs); + gap: var(--spacing-2-xs); + justify-content: center; /* Center the li-elements */ + list-style: none; + margin-bottom: 0; + margin-top: 8px; + padding: 0; + transform: scaleY(-1); /* Flip the element back from upside down */ +} + +.hds-pagination__item-link { + align-items: center; + border-radius: 21px; + color: var(--color-black-90); + display: flex; + height: var(--link-height); + justify-content: center; + min-width: 32px; + padding-left: var(--spacing-3-xs); + padding-right: var(--spacing-3-xs); + text-decoration: none; +} + +.hds-pagination__item-link:hover { + text-decoration: underline; +} + +.hds-pagination__item-link:focus, .hds-pagination__item-link:active { + outline: solid var(--color-focus-outline) 3px; + outline-offset: 1px; +} + +.hds-pagination__item-link.hds-pagination__item-link--active { + background-color: var(--active-page-background-color); + color: var(--color-white); +} + +.hds-pagination__item-link.hds-pagination__item-link--active:hover { + text-decoration: none; +} + +.hds-pagination__item-ellipsis { + align-items: center; + color: var(--color-black-90); + display: flex; + height: var(--link-height); + justify-content: center; + width: 40px; +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/pagination/pagination.min.css b/src/scss/xx_external/hds-core/lib/components/pagination/pagination.min.css new file mode 100644 index 000000000..7e2d8a268 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/pagination/pagination.min.css @@ -0,0 +1 @@ +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--angle-right{--mask-image-angle-right:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12l-5-5L10 5.5l6.5 6.5-6.5 6.5L8.5 17l5-5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-right)}.hds-icon-start--angle-right{--mask-image-before:var(--mask-image-angle-right)}.hds-icon-end--angle-right{--mask-image-after:var(--mask-image-angle-right)}.hds-icon--angle-left{--mask-image-angle-left:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12l5 5-1.5 1.5L7.5 12 14 5.5 15.5 7l-5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-left)}.hds-icon-start--angle-left{--mask-image-before:var(--mask-image-angle-left)}.hds-icon-end--angle-left{--mask-image-after:var(--mask-image-angle-left)}.hds-pagination-container{text-align:center}.hds-pagination{display:inline-block;font-size:var(--fontsize-body-m);font-weight:700;line-height:var(--lineheight-l);position:relative;transform:scaleY(-1);--active-page-background-color:var(--color-black);--link-height:40px}.hds-pagination:before{content:attr(data-next);content:attr(data-next)/"";display:block;float:right;line-height:56px;padding-left:100px;speak:never;visibility:hidden}.hds-pagination .hds-pagination__button-prev{float:left;margin-right:8px;transform:scaleY(-1);white-space:nowrap}.hds-pagination .hds-pagination__button-next{position:absolute;right:0;top:0;transform:scaleY(-1);white-space:nowrap}.hds-pagination__pages{display:inline-flex;flex-wrap:wrap;grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;list-style:none;margin-bottom:0;margin-top:8px;padding:0;transform:scaleY(-1)}.hds-pagination__item-link{align-items:center;border-radius:21px;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;min-width:32px;padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs);text-decoration:none}.hds-pagination__item-link:hover{text-decoration:underline}.hds-pagination__item-link:active,.hds-pagination__item-link:focus{outline:solid var(--color-focus-outline) 3px;outline-offset:1px}.hds-pagination__item-link.hds-pagination__item-link--active{background-color:var(--active-page-background-color);color:var(--color-white)}.hds-pagination__item-link.hds-pagination__item-link--active:hover{text-decoration:none}.hds-pagination__item-ellipsis{align-items:center;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;width:40px} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.css b/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.css index 5ece5d2e5..176bfa17f 100644 --- a/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.css +++ b/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.css @@ -6,13 +6,11 @@ --outline-width: 3px; --label-font-size: var(--fontsize-body-m); --label-padding: var(--spacing-2-xs); - --background: var(--color-white); --background-hover: var(--color-white); --background-focus: var(--color-white); --background-unselected-disabled: var(--color-black-10); --background-selected-disabled: var(--color-white); - --border-color-focus: var(--color-black-90); --border-color-selected: var(--color-bus); --border-color-selected-hover: var(--color-bus-dark); @@ -20,26 +18,22 @@ --border-color-unselected: var(--color-black-50); --border-color-unselected-hover: var(--color-black-90); --border-color-unselected-disabled: var(--color-black-10); - --icon-color-selected: var(--color-bus); --icon-color-unselected: transparent; --icon-color-hover: var(--color-bus-dark); --icon-color-disabled: var(--color-black-10); - - --focus-outline-color: var(--color-coat-of-arms); - --label-color: var(--color-black-90); --label-color-disabled: var(--color-black-40); - display: flex; + flex-wrap: wrap; min-height: var(--size); position: relative; } .hds-radio-button, .hds-radio-button *, -.hds-radio-button *::before, -.hds-radio-button *::after { +.hds-radio-button *:before, +.hds-radio-button *:after { box-sizing: border-box; } @@ -47,16 +41,77 @@ margin-top: var(--spacing-2-xs); } +.hds-radio-button .hds-radio-button__label:before, +.hds-radio-button .hds-radio-button__label:after { + border-radius: 50%; + content: ""; + left: 0; + position: absolute; + top: 0; +} + +/* inner circle */ + +.hds-radio-button .hds-radio-button__label:after { + background-clip: content-box; + background-color: var(--icon-color-unselected); + border: var(--border-width) solid var(--border-color-unselected); + height: var(--size); + padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale))); + width: var(--size); +} + +/* inner circle - selected */ + +.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after { + background-color: var(--icon-color-selected); + border-color: var(--border-color-selected); +} + /* radio button transitions */ -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::after { +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after { transition: 85ms ease-out; transition-property: background-color, border-color; } -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::before, -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::before { +/* inner circle - disabled */ + +.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after { + border-color: var(--border-color-unselected-disabled); +} + +/* inner circle - selected - disabled */ + +.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after { + background-color: var(--icon-color-disabled); + border-color: var(--border-color-selected-disabled); +} + +/* inner circle - focus */ + +.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after { + border-color: var(--border-color-focus); +} + +/* inner circle - unselected - hover */ + +.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after { + border-color: var(--border-color-unselected-hover); +} + +/* background & focus outline */ + +.hds-radio-button .hds-radio-button__label:before { + background-color: var(--background); + height: var(--size); + width: var(--size); +} + +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before, +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before { transition: 85ms ease-out; transition-property: background-color, box-shadow, transform; } @@ -64,8 +119,21 @@ /* NATIVE INPUT */ .hds-radio-button .hds-radio-button__input { + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ height: var(--size); left: 0; + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ opacity: 0; position: absolute; top: 0; @@ -80,81 +148,33 @@ font-size: var(--label-font-size); line-height: var(--lineheight-m); padding-left: calc(var(--size) + var(--label-padding)); - padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2); + padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2); position: relative; } /* CUSTOM RADIO BUTTON */ -.hds-radio-button .hds-radio-button__label::before, -.hds-radio-button .hds-radio-button__label::after { - border-radius: 50%; - content: ""; - left: 0; - position: absolute; - top: 0; -} - -/* background & focus outline */ - -.hds-radio-button .hds-radio-button__label::before { - background-color: var(--background); - height: var(--size); - width: var(--size); -} - /* background - hover */ -.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before { background-color: var(--background-hover); } /* background - focus */ -.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label::before { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); +.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); transform: translate3d(0, 0, 0); } -/* inner circle */ - -.hds-radio-button .hds-radio-button__label::after { - background-clip: content-box; - background-color: var(--icon-color-unselected); - border: var(--border-width) solid var(--border-color-unselected); - height: var(--size); - padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale))); - width: var(--size); -} - -/* inner circle - selected */ - -.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label::after { - background-color: var(--icon-color-selected); - border-color: var(--border-color-selected); -} - /* inner circle - selected - hover */ -.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label::after { +.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after, +.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after { background-color: var(--icon-color-hover); border-color: var(--border-color-selected-hover); } -/* inner circle - unselected - hover */ - -.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label::after, -.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label::after { - border-color: var(--border-color-unselected-hover); -} - -/* inner circle - focus */ - -.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label::after { - border-color: var(--border-color-focus); -} - /* DISABLED */ /* label */ @@ -165,30 +185,17 @@ /* background */ -.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before { background-color: var(--background-unselected-disabled); } /* background - selected */ -.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label::before { +.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before { background-color: var(--background-selected-disabled); } -/* inner circle - disabled */ - -.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label::after { - border-color: var(--border-color-unselected-disabled); -} - -/* inner circle - selected - disabled */ - -.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label::after { - background-color: var(--icon-color-disabled); - border-color: var(--border-color-selected-disabled); -} - .hds-radio-button .hds-radio-button__input:disabled, .hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label { cursor: not-allowed; -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.min.css b/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.min.css index 074d792a6..48854c6df 100644 --- a/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.min.css +++ b/src/scss/xx_external/hds-core/lib/components/radio-button/radio-button.min.css @@ -1 +1 @@ -.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{height:var(--size);left:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} \ No newline at end of file +.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/search-input/search-input.css b/src/scss/xx_external/hds-core/lib/components/search-input/search-input.css index c32a5ceb4..9d162dba9 100644 --- a/src/scss/xx_external/hds-core/lib/components/search-input/search-input.css +++ b/src/scss/xx_external/hds-core/lib/components/search-input/search-input.css @@ -1,21 +1,94 @@ +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} + +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} + +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} + +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} + +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} + +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +.hds-icon--search { + --mask-image-search: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-search); +} + +.hds-icon-start--search { + --mask-image-before: var(--mask-image-search); +} + +.hds-icon-end--search { + --mask-image-after: var(--mask-image-search); +} .hds-search-input { --border-width: 2px; --outline-width: 3px; --input-height: 56px; - --helper-color-default: var(--color-black-60); --input-background-default: var(--color-white); --input-border-color-default: var(--color-black-50); - --input-border-color-hover : var(--color-black-90); + --input-border-color-hover: var(--color-black-90); --input-border-color-focus: var(--color-black-90); --input-color-default: var(--color-black-90); --label-color-default: var(--color-black-90); - --focus-outline-color: var(--color-coat-of-arms); -} - -.hds-search-input .hds-search-input__input:hover { - transition: border-color 85ms ease-out; } /* LABEL */ @@ -51,6 +124,7 @@ .hds-search-input .hds-search-input__input:hover { border-color: var(--input-border-color-hover); + transition: border-color 85ms ease-out; } .hds-search-input .hds-search-input__input:focus { @@ -61,38 +135,41 @@ /* FOCUS OUTLINE */ .hds-search-input .hds-search-input__input:not([readonly]):focus { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); + outline: var(--outline-width) solid var(--color-focus-outline); transform: translate3d(0, 0, 0); } /* BUTTON */ .hds-search-input__buttons { - position: absolute; - right: var(--spacing-s); - top: var(--spacing-s); - transform: translateY(0); - display: flex; align-items: center; + bottom: 0; + display: flex; + font-size: 1rem; justify-content: center; + margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2); + position: absolute; + right: 0; + top: 0; } -.hds-search-input__buttons .hds-search-input__button { +.hds-search-input__button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background: none; border: none; color: inherit; + color: var(--dropdown-color-default); cursor: pointer; + display: flex; font: inherit; - padding: 0; - color: var(--dropdown-color-default); outline: none; - display: flex; - margin-left: var(--spacing-xs); + padding: var(--spacing-xs) calc(var(--spacing-xs) / 2); } .hds-search-input__buttons .hds-search-input__button:focus { - outline: none; - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); + outline: var(--outline-width) solid var(--color-focus-outline); } /* HELPER TEXT */ diff --git a/src/scss/xx_external/hds-core/lib/components/search-input/search-input.min.css b/src/scss/xx_external/hds-core/lib/components/search-input/search-input.min.css index d8732ff7b..5d4a3f184 100644 --- a/src/scss/xx_external/hds-core/lib/components/search-input/search-input.min.css +++ b/src/scss/xx_external/hds-core/lib/components/search-input/search-input.min.css @@ -1 +1 @@ -.hds-search-input{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90);--focus-outline-color:var(--color-coat-of-arms)}.hds-search-input .hds-search-input__input:hover{transition:border-color 85ms ease-out}.hds-search-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-search-input__input-wrapper{display:flex;height:100%;position:relative}.hds-search-input .hds-search-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.hds-search-input .hds-search-input__input:hover{border-color:var(--input-border-color-hover)}.hds-search-input .hds-search-input__input:focus{border-color:var(--input-border-color-focus);outline:none}.hds-search-input .hds-search-input__input:not([readonly]):focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-search-input__buttons{position:absolute;right:var(--spacing-s);top:var(--spacing-s);transform:translateY(0);display:flex;align-items:center;justify-content:center}.hds-search-input__buttons .hds-search-input__button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0;color:var(--dropdown-color-default);outline:none;display:flex;margin-left:var(--spacing-xs)}.hds-search-input__buttons .hds-search-input__button:focus{outline:none;box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color)}.hds-search-input__helper-text{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)} \ No newline at end of file +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--search{--mask-image-search:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-search)}.hds-icon-start--search{--mask-image-before:var(--mask-image-search)}.hds-icon-end--search{--mask-image-after:var(--mask-image-search)}.hds-search-input{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90)}.hds-search-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-search-input__input-wrapper{display:flex;height:100%;position:relative}.hds-search-input .hds-search-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.hds-search-input .hds-search-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-search-input .hds-search-input__input:focus{border-color:var(--input-border-color-focus);outline:none}.hds-search-input .hds-search-input__input:not([readonly]):focus{outline:var(--outline-width) solid var(--color-focus-outline);transform:translateZ(0)}.hds-search-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-search-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;color:var(--dropdown-color-default);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-search-input__buttons .hds-search-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.hds-search-input__helper-text{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.css b/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.css index 00a982259..ccceb1717 100644 --- a/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.css +++ b/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.css @@ -1,10 +1,13 @@ .hds-selection-group { --spacing-col: 1.25rem; --spacing-row: var(--spacing-s); + --spacing-legend: var(--spacing-xs); --label-color-default: var(--color-black-90); --icon-size: var(--spacing-m); - border: 0; + display: flex; + flex-direction: column; + margin: 0; padding: 0; } @@ -13,11 +16,26 @@ } .hds-selection-group__legend { + /* + * Normalized rules + * 1. Correct the text wrapping in Edge and IE. + * `fieldset` elements in all browsers. + */ + box-sizing: border-box; /* 1 */ color: var(--label-color-default); display: block; font-size: var(--fontsize-body-m); font-weight: 500; - margin-bottom: var(--spacing-row); + margin-bottom: var(--spacing-legend); + /* + * Normalized rules + * 1. Correct the text wrapping in Edge and IE. + * 2. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + max-width: 100%; /* 1 */ + padding: 0; /* 2 */ + white-space: normal; /* 1 */ } .hds-selection-group__required { @@ -46,23 +64,28 @@ } .hds-selection-group__error-text { - position: relative; - color: var(--color-error); - display: block; + background-color: var(--color-error-light); + border-left: 8px solid var(--color-error); + color: var(--color-black); + display: flex; font-size: var(--fontsize-body-m); - margin-top: var(--spacing-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-legend); + padding: var(--spacing-2-xs); + position: relative; } -.hds-selection-group__error-text::before { +.hds-selection-group__error-text:before { background: var(--color-error); - content: ''; + content: ""; + display: inline-block; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } + +.hds-selection-group__helper-text-gap { + margin-top: var(--spacing-legend); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.min.css b/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.min.css index 4340dc54b..61ae105b3 100644 --- a/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.min.css +++ b/src/scss/xx_external/hds-core/lib/components/selection-group/selection-group.min.css @@ -1 +1 @@ -.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row)}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-selection-group__error-text:before{background:var(--color-error);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)} \ No newline at end of file +.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--spacing-legend:var(--spacing-xs);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;display:flex;flex-direction:column;margin:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-legend);max-width:100%;padding:0;white-space:normal}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;font-size:var(--fontsize-body-m);margin-top:var(--spacing-legend);padding:var(--spacing-2-xs);position:relative}.hds-selection-group__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-selection-group__helper-text-gap{margin-top:var(--spacing-legend)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/status-label/status-label.css b/src/scss/xx_external/hds-core/lib/components/status-label/status-label.css index 65986be59..03312e357 100644 --- a/src/scss/xx_external/hds-core/lib/components/status-label/status-label.css +++ b/src/scss/xx_external/hds-core/lib/components/status-label/status-label.css @@ -2,13 +2,13 @@ --status-label-background: var(--color-black-10); --status-label-color: var(--color-black-90); --status-label-height: 32px; - background-color: var(--status-label-background); + border-radius: 20px; color: var(--status-label-color); display: inline-block; font-size: var(--fontsize-body-s); - min-height: var(--status-label-height); line-height: var(--status-label-height); + min-height: var(--status-label-height); padding: 0 var(--spacing-2-xs); vertical-align: middle; } @@ -42,4 +42,4 @@ .hds-status-label--error { --status-label-background: var(--color-error); --status-label-color: var(--color-white); -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/status-label/status-label.min.css b/src/scss/xx_external/hds-core/lib/components/status-label/status-label.min.css index 7d128b10d..9d32cb680 100644 --- a/src/scss/xx_external/hds-core/lib/components/status-label/status-label.min.css +++ b/src/scss/xx_external/hds-core/lib/components/status-label/status-label.min.css @@ -1 +1 @@ -.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);min-height:var(--status-label-height);line-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} \ No newline at end of file +.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.css b/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.css new file mode 100644 index 000000000..8c5e11506 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.css @@ -0,0 +1,95 @@ +.hds-step-by-step__container { + position: relative; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +.hds-step-by-step__container h1 { + font-size: 2em; + margin: 0.67em 0; +} + +.hds-step-by-step__steps-container { + --title-font-size: var(--fontsize-heading-m); + --title-line-height: var(--lineheight-xl); + counter-reset: item; + letter-spacing: -0.2px; + margin: 0; + padding: 0; +} + +ol.hds-step-by-step__steps-container { + --circle-size: 48px; + --step-left-padding: 96px; +} + +.hds-step-by-step__step-item:before, +.hds-step-by-step__step-item:after { + box-sizing: border-box; + content: ""; + display: block; + left: calc(var(--circle-size) / 2 + var(--step-left-padding) / 2); + position: absolute; + top: calc(var(--spacing-l) + var(--title-font-size) * var(--title-line-height) / 2 - var(--circle-size) / 2); +} + +.hds-step-by-step__step-item:after { + background-color: #fff; + border: 3px solid #000; + border-radius: 50%; + height: var(--circle-size); + transform: translateX(-100%); + width: var(--circle-size); + z-index: 2; +} + +ol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after { + --line-height: 1.3; + align-items: center; + content: counter(item); + counter-increment: item; + display: flex; + font-size: 1.25rem; + font-weight: 500; + justify-content: center; + line-height: var(--line-height); +} + +.hds-step-by-step__step-item { + background-color: var(--color-coat-of-arms-light); + list-style: none; + margin: var(--spacing-l) 0; + padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding); + position: relative; +} + +ol.hds-step-by-step__steps-container .hds-step-by-step__step-item { + padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding); +} + +ul.hds-step-by-step__steps-container { + --circle-size: 18px; + --step-left-padding: var(--spacing-5-xl); +} + +.hds-step-by-step__step-item-title { + font-size: var(--title-font-size); + font-weight: 500; + line-height: var(--title-line-height); + margin: 0 0 16px; +} + +.hds-step-by-step__step-item:before { + background-color: #000; + height: calc(100% + var(--spacing-l)); + transform: translateX(-50%) translateX(calc(-0.5 * var(--circle-size))); + width: 2px; + z-index: 1; +} + +.hds-step-by-step__step-item:last-of-type:before { + display: none; +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.min.css b/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.min.css new file mode 100644 index 000000000..f58516562 --- /dev/null +++ b/src/scss/xx_external/hds-core/lib/components/step-by-step/step-by-step.min.css @@ -0,0 +1 @@ +.hds-step-by-step__container{position:relative}.hds-step-by-step__container h1{font-size:2em;margin:.67em 0}.hds-step-by-step__steps-container{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;letter-spacing:-.2px;margin:0;padding:0}ol.hds-step-by-step__steps-container{--circle-size:48px;--step-left-padding:96px}.hds-step-by-step__step-item:after,.hds-step-by-step__step-item:before{box-sizing:border-box;content:"";display:block;left:calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);position:absolute;top:calc(var(--spacing-l) + var(--title-font-size) * var(--title-line-height) / 2 - var(--circle-size) / 2)}.hds-step-by-step__step-item:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.hds-step-by-step__step-item{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.hds-step-by-step__step-item,ol.hds-step-by-step__steps-container .hds-step-by-step__step-item{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.hds-step-by-step__steps-container{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.hds-step-by-step__step-item-title{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.hds-step-by-step__step-item:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(-.5 * var(--circle-size)));width:2px;z-index:1}.hds-step-by-step__step-item:last-of-type:before{display:none} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/table/table.css b/src/scss/xx_external/hds-core/lib/components/table/table.css index dd32eeafc..6a3bcb1d3 100644 --- a/src/scss/xx_external/hds-core/lib/components/table/table.css +++ b/src/scss/xx_external/hds-core/lib/components/table/table.css @@ -1,148 +1,114 @@ +.hds-table { + --content-background-color: var(--color-white); + border-collapse: collapse; + line-height: 1.5; + width: 100%; +} .hds-table-container { overflow-x: auto; } - .hds-table-container:focus { - outline: var(--color-coat-of-arms) 3px solid; -} - -.hds-table { - border-collapse: collapse; - width: 100%; - line-height: 1.5; + outline: var(--color-focus-outline) 3px solid; } - .hds-table th { border-bottom: 1px solid var(--color-black-20); - white-space: nowrap; - text-align: left; + font-size: var(--fontsize-body-m); font-weight: 500; - font-size: var(--fontsize-heading-xxs); + line-height: var(--lineheight-l); padding: var(--spacing-xs) var(--spacing-m); + text-align: left; + white-space: nowrap; } - .hds-table__content tr td { - font-weight: 400; - padding: var(--spacing-xs) var(--spacing-m); + background-color: var(--content-background-color); border-bottom: 1px solid var(--color-black-50); - font-size: var(--fontsize-body-m); color: var(--color-black-90); + font-size: var(--fontsize-body-m); + font-weight: 400; + line-height: 24px; + padding: var(--spacing-xs) var(--spacing-m); } - .hds-table__header-row { - background-color: var(--background-color); + background-color: var(--header-background-color); +} +.hds-table__content--text-align-td-right td { + text-align: right; } - .hds-table__caption { - text-align: left; - margin-bottom: var(--spacing-s); - font-size: var(--fontsize-heading-xs); + font-size: var(--fontsize-body-l); + font-weight: normal; line-height: var(--lineheight-l); + margin-bottom: var(--spacing-s); + text-align: left; } - -/* DARK VARIANT */ - .hds-table--dark { - --background-color: var(--color-bus); + --header-background-color: var(--color-bus); } - .hds-table.hds-table--dark th { color: var(--color-white); } - -/* LIGHT VARIANT */ - .hds-table--light { - --background-color: var(--color-silver); + --header-background-color: var(--color-silver); } - .hds-table.hds-table--light th { color: var(--color-black-90); } - -/* DENSE VARIANT */ - +.hds-table--with-vertical-lines .hds-table__content { + border-left: 1px solid var(--color-black-50); +} +.hds-table--with-vertical-lines .hds-table__content td { + border-right: 1px solid var(--color-black-50); +} +.hds-table--with-vertical-lines .hds-table__header-row { + border-left: 1px solid var(--header-background-color); + border-right: 1px solid var(--header-background-color); +} .hds-table--dense.hds-table th { - font-weight: bold; font-size: var(--fontsize-body-s); + font-weight: bold; padding: 9px var(--spacing-s); } - .hds-table--dense .hds-table__content tr td { - padding: 9px var(--spacing-s); font-size: var(--fontsize-body-s); + padding: 9px var(--spacing-s); } - .hds-table--dense .hds-table__caption { + font-size: var(--fontsize-body-m); + line-height: var(--lineheight-l); margin-bottom: var(--spacing-xs); - font-size: var(--fontsize-heading-xxs); -} - -/* ZEBRA VARIANT */ - -.hds-table--zebra .hds-table__content tr:nth-child(even) td { - background-color: var(--color-black-10); } - .hds-table--zebra .hds-table__content tr td { border-bottom: none; } - -/* VERTICAL LINES VARIANT */ - -.hds-table--with-vertical-lines .hds-table__content td { - border-right: 1px solid var(--color-black-50); -} - -.hds-table--with-vertical-lines .hds-table__content { - border-left: 1px solid var(--color-black-50); -} - -.hds-table--with-vertical-lines .hds-table__header-row { - border-right: 1px solid var(--background-color); - border-left: 1px solid var(--background-color); +.hds-table--zebra .hds-table__content tr:nth-child(even) td { + background-color: var(--color-black-10); } - -/* VERTICAL HEADER VARIANT */ - .hds-table__vertical-header-column { - background-color: var(--background-color); + background-color: var(--header-background-color); } - .hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content { border-left: none; } - .hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row { border-left: none; } - -/* MOBILE STYLES */ - +.hds-table--text-align-right { + text-align: right; +} @media (max-width: 767px) { .hds-table th { - font-weight: bold; font-size: var(--fontsize-body-s); + font-weight: bold; padding: 9px var(--spacing-s); } - .hds-table__content tr td { - padding: 9px var(--spacing-s); font-size: var(--fontsize-body-s); + padding: 9px var(--spacing-s); } - .hds-table__caption { - margin-bottom: var(--spacing-xs); font-size: var(--fontsize-heading-xxs); + letter-spacing: 0.2px; + line-height: var(--lineheight-l); + margin-bottom: var(--spacing-xs); } -} - -/* UTILITY */ - -.hds-table--text-align-right { - text-align: right; -} - -.hds-table__content--text-align-td-right td { - text-align: right; -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/table/table.min.css b/src/scss/xx_external/hds-core/lib/components/table/table.min.css index 496b20874..2c7215955 100644 --- a/src/scss/xx_external/hds-core/lib/components/table/table.min.css +++ b/src/scss/xx_external/hds-core/lib/components/table/table.min.css @@ -1 +1 @@ -.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-coat-of-arms) 3px solid}.hds-table{border-collapse:collapse;width:100%;line-height:1.5}.hds-table th{border-bottom:1px solid var(--color-black-20);white-space:nowrap;text-align:left;font-weight:500;font-size:var(--fontsize-heading-xxs)}.hds-table__content tr td,.hds-table th{padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{font-weight:400;border-bottom:1px solid var(--color-black-50);font-size:var(--fontsize-body-m);color:var(--color-black-90)}.hds-table__header-row{background-color:var(--background-color)}.hds-table__caption{text-align:left;margin-bottom:var(--spacing-s);font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-l)}.hds-table--dark{--background-color:var(--color-bus)}.hds-table.hds-table--dark th{color:var(--color-white)}.hds-table--light{--background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}.hds-table--dense.hds-table th{font-weight:700}.hds-table--dense .hds-table__content tr td,.hds-table--dense.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table--dense .hds-table__caption{margin-bottom:var(--spacing-xs);font-size:var(--fontsize-heading-xxs)}.hds-table--zebra .hds-table__content tr:nth-child(2n) td{background-color:var(--color-black-10)}.hds-table--zebra .hds-table__content tr td{border-bottom:none}.hds-table--with-vertical-lines .hds-table__content td{border-right:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__content{border-left:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__header-row{border-right:1px solid var(--background-color);border-left:1px solid var(--background-color)}.hds-table__vertical-header-column{background-color:var(--background-color)}.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content,.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row{border-left:none}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{margin-bottom:var(--spacing-xs);font-size:var(--fontsize-heading-xxs)}}.hds-table--text-align-right,.hds-table__content--text-align-td-right td{text-align:right} \ No newline at end of file +.hds-table{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-focus-outline) 3px solid}.hds-table th{border-bottom:1px solid var(--color-black-20);font-weight:500;line-height:var(--lineheight-l);text-align:left;white-space:nowrap}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-m);padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-weight:400;line-height:24px}.hds-table__header-row{background-color:var(--header-background-color)}.hds-table__content--text-align-td-right td{text-align:right}.hds-table__caption{font-size:var(--fontsize-body-l);font-weight:400;line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);text-align:left}.hds-table--dark{--header-background-color:var(--color-bus)}.hds-table.hds-table--dark th{color:var(--color-white)}.hds-table--light{--header-background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}.hds-table--with-vertical-lines .hds-table__content{border-left:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__content td{border-right:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__header-row{border-left:1px solid var(--header-background-color);border-right:1px solid var(--header-background-color)}.hds-table--dense.hds-table th{font-weight:700}.hds-table--dense .hds-table__content tr td,.hds-table--dense.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table--dense .hds-table__caption{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}.hds-table--zebra .hds-table__content tr td{border-bottom:none}.hds-table--zebra .hds-table__content tr:nth-child(2n) td{background-color:var(--color-black-10)}.hds-table__vertical-header-column{background-color:var(--header-background-color)}.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content,.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row{border-left:none}.hds-table--text-align-right{text-align:right}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{font-size:var(--fontsize-heading-xxs);letter-spacing:.2px;line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/tag/tag.css b/src/scss/xx_external/hds-core/lib/components/tag/tag.css index b05002c74..46f968b6f 100644 --- a/src/scss/xx_external/hds-core/lib/components/tag/tag.css +++ b/src/scss/xx_external/hds-core/lib/components/tag/tag.css @@ -1,49 +1,225 @@ -.hds-tag { - --tag-background: var(--color-black-10); - --tag-color: var(--color-black-90); - --tag-focus-outline-color: var(--color-coat-of-arms); - --tag-height: 32px; +.hds-icon { + background-color: currentcolor; + display: inline-block; + height: var(--icon-size); + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); +} + +.hds-icon--size-xs { + --icon-size: var(--spacing-layout-2-xs); +} + +.hds-icon--size-s { + --icon-size: var(--spacing-layout-xs); +} + +.hds-icon--size-m { + --icon-size: var(--spacing-layout-s); +} + +.hds-icon--size-l { + --icon-size: var(--spacing-layout-m); +} + +.hds-icon--size-xl { + --icon-size: var(--spacing-layout-l); +} + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +.hds-icon--cross { + --mask-image-cross: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + --mask-image: var(--mask-image-cross); +} + +.hds-icon-start--cross { + --mask-image-before: var(--mask-image-cross); +} +.hds-icon-end--cross { + --mask-image-after: var(--mask-image-cross); +} + +.hds-tag { + /* logics, always falls back to previous (upper) if not given -> + (no) active color -> (no) hover color -> (no) focus color -> default color + */ + --computed-background-color: var(--background-color, var(--color-black-10)); + --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent)); + --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent)); + --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent)); + --computed-border-color: var(--border-color, var(--computed-background-color)); + --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent)); + --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent)); + --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent)); + --computed-color: var(--color, --color-black-90); + --computed-color-focus: var(--color-focus, var(--computed-color, inherit)); + --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit)); + --computed-color-active: var(--color-active, var(--computed-color-hover, inherit)); + --computed-outline-color: var(--outline-color, transparent); + --font-size: var(--fontsize-body-s); + --gap: var(--spacing-3-xs); + --height: 32px; + --icon-reposition: -4px; + --icon-size: 24px; + --outline-width: 2px; + --padding-horizontal: 12px; + --padding-vertical: 3px; align-items: center; - background-color: var(--tag-background); - color: var(--tag-color); + background-color: var(--computed-background-color); + border-radius: calc(var(--height) / 2); + box-sizing: border-box; + color: var(--computed-color, inherit); display: inline-flex; - flex-direction: row-reverse; - font-size: var(--fontsize-body-s); - min-height: var(--tag-height); - line-height: var(--tag-height); + flex-direction: row; + font-size: var(--font-size); + font-weight: 500; + grid-gap: var(--gap); + gap: var(--gap); + justify-content: center; + line-height: var(--lineheight-l); + max-width: 100%; + min-height: var(--height); outline: none; + outline-offset: 2px; + overflow: hidden; + padding: var(--padding-vertical) var(--padding-horizontal); + /* repositioning the icons, after & before usage */ +} + +.hds-tag:after { + flex-shrink: 0; + margin-right: var(--icon-reposition); +} + +.hds-tag:before { + flex-shrink: 0; + margin-left: var(--icon-reposition); +} + +.hds-tag > span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.hds-tag--large { + --font-size: var(--fontsize-body-m); + --gap: var(--spacing-2-xs); + --height: 48px; + --icon-reposition: -8px; + --outline-width: 3px; + --padding-horizontal: 20px; + --padding-vertical: 10px; } -.hds-tag:focus, -.hds-tag[focus-within] { - box-shadow: 0 0 0 3px var(--tag-focus-outline-color); +.hds-tag--action { + --border-color: var(--color-black-90); + border: 1px solid var(--computed-border-color); + padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px); } -.hds-tag:focus, -.hds-tag:focus-within { - box-shadow: 0 0 0 3px var(--tag-focus-outline-color); +.hds-tag--multiline > span { + -webkit-hyphens: auto; + hyphens: auto; + white-space: initial; } -.hds-tag[tabindex='0'] { +.hds-tag--link { + text-decoration: underline; +} + +.hds-tag--action, .hds-tag--link { + --background-color-hover: var(--color-black-20); + --outline-color: var(--color-focus-outline); cursor: pointer; + /* focus */ + /* hover */ + /* active */ +} + +.hds-tag--action.focus-visible, .hds-tag--link.focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); +} + +.hds-tag--action:focus-visible, .hds-tag--link:focus-visible { + background-color: var(--computed-background-color-focus); + border-color: var(--computed-border-color-focus); + color: var(--computed-color-focus); } -.hds-tag__label { - line-height: var(--lineheight-m); - padding: var(--spacing-3-xs) var(--spacing-2-xs); +.hds-tag--action:hover, .hds-tag--link:hover { + background-color: var(--computed-background-color-hover); + border-color: var(--computed-border-color-hover); + color: var(--computed-color-hover); } -.hds-tag__label:not(:only-child) { - padding: 0 var(--spacing-2-xs) 0 0; +.hds-tag--action:active, .hds-tag--link:active { + background-color: var(--computed-background-color-active); + border-color: var(--computed-border-color-active); + color: var(--computed-color-active); } -.hds-tag__delete-button { - display: flex; - outline: none; +.hds-tag--action.focus-visible, .hds-tag--action:active:hover, .hds-tag--link.focus-visible, .hds-tag--link:active:hover { + box-shadow: none; + outline: var(--outline-width) solid var(--computed-outline-color); } -.hds-tag__delete-button .hds-icon { - height: var(--spacing-m); - width: var(--spacing-m); +.hds-tag--action:focus-visible, .hds-tag--action:active:hover, .hds-tag--link:focus-visible, .hds-tag--link:active:hover { + box-shadow: none; + outline: var(--outline-width) solid var(--computed-outline-color); } + +.hds-tag__icon, .hds-icon.hds-tag__icon { + flex-shrink: 0; + height: var(--icon-size); + width: var(--icon-size); +} + +.hds-tag__icon:first-child { + margin-left: var(--icon-reposition); +} + +.hds-tag__icon:last-child { + margin-right: var(--icon-reposition); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/tag/tag.min.css b/src/scss/xx_external/hds-core/lib/components/tag/tag.min.css index b2235e9d4..503e16001 100644 --- a/src/scss/xx_external/hds-core/lib/components/tag/tag.min.css +++ b/src/scss/xx_external/hds-core/lib/components/tag/tag.min.css @@ -1 +1 @@ -.hds-tag{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-focus-outline-color:var(--color-coat-of-arms);--tag-height:32px;align-items:center;background-color:var(--tag-background);color:var(--tag-color);display:inline-flex;flex-direction:row-reverse;font-size:var(--fontsize-body-s);min-height:var(--tag-height);line-height:var(--tag-height);outline:none}.hds-tag:focus,.hds-tag[focus-within]{box-shadow:0 0 0 3px var(--tag-focus-outline-color)}.hds-tag:focus,.hds-tag:focus-within{box-shadow:0 0 0 3px var(--tag-focus-outline-color)}.hds-tag[tabindex="0"]{cursor:pointer}.hds-tag__label{line-height:var(--lineheight-m);padding:var(--spacing-3-xs) var(--spacing-2-xs)}.hds-tag__label:not(:only-child){padding:0 var(--spacing-2-xs) 0 0}.hds-tag__delete-button{display:flex;outline:none}.hds-tag__delete-button .hds-icon{height:var(--spacing-m);width:var(--spacing-m)} \ No newline at end of file +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--cross{--mask-image-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-cross)}.hds-icon-start--cross{--mask-image-before:var(--mask-image-cross)}.hds-icon-end--cross{--mask-image-after:var(--mask-image-cross)}.hds-tag{--computed-background-color:var(--background-color,var(--color-black-10));--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-color:var(--color,--color-black-90);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-outline-color:var(--outline-color,transparent);--font-size:var(--fontsize-body-s);--gap:var(--spacing-3-xs);--height:32px;--icon-reposition:-4px;--icon-size:24px;--outline-width:2px;--padding-horizontal:12px;--padding-vertical:3px;align-items:center;background-color:var(--computed-background-color);border-radius:calc(var(--height) / 2);box-sizing:border-box;color:var(--computed-color,inherit);display:inline-flex;flex-direction:row;font-size:var(--font-size);font-weight:500;grid-gap:var(--gap);gap:var(--gap);justify-content:center;line-height:var(--lineheight-l);max-width:100%;min-height:var(--height);outline:none;outline-offset:2px;overflow:hidden;padding:var(--padding-vertical) var(--padding-horizontal)}.hds-tag:after{flex-shrink:0;margin-right:var(--icon-reposition)}.hds-tag:before{flex-shrink:0;margin-left:var(--icon-reposition)}.hds-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hds-tag--large{--font-size:var(--fontsize-body-m);--gap:var(--spacing-2-xs);--height:48px;--icon-reposition:-8px;--outline-width:3px;--padding-horizontal:20px;--padding-vertical:10px}.hds-tag--action{--border-color:var(--color-black-90);border:1px solid var(--computed-border-color);padding:calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px)}.hds-tag--multiline>span{-webkit-hyphens:auto;hyphens:auto;white-space:normal}.hds-tag--link{text-decoration:underline}.hds-tag--action,.hds-tag--link{--background-color-hover:var(--color-black-20);--outline-color:var(--color-focus-outline);cursor:pointer}.hds-tag--action.focus-visible,.hds-tag--action:focus-visible,.hds-tag--link.focus-visible,.hds-tag--link:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus)}.hds-tag--action:hover,.hds-tag--link:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-tag--action:active,.hds-tag--link:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active)}.hds-tag--action.focus-visible,.hds-tag--action:active:hover,.hds-tag--action:focus-visible,.hds-tag--link.focus-visible,.hds-tag--link:active:hover,.hds-tag--link:focus-visible{box-shadow:none;outline:var(--outline-width) solid var(--computed-outline-color)}.hds-icon.hds-tag__icon,.hds-tag__icon{flex-shrink:0;height:var(--icon-size);width:var(--icon-size)}.hds-tag__icon:first-child{margin-left:var(--icon-reposition)}.hds-tag__icon:last-child{margin-right:var(--icon-reposition)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/text-input/text-input.css b/src/scss/xx_external/hds-core/lib/components/text-input/text-input.css index 47b9f345e..973e78f23 100644 --- a/src/scss/xx_external/hds-core/lib/components/text-input/text-input.css +++ b/src/scss/xx_external/hds-core/lib/components/text-input/text-input.css @@ -6,24 +6,28 @@ opacity: 1; } } - .hds-text-input { --border-width: 2px; --outline-width: 3px; + --outline-offset-readonly: 4px; --input-height: 56px; --textarea-height: 149px; --icon-size: var(--spacing-m); - + --icon-color: var(--color-black); --helper-color-default: var(--color-black-60); - --helper-color-invalid: var(--color-error); - --helper-color-success: var(--color-success); - --helper-color-info: var(--color-black-90); - --helper-color-info-icon: var(--color-coat-of-arms); - --icon-color-invalid: var(--color-error); + --helper-color-invalid: var(--color-black); + --helper-background-color-invalid: var(--color-error-light); + --helper-icon-color-invalid: var(--color-error); + --helper-color-success: var(--color-black); + --helper-background-color-success: var(--color-success-light); + --helper-icon-color-success: var(--color-success); + --helper-color-info: var(--color-black); + --helper-background-color-info: var(--color-info-light); + --helper-icon-color-info: var(--color-info); --input-background-default: var(--color-white); --input-background-disabled: var(--color-black-10); --input-border-color-default: var(--color-black-50); - --input-border-color-hover : var(--color-black-90); + --input-border-color-hover: var(--color-black-90); --input-border-color-focus: var(--color-black-90); --input-border-color-invalid: var(--color-error); --input-border-color-disabled: var(--color-black-10); @@ -33,31 +37,61 @@ --label-color-default: var(--color-black-90); --label-color-invalid: var(--color-black-90); --placeholder-color: var(--color-black-60); - --focus-outline-color: var(--color-coat-of-arms); } - +.hds-text-input .hds-text-input__input { + /* removes the input shadow on iOS */ + -webkit-appearance: none; + background-color: var(--input-background-default); + border: var(--border-width) solid var(--input-border-color-default); + /* removes the border radius on iOS */ + border-radius: 0; + box-sizing: border-box; + color: var(--input-color-default); + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ + font-size: 1.125em; + height: var(--input-height); + line-height: normal; + /* + * Normalize.css rules + * 2. Remove the margin in Firefox and Safari. + */ + margin: 0; /* 2 */ + padding: 0 var(--spacing-s); + width: 100%; + will-change: transform, box-shadow; +} +.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear, +.hds-text-input__input-clear::-webkit-search-cancel-button { + display: none; +} +.hds-text-input .hds-text-input__button-clear > * { + pointer-events: none; +} /* text-input transitions */ - .hds-text-input .hds-text-input__input:hover { + border-color: var(--input-border-color-hover); transition: border-color 85ms ease-out; } - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]) { - transition: 85ms ease-out; - transition-property: box-shadow, transform; +.hds-text-input__input-wrapper:focus-within .hds-text-input__input { + border-color: var(--input-border-color-focus); + outline: none; +} +.hds-text-input.hds-text-input--invalid .hds-text-input__input { + border-color: var(--input-border-color-invalid); +} +.hds-text-input.hds-text-input--success .hds-text-input__input { + border-color: var(--input-border-color-success); } - .hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) { + box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline); + transform: translate3d(0, 0, 0); transition: 85ms ease-out; transition-property: box-shadow, transform; } - -.hds-text-input--invalid .hds-text-input__label { - transition: color 85ms linear; -} - -/* LABEL */ - .hds-text-input__label { color: var(--label-color-default); display: block; @@ -65,242 +99,203 @@ font-weight: 500; margin-bottom: var(--spacing-3-xs); } - +.hds-text-input--invalid .hds-text-input__label { + color: var(--label-color-invalid); + transition: color 85ms linear; +} /* REQUIRED */ - .hds-text-input__required { - color: var(--color-black-90); display: inline-block; font-size: var(--fontsize-body-xl); line-height: 1; margin-left: var(--spacing-2-xs); transform: translateY(var(--spacing-3-xs)); } - /* INPUT */ - .hds-text-input__input-wrapper { display: flex; position: relative; } - -.hds-text-input .hds-text-input__input { - /* removes the input shadow on iOS */ - -webkit-appearance: none; - background-color: var(--input-background-default); - border: var(--border-width) solid var(--input-border-color-default); - box-sizing: border-box; - color: var(--input-color-default); - font-size: 1.125em; - height: var(--input-height); - line-height: normal; - padding: 0 var(--spacing-s); - width: 100%; - will-change: transform, box-shadow; -} - .hds-text-input textarea.hds-text-input__input { + /* + * Normalize.css rules + * 1. Change the font styles in all browsers. + */ + font-family: inherit; /* 1 */ height: var(--textarea-height); + /* + * Normalize.css rules + * 2. Remove the margin in Firefox and Safari. + */ + margin: 0; /* 2 */ min-height: var(--input-height); + /* + * Normalize.css rule + * 1. Remove the default vertical scrollbar in IE 10+. + */ + overflow: auto; /* 1 */ padding: var(--spacing-s); resize: vertical; } - -.hds-text-input .hds-text-input__input:hover { - border-color: var(--input-border-color-hover); -} - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input { - border-color: var(--input-border-color-focus); - outline: none; +.hds-text-input .hds-text-input__input::-ms-reveal { + display: none; } - -.hds-text-input__input-wrapper:focus-within .hds-text-input__input { - border-color: var(--input-border-color-focus); - outline: none; -} - -.hds-text-input .hds-text-input__input:-ms-input-placeholder { +.hds-text-input .hds-text-input__input::-moz-placeholder { color: var(--placeholder-color); opacity: 1; } - .hds-text-input .hds-text-input__input::placeholder { color: var(--placeholder-color); opacity: 1; } - -/* FOCUS OUTLINE */ - -.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]) { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); - transform: translate3d(0, 0, 0); -} - -.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) { - box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color); - transform: translate3d(0, 0, 0); -} - /* HELPER TEXT */ - .hds-text-input__helper-text { color: var(--helper-color-default); display: block; - line-height: var(--lineheight-l); font-size: var(--fontsize-body-m); + line-height: var(--lineheight-l); margin-top: var(--spacing-3-xs); white-space: pre-line; } - /* ERROR TEXT */ - .hds-text-input__error-text { - position: relative; + background-color: var(--helper-background-color-invalid); + border-left: 8px solid var(--color-error); color: var(--helper-color-invalid); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); white-space: pre-line; } - .hds-text-input__error-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__error-text::before { +.hds-text-input__error-text:before { animation: fadeIn 85ms ease-out; - background: var(--icon-color-invalid); - content: ''; + background: var(--helper-icon-color-invalid); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - -/* INVALID */ - -.hds-text-input--invalid .hds-text-input__label { - color: var(--label-color-invalid); -} - -.hds-text-input.hds-text-input--invalid .hds-text-input__input { - border-color: var(--input-border-color-invalid); -} - -/* SUCCESS */ - -.hds-text-input.hds-text-input--success .hds-text-input__input { - border-color: var(--input-border-color-success); -} - .hds-text-input__success-text { - position: relative; + background-color: var(--helper-background-color-success); + border-left: 8px solid var(--color-success); color: var(--helper-color-success); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; white-space: pre-wrap; } - .hds-text-input__success-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__success-text::before { +.hds-text-input__success-text:before { animation: fadeIn 85ms ease-out; - background: var(--helper-color-success); - content: ''; + background: var(--helper-icon-color-success); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - /* INFO TEXT */ - .hds-text-input__info-text { - position: relative; + background-color: var(--helper-background-color-info); + border-left: 8px solid var(--color-info); color: var(--helper-color-info); - display: block; + display: flex; font-size: var(--fontsize-body-m); line-height: var(--lineheight-l); - margin-top: var(--spacing-3-xs); - padding-left: calc(var(--icon-size) + var(--spacing-2-xs)); + margin-top: var(--spacing-2-xs); + padding: var(--spacing-2-xs); + position: relative; } - .hds-text-input__info-text:not(:last-child) { margin-bottom: var(--spacing-2-xs); } - -.hds-text-input__info-text::before { +.hds-text-input__info-text:before { animation: fadeIn 85ms ease-out; - background: var(--helper-color-info-icon); - content: ''; + background: var(--helper-icon-color-info); + content: ""; + display: inline-block; + flex-shrink: 0; height: var(--icon-size); - mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + margin-right: var(--spacing-2-xs); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); + mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E"); pointer-events: none; - position: absolute; - left: 0; - top: 0; width: var(--icon-size); } - /* DISABLED */ - .hds-text-input .hds-text-input__input[disabled] { background-color: var(--input-background-disabled); border-color: var(--input-border-color-disabled); color: var(--input-color-disabled); cursor: not-allowed; } - /* READ-ONLY */ - .hds-text-input .hds-text-input__input[readonly] { background-color: transparent; border: 0; color: var(--input-color-default); + outline-offset: var(--outline-offset-readonly); padding: 0; /* fixes faded text color on Safari */ -webkit-text-fill-color: var(--input-color-default); + transform: translate3d(0, 0, 0); + transition: 85ms ease-out; + transition-property: outline, transform; +} +.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] { + /* the following calculation and margin is needed to keep the outline not to overlap + the other content vertically and make it look nice */ + height: calc(var(--input-height) - 2 * var(--outline-offset-readonly)); + margin: var(--outline-offset-readonly) 0; + outline: var(--color-focus-outline) solid var(--outline-width); +} +.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] { + outline: var(--color-focus-outline) solid var(--outline-width); } - /* BUTTON */ - .hds-text-input__buttons { - position: absolute; - top: 0; - right: 0; + align-items: center; bottom: 0; display: flex; - align-items: center; - justify-content: center; - margin-right: var(--spacing-s); font-size: 1rem; + justify-content: center; + margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2); + position: absolute; + right: 0; + top: 0; } - .hds-text-input__button { - padding: 0; - appearance: none; - background: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: none; + color: var(--icon-color); cursor: pointer; - border: 0; - width: 1.5rem; - height: 1.5rem; - overflow: hidden; - font-size: 1rem; + display: flex; + font: inherit; + outline: none; + padding: var(--spacing-xs) calc(var(--spacing-xs) / 2); } +.hds-text-input__button:focus { + outline: var(--outline-width) solid var(--color-focus-outline); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/components/text-input/text-input.min.css b/src/scss/xx_external/hds-core/lib/components/text-input/text-input.min.css index 464ff687a..c243d5600 100644 --- a/src/scss/xx_external/hds-core/lib/components/text-input/text-input.min.css +++ b/src/scss/xx_external/hds-core/lib/components/text-input/text-input.min.css @@ -1 +1 @@ -@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60);--focus-outline-color:var(--color-coat-of-arms)}.hds-text-input .hds-text-input__input:hover{transition:border-color 85ms ease-out}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input--invalid .hds-text-input__label{transition:color 85ms linear}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input__required{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input textarea.hds-text-input__input{height:var(--textarea-height);min-height:var(--input-height);padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover)}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input .hds-text-input__input:-ms-input-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__helper-text{color:var(--helper-color-default)}.hds-text-input__error-text,.hds-text-input__helper-text{display:block;line-height:var(--lineheight-l);font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs);white-space:pre-line}.hds-text-input__error-text{position:relative;color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--icon-color-invalid);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid)}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__success-text{position:relative;color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-success);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input__info-text{position:relative;color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-info-icon);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.hds-text-input__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-s);font-size:1rem}.hds-text-input__button{padding:0;appearance:none;background:transparent;cursor:pointer;border:0;width:1.5rem;height:1.5rem;overflow:hidden;font-size:1rem} \ No newline at end of file +@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--outline-offset-readonly:4px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--icon-color:var(--color-black);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-black);--helper-background-color-invalid:var(--color-error-light);--helper-icon-color-invalid:var(--color-error);--helper-color-success:var(--color-black);--helper-background-color-success:var(--color-success-light);--helper-icon-color-success:var(--color-success);--helper-color-info:var(--color-black);--helper-background-color-info:var(--color-info-light);--helper-icon-color-info:var(--color-info);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,.hds-text-input__input-clear::-webkit-search-cancel-button{display:none}.hds-text-input .hds-text-input__button-clear>*{pointer-events:none}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid);transition:color 85ms linear}.hds-text-input__required{display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input textarea.hds-text-input__input{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input::-ms-reveal{display:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__helper-text{color:var(--helper-color-default);display:block;margin-top:var(--spacing-3-xs)}.hds-text-input__error-text,.hds-text-input__helper-text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);white-space:pre-line}.hds-text-input__error-text{background-color:var(--helper-background-color-invalid);border-left:8px solid var(--color-error);color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs)}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-invalid);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__success-text{background-color:var(--helper-background-color-success);border-left:8px solid var(--color-success);color:var(--helper-color-success);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative;white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-success);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__info-text{background-color:var(--helper-background-color-info);border-left:8px solid var(--color-info);color:var(--helper-color-info);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-info);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:transparent;border:0;color:var(--input-color-default);outline-offset:var(--outline-offset-readonly);padding:0;-webkit-text-fill-color:var(--input-color-default);transform:translateZ(0);transition:85ms ease-out;transition-property:outline,transform}.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly]{height:calc(var(--input-height) - 2 * var(--outline-offset-readonly));margin:var(--outline-offset-readonly) 0;outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly]{outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-text-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--icon-color);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-text-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/icons/icon.css b/src/scss/xx_external/hds-core/lib/icons/icon.css index 03a9f7072..945c1f69c 100644 --- a/src/scss/xx_external/hds-core/lib/icons/icon.css +++ b/src/scss/xx_external/hds-core/lib/icons/icon.css @@ -1,33 +1,66 @@ .hds-icon { - --icon-size: 100%; + background-color: currentcolor; display: inline-block; - background-color: currentColor; - width: var(--icon-size); height: var(--icon-size); - mask-repeat: no-repeat; + -webkit-mask-image: var(--mask-image); + mask-image: var(--mask-image); + -webkit-mask-position: center; mask-position: center; - mask-size: auto; -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center; + mask-repeat: no-repeat; -webkit-mask-size: auto; + mask-size: auto; + width: var(--icon-size); } -.hds-icon.hds-icon--size-xs { +.hds-icon--size-xs { --icon-size: var(--spacing-layout-2-xs); } -.hds-icon.hds-icon--size-s { +.hds-icon--size-s { --icon-size: var(--spacing-layout-xs); } -.hds-icon.hds-icon--size-m { +.hds-icon--size-m { --icon-size: var(--spacing-layout-s); } -.hds-icon.hds-icon--size-l { +.hds-icon--size-l { --icon-size: var(--spacing-layout-m); } -.hds-icon.hds-icon--size-xl { +.hds-icon--size-xl { --icon-size: var(--spacing-layout-l); } + +[class*=hds-icon-start--]:before { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-before); + mask-image: var(--mask-image-before); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} + +[class*=hds-icon-end--]:after { + background-color: currentcolor; + content: ""; + display: inline-flex; + height: var(--icon-size, 24px); + -webkit-mask-image: var(--mask-image-after); + mask-image: var(--mask-image-after); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; + width: var(--icon-size, 24px); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/icons/icon.min.css b/src/scss/xx_external/hds-core/lib/icons/icon.min.css index e0b2f1dce..e3445a840 100644 --- a/src/scss/xx_external/hds-core/lib/icons/icon.min.css +++ b/src/scss/xx_external/hds-core/lib/icons/icon.min.css @@ -1 +1 @@ -.hds-icon{--icon-size:100%;display:inline-block;background-color:currentColor;width:var(--icon-size);height:var(--icon-size);mask-repeat:no-repeat;mask-position:center;mask-size:auto;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:auto}.hds-icon.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)} \ No newline at end of file +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/utils/animations.css b/src/scss/xx_external/hds-core/lib/utils/animations.css index 09ac9732f..962a0b386 100644 --- a/src/scss/xx_external/hds-core/lib/utils/animations.css +++ b/src/scss/xx_external/hds-core/lib/utils/animations.css @@ -5,4 +5,4 @@ to { opacity: 1; } -} +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/utils/helpers.css b/src/scss/xx_external/hds-core/lib/utils/helpers.css index eaa8b1e1b..c4d8ab933 100644 --- a/src/scss/xx_external/hds-core/lib/utils/helpers.css +++ b/src/scss/xx_external/hds-core/lib/utils/helpers.css @@ -1,12 +1,12 @@ -.hiddenFromScreen { +.visually-hidden { border: 0; clip: "rect(0 0 0 0)"; height: 1px; - width: 1px; margin: -1px; - padding: 0; overflow: hidden; + padding: 0; position: absolute; + width: 1px; } .button-reset { @@ -19,9 +19,9 @@ } .text-body { + color: var(--color-black-90); font-family: var(--font-default); font-size: var(--fontsize-body-m); - color: var(--color-black-90); line-height: var(--lineheight-l); } @@ -55,3 +55,69 @@ font-size: var(--fontsize-body-s); line-height: var(--lineheight-xl); } + +/* HEADINGS */ + +.heading-xxl { + font-size: var(--fontsize-heading-xxl); + font-weight: 400; + letter-spacing: -1.2px; + line-height: var(--lineheight-s); +} + +.heading-xl { + font-size: var(--fontsize-heading-xl); + font-weight: 400; + letter-spacing: -1px; + line-height: var(--lineheight-s); +} + +.heading-xl-mobile { + font-size: var(--fontsize-heading-xl-mobile); + font-weight: 400; + letter-spacing: -0.8px; + line-height: var(--lineheight-s); +} + +.heading-l { + font-size: var(--fontsize-heading-l); + font-weight: 400; + letter-spacing: -0.4px; + line-height: var(--lineheight-m); +} + +.heading-m { + font-size: var(--fontsize-heading-m); + font-weight: 500; + letter-spacing: -0.2px; + line-height: var(--lineheight-m); +} + +.heading-s { + font-size: var(--fontsize-heading-s); + font-weight: 500; + letter-spacing: 0; + line-height: var(--lineheight-l); +} + +.heading-xs { + font-size: var(--fontsize-heading-xs); + font-weight: 700; + letter-spacing: 0; + line-height: var(--lineheight-l); +} + +.heading-xxs { + font-size: var(--fontsize-heading-xxs); + font-weight: 700; + letter-spacing: 0.2px; + line-height: var(--lineheight-l); +} + +.helper-text { + color: var(--color-black-60); + display: block; + flex-basis: 100%; + font-size: var(--fontsize-body-m); + margin-top: var(--spacing-2-xs); +} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/lib/utils/helpers.min.css b/src/scss/xx_external/hds-core/lib/utils/helpers.min.css index 66d729dd7..8a13b8c01 100644 --- a/src/scss/xx_external/hds-core/lib/utils/helpers.min.css +++ b/src/scss/xx_external/hds-core/lib/utils/helpers.min.css @@ -1 +1 @@ -.hiddenFromScreen{border:0;clip:"rect(0 0 0 0)";height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;position:absolute}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{font-size:var(--fontsize-body-m);color:var(--color-black-90);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)} \ No newline at end of file +.visually-hidden{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px}.heading-l,.heading-m{line-height:var(--lineheight-m)}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500}.heading-s,.heading-xs{letter-spacing:0;line-height:var(--lineheight-l)}.heading-xs{font-size:var(--fontsize-heading-xs);font-weight:700}.heading-xxs{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.2px;line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)} \ No newline at end of file diff --git a/src/scss/xx_external/hds-core/package.json b/src/scss/xx_external/hds-core/package.json index c5c875d53..f7361b397 100644 --- a/src/scss/xx_external/hds-core/package.json +++ b/src/scss/xx_external/hds-core/package.json @@ -1,6 +1,6 @@ { "name": "hds-core", - "version": "1.7.1", + "version": "4.1.0", "description": "Core styles for the Helsinki Design System", "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme", "license": "MIT", @@ -9,30 +9,54 @@ "lib" ], "scripts": { - "build": "rimraf lib/ && yarn postcss-build", + "build": "rimraf lib/ && yarn run lint:styles && yarn postcss-build && yarn css-to-ts && yarn copy-scss-files && yarn copy-scss-utils && yarn cssToScss", + "clean": "rimraf node_modules lib storybook-static", "start": "yarn storybook", - "postcss-build": "postcss 'src/**/*.css' --base src -d lib && postcss 'src/**/*.css' --base src -d lib --ext 'min.css' --env 'minify'", - "postcss-watch": "postcss 'src/**/*.css' --base src -d lib --watch", + "postcss-build": "postcss 'src/**/[!_]*.(css|scss)' --base src -d lib --ext .css && postcss 'src/**/[!_]*.(css|scss)' --base src -d lib --ext 'min.css' --env 'minify'", + "postcss-watch": "postcss 'src/**/*.(css|scss)' --base src -d lib --watch", + "cssToScss": "node scripts/cssToScss.js", + "copy-scss-files": "node copyFiles -source 'src/components/**/_*.scss' -target 'lib/components' -v", + "copy-scss-utils": "node copyFiles -source 'src/utils/**/_*.scss' -target 'lib/utils' -v", + "css-to-ts": "node cssToImportableString -directory 'lib/components/**/*.min.css' -targetFiles 'cookieConsent.min.css'", "storybook": "start-storybook -p 6007 --quiet", - "build-storybook": "build-storybook --loglevel error" + "build-storybook": "build-storybook --loglevel error", + "lint:styles": "yarn stylelint \"src/**/*.(css|scss)\"" }, "devDependencies": { - "@storybook/addon-a11y": "6.0.19", - "@storybook/addon-backgrounds": "6.0.19", - "@storybook/addon-notes": "5.3.18", - "@storybook/addon-viewport": "6.0.19", - "@storybook/addons": "6.0.19", - "@storybook/html": "6.0.19", + "@csstools/postcss-sass": "^5.1.1", + "@storybook/addon-a11y": "6.4.18", + "@storybook/addon-backgrounds": "6.4.18", + "@storybook/addon-docs": "6.4.18", + "@storybook/addon-measure": "6.4.22", + "@storybook/addon-outline": "6.4.22", + "@storybook/addon-storysource": "^6.4.19", + "@storybook/addon-viewport": "6.4.18", + "@storybook/addons": "6.4.18", + "@storybook/builder-webpack5": "^6.5.16", + "@storybook/html": "6.4.18", + "@storybook/manager-webpack5": "^6.5.16", + "@storybook/preset-scss": "^1.0.3", "copyfiles": "2.2.0", + "css-loader": "5.2.6", "cssnano": "4.1.10", - "hds-design-tokens": "1.7.1", - "normalize.css": "8.0.1", - "postcss": "8.4.5", + "glob": "^10.4.1", + "hds-design-tokens": "4.1.0", + "postcss": "8.2.15", + "postcss-classes-to-mixins": "^3.0.1", "postcss-cli": "8.3.1", - "postcss-import": "14.0.2", + "postcss-import": "12.0.1", "postcss-inline-svg": "4.1.0", "postcss-preset-env": "6.7.0", - "rimraf": "3.0.2" + "postcss-sass": "^0.5.0", + "rimraf": "3.0.2", + "sass": "^1.77.8", + "sass-loader": "10.1.1", + "style-loader": "2.0.0", + "stylelint": "^15.1.0", + "stylelint-config-css-modules": "^4.2.0", + "stylelint-config-standard": "^30.0.1", + "stylelint-config-standard-scss": "^7.0.1", + "stylelint-order": "^6.0.2" }, - "gitHead": "c9bb20d460481980a9e08bd14ec997958e8f8efb" + "gitHead": "cc635509904e004c43af51e67c00289e9a440eed" } From 35d3f64c12aa3a41a461a8c591d9717047ea6d8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Wed, 15 Jan 2025 16:24:26 +0200 Subject: [PATCH 03/34] UHF-11098: Build css. --- dist/css/ckeditor.min.css | 17 ++++++++--------- dist/css/styles.min.css | 17 ++++++++--------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/dist/css/ckeditor.min.css b/dist/css/ckeditor.min.css index 2bd35e9e4..4df00ee95 100644 --- a/dist/css/ckeditor.min.css +++ b/dist/css/ckeditor.min.css @@ -1,12 +1,11 @@ -.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer;height:var(--size);left:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-checkbox__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));flex-basis:100%}.hds-checkbox__error-text:before{background:var(--color-error);height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-checkbox .hds-checkbox__input:before,.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before,.hds-checkbox__error-text:before{content:"";position:absolute;left:0;top:0}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);height:var(--size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:calc(var(--size)*var(--icon-scale));-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size)*var(--icon-scale));width:var(--size);transform:scale(0.6);z-index:1}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:checked+.hds-checkbox__label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+.hds-checkbox__label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+.hds-checkbox__label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{cursor:not-allowed} -.hds-koros{width:100%;line-height:0}.hds-koros--flip-horizontal{transform:scaleY(-1)} -.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:4rem;width:var(--spinner-size);height:4rem;height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} -.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-focus-outline-color:var(--color-coat-of-arms);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:none;max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:auto;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:flex-start;display:flex;font-weight:700;font-size:var(--fontsize-body-l);margin-right:var(--spacing-l)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);margin-right:var(--spacing-2-xs)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{flex:none}.hds-notification:not(.hds-notification--small) .hds-notification__label>.hds-icon{transform:translateY(var(--spacing-4-xs))}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification--large .hds-notification__close-button,.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--notification-focus-outline-color)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{top:var(--notification-offset);left:var(--notification-offset)}.hds-notification--top-center{top:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--top-right{top:var(--notification-offset);right:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width: 765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)} -.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;min-height:24px;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{height:var(--size);left:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size)/2 - var(--border-width)*2)*(1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} -.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);min-height:32px;min-height:var(--status-label-height);line-height:32px;line-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} -@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60);--focus-outline-color:var(--color-coat-of-arms)}.hds-text-input .hds-text-input__input:hover{transition:border-color 85ms ease-out}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input--invalid .hds-text-input__label{transition:color 85ms linear}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input__required{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input textarea.hds-text-input__input{height:var(--textarea-height);min-height:var(--input-height);padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover)}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__helper-text{color:var(--helper-color-default)}.hds-text-input__error-text,.hds-text-input__helper-text{display:block;line-height:var(--lineheight-l);font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs);white-space:pre-line}.hds-text-input__error-text{position:relative;color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--icon-color-invalid);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid)}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__success-text{position:relative;color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-success);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input__info-text{position:relative;color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-info-icon);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:rgba(0,0,0,0);border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.hds-text-input__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-s);font-size:1rem}.hds-text-input__button{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);cursor:pointer;border:0;width:1.5rem;height:1.5rem;overflow:hidden;font-size:1rem} -.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:4rem;width:var(--spinner-size);height:4rem;height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} -.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row)}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-selection-group__error-text:before{background:var(--color-error);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)} +.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size)*var(--icon-scale));mask-size:calc(var(--size)*var(--icon-scale));position:absolute;top:0;transform:scale(0.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)} +.hds-koros{line-height:0;width:100%}.hds-koros--flip-vertical{transform:scaleY(-1)}.hds-koros--45deg{transform:rotate(45deg);will-change:transform}.hds-koros--90deg{transform:rotate(90deg);will-change:transform}.hds-koros--135deg{transform:rotate(135deg);will-change:transform}.hds-koros--180deg{transform:rotate(180deg);will-change:transform}.hds-koros--225deg{transform:rotate(225deg);will-change:transform}.hds-koros--270deg{transform:rotate(270deg);will-change:transform}.hds-koros--315deg{transform:rotate(315deg);will-change:transform} +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:24px;height:var(--icon-size, 24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:24px;width:var(--icon-size, 24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:none;max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:auto;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification--large .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{left:var(--notification-offset);top:var(--notification-offset)}.hds-notification--top-center{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.hds-notification--top-right{right:var(--notification-offset);top:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width: 765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-notification--box-shadow{box-shadow:var(--box-shadow-l)} +.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size)/2 - var(--border-width)*2)*(1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} +.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:32px;line-height:var(--status-label-height);min-height:32px;min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} +@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--outline-offset-readonly:4px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--icon-color:var(--color-black);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-black);--helper-background-color-invalid:var(--color-error-light);--helper-icon-color-invalid:var(--color-error);--helper-color-success:var(--color-black);--helper-background-color-success:var(--color-success-light);--helper-icon-color-success:var(--color-success);--helper-color-info:var(--color-black);--helper-background-color-info:var(--color-info-light);--helper-icon-color-info:var(--color-info);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,.hds-text-input__input-clear::-webkit-search-cancel-button{display:none}.hds-text-input .hds-text-input__button-clear>*{pointer-events:none}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid);transition:color 85ms linear}.hds-text-input__required{display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input textarea.hds-text-input__input{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input::-ms-reveal{display:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__helper-text{color:var(--helper-color-default);display:block;margin-top:var(--spacing-3-xs)}.hds-text-input__error-text,.hds-text-input__helper-text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);white-space:pre-line}.hds-text-input__error-text{background-color:var(--helper-background-color-invalid);border-left:8px solid var(--color-error);color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs)}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-invalid);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__success-text{background-color:var(--helper-background-color-success);border-left:8px solid var(--color-success);color:var(--helper-color-success);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative;white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-success);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__info-text{background-color:var(--helper-background-color-info);border-left:8px solid var(--color-info);color:var(--helper-color-info);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-info);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:rgba(0,0,0,0);border:0;color:var(--input-color-default);outline-offset:var(--outline-offset-readonly);padding:0;-webkit-text-fill-color:var(--input-color-default);transform:translateZ(0);transition:85ms ease-out;transition-property:outline,transform}.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly]{height:calc(var(--input-height) - 2*var(--outline-offset-readonly));margin:var(--outline-offset-readonly) 0;outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly]{outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs)/2);position:absolute;right:0;top:0}.hds-text-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--icon-color);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs)/2)}.hds-text-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)} +.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:4rem;height:var(--spinner-size);position:relative;width:4rem;width:var(--spinner-size)}.hds-loading-spinner--multicolor{animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite;border-top-color:var(--spinner-color-stage1)}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} +.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--spacing-legend:var(--spacing-xs);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;display:flex;flex-direction:column;margin:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-legend);max-width:100%;padding:0;white-space:normal}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;font-size:var(--fontsize-body-m);margin-top:var(--spacing-legend);padding:var(--spacing-2-xs);position:relative}.hds-selection-group__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-selection-group__helper-text-gap{margin-top:var(--spacing-legend)} :root{--color-focus-outline: #0072c6;--box-shadow-s: 0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m: 0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l: 0px 2px 20px 0px rgba(0,0,0,0.2);--fontsize-heading-xxl: 4rem;--fontsize-heading-xl: 3rem;--fontsize-heading-xl-mobile: 2.5rem;--fontsize-heading-l: 2rem}:root{--breakpoint-xs: 320px;--breakpoint-s: 576px;--breakpoint-m: 768px;--breakpoint-l: 992px;--breakpoint-xl: 1248px;--container-width-xs: 288px;--container-width-s: 544px;--container-width-m: 720px;--container-width-l: 944px;--container-width-xl: 1200px;--color-brick: #bd2719;--color-brick-light: #ffeeed;--color-brick-medium-light: #facbc8;--color-brick-dark: #800e04;--color-bus: #0000bf;--color-bus-light: #f0f0ff;--color-bus-medium-light: #ccccff;--color-bus-dark: #00005e;--color-coat-of-arms: #0072c6;--color-coat-of-arms-light: #e6f4ff;--color-coat-of-arms-medium-light: #b5daf7;--color-coat-of-arms-dark: #005799;--color-copper: #00d7a7;--color-copper-light: #cffaf1;--color-copper-medium-light: #9ef0de;--color-copper-dark: #00a17d;--color-engel: #ffe977;--color-engel-light: #fff9db;--color-engel-medium-light: #fff3b8;--color-engel-dark: #dbc030;--color-fog: #9fc9eb;--color-fog-light: #e8f3fc;--color-fog-medium-light: #d0e6f7;--color-fog-dark: #72a5cf;--color-gold: #c2a251;--color-gold-light: #f7f2e4;--color-gold-medium-light: #e8d7a7;--color-gold-dark: #9e823c;--color-metro: #fd4f00;--color-metro-light: #ffeee6;--color-metro-medium-light: #ffcab3;--color-metro-dark: #bd2f00;--color-silver: #dedfe1;--color-silver-light: #f7f7f8;--color-silver-medium-light: #efeff0;--color-silver-dark: #b0b8bf;--color-summer: #ffc61e;--color-summer-light: #fff4d4;--color-summer-medium-light: #ffe49c;--color-summer-dark: #cc9200;--color-suomenlinna: #f5a3c7;--color-suomenlinna-light: #fff0f7;--color-suomenlinna-medium-light: #ffdbeb;--color-suomenlinna-dark: #e673a5;--color-tram: #008741;--color-tram-light: #dff7eb;--color-tram-medium-light: #a3e3c2;--color-tram-dark: #006631;--color-black: #000000;--color-white: #ffffff;--color-black-5: #f1f1f1;--color-black-10: #e5e5e5;--color-black-20: #cccccc;--color-black-30: #b2b2b2;--color-black-40: #999898;--color-black-50: #808080;--color-black-60: #666666;--color-black-70: #4c4c4c;--color-black-80: #333333;--color-black-90: #1a1a1a;--color-error: #b01038;--color-error-light: #f6e2e6;--color-error-dark: #8d0d2d;--color-success: #007a64;--color-success-light: #e2f5f3;--color-success-dark: #006250;--color-alert: #ffda07;--color-alert-light: #fff4b4;--color-alert-dark: #d18200;--color-info: #0062b9;--color-info-light: #e5eff8;--color-info-dark: #004f94;--spacing-layout-2-xs: 1rem;--spacing-layout-xs: 1.5rem;--spacing-layout-s: 2rem;--spacing-layout-m: 3rem;--spacing-layout-l: 4rem;--spacing-layout-xl: 6rem;--spacing-layout-2-xl: 8rem;--spacing-4-xs: 0.125rem;--spacing-3-xs: 0.25rem;--spacing-2-xs: 0.5rem;--spacing-xs: 0.75rem;--spacing-s: 1rem;--spacing-m: 1.5rem;--spacing-l: 2rem;--spacing-xl: 2.5rem;--spacing-2-xl: 3.0rem;--spacing-3-xl: 3.5rem;--spacing-4-xl: 4rem;--spacing-5-xl: 4.5rem;--fontsize-heading-xl: 3.25rem;--fontsize-heading-l: 2.25rem;--fontsize-heading-m: 1.5rem;--fontsize-heading-s: 1.25rem;--fontsize-heading-xs: 1.125rem;--fontsize-heading-xxs: 1rem;--fontsize-body-s: 0.875rem;--fontsize-body-m: 1rem;--fontsize-body-l: 1.125rem;--fontsize-body-xl: 1.25rem;--font-default: HelsinkiGrotesk, Arial, sans-serif;--lineheight-s: 1;--lineheight-m: 1.2;--lineheight-l: 1.5;--lineheight-xl: 1.75}.ck-content{/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);color:#1a1a1a;font-family:HelsinkiGrotesk,Arial,sans-serif;--theme-fg1: var(--color-white);--theme-fg2: var(--color-black);--theme-bg1: var(--color-black);--theme-bg2: transparent;--theme-focus: var(--color-black);--theme-focus-gutter-color: transparent}.ck-content html{-webkit-text-size-adjust:100%;line-height:1.15}.ck-content body{margin:0}.ck-content main{display:block}.ck-content h1{font-size:2em;margin:.67em 0}.ck-content hr{box-sizing:content-box;height:0;overflow:visible}.ck-content pre{font-family:monospace,monospace;font-size:1em}.ck-content a{background-color:rgba(0,0,0,0)}.ck-content abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.0625rem}.ck-content b,.ck-content strong{font-weight:bolder}.ck-content code,.ck-content kbd,.ck-content samp{font-family:monospace,monospace;font-size:1em}.ck-content small{font-size:80%}.ck-content sub,.ck-content sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.ck-content sub{bottom:-0.25em}.ck-content sup{top:-0.5em}.ck-content img{border-style:none}.ck-content button,.ck-content input,.ck-content optgroup,.ck-content select,.ck-content textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ck-content button,.ck-content input{overflow:visible}.ck-content button,.ck-content select{text-transform:none}.ck-content button,.ck-content [type=button],.ck-content [type=reset],.ck-content [type=submit]{-webkit-appearance:button}.ck-content button::-moz-focus-inner,.ck-content [type=button]::-moz-focus-inner,.ck-content [type=reset]::-moz-focus-inner,.ck-content [type=submit]::-moz-focus-inner{border-style:none;padding:0}.ck-content button:-moz-focusring,.ck-content [type=button]:-moz-focusring,.ck-content [type=reset]:-moz-focusring,.ck-content [type=submit]:-moz-focusring{outline:1px dotted ButtonText}.ck-content fieldset{padding:.35em .75em .625em}.ck-content legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}.ck-content progress{vertical-align:baseline}.ck-content textarea{overflow:auto}.ck-content [type=checkbox],.ck-content [type=radio]{box-sizing:border-box;padding:0}.ck-content [type=number]::-webkit-inner-spin-button,.ck-content [type=number]::-webkit-outer-spin-button{height:auto}.ck-content [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.ck-content [type=search]::-webkit-search-decoration{-webkit-appearance:none}.ck-content ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.ck-content details{display:block}.ck-content summary{display:list-item}.ck-content template{display:none}.ck-content [hidden]{display:none}.ck-content :root{--breakpoint-xs: 320px;--breakpoint-s: 576px;--breakpoint-m: 768px;--breakpoint-l: 992px;--breakpoint-xl: 1248px;--container-width-xs: 288px;--container-width-s: 544px;--container-width-m: 720px;--container-width-l: 944px;--container-width-xl: 1200px;--color-brick: #bd2719;--color-brick-light: #ffeeed;--color-brick-medium-light: #facbc8;--color-brick-dark: #800e04;--color-bus: #0000bf;--color-bus-light: #f0f0ff;--color-bus-medium-light: #ccccff;--color-bus-dark: #00005e;--color-coat-of-arms: #0072c6;--color-coat-of-arms-light: #e6f4ff;--color-coat-of-arms-medium-light: #b5daf7;--color-coat-of-arms-dark: #005799;--color-copper: #00d7a7;--color-copper-light: #cffaf1;--color-copper-medium-light: #9ef0de;--color-copper-dark: #00a17d;--color-engel: #ffe977;--color-engel-light: #fff9db;--color-engel-medium-light: #fff3b8;--color-engel-dark: #dbc030;--color-fog: #9fc9eb;--color-fog-light: #e8f3fc;--color-fog-medium-light: #d0e6f7;--color-fog-dark: #72a5cf;--color-gold: #c2a251;--color-gold-light: #f7f2e4;--color-gold-medium-light: #e8d7a7;--color-gold-dark: #9e823c;--color-metro: #fd4f00;--color-metro-light: #ffeee6;--color-metro-medium-light: #ffcab3;--color-metro-dark: #bd2f00;--color-silver: #dedfe1;--color-silver-light: #f7f7f8;--color-silver-medium-light: #efeff0;--color-silver-dark: #b0b8bf;--color-summer: #ffc61e;--color-summer-light: #fff4d4;--color-summer-medium-light: #ffe49c;--color-summer-dark: #cc9200;--color-suomenlinna: #f5a3c7;--color-suomenlinna-light: #fff0f7;--color-suomenlinna-medium-light: #ffdbeb;--color-suomenlinna-dark: #e673a5;--color-tram: #008741;--color-tram-light: #dff7eb;--color-tram-medium-light: #a3e3c2;--color-tram-dark: #006631;--color-black: #000000;--color-white: #ffffff;--color-black-5: #f1f1f1;--color-black-10: #e5e5e5;--color-black-20: #cccccc;--color-black-30: #b2b2b2;--color-black-40: #999898;--color-black-50: #808080;--color-black-60: #666666;--color-black-70: #4c4c4c;--color-black-80: #333333;--color-black-90: #1a1a1a;--color-error: #b01038;--color-error-light: #f6e2e6;--color-error-dark: #8d0d2d;--color-success: #007a64;--color-success-light: #e2f5f3;--color-success-dark: #006250;--color-alert: #ffda07;--color-alert-light: #fff4b4;--color-alert-dark: #d18200;--color-info: #0062b9;--color-info-light: #e5eff8;--color-info-dark: #004f94;--spacing-layout-2-xs: 1rem;--spacing-layout-xs: 1.5rem;--spacing-layout-s: 2rem;--spacing-layout-m: 3rem;--spacing-layout-l: 4rem;--spacing-layout-xl: 6rem;--spacing-layout-2-xl: 8rem;--spacing-4-xs: 0.125rem;--spacing-3-xs: 0.25rem;--spacing-2-xs: 0.5rem;--spacing-xs: 0.75rem;--spacing-s: 1rem;--spacing-m: 1.5rem;--spacing-l: 2rem;--spacing-xl: 2.5rem;--spacing-2-xl: 3.0rem;--spacing-3-xl: 3.5rem;--spacing-4-xl: 4rem;--spacing-5-xl: 4.5rem;--fontsize-heading-xl: 3.25rem;--fontsize-heading-l: 2.25rem;--fontsize-heading-m: 1.5rem;--fontsize-heading-s: 1.25rem;--fontsize-heading-xs: 1.125rem;--fontsize-heading-xxs: 1rem;--fontsize-body-s: 0.875rem;--fontsize-body-m: 1rem;--fontsize-body-l: 1.125rem;--fontsize-body-xl: 1.25rem;--font-default: HelsinkiGrotesk, Arial, sans-serif;--lineheight-s: 1;--lineheight-m: 1.2;--lineheight-l: 1.5;--lineheight-xl: 1.75}.ck-content html,.ck-content body{height:100%}.ck-content html{box-sizing:border-box}.ck-content *,.ck-content *:before,.ck-content *:after{box-sizing:inherit}.ck-content body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;--line-height: 1.5;background-color:#fff;color:#1a1a1a;display:flex;flex-direction:column;font-family:HelsinkiGrotesk,Arial,sans-serif;font-size:1rem;line-height:1.5}.ck-content body.gin--horizontal-toolbar{padding-top:0 !important}.ck-content :root{--hdbt-color-black: #121212;--hdbt-default-link-color: var(--color-black-90);--hdbt-theme-color: var(--color-black);--hdbt-text-color: var(--color-white);--hdbt-text-color--coat-of-arms: var(--color-white);--hdbt-text-color--brick: var(--color-white);--hdbt-text-color--bus: var(--color-white);--hdbt-text-color--metro: var(--color-white);--hdbt-text-color--tram: var(--color-white);--hdbt-text-color--gold: var(--hdbt-color-black);--hdbt-text-color--silver: var(--hdbt-color-black);--hdbt-text-color--copper: var(--hdbt-color-black);--hdbt-text-color--engel: var(--hdbt-color-black);--hdbt-text-color--fog: var(--hdbt-color-black);--hdbt-text-color--summer: var(--hdbt-color-black);--hdbt-text-color--suomenlinna: var(--hdbt-color-black);--hdbt-button-text-color--coat-of-arms: var(--hdbt-color-black);--hdbt-button-text-color--brick: var(--hdbt-color-black);--hdbt-button-text-color--bus: var(--hdbt-color-black);--hdbt-button-text-color--metro: var(--hdbt-color-black);--hdbt-button-text-color--tram: var(--hdbt-color-black);--hdbt-button-text-color--gold: var(--color-white);--hdbt-button-text-color--silver: var(--color-white);--hdbt-button-text-color--copper: var(--color-white);--hdbt-button-text-color--engel: var(--color-white);--hdbt-button-text-color--fog: var(--color-white);--hdbt-button-text-color--summer: var(--color-white);--hdbt-button-text-color--suomenlinna: var(--color-white);--hdbt-button-highlight-color--coat-of-arms: var(--color-black-90);--hdbt-button-highlight-color--brick: var(--color-black-90);--hdbt-button-highlight-color--bus: var(--color-black-90);--hdbt-button-highlight-color--metro: var(--color-black-90);--hdbt-button-highlight-color--tram: var(--color-black-90);--hdbt-button-highlight-color--gold: var(--color-white);--hdbt-button-highlight-color--silver: var(--color-white);--hdbt-button-highlight-color--copper: var(--color-white);--hdbt-button-highlight-color--engel: var(--color-white);--hdbt-button-highlight-color--fog: var(--color-white);--hdbt-button-highlight-color--summer: var(--color-white);--hdbt-button-highlight-color--suomenlinna: var(--color-white);--background-color-disabled: transparent;--border-color-disabled: transparent;--color-disabled: var(--color-black-40);--border-color-focus: var(--color-coat-of-arms);--border-color-hover-focus: var(--color-coat-of-arms-dark)}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:400;src:url(../fonts/HelsinkiGrotesk-Regular.eot);src:url(../fonts/HelsinkiGrotesk-Regular.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Regular.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Regular.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Regular.svg#HelsinkiGrotesk-Regular) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:400;src:url(../fonts/HelsinkiGrotesk-RegularItalic.eot);src:url(../fonts/HelsinkiGrotesk-RegularItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-RegularItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-RegularItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-RegularItalic.svg#HelsinkiGrotesk-RegularItalic) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:500;src:url(../fonts/HelsinkiGrotesk-Medium.eot);src:url(../fonts/HelsinkiGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Medium.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Medium.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Medium.svg#HelsinkiGrotesk-Medium) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:500;src:url(../fonts/HelsinkiGrotesk-MediumItalic.eot);src:url(../fonts/HelsinkiGrotesk-MediumItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-MediumItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-MediumItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-MediumItalic.svg#HelsinkiGrotesk-MediumItalic) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:700;src:url(../fonts/HelsinkiGrotesk-Bold.eot);src:url(../fonts/HelsinkiGrotesk-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Bold.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Bold.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Bold.svg#HelsinkiGrotesk-Bold) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:700;src:url(../fonts/HelsinkiGrotesk-BoldItalic.eot);src:url(../fonts/HelsinkiGrotesk-BoldItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-BoldItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-BoldItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-BoldItalic.svg#HelsinkiGrotesk-BoldItalic) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:800;src:url(../fonts/HelsinkiGrotesk-Black.eot);src:url(../fonts/HelsinkiGrotesk-Black.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Black.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Black.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Black.svg#HelsinkiGrotesk-Black) format("svg")}}@font-face{.ck-content{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:800;src:url(../fonts/HelsinkiGrotesk-BlackItalic.eot);src:url(../fonts/HelsinkiGrotesk-BlackItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-BlackItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-BlackItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-BlackItalic.svg#HelsinkiGrotesk-BlackItalic) format("svg")}}.ck-content :root,.ck-content [dir=ltr]{--lang-direction: 1}.ck-content [dir=rtl]{--lang-direction: -1}.ck-content>*{max-width:860px}.ck-content figure{margin:0}.ck-content .user-edited-content>table,.ck-content .user-edited-content :not(figure)>table{display:block;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto}.ck-content .user-edited-content>table caption,.ck-content .user-edited-content :not(figure)>table caption{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height);background:#e6e6e6;font-weight:700;padding:16px 24px 0;text-align:start}@media(min-width: 992px){.ck-content .user-edited-content>table caption,.ck-content .user-edited-content :not(figure)>table caption{--line-height: 1.25;font-size:1.5rem;font-weight:500}}.ck-content .user-edited-content>table caption strong,.ck-content .user-edited-content :not(figure)>table caption strong{font-weight:700}.ck-content .user-edited-content figure{background:linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)),linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0,linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) 100% 0;background-attachment:local,local,scroll,scroll;background-color:#fff;background-repeat:no-repeat;background-size:39.998px 100%,39.998px 100%,14px 100%,14px 100%;margin:0;overflow-x:auto}.ck-content .user-edited-content figure figcaption{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height);background:#ffffff;background:var(--user-edited-content-background-color, #ffffff);left:0;margin-top:0;padding-bottom:16px;padding-top:64px;position:sticky}@media(min-width: 992px){.ck-content .user-edited-content figure figcaption{--line-height: 1.25;font-size:1.5rem;font-weight:500}}.ck-content .user-edited-content figure:not(:has(figcaption)){margin-top:16px}.ck-content .user-edited-content figure>figure{margin-top:0}.ck-content .user-edited-content figure figcaption+table{margin-top:0}.ck-content .user-edited-content figure table{background:rgba(0,0,0,0);box-shadow:0 0 0 860px #ffffff;box-shadow:0 0 0 860px var(--user-edited-content-background-color, #ffffff);margin-top:0}.ck-content .user-edited-content figure table th{background:rgba(0,0,0,.097)}.ck-content .user-edited-content figure table:has(tr:nth-child(n+5)) tr:nth-child(even) td{background:rgba(0,0,0,.05)}.ck-content .user-edited-content table{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);background:#fff;border:2px solid gray;border-collapse:collapse;border-spacing:0;margin:16px 0 0 0;padding:0;width:auto}.ck-content .user-edited-content table tr:not(tbody:last-child *:last-child){border-bottom:1px solid gray}.ck-content .user-edited-content table td,.ck-content .user-edited-content table th{color:#000;min-width:0;padding:12px 24px;text-align:left}.ck-content .user-edited-content table th{background:#e6e6e6;font-weight:700}.ck-content .user-edited-content table th strong{font-weight:700}.ck-content .user-edited-content table:has(tr:nth-child(n+5)) tr:nth-child(even) td{background:#f2f2f2}.ck-content h1,.ck-content h2,.ck-content h3,.ck-content h4,.ck-content h5,.ck-content h6{margin-bottom:0;margin-top:48px}.ck-content h1 strong,.ck-content h2 strong,.ck-content h3 strong,.ck-content h4 strong,.ck-content h5 strong,.ck-content h6 strong{font-weight:inherit}.ck-content h2,.ck-content h3,.ck-content h4,.ck-content h5,.ck-content h6{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word}.ck-content h1{--line-height: 1;font-size:2.5rem;font-weight:400;line-height:1;line-height:var(--line-height);letter-spacing:-0.05rem}@media(min-width: 992px){.ck-content h1{--line-height: 1;font-size:4rem;font-weight:400;letter-spacing:-0.075rem}}@media(min-width: 768px){.ck-content h1{margin-top:64px}}@media(min-width: 992px){.ck-content h1{margin-bottom:64px}}.ck-content h2{--line-height: 1.1875;font-size:2rem;font-weight:400;line-height:1.1875;line-height:var(--line-height);letter-spacing:-0.025rem}@media(min-width: 992px){.ck-content h2{--line-height: 1;font-size:3rem;font-weight:400;letter-spacing:-0.0625rem}}.ck-content h3{--line-height: 1.3333333333;font-size:1.5rem;font-weight:500;line-height:1.3333333333;line-height:var(--line-height);letter-spacing:-0.0125rem}@media(min-width: 992px){.ck-content h3{--line-height: 1.1875;font-size:2rem;font-weight:400;letter-spacing:-0.025rem}}.ck-content h4{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){.ck-content h4{--line-height: 1.25;font-size:1.5rem;font-weight:500}}.ck-content h5{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700;line-height:1.5555555556;line-height:var(--line-height)}@media(min-width: 992px){.ck-content h5{--line-height: 1.5;font-size:1.25rem;font-weight:700}}.ck-content h6{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height);letter-spacing:.0125rem}@media(min-width: 992px){.ck-content h6{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.ck-content a{color:var(--hdbt-default-link-color);word-wrap:break-word;text-decoration-thickness:.0625rem;text-underline-offset:10%}.ck-content a:hover,.ck-content a:focus{text-decoration-thickness:.125rem}.ck-content p{margin-bottom:0;margin-top:16px;word-wrap:break-word}.ck-content ul,.ck-content ol{margin-bottom:24px;margin-left:0;margin-top:24px;padding-left:32px}.ck-content ul ul,.ck-content ul ol,.ck-content ol ul,.ck-content ol ol{margin-bottom:0;margin-top:16px}.ck-content li{margin-left:0;padding-left:0}.ck-content li+li{margin-top:16px}.ck-content ul[role=listbox] li,.ck-content .local-tasks li,.ck-content .toolbar-menu li,.ck-content .pager li,.ck-content .table-of-contents__list li,.ck-content .menu li{margin-top:0}.ck-content blockquote[data-helfi-quote],.ck-content .quote{--line-height: 1.5;font-size:1.5rem;font-weight:500;line-height:1.5;line-height:var(--line-height);display:block;margin:48px 0;padding-block:8px;padding-inline-start:24px;position:relative}@media(min-width: 992px){.ck-content blockquote[data-helfi-quote],.ck-content .quote{--line-height: 1.5;font-size:2rem;font-weight:400}}@media(min-width: 992px){.ck-content blockquote[data-helfi-quote],.ck-content .quote{margin:64px 0;padding-inline-start:40px}}.ck-content blockquote[data-helfi-quote]::before,.ck-content .quote::before{background-color:var(--hdbt-color-palette--primary);content:"";height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:8px}.ck-content p[data-helfi-quote-text],.ck-content .quote__text{font-style:italic;margin-top:0}.ck-content p[data-helfi-quote-text]::before,.ck-content .quote__text::before{content:"”"}.ck-content p[data-helfi-quote-text][lang=en]::before,[lang=en] .ck-content p[data-helfi-quote-text]::before,.ck-content .quote__text[lang=en]::before,[lang=en] .ck-content .quote__text::before{content:"“"}.ck-content p[data-helfi-quote-text]::after,.ck-content .quote__text::after{content:"”"}.ck-content footer[data-helfi-quote-author],.ck-content .quote__author{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);margin-top:24px}.ck-content footer[data-helfi-quote-author]::before,.ck-content .quote__author::before{content:"-";margin-inline-end:3px}.ck-content footer[data-helfi-quote-author] cite,.ck-content .quote__author cite{font-style:normal}.ck-content :root{--theme-fg1: var(--color-white);--theme-fg2: var(--color-black);--theme-bg1: var(--color-black);--theme-bg2: transparent;--theme-focus: var(--color-black);--theme-focus-gutter-color: transparent}.ck-content .hds-button{--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);--border-width: 2px;--color: inherit;--min-size: 44px;--outline-gutter: 2px;--outline-width: 3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color, transparent);border:2px solid transparent;border:var(--border-width) solid var(--border-color, transparent);border-radius:0;color:inherit;color:var(--color);cursor:pointer;display:inline-flex;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:44px;min-height:var(--min-size);min-width:44px;min-width:var(--min-size);padding:0 0.5rem;padding:0 var(--spacing-2-xs);position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;vertical-align:top}.ck-content .hds-button,.ck-content .hds-button::before,.ck-content .hds-button::after,.ck-content .hds-button *,.ck-content .hds-button *::before,.ck-content .hds-button *::after{box-sizing:border-box}.ck-content button.hds-button,.ck-content .hds-button[type=button],.ck-content .hds-button[type=reset],.ck-content .hds-button[type=submit]{-webkit-appearance:button}.ck-content .hds-button::-moz-focus-inner,.ck-content .hds-button[type=button]::-moz-focus-inner,.ck-content .hds-button[type=reset]::-moz-focus-inner,.ck-content .hds-button[type=submit]::-moz-focus-inner{border-style:none;padding:0}.ck-content .hds-button:-moz-focusring,.ck-content .hds-button[type=button]:-moz-focusring,.ck-content .hds-button[type=reset]:-moz-focusring,.ck-content .hds-button[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.ck-content .hds-button:hover,.ck-content .hds-button:focus-visible,.ck-content .hds-button:active{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.ck-content .hds-button:hover{background-color:transparent;background-color:var(--background-color-hover, transparent);color:var(--color-hover)}.ck-content .hds-button:focus-visible,.ck-content .hds-button:active{background-color:transparent;background-color:var(--background-color-focus, transparent);box-shadow:0 0 0 calc(2px + 3px) transparent;box-shadow:0 0 0 calc(var(--outline-gutter, 2px) + var(--outline-width, 3px)) var(--submit-input-focus-gutter-color, transparent);color:var(--color-focus);outline:3px solid #000000;outline:var(--outline-width, 3px) solid var(--focus-outline-color, #000000);outline-offset:2px;outline-offset:var(--outline-gutter, 2px)}.ck-content .hds-button:not(:disabled){border-color:transparent;border-color:var(--border-color, transparent)}.ck-content .hds-button:disabled{background-color:transparent;background-color:var(--background-color-disabled, transparent);border-color:transparent;border-color:var(--border-color-disabled, transparent);color:var(--color-disabled);cursor:not-allowed}.ck-content .hds-button:focus-visible:hover,.ck-content .hds-button:active:hover{background-color:transparent;background-color:var(--background-color-hover-focus, transparent)}.ck-content .hds-button:not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover, transparent)}.ck-content .hds-button:not(:disabled):focus-visible,.ck-content .hds-button:not(:disabled):active{border-color:transparent;border-color:var(--border-color-focus, transparent)}.ck-content .hds-button:not(:disabled):focus-visible:hover,.ck-content .hds-button:not(:disabled):active:hover{border-color:transparent;border-color:var(--border-color-hover-focus, transparent);color:var(--color-hover-focus)}.ck-content input[type=button].hds-button,.ck-content input[type=reset].hds-button,.ck-content input[type=submit].hds-button,.ck-content .hds-button__label{font-weight:inherit;line-height:1.25em;padding:1rem;padding:var(--spacing-s)}.ck-content input[type=button].hds-button,.ck-content input[type=reset].hds-button,.ck-content input[type=submit].hds-button{cursor:pointer;padding:1rem 2rem;padding:var(--spacing-s) var(--spacing-l)}.ck-content .hds-button__label:only-child{margin:0 0.5rem;margin:0 var(--spacing-2-xs)}.ck-content input[type=button].hds-button--small,.ck-content input[type=reset].hds-button--small,.ck-content input[type=submit].hds-button--small,.ck-content .hds-button--small .hds-button__label{line-height:1;line-height:var(--lineheight-s);padding:0.5rem 0.75rem;padding:var(--spacing-2-xs) var(--spacing-xs)}.ck-content .hds-button--supplementary .hds-button__label:first-child{padding-right:0.25rem;padding-right:var(--spacing-3-xs)}.ck-content .hds-button--small .hds-button__label:only-child{margin:0 0.75rem;margin:0 var(--spacing-xs)}.ck-content .hds-button--supplementary .hds-icon+.hds-button__label:last-child{padding-left:0.25rem;padding-left:var(--spacing-3-xs)}.ck-content .hds-button--supplementary .hds-icon+.hds-button__label:not(:last-child){padding-left:0.25rem;padding-left:var(--spacing-3-xs);padding-right:0.25rem;padding-right:var(--spacing-3-xs)}.ck-content .hds-button--small{padding:0}.ck-content input[type=button].hds-button--small,.ck-content input[type=reset].hds-button--small,.ck-content input[type=submit].hds-button--small{padding:0.5rem 1.5rem;padding:var(--spacing-2-xs) var(--spacing-m)}.ck-content .hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type){padding:0.5rem 0.5rem;padding:var(--spacing-2-xs) var(--spacing-2-xs)}.ck-content .hds-button--fullwidth{width:100%}.ck-content .hds-button .hds-icon{height:1.5rem;height:var(--spacing-m);margin-left:1rem;margin-left:var(--spacing-s);width:1.5rem;width:var(--spacing-m)}.ck-content .hds-button__label~.hds-icon{margin:0 1rem 0 0;margin:0 var(--spacing-s) 0 0}.ck-content .hds-button--small .hds-icon{margin-left:0.5rem;margin-left:var(--spacing-2-xs)}.ck-content .hds-button .hds-button--small .hds-button__label~.hds-icon{margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.ck-content .hds-button .hds-icon:first-of-type:not(:last-of-type){margin:0 0 0 0.5rem;margin:0 0 0 var(--spacing-2-xs)}.ck-content .hds-button .hds-icon:last-of-type:not(:first-of-type){margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.ck-content .hds-button--small .hds-icon:first-child:not(:last-of-type){margin:0 0 0 0.5rem;margin:0 0 0 var(--spacing-2-xs)}.ck-content .hds-button--small .hds-icon:last-child:not(:first-of-type){margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.ck-content .hds-button--primary{--background-color: var(--theme-bg1, var(--color-bus));--background-color-hover: var(--theme-bg2, var(--color-bus-dark));--background-color-focus: var(--theme-bg1, var(--color-bus));--background-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));--background-color-disabled: var(--color-black-20);--border-color: var(--theme-bg1, var(--color-bus));--border-color-hover: var(--theme-bg1, var(--color-bus-dark));--border-color-focus: var(--theme-bg1, var(--color-bus));--border-color-hover-focus: var(--theme-bg1, var(--color-bus-dark));--border-color-disabled: var(--color-black-20);--color: var(--theme-fg1, var(--color-white));--color-hover: var(--theme-fg2, var(--color-white));--color-focus: var(--theme-fg1, var(--color-white));--color-hover-focus: var(--theme-fg2, var(--color-white));--color-disabled: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, var(--color-white))}.ck-content .hds-button--secondary{--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg1, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg1, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg1, var(--color-bus));--border-color-hover: var(--theme-bg2, var(--color-bus-dark));--border-color-focus: var(--theme-bg1, var(--color-bus));--border-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));--border-color-disabled: var(--color-black-50);--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg1, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg1, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, var(--color-white))}.ck-content .hds-button--supplementary{--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg2, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg2, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg2, transparent);--border-color-hover: var(--theme-bg2, transparent);--border-color-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-hover-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-disabled: transparent;--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg2, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg2, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, transparent);--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, transparent)}.ck-content .hds-button--loading{--background-color: transparent;--background-color-hover: transparent;--background-color-focus: transparent;--background-color-hover-focus: transparent;--background-color-disabled: transparent;--border-color: transparent;--border-color-hover: transparent;--border-color-focus: transparent;--border-color-hover-focus: transparent;--border-color-disabled: transparent;--color: var(--color-black-90);--color-hover: var(--color-black-90);--color-focus: var(--color-black-90);--color-hover-focus: var(--color-black-90);--color-disabled: var(--color-black-90);cursor:wait}.ck-content .hds-button--success{--background-color: var(--color-success);--background-color-hover: var(--color-success-dark);--background-color-focus: var(--color-success);--background-color-hover-focus: var(--color-success-dark);--border-color: var(--color-success);--border-color-hover: var(--color-success-dark);--border-color-focus: var(--color-success);--border-color-hover-focus: var(--color-success-dark);--color: var(--color-white);--color-hover: var(--color-white);--color-focus: var(--color-white);--color-hover-focus: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms))}.ck-content .hds-button--danger{--background-color: var(--color-error);--background-color-hover: var(--color-error-dark);--background-color-focus: var(--color-error);--background-color-hover-focus: var(--color-error-dark);--border-color: var(--color-error);--border-color-hover: var(--color-error-dark);--border-color-focus: var(--color-error);--border-color-hover-focus: var(--color-error-dark);--color: var(--color-white);--color-hover: var(--color-white);--color-focus: var(--color-white);--color-hover-focus: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms))}.ck-content .hds-button .hel-icon{--icon-size: 24px}.ck-content .hds-button .hel-icon:first-of-type:not(:last-of-type){margin:0 0 0 8px}.ck-content .hds-button .link__type,.ck-content .hds-button .hel-icon:last-of-type:not(:first-of-type){margin:0 8px 0 0}.ck-content .hds-button.hds-button--supplementary{margin:0;padding:0 8px 0 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:.0625rem;text-underline-offset:10%}.ck-content .hds-button.hds-button--supplementary .hds-button__label{line-height:24px;margin:0 0 -8px 0;padding:8px}.ck-content .hds-button.hds-button--supplementary .hds-button__label:only-child{margin:0}.ck-content .hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:not([data-is-external])::after{--icon-size: 24px;background-color:var(--color);background-size:contain;content:"";display:inline-block;height:24px;height:var(--icon-size);-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-size:var(--icon-size) var(--icon-size);mask-size:var(--icon-size) var(--icon-size);vertical-align:bottom;width:24px;width:var(--icon-size);transition:transform .2s linear;order:3;position:static;transform:scaleX(1);transform:scaleX(var(--lang-direction, 1))}@media(prefers-reduced-motion){.ck-content .hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:not([data-is-external])::after{transition:none}}.ck-content .hds-button.hds-button--supplementary:focus:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary:hover:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:focus:not([data-is-external])::after,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:hover:not([data-is-external])::after{transform:scaleX(1) translateX(4px);transform:scaleX(var(--lang-direction, 1)) translateX(4px)}@media(prefers-reduced-motion){.ck-content .hds-button.hds-button--supplementary:focus:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary:hover:not([data-selected-icon]):not([data-is-external])::before,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:focus:not([data-is-external])::after,.ck-content .hds-button.hds-button--supplementary[data-selected-icon]:hover:not([data-is-external])::after{transform:none}}.ck-content .hds-button.hds-button--supplementary:hover{-webkit-text-decoration:none;text-decoration:none}.ck-content .hds-button.hds-button--primary.hdbt-icon::before,.ck-content .hds-button.hds-button--secondary.hdbt-icon::before{margin-right:16px}.ck-content .hds-button--supplementary:not(.hdbt-icon):not([data-selected-icon])::before{-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right)}.ck-content p>a.hds-button.hds-button--supplementary:first-child{margin-left:calc(-8px + (-2px))}.ck-content .hds-button--link{--border-width: 2px;--min-size: 56px;--outline-gutter: 2px;--outline-width: 3px}.ck-content :not(.hds-button)>.hds-button__label{margin:0;padding:0}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]),.ck-content a[href][data-hds-component=button]:not([class*=hds-button]){--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);--border-width: 2px;--button-gap: 16px;--color: inherit;--icon-size: 24px;--min-size: 44px;--outline-gutter: 2px;--outline-width: 3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color, transparent);border:2px solid transparent;border:var(--border-width) solid var(--border-color, transparent);border-radius:0;color:inherit;color:var(--color);cursor:pointer;display:inline-block;font-weight:500;justify-content:center;line-height:1.25em;margin:0;min-height:44px;min-height:var(--min-size);min-width:44px;min-width:var(--min-size);padding-block:1rem;padding-block:var(--spacing-s);padding-inline-end:calc(2rem + 0px + 0px);padding-inline-end:calc(var(--spacing-l) + var(--button-padding-end-adjust, 0px) + var(--button-padding-end-adjust-supplementary, 0px));padding-inline-start:calc(2rem + 0px + 0px);padding-inline-start:calc(var(--spacing-l) + var(--button-padding-start-adjust, 0px) + var(--button-padding-start-adjust-supplementary, 0px));position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:none;vertical-align:top}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]),.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])::before,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])::after,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]) *,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]) *::before,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]) *::after,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]),.ck-content a[href][data-hds-component=button]:not([class*=hds-button])::before,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])::after,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]) *,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]) *::before,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]) *::after{box-sizing:border-box}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=button],.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=reset],.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=submit],.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=button],.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=reset],.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]{-webkit-appearance:button;cursor:pointer}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])::-moz-focus-inner,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=button]::-moz-focus-inner,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=reset]::-moz-focus-inner,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=submit]::-moz-focus-inner,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])::-moz-focus-inner,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=button]::-moz-focus-inner,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=reset]::-moz-focus-inner,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]::-moz-focus-inner{border-style:none;padding:0}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):-moz-focusring,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=button]:-moz-focusring,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=reset]:-moz-focusring,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[type=submit]:-moz-focusring,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):-moz-focusring,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=button]:-moz-focusring,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=reset]:-moz-focusring,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):hover,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):active,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):active{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):hover{background-color:transparent;background-color:var(--background-color-hover, transparent);color:var(--color-hover)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):active,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):active{background-color:transparent;background-color:var(--background-color-focus, transparent);box-shadow:0 0 0 calc(2px + 3px) transparent;box-shadow:0 0 0 calc(var(--outline-gutter, 2px) + var(--outline-width, 3px)) var(--submit-input-focus-gutter-color, transparent);color:var(--color-focus);outline:3px solid #000000;outline:var(--outline-width, 3px) solid var(--focus-outline-color, #000000);outline-offset:2px;outline-offset:var(--outline-gutter, 2px)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled),.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled){border-color:transparent;border-color:var(--border-color, transparent)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):disabled,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):disabled{background-color:transparent;background-color:var(--background-color-disabled, transparent);border-color:transparent;border-color:var(--border-color-disabled, transparent);color:var(--color-disabled);cursor:not-allowed}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible:hover,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):active:hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible:hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):active:hover{background-color:transparent;background-color:var(--background-color-hover-focus, transparent)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover, transparent)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):focus-visible,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):active,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):focus-visible,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):active{border-color:transparent;border-color:var(--border-color-focus, transparent)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):focus-visible:hover,.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):active:hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):focus-visible:hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):active:hover{border-color:transparent;border-color:var(--border-color-hover-focus, transparent);color:var(--color-hover-focus)}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary],.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]{--button-padding-end-adjust: calc(-16px + var(--icon-size) + var(--button-gap));--button-padding-end-adjust-supplementary: -16px;--button-padding-start-adjust: -24px;--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg2, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg2, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg2, transparent);--border-color-hover: var(--theme-bg2, transparent);--border-color-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-hover-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-disabled: transparent;--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg2, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg2, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, transparent);--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, transparent);line-height:24px;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:.125rem}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary]:hover,.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]:hover{-webkit-text-decoration:none;text-decoration:none}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary]:not([data-hds-icon-start]),.ck-content a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]:not([data-hds-icon-start]){margin-inline-start:-10px}.ck-content [data-hds-component=button]:not(a):not([class*=hds-button]):where([data-hds-icon-start], [data-hds-icon-end], [data-is-external], diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css index ff602123d..ad983b67b 100644 --- a/dist/css/styles.min.css +++ b/dist/css/styles.min.css @@ -1,12 +1,11 @@ -.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer;height:var(--size);left:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-checkbox__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));flex-basis:100%}.hds-checkbox__error-text:before{background:var(--color-error);height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-checkbox .hds-checkbox__input:before,.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before,.hds-checkbox__error-text:before{content:"";position:absolute;left:0;top:0}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);height:var(--size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:calc(var(--size)*var(--icon-scale));-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size)*var(--icon-scale));width:var(--size);transform:scale(0.6);z-index:1}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:focus+.hds-checkbox__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__input:checked+.hds-checkbox__label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+.hds-checkbox__label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+.hds-checkbox__label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+.hds-checkbox__label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+.hds-checkbox__label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+.hds-checkbox__label{cursor:not-allowed} -.hds-koros{width:100%;line-height:0}.hds-koros--flip-horizontal{transform:scaleY(-1)} -.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:4rem;width:var(--spinner-size);height:4rem;height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} -.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-focus-outline-color:var(--color-coat-of-arms);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:none;max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:auto;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:flex-start;display:flex;font-weight:700;font-size:var(--fontsize-body-l);margin-right:var(--spacing-l)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);margin-right:var(--spacing-2-xs)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{flex:none}.hds-notification:not(.hds-notification--small) .hds-notification__label>.hds-icon{transform:translateY(var(--spacing-4-xs))}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification--large .hds-notification__close-button,.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--notification-focus-outline-color)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{top:var(--notification-offset);left:var(--notification-offset)}.hds-notification--top-center{top:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--top-right{top:var(--notification-offset);right:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width: 765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)} -.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--focus-outline-color:var(--color-coat-of-arms);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;min-height:24px;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{height:var(--size);left:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size)/2 - var(--border-width)*2)*(1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} -.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);min-height:32px;min-height:var(--status-label-height);line-height:32px;line-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} -@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60);--focus-outline-color:var(--color-coat-of-arms)}.hds-text-input .hds-text-input__input:hover{transition:border-color 85ms ease-out}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input--invalid .hds-text-input__label{transition:color 85ms linear}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input__required{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input textarea.hds-text-input__input{height:var(--textarea-height);min-height:var(--input-height);padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover)}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__input-wrapper[focus-within] .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.hds-text-input__helper-text{color:var(--helper-color-default)}.hds-text-input__error-text,.hds-text-input__helper-text{display:block;line-height:var(--lineheight-l);font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs);white-space:pre-line}.hds-text-input__error-text{position:relative;color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--icon-color-invalid);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid)}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__success-text{position:relative;color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-success);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input__info-text{position:relative;color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-color-info-icon);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:rgba(0,0,0,0);border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.hds-text-input__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-s);font-size:1rem}.hds-text-input__button{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);cursor:pointer;border:0;width:1.5rem;height:1.5rem;overflow:hidden;font-size:1rem} -.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);position:relative;width:4rem;width:var(--spinner-size);height:4rem;height:var(--spinner-size);border-top-color:var(--spinner-color)}.hds-loading-spinner--multicolor{border-top-color:var(--spinner-color-stage1);animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{position:absolute;box-sizing:border-box;width:100%;height:100%;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-top-color:inherit;border-radius:50%;animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} -.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row)}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{position:relative;color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs))}.hds-selection-group__error-text:before{background:var(--color-error);content:"";height:var(--icon-size);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;position:absolute;left:0;top:0;width:var(--icon-size)} +.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size)*var(--icon-scale));mask-size:calc(var(--size)*var(--icon-scale));position:absolute;top:0;transform:scale(0.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)} +.hds-koros{line-height:0;width:100%}.hds-koros--flip-vertical{transform:scaleY(-1)}.hds-koros--45deg{transform:rotate(45deg);will-change:transform}.hds-koros--90deg{transform:rotate(90deg);will-change:transform}.hds-koros--135deg{transform:rotate(135deg);will-change:transform}.hds-koros--180deg{transform:rotate(180deg);will-change:transform}.hds-koros--225deg{transform:rotate(225deg);will-change:transform}.hds-koros--270deg{transform:rotate(270deg);will-change:transform}.hds-koros--315deg{transform:rotate(315deg);will-change:transform} +.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:24px;height:var(--icon-size, 24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:24px;width:var(--icon-size, 24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:none;max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:auto;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification--large .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{left:var(--notification-offset);top:var(--notification-offset)}.hds-notification--top-center{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.hds-notification--top-right{right:var(--notification-offset);top:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width: 765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-notification--box-shadow{box-shadow:var(--box-shadow-l)} +.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:24px;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size)/2 - var(--border-width)*2)*(1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size)*var(--lineheight-m))/2);position:relative}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed} +.hds-status-label{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:32px;line-height:var(--status-label-height);min-height:32px;min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.hds-status-label--with-icon{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.hds-status-label-icon{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.hds-status-label--info{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.hds-status-label--success{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.hds-status-label--alert{--status-label-background:var(--color-alert)}.hds-status-label--error{--status-label-background:var(--color-error);--status-label-color:var(--color-white)} +@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--outline-offset-readonly:4px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--icon-color:var(--color-black);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-black);--helper-background-color-invalid:var(--color-error-light);--helper-icon-color-invalid:var(--color-error);--helper-color-success:var(--color-black);--helper-background-color-success:var(--color-success-light);--helper-icon-color-success:var(--color-success);--helper-color-info:var(--color-black);--helper-background-color-info:var(--color-info-light);--helper-icon-color-info:var(--color-info);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,.hds-text-input__input-clear::-webkit-search-cancel-button{display:none}.hds-text-input .hds-text-input__button-clear>*{pointer-events:none}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid);transition:color 85ms linear}.hds-text-input__required{display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input textarea.hds-text-input__input{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input::-ms-reveal{display:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__helper-text{color:var(--helper-color-default);display:block;margin-top:var(--spacing-3-xs)}.hds-text-input__error-text,.hds-text-input__helper-text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);white-space:pre-line}.hds-text-input__error-text{background-color:var(--helper-background-color-invalid);border-left:8px solid var(--color-error);color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs)}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-invalid);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__success-text{background-color:var(--helper-background-color-success);border-left:8px solid var(--color-success);color:var(--helper-color-success);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative;white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-success);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__info-text{background-color:var(--helper-background-color-info);border-left:8px solid var(--color-info);color:var(--helper-color-info);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-info);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:rgba(0,0,0,0);border:0;color:var(--input-color-default);outline-offset:var(--outline-offset-readonly);padding:0;-webkit-text-fill-color:var(--input-color-default);transform:translateZ(0);transition:85ms ease-out;transition-property:outline,transform}.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly]{height:calc(var(--input-height) - 2*var(--outline-offset-readonly));margin:var(--outline-offset-readonly) 0;outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly]{outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs)/2);position:absolute;right:0;top:0}.hds-text-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--icon-color);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs)/2)}.hds-text-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)} +.hds-loading-spinner{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:4rem;height:var(--spinner-size);position:relative;width:4rem;width:var(--spinner-size)}.hds-loading-spinner--multicolor{animation:spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite;border-top-color:var(--spinner-color-stage1)}.hds-loading-spinner--small{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.hds-loading-spinner div{animation:spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;border:var(--spinner-thickness) solid rgba(0,0,0,0);border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.hds-loading-spinner div:nth-child(2){animation-delay:-0.15s}.hds-loading-spinner div:nth-child(3){animation-delay:-0.3s}@keyframes spinner-rotation-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner-color-animation{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}} +.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--spacing-legend:var(--spacing-xs);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;display:flex;flex-direction:column;margin:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-legend);max-width:100%;padding:0;white-space:normal}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;font-size:var(--fontsize-body-m);margin-top:var(--spacing-legend);padding:var(--spacing-2-xs);position:relative}.hds-selection-group__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-selection-group__helper-text-gap{margin-top:var(--spacing-legend)} :root{--color-focus-outline: #0072c6;--box-shadow-s: 0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m: 0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l: 0px 2px 20px 0px rgba(0,0,0,0.2);--fontsize-heading-xxl: 4rem;--fontsize-heading-xl: 3rem;--fontsize-heading-xl-mobile: 2.5rem;--fontsize-heading-l: 2rem}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.0625rem}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--breakpoint-xs: 320px;--breakpoint-s: 576px;--breakpoint-m: 768px;--breakpoint-l: 992px;--breakpoint-xl: 1248px;--container-width-xs: 288px;--container-width-s: 544px;--container-width-m: 720px;--container-width-l: 944px;--container-width-xl: 1200px;--color-brick: #bd2719;--color-brick-light: #ffeeed;--color-brick-medium-light: #facbc8;--color-brick-dark: #800e04;--color-bus: #0000bf;--color-bus-light: #f0f0ff;--color-bus-medium-light: #ccccff;--color-bus-dark: #00005e;--color-coat-of-arms: #0072c6;--color-coat-of-arms-light: #e6f4ff;--color-coat-of-arms-medium-light: #b5daf7;--color-coat-of-arms-dark: #005799;--color-copper: #00d7a7;--color-copper-light: #cffaf1;--color-copper-medium-light: #9ef0de;--color-copper-dark: #00a17d;--color-engel: #ffe977;--color-engel-light: #fff9db;--color-engel-medium-light: #fff3b8;--color-engel-dark: #dbc030;--color-fog: #9fc9eb;--color-fog-light: #e8f3fc;--color-fog-medium-light: #d0e6f7;--color-fog-dark: #72a5cf;--color-gold: #c2a251;--color-gold-light: #f7f2e4;--color-gold-medium-light: #e8d7a7;--color-gold-dark: #9e823c;--color-metro: #fd4f00;--color-metro-light: #ffeee6;--color-metro-medium-light: #ffcab3;--color-metro-dark: #bd2f00;--color-silver: #dedfe1;--color-silver-light: #f7f7f8;--color-silver-medium-light: #efeff0;--color-silver-dark: #b0b8bf;--color-summer: #ffc61e;--color-summer-light: #fff4d4;--color-summer-medium-light: #ffe49c;--color-summer-dark: #cc9200;--color-suomenlinna: #f5a3c7;--color-suomenlinna-light: #fff0f7;--color-suomenlinna-medium-light: #ffdbeb;--color-suomenlinna-dark: #e673a5;--color-tram: #008741;--color-tram-light: #dff7eb;--color-tram-medium-light: #a3e3c2;--color-tram-dark: #006631;--color-black: #000000;--color-white: #ffffff;--color-black-5: #f1f1f1;--color-black-10: #e5e5e5;--color-black-20: #cccccc;--color-black-30: #b2b2b2;--color-black-40: #999898;--color-black-50: #808080;--color-black-60: #666666;--color-black-70: #4c4c4c;--color-black-80: #333333;--color-black-90: #1a1a1a;--color-error: #b01038;--color-error-light: #f6e2e6;--color-error-dark: #8d0d2d;--color-success: #007a64;--color-success-light: #e2f5f3;--color-success-dark: #006250;--color-alert: #ffda07;--color-alert-light: #fff4b4;--color-alert-dark: #d18200;--color-info: #0062b9;--color-info-light: #e5eff8;--color-info-dark: #004f94;--spacing-layout-2-xs: 1rem;--spacing-layout-xs: 1.5rem;--spacing-layout-s: 2rem;--spacing-layout-m: 3rem;--spacing-layout-l: 4rem;--spacing-layout-xl: 6rem;--spacing-layout-2-xl: 8rem;--spacing-4-xs: 0.125rem;--spacing-3-xs: 0.25rem;--spacing-2-xs: 0.5rem;--spacing-xs: 0.75rem;--spacing-s: 1rem;--spacing-m: 1.5rem;--spacing-l: 2rem;--spacing-xl: 2.5rem;--spacing-2-xl: 3.0rem;--spacing-3-xl: 3.5rem;--spacing-4-xl: 4rem;--spacing-5-xl: 4.5rem;--fontsize-heading-xl: 3.25rem;--fontsize-heading-l: 2.25rem;--fontsize-heading-m: 1.5rem;--fontsize-heading-s: 1.25rem;--fontsize-heading-xs: 1.125rem;--fontsize-heading-xxs: 1rem;--fontsize-body-s: 0.875rem;--fontsize-body-m: 1rem;--fontsize-body-l: 1.125rem;--fontsize-body-xl: 1.25rem;--font-default: HelsinkiGrotesk, Arial, sans-serif;--lineheight-s: 1;--lineheight-m: 1.2;--lineheight-l: 1.5;--lineheight-xl: 1.75}html,body{height:100%}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;--line-height: 1.5;background-color:#fff;color:#1a1a1a;display:flex;flex-direction:column;font-family:HelsinkiGrotesk,Arial,sans-serif;font-size:1rem;line-height:1.5}body.gin--horizontal-toolbar{padding-top:0 !important}:root{--hdbt-color-black: #121212;--hdbt-default-link-color: var(--color-black-90);--hdbt-theme-color: var(--color-black);--hdbt-text-color: var(--color-white);--hdbt-text-color--coat-of-arms: var(--color-white);--hdbt-text-color--brick: var(--color-white);--hdbt-text-color--bus: var(--color-white);--hdbt-text-color--metro: var(--color-white);--hdbt-text-color--tram: var(--color-white);--hdbt-text-color--gold: var(--hdbt-color-black);--hdbt-text-color--silver: var(--hdbt-color-black);--hdbt-text-color--copper: var(--hdbt-color-black);--hdbt-text-color--engel: var(--hdbt-color-black);--hdbt-text-color--fog: var(--hdbt-color-black);--hdbt-text-color--summer: var(--hdbt-color-black);--hdbt-text-color--suomenlinna: var(--hdbt-color-black);--hdbt-button-text-color--coat-of-arms: var(--hdbt-color-black);--hdbt-button-text-color--brick: var(--hdbt-color-black);--hdbt-button-text-color--bus: var(--hdbt-color-black);--hdbt-button-text-color--metro: var(--hdbt-color-black);--hdbt-button-text-color--tram: var(--hdbt-color-black);--hdbt-button-text-color--gold: var(--color-white);--hdbt-button-text-color--silver: var(--color-white);--hdbt-button-text-color--copper: var(--color-white);--hdbt-button-text-color--engel: var(--color-white);--hdbt-button-text-color--fog: var(--color-white);--hdbt-button-text-color--summer: var(--color-white);--hdbt-button-text-color--suomenlinna: var(--color-white);--hdbt-button-highlight-color--coat-of-arms: var(--color-black-90);--hdbt-button-highlight-color--brick: var(--color-black-90);--hdbt-button-highlight-color--bus: var(--color-black-90);--hdbt-button-highlight-color--metro: var(--color-black-90);--hdbt-button-highlight-color--tram: var(--color-black-90);--hdbt-button-highlight-color--gold: var(--color-white);--hdbt-button-highlight-color--silver: var(--color-white);--hdbt-button-highlight-color--copper: var(--color-white);--hdbt-button-highlight-color--engel: var(--color-white);--hdbt-button-highlight-color--fog: var(--color-white);--hdbt-button-highlight-color--summer: var(--color-white);--hdbt-button-highlight-color--suomenlinna: var(--color-white);--background-color-disabled: transparent;--border-color-disabled: transparent;--color-disabled: var(--color-black-40);--border-color-focus: var(--color-coat-of-arms);--border-color-hover-focus: var(--color-coat-of-arms-dark)}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:400;src:url(../fonts/HelsinkiGrotesk-Regular.eot);src:url(../fonts/HelsinkiGrotesk-Regular.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Regular.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Regular.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Regular.svg#HelsinkiGrotesk-Regular) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:400;src:url(../fonts/HelsinkiGrotesk-RegularItalic.eot);src:url(../fonts/HelsinkiGrotesk-RegularItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-RegularItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-RegularItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-RegularItalic.svg#HelsinkiGrotesk-RegularItalic) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:500;src:url(../fonts/HelsinkiGrotesk-Medium.eot);src:url(../fonts/HelsinkiGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Medium.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Medium.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Medium.svg#HelsinkiGrotesk-Medium) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:500;src:url(../fonts/HelsinkiGrotesk-MediumItalic.eot);src:url(../fonts/HelsinkiGrotesk-MediumItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-MediumItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-MediumItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-MediumItalic.svg#HelsinkiGrotesk-MediumItalic) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:700;src:url(../fonts/HelsinkiGrotesk-Bold.eot);src:url(../fonts/HelsinkiGrotesk-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Bold.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Bold.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Bold.svg#HelsinkiGrotesk-Bold) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:700;src:url(../fonts/HelsinkiGrotesk-BoldItalic.eot);src:url(../fonts/HelsinkiGrotesk-BoldItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-BoldItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-BoldItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-BoldItalic.svg#HelsinkiGrotesk-BoldItalic) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:normal;font-weight:800;src:url(../fonts/HelsinkiGrotesk-Black.eot);src:url(../fonts/HelsinkiGrotesk-Black.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-Black.woff) format("woff"),url(../fonts/HelsinkiGrotesk-Black.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-Black.svg#HelsinkiGrotesk-Black) format("svg")}@font-face{text-rendering:optimizeLegibility;font-family:"HelsinkiGrotesk";font-style:italic;font-weight:800;src:url(../fonts/HelsinkiGrotesk-BlackItalic.eot);src:url(../fonts/HelsinkiGrotesk-BlackItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/HelsinkiGrotesk-BlackItalic.woff) format("woff"),url(../fonts/HelsinkiGrotesk-BlackItalic.ttf) format("truetype"),url(../fonts/HelsinkiGrotesk-BlackItalic.svg#HelsinkiGrotesk-BlackItalic) format("svg")}:root,[dir=ltr]{--lang-direction: 1}[dir=rtl]{--lang-direction: -1}figure{margin:0}.user-edited-content>table,.user-edited-content :not(figure)>table{display:block;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto}.user-edited-content>table caption,.user-edited-content :not(figure)>table caption{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height);background:#e6e6e6;font-weight:700;padding:16px 24px 0;text-align:start}@media(min-width: 992px){.user-edited-content>table caption,.user-edited-content :not(figure)>table caption{--line-height: 1.25;font-size:1.5rem;font-weight:500}}.user-edited-content>table caption strong,.user-edited-content :not(figure)>table caption strong{font-weight:700}.user-edited-content figure{background:linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)),linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0,linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) 100% 0;background-attachment:local,local,scroll,scroll;background-color:#fff;background-repeat:no-repeat;background-size:39.998px 100%,39.998px 100%,14px 100%,14px 100%;margin:0;overflow-x:auto}.user-edited-content figure figcaption{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height);background:#ffffff;background:var(--user-edited-content-background-color, #ffffff);left:0;margin-top:0;padding-bottom:16px;padding-top:64px;position:sticky}@media(min-width: 992px){.user-edited-content figure figcaption{--line-height: 1.25;font-size:1.5rem;font-weight:500}}.user-edited-content figure:not(:has(figcaption)){margin-top:16px}.user-edited-content figure>figure{margin-top:0}.user-edited-content figure figcaption+table{margin-top:0}.user-edited-content figure table{background:rgba(0,0,0,0);box-shadow:0 0 0 860px #ffffff;box-shadow:0 0 0 860px var(--user-edited-content-background-color, #ffffff);margin-top:0}.user-edited-content figure table th{background:rgba(0,0,0,.097)}.user-edited-content figure table:has(tr:nth-child(n+5)) tr:nth-child(even) td{background:rgba(0,0,0,.05)}.user-edited-content table{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);background:#fff;border:2px solid gray;border-collapse:collapse;border-spacing:0;margin:16px 0 0 0;padding:0;width:auto}.user-edited-content table tr:not(tbody:last-child *:last-child){border-bottom:1px solid gray}.user-edited-content table td,.user-edited-content table th{color:#000;min-width:0;padding:12px 24px;text-align:left}.user-edited-content table th{background:#e6e6e6;font-weight:700}.user-edited-content table th strong{font-weight:700}.user-edited-content table:has(tr:nth-child(n+5)) tr:nth-child(even) td{background:#f2f2f2}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:48px}h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong{font-weight:inherit}h2,h3,h4,h5,h6{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word}h1{--line-height: 1;font-size:2.5rem;font-weight:400;line-height:1;line-height:var(--line-height);letter-spacing:-0.05rem}@media(min-width: 992px){h1{--line-height: 1;font-size:4rem;font-weight:400;letter-spacing:-0.075rem}}@media(min-width: 768px){h1{margin-top:64px}}@media(min-width: 992px){h1{margin-bottom:64px}}h2{--line-height: 1.1875;font-size:2rem;font-weight:400;line-height:1.1875;line-height:var(--line-height);letter-spacing:-0.025rem}@media(min-width: 992px){h2{--line-height: 1;font-size:3rem;font-weight:400;letter-spacing:-0.0625rem}}h3{--line-height: 1.3333333333;font-size:1.5rem;font-weight:500;line-height:1.3333333333;line-height:var(--line-height);letter-spacing:-0.0125rem}@media(min-width: 992px){h3{--line-height: 1.1875;font-size:2rem;font-weight:400;letter-spacing:-0.025rem}}h4{--line-height: 1.5;font-size:1.25rem;font-weight:500;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){h4{--line-height: 1.25;font-size:1.5rem;font-weight:500}}h5{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700;line-height:1.5555555556;line-height:var(--line-height)}@media(min-width: 992px){h5{--line-height: 1.5;font-size:1.25rem;font-weight:700}}h6{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height);letter-spacing:.0125rem}@media(min-width: 992px){h6{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}a{color:#1a1a1a;color:var(--hdbt-default-link-color);word-wrap:break-word;text-decoration-thickness:.0625rem;text-underline-offset:10%}a:hover,a:focus{text-decoration-thickness:.125rem}p{margin-bottom:0;margin-top:16px;word-wrap:break-word}ul,ol{margin-bottom:24px;margin-left:0;margin-top:24px;padding-left:32px}ul ul,ul ol,ol ul,ol ol{margin-bottom:0;margin-top:16px}li{margin-left:0;padding-left:0}li+li{margin-top:16px}ul[role=listbox] li,.local-tasks li,.toolbar-menu li,.pager li,.table-of-contents__list li,.menu li{margin-top:0}.hdbt-icon::before{--icon-size: 24px;background-color:#000;content:"";display:inline-block;height:24px;height:var(--icon-size);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-size:var(--icon-size) var(--icon-size);mask-size:var(--icon-size) var(--icon-size);min-height:24px;min-height:var(--icon-size);min-width:24px;min-width:var(--icon-size);position:static;width:24px;width:var(--icon-size)}.hel-icon{--fallback: calc(var(--line-height, 1) * 1em);background-color:currentColor;display:inline-block;height:calc(1 * 1em);height:var(--icon-size, var(--fallback));-webkit-mask-image:var(--url);mask-image:var(--url);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:text-bottom;width:calc(1 * 1em);width:var(--icon-size, var(--fallback))}.icon{--icon-size: 1.5rem;height:1.5rem;height:var(--icon-size);width:1.5rem;width:var(--icon-size)}:root{--theme-fg1: var(--color-white);--theme-fg2: var(--color-black);--theme-bg1: var(--color-black);--theme-bg2: transparent;--theme-focus: var(--color-black);--theme-focus-gutter-color: transparent}.hds-button{--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);--border-width: 2px;--color: inherit;--min-size: 44px;--outline-gutter: 2px;--outline-width: 3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color, transparent);border:2px solid transparent;border:var(--border-width) solid var(--border-color, transparent);border-radius:0;color:inherit;color:var(--color);cursor:pointer;display:inline-flex;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:44px;min-height:var(--min-size);min-width:44px;min-width:var(--min-size);padding:0 0.5rem;padding:0 var(--spacing-2-xs);position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;vertical-align:top}.hds-button,.hds-button::before,.hds-button::after,.hds-button *,.hds-button *::before,.hds-button *::after{box-sizing:border-box}button.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button::-moz-focus-inner,.hds-button[type=button]::-moz-focus-inner,.hds-button[type=reset]::-moz-focus-inner,.hds-button[type=submit]::-moz-focus-inner{border-style:none;padding:0}.hds-button:-moz-focusring,.hds-button[type=button]:-moz-focusring,.hds-button[type=reset]:-moz-focusring,.hds-button[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.hds-button:hover,.hds-button:focus-visible,.hds-button:active{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.hds-button:hover{background-color:transparent;background-color:var(--background-color-hover, transparent);color:var(--color-hover)}.hds-button:focus-visible,.hds-button:active{background-color:transparent;background-color:var(--background-color-focus, transparent);box-shadow:0 0 0 calc(2px + 3px) transparent;box-shadow:0 0 0 calc(var(--outline-gutter, 2px) + var(--outline-width, 3px)) var(--submit-input-focus-gutter-color, transparent);color:var(--color-focus);outline:3px solid #000000;outline:var(--outline-width, 3px) solid var(--focus-outline-color, #000000);outline-offset:2px;outline-offset:var(--outline-gutter, 2px)}.hds-button:not(:disabled){border-color:transparent;border-color:var(--border-color, transparent)}.hds-button:disabled{background-color:transparent;background-color:var(--background-color-disabled, transparent);border-color:transparent;border-color:var(--border-color-disabled, transparent);color:#999898;color:var(--color-disabled);cursor:not-allowed}.hds-button:focus-visible:hover,.hds-button:active:hover{background-color:transparent;background-color:var(--background-color-hover-focus, transparent)}.hds-button:not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover, transparent)}.hds-button:not(:disabled):focus-visible,.hds-button:not(:disabled):active{border-color:#0072c6;border-color:var(--border-color-focus, transparent)}.hds-button:not(:disabled):focus-visible:hover,.hds-button:not(:disabled):active:hover{border-color:#005799;border-color:var(--border-color-hover-focus, transparent);color:var(--color-hover-focus)}input[type=button].hds-button,input[type=reset].hds-button,input[type=submit].hds-button,.hds-button__label{font-weight:inherit;line-height:1.25em;padding:1rem;padding:var(--spacing-s)}input[type=button].hds-button,input[type=reset].hds-button,input[type=submit].hds-button{cursor:pointer;padding:1rem 2rem;padding:var(--spacing-s) var(--spacing-l)}.hds-button__label:only-child{margin:0 0.5rem;margin:0 var(--spacing-2-xs)}input[type=button].hds-button--small,input[type=reset].hds-button--small,input[type=submit].hds-button--small,.hds-button--small .hds-button__label{line-height:1;line-height:var(--lineheight-s);padding:0.5rem 0.75rem;padding:var(--spacing-2-xs) var(--spacing-xs)}.hds-button--supplementary .hds-button__label:first-child{padding-right:0.25rem;padding-right:var(--spacing-3-xs)}.hds-button--small .hds-button__label:only-child{margin:0 0.75rem;margin:0 var(--spacing-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:last-child{padding-left:0.25rem;padding-left:var(--spacing-3-xs)}.hds-button--supplementary .hds-icon+.hds-button__label:not(:last-child){padding-left:0.25rem;padding-left:var(--spacing-3-xs);padding-right:0.25rem;padding-right:var(--spacing-3-xs)}.hds-button--small{padding:0}input[type=button].hds-button--small,input[type=reset].hds-button--small,input[type=submit].hds-button--small{padding:0.5rem 1.5rem;padding:var(--spacing-2-xs) var(--spacing-m)}.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type){padding:0.5rem 0.5rem;padding:var(--spacing-2-xs) var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button .hds-icon{height:1.5rem;height:var(--spacing-m);margin-left:1rem;margin-left:var(--spacing-s);width:1.5rem;width:var(--spacing-m)}.hds-button__label~.hds-icon{margin:0 1rem 0 0;margin:0 var(--spacing-s) 0 0}.hds-button--small .hds-icon{margin-left:0.5rem;margin-left:var(--spacing-2-xs)}.hds-button .hds-button--small .hds-button__label~.hds-icon{margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.hds-button .hds-icon:first-of-type:not(:last-of-type){margin:0 0 0 0.5rem;margin:0 0 0 var(--spacing-2-xs)}.hds-button .hds-icon:last-of-type:not(:first-of-type){margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.hds-button--small .hds-icon:first-child:not(:last-of-type){margin:0 0 0 0.5rem;margin:0 0 0 var(--spacing-2-xs)}.hds-button--small .hds-icon:last-child:not(:first-of-type){margin:0 0.5rem 0 0;margin:0 var(--spacing-2-xs) 0 0}.hds-button--primary{--background-color: var(--theme-bg1, var(--color-bus));--background-color-hover: var(--theme-bg2, var(--color-bus-dark));--background-color-focus: var(--theme-bg1, var(--color-bus));--background-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));--background-color-disabled: var(--color-black-20);--border-color: var(--theme-bg1, var(--color-bus));--border-color-hover: var(--theme-bg1, var(--color-bus-dark));--border-color-focus: var(--theme-bg1, var(--color-bus));--border-color-hover-focus: var(--theme-bg1, var(--color-bus-dark));--border-color-disabled: var(--color-black-20);--color: var(--theme-fg1, var(--color-white));--color-hover: var(--theme-fg2, var(--color-white));--color-focus: var(--theme-fg1, var(--color-white));--color-hover-focus: var(--theme-fg2, var(--color-white));--color-disabled: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, var(--color-white))}.hds-button--secondary{--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg1, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg1, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg1, var(--color-bus));--border-color-hover: var(--theme-bg2, var(--color-bus-dark));--border-color-focus: var(--theme-bg1, var(--color-bus));--border-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));--border-color-disabled: var(--color-black-50);--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg1, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg1, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, var(--color-white))}.hds-button--supplementary{--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg2, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg2, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg2, transparent);--border-color-hover: var(--theme-bg2, transparent);--border-color-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-hover-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-disabled: transparent;--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg2, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg2, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, transparent);--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, transparent)}.hds-button--loading{--background-color: transparent;--background-color-hover: transparent;--background-color-focus: transparent;--background-color-hover-focus: transparent;--background-color-disabled: transparent;--border-color: transparent;--border-color-hover: transparent;--border-color-focus: transparent;--border-color-hover-focus: transparent;--border-color-disabled: transparent;--color: var(--color-black-90);--color-hover: var(--color-black-90);--color-focus: var(--color-black-90);--color-hover-focus: var(--color-black-90);--color-disabled: var(--color-black-90);cursor:wait}.hds-button--success{--background-color: var(--color-success);--background-color-hover: var(--color-success-dark);--background-color-focus: var(--color-success);--background-color-hover-focus: var(--color-success-dark);--border-color: var(--color-success);--border-color-hover: var(--color-success-dark);--border-color-focus: var(--color-success);--border-color-hover-focus: var(--color-success-dark);--color: var(--color-white);--color-hover: var(--color-white);--color-focus: var(--color-white);--color-hover-focus: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms))}.hds-button--danger{--background-color: var(--color-error);--background-color-hover: var(--color-error-dark);--background-color-focus: var(--color-error);--background-color-hover-focus: var(--color-error-dark);--border-color: var(--color-error);--border-color-hover: var(--color-error-dark);--border-color-focus: var(--color-error);--border-color-hover-focus: var(--color-error-dark);--color: var(--color-white);--color-hover: var(--color-white);--color-focus: var(--color-white);--color-hover-focus: var(--color-white);--focus-outline-color: var(--theme-focus, var(--color-coat-of-arms))}.hds-button .hel-icon{--icon-size: 24px}.hds-button .hel-icon:first-of-type:not(:last-of-type){margin:0 0 0 8px}.hds-button .link__type,.hds-button .hel-icon:last-of-type:not(:first-of-type){margin:0 8px 0 0}.hds-button.hds-button--supplementary{margin:0;padding:0 8px 0 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:.0625rem;text-underline-offset:10%}.hds-button.hds-button--supplementary .hds-button__label{line-height:24px;margin:0 0 -8px 0;padding:8px}.hds-button.hds-button--supplementary .hds-button__label:only-child{margin:0}.hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary[data-selected-icon]:not([data-is-external])::after{--icon-size: 24px;background-color:var(--color);background-size:contain;content:"";display:inline-block;height:24px;height:var(--icon-size);-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-size:var(--icon-size) var(--icon-size);mask-size:var(--icon-size) var(--icon-size);vertical-align:bottom;width:24px;width:var(--icon-size);transition:transform .2s linear;order:3;position:static;transform:scaleX(1);transform:scaleX(var(--lang-direction, 1))}@media(prefers-reduced-motion){.hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary[data-selected-icon]:not([data-is-external])::after{transition:none}}.hds-button.hds-button--supplementary:focus:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary:hover:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary[data-selected-icon]:focus:not([data-is-external])::after,.hds-button.hds-button--supplementary[data-selected-icon]:hover:not([data-is-external])::after{transform:scaleX(1) translateX(4px);transform:scaleX(var(--lang-direction, 1)) translateX(4px)}@media(prefers-reduced-motion){.hds-button.hds-button--supplementary:focus:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary:hover:not([data-selected-icon]):not([data-is-external])::before,.hds-button.hds-button--supplementary[data-selected-icon]:focus:not([data-is-external])::after,.hds-button.hds-button--supplementary[data-selected-icon]:hover:not([data-is-external])::after{transform:none}}.hds-button.hds-button--supplementary:hover{-webkit-text-decoration:none;text-decoration:none}.hds-button.hds-button--primary.hdbt-icon::before,.hds-button.hds-button--secondary.hdbt-icon::before{margin-right:16px}.hds-button--supplementary:not(.hdbt-icon):not([data-selected-icon])::before{-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right)}p>a.hds-button.hds-button--supplementary:first-child{margin-left:calc(-8px + (-2px))}.hds-button--link{--border-width: 2px;--min-size: 56px;--outline-gutter: 2px;--outline-width: 3px}:not(.hds-button)>.hds-button__label{margin:0;padding:0}[data-hds-component=button]:not(a):not([class*=hds-button]),a[href][data-hds-component=button]:not([class*=hds-button]){--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);--border-width: 2px;--button-gap: 16px;--color: inherit;--icon-size: 24px;--min-size: 44px;--outline-gutter: 2px;--outline-width: 3px;align-content:flex-start;align-items:center;background-color:transparent;background-color:var(--background-color, transparent);border:2px solid transparent;border:var(--border-width) solid var(--border-color, transparent);border-radius:0;color:inherit;color:var(--color);cursor:pointer;display:inline-block;font-weight:500;justify-content:center;line-height:1.25em;margin:0;min-height:44px;min-height:var(--min-size);min-width:44px;min-width:var(--min-size);padding-block:1rem;padding-block:var(--spacing-s);padding-inline-end:calc(2rem + 0px + 0px);padding-inline-end:calc(var(--spacing-l) + var(--button-padding-end-adjust, 0px) + var(--button-padding-end-adjust-supplementary, 0px));padding-inline-start:calc(2rem + 0px + 0px);padding-inline-start:calc(var(--spacing-l) + var(--button-padding-start-adjust, 0px) + var(--button-padding-start-adjust-supplementary, 0px));position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:none;vertical-align:top}[data-hds-component=button]:not(a):not([class*=hds-button]),[data-hds-component=button]:not(a):not([class*=hds-button])::before,[data-hds-component=button]:not(a):not([class*=hds-button])::after,[data-hds-component=button]:not(a):not([class*=hds-button]) *,[data-hds-component=button]:not(a):not([class*=hds-button]) *::before,[data-hds-component=button]:not(a):not([class*=hds-button]) *::after,a[href][data-hds-component=button]:not([class*=hds-button]),a[href][data-hds-component=button]:not([class*=hds-button])::before,a[href][data-hds-component=button]:not([class*=hds-button])::after,a[href][data-hds-component=button]:not([class*=hds-button]) *,a[href][data-hds-component=button]:not([class*=hds-button]) *::before,a[href][data-hds-component=button]:not([class*=hds-button]) *::after{box-sizing:border-box}[data-hds-component=button]:not(a):not([class*=hds-button])[type=button],[data-hds-component=button]:not(a):not([class*=hds-button])[type=reset],[data-hds-component=button]:not(a):not([class*=hds-button])[type=submit],a[href][data-hds-component=button]:not([class*=hds-button])[type=button],a[href][data-hds-component=button]:not([class*=hds-button])[type=reset],a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]{-webkit-appearance:button;cursor:pointer}[data-hds-component=button]:not(a):not([class*=hds-button])::-moz-focus-inner,[data-hds-component=button]:not(a):not([class*=hds-button])[type=button]::-moz-focus-inner,[data-hds-component=button]:not(a):not([class*=hds-button])[type=reset]::-moz-focus-inner,[data-hds-component=button]:not(a):not([class*=hds-button])[type=submit]::-moz-focus-inner,a[href][data-hds-component=button]:not([class*=hds-button])::-moz-focus-inner,a[href][data-hds-component=button]:not([class*=hds-button])[type=button]::-moz-focus-inner,a[href][data-hds-component=button]:not([class*=hds-button])[type=reset]::-moz-focus-inner,a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]::-moz-focus-inner{border-style:none;padding:0}[data-hds-component=button]:not(a):not([class*=hds-button]):-moz-focusring,[data-hds-component=button]:not(a):not([class*=hds-button])[type=button]:-moz-focusring,[data-hds-component=button]:not(a):not([class*=hds-button])[type=reset]:-moz-focusring,[data-hds-component=button]:not(a):not([class*=hds-button])[type=submit]:-moz-focusring,a[href][data-hds-component=button]:not([class*=hds-button]):-moz-focusring,a[href][data-hds-component=button]:not([class*=hds-button])[type=button]:-moz-focusring,a[href][data-hds-component=button]:not([class*=hds-button])[type=reset]:-moz-focusring,a[href][data-hds-component=button]:not([class*=hds-button])[type=submit]:-moz-focusring{outline:1px dotted ButtonText}[data-hds-component=button]:not(a):not([class*=hds-button]):hover,[data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible,[data-hds-component=button]:not(a):not([class*=hds-button]):active,a[href][data-hds-component=button]:not([class*=hds-button]):hover,a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible,a[href][data-hds-component=button]:not([class*=hds-button]):active{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}[data-hds-component=button]:not(a):not([class*=hds-button]):hover,a[href][data-hds-component=button]:not([class*=hds-button]):hover{background-color:transparent;background-color:var(--background-color-hover, transparent);color:var(--color-hover)}[data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible,[data-hds-component=button]:not(a):not([class*=hds-button]):active,a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible,a[href][data-hds-component=button]:not([class*=hds-button]):active{background-color:transparent;background-color:var(--background-color-focus, transparent);box-shadow:0 0 0 calc(2px + 3px) transparent;box-shadow:0 0 0 calc(var(--outline-gutter, 2px) + var(--outline-width, 3px)) var(--submit-input-focus-gutter-color, transparent);color:var(--color-focus);outline:3px solid #000000;outline:var(--outline-width, 3px) solid var(--focus-outline-color, #000000);outline-offset:2px;outline-offset:var(--outline-gutter, 2px)}[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled),a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled){border-color:transparent;border-color:var(--border-color, transparent)}[data-hds-component=button]:not(a):not([class*=hds-button]):disabled,a[href][data-hds-component=button]:not([class*=hds-button]):disabled{background-color:transparent;background-color:var(--background-color-disabled, transparent);border-color:transparent;border-color:var(--border-color-disabled, transparent);color:#999898;color:var(--color-disabled);cursor:not-allowed}[data-hds-component=button]:not(a):not([class*=hds-button]):focus-visible:hover,[data-hds-component=button]:not(a):not([class*=hds-button]):active:hover,a[href][data-hds-component=button]:not([class*=hds-button]):focus-visible:hover,a[href][data-hds-component=button]:not([class*=hds-button]):active:hover{background-color:transparent;background-color:var(--background-color-hover-focus, transparent)}[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):hover,a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):hover{border-color:transparent;border-color:var(--border-color-hover, transparent)}[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):focus-visible,[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):active,a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):focus-visible,a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):active{border-color:#0072c6;border-color:var(--border-color-focus, transparent)}[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):focus-visible:hover,[data-hds-component=button]:not(a):not([class*=hds-button]):not(:disabled):active:hover,a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):focus-visible:hover,a[href][data-hds-component=button]:not([class*=hds-button]):not(:disabled):active:hover{border-color:#005799;border-color:var(--border-color-hover-focus, transparent);color:var(--color-hover-focus)}[data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary],a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]{--button-padding-end-adjust: calc(-16px + var(--icon-size) + var(--button-gap));--button-padding-end-adjust-supplementary: -16px;--button-padding-start-adjust: -24px;--background-color: var(--theme-bg2, transparent);--background-color-hover: var(--theme-bg2, var(--color-bus-light));--background-color-focus: var(--theme-bg2, transparent);--background-color-hover-focus: var(--theme-bg2, var(--color-bus-light));--background-color-disabled: transparent;--border-color: var(--theme-bg2, transparent);--border-color-hover: var(--theme-bg2, transparent);--border-color-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-hover-focus: var(--theme-bg2, var(--color-coat-of-arms));--border-color-disabled: transparent;--color: var(--theme-fg2, var(--color-bus));--color-hover: var(--theme-fg2, var(--color-bus-dark));--color-focus: var(--theme-fg2, var(--color-bus));--color-hover-focus: var(--theme-fg2, var(--color-bus-dark));--color-disabled: var(--color-black-40);--focus-outline-color: var(--theme-focus, transparent);--submit-input-focus-gutter-color: var(--theme-focus-gutter-color, transparent);line-height:24px;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:.125rem}[data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary]:hover,a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]:hover{-webkit-text-decoration:none;text-decoration:none}[data-hds-component=button]:not(a):not([class*=hds-button])[data-hds-variant=supplementary]:not([data-hds-icon-start]),a[href][data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]:not([data-hds-icon-start]){margin-inline-start:-10px}[data-hds-component=button]:not(a):not([class*=hds-button]):where([data-hds-icon-start], [data-hds-icon-end], [data-is-external], From 15fc9e77f8b39f6526b426b7fffda6c93852295d Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Wed, 15 Jan 2025 18:22:06 +0200 Subject: [PATCH 04/34] UHF-11098: Fix school search build issues with HDS 4.x update --- dist/js/school-search.min.js | 2 +- .../containers/FeatureFormContainer.tsx | 105 ++++++++---------- src/js/react/common/FilterButton.tsx | 6 +- src/js/react/common/SelectionsWrapper.tsx | 6 +- 4 files changed, 55 insertions(+), 64 deletions(-) diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js index 4985619ef..39287b9e4 100644 --- a/dist/js/school-search.min.js +++ b/dist/js/school-search.min.js @@ -1 +1 @@ -!function(){var e={7334:function(e){function t(e,t,n){var r,o,i,a,l;function s(){var c=Date.now()-a;c=0?r=setTimeout(s,t-c):(r=null,n||(l=e.apply(i,o),i=o=null))}null==t&&(t=100);var c=function(){i=this,o=arguments,a=Date.now();var c=n&&!r;return r||(r=setTimeout(s,t)),c&&(l=e.apply(i,o),i=o=null),l};return c.clear=function(){r&&(clearTimeout(r),r=null)},c.flush=function(){r&&(l=e.apply(i,o),i=o=null,clearTimeout(r),r=null)},c}t.debounce=t,e.exports=t},5413:function(e,t){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.Doctype=t.CDATA=t.Tag=t.Style=t.Script=t.Comment=t.Directive=t.Text=t.Root=t.isTag=t.ElementType=void 0,function(e){e.Root="root",e.Text="text",e.Directive="directive",e.Comment="comment",e.Script="script",e.Style="style",e.Tag="tag",e.CDATA="cdata",e.Doctype="doctype"}(n=t.ElementType||(t.ElementType={})),t.isTag=function(e){return e.type===n.Tag||e.type===n.Script||e.type===n.Style},t.Root=n.Root,t.Text=n.Text,t.Directive=n.Directive,t.Comment=n.Comment,t.Script=n.Script,t.Style=n.Style,t.Tag=n.Tag,t.CDATA=n.CDATA,t.Doctype=n.Doctype},1141:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),t.DomHandler=void 0;var i=n(5413),a=n(6957);o(n(6957),t);var l=/\s+/g,s={normalizeWhitespace:!1,withStartIndices:!1,withEndIndices:!1,xmlMode:!1},c=function(){function e(e,t,n){this.dom=[],this.root=new a.Document(this.dom),this.done=!1,this.tagStack=[this.root],this.lastNode=null,this.parser=null,"function"==typeof t&&(n=t,t=s),"object"==typeof e&&(t=e,e=void 0),this.callback=null!=e?e:null,this.options=null!=t?t:s,this.elementCB=null!=n?n:null}return e.prototype.onparserinit=function(e){this.parser=e},e.prototype.onreset=function(){this.dom=[],this.root=new a.Document(this.dom),this.done=!1,this.tagStack=[this.root],this.lastNode=null,this.parser=null},e.prototype.onend=function(){this.done||(this.done=!0,this.parser=null,this.handleCallback(null))},e.prototype.onerror=function(e){this.handleCallback(e)},e.prototype.onclosetag=function(){this.lastNode=null;var e=this.tagStack.pop();this.options.withEndIndices&&(e.endIndex=this.parser.endIndex),this.elementCB&&this.elementCB(e)},e.prototype.onopentag=function(e,t){var n=this.options.xmlMode?i.ElementType.Tag:void 0,r=new a.Element(e,t,void 0,n);this.addNode(r),this.tagStack.push(r)},e.prototype.ontext=function(e){var t=this.options.normalizeWhitespace,n=this.lastNode;if(n&&n.type===i.ElementType.Text)t?n.data=(n.data+e).replace(l," "):n.data+=e,this.options.withEndIndices&&(n.endIndex=this.parser.endIndex);else{t&&(e=e.replace(l," "));var r=new a.Text(e);this.addNode(r),this.lastNode=r}},e.prototype.oncomment=function(e){if(this.lastNode&&this.lastNode.type===i.ElementType.Comment)this.lastNode.data+=e;else{var t=new a.Comment(e);this.addNode(t),this.lastNode=t}},e.prototype.oncommentend=function(){this.lastNode=null},e.prototype.oncdatastart=function(){var e=new a.Text(""),t=new a.NodeWithChildren(i.ElementType.CDATA,[e]);this.addNode(t),e.parent=t,this.lastNode=e},e.prototype.oncdataend=function(){this.lastNode=null},e.prototype.onprocessinginstruction=function(e,t){var n=new a.ProcessingInstruction(e,t);this.addNode(n)},e.prototype.handleCallback=function(e){if("function"==typeof this.callback)this.callback(e,this.dom);else if(e)throw e},e.prototype.addNode=function(e){var t=this.tagStack[this.tagStack.length-1],n=t.children[t.children.length-1];this.options.withStartIndices&&(e.startIndex=this.parser.startIndex),this.options.withEndIndices&&(e.endIndex=this.parser.endIndex),t.children.push(e),n&&(e.prev=n,n.next=e),e.parent=t,this.lastNode=null},e}();t.DomHandler=c,t.default=c},6957:function(e,t,n){"use strict";var r,o=this&&this.__extends||(r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n0?this.children[this.children.length-1]:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"childNodes",{get:function(){return this.children},set:function(e){this.children=e},enumerable:!1,configurable:!0}),t}(s);t.NodeWithChildren=p;var h=function(e){function t(t){return e.call(this,a.ElementType.Root,t)||this}return o(t,e),t}(p);t.Document=h;var g=function(e){function t(t,n,r,o){void 0===r&&(r=[]),void 0===o&&(o="script"===t?a.ElementType.Script:"style"===t?a.ElementType.Style:a.ElementType.Tag);var i=e.call(this,o,r)||this;return i.name=t,i.attribs=n,i}return o(t,e),Object.defineProperty(t.prototype,"tagName",{get:function(){return this.name},set:function(e){this.name=e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"attributes",{get:function(){var e=this;return Object.keys(this.attribs).map((function(t){var n,r;return{name:t,value:e.attribs[t],namespace:null===(n=e["x-attribsNamespace"])||void 0===n?void 0:n[t],prefix:null===(r=e["x-attribsPrefix"])||void 0===r?void 0:r[t]}}))},enumerable:!1,configurable:!0}),t}(p);function m(e){return(0,a.isTag)(e)}function v(e){return e.type===a.ElementType.CDATA}function _(e){return e.type===a.ElementType.Text}function b(e){return e.type===a.ElementType.Comment}function y(e){return e.type===a.ElementType.Directive}function x(e){return e.type===a.ElementType.Root}function w(e,t){var n;if(void 0===t&&(t=!1),_(e))n=new u(e.data);else if(b(e))n=new d(e.data);else if(m(e)){var r=t?k(e.children):[],o=new g(e.name,i({},e.attribs),r);r.forEach((function(e){return e.parent=o})),null!=e.namespace&&(o.namespace=e.namespace),e["x-attribsNamespace"]&&(o["x-attribsNamespace"]=i({},e["x-attribsNamespace"])),e["x-attribsPrefix"]&&(o["x-attribsPrefix"]=i({},e["x-attribsPrefix"])),n=o}else if(v(e)){r=t?k(e.children):[];var l=new p(a.ElementType.CDATA,r);r.forEach((function(e){return e.parent=l})),n=l}else if(x(e)){r=t?k(e.children):[];var s=new h(r);r.forEach((function(e){return e.parent=s})),e["x-mode"]&&(s["x-mode"]=e["x-mode"]),n=s}else{if(!y(e))throw new Error("Not implemented yet: ".concat(e.type));var c=new f(e.name,e.data);null!=e["x-name"]&&(c["x-name"]=e["x-name"],c["x-publicId"]=e["x-publicId"],c["x-systemId"]=e["x-systemId"]),n=c}return n.startIndex=e.startIndex,n.endIndex=e.endIndex,null!=e.sourceCodeLocation&&(n.sourceCodeLocation=e.sourceCodeLocation),n}function k(e){for(var t=e.map((function(e){return w(e,!0)})),n=1;n/i,l=//i,s=function(e,t){throw new Error("This browser does not support `document.implementation.createHTMLDocument`")},c=function(e,t){throw new Error("This browser does not support `DOMParser.prototype.parseFromString`")},u="object"==typeof window&&window.DOMParser;if("function"==typeof u){var d=new u;s=c=function(e,t){return t&&(e="<".concat(t,">").concat(e,"")),d.parseFromString(e,"text/html")}}if("object"==typeof document&&document.implementation){var f=document.implementation.createHTMLDocument();s=function(e,t){if(t){var n=f.documentElement.querySelector(t);return n&&(n.innerHTML=e),f}return f.documentElement.innerHTML=e,f}}var p,h="object"==typeof document&&document.createElement("template");h&&h.content&&(p=function(e){return h.innerHTML=e,h.content.childNodes}),t.default=function(e){var t,u,d=e.match(i),f=d&&d[1]?d[1].toLowerCase():"";switch(f){case n:var h=c(e);if(!a.test(e))null===(t=null==(m=h.querySelector(r))?void 0:m.parentNode)||void 0===t||t.removeChild(m);if(!l.test(e))null===(u=null==(m=h.querySelector(o))?void 0:m.parentNode)||void 0===u||u.removeChild(m);return h.querySelectorAll(n);case r:case o:var g=s(e).querySelectorAll(f);return l.test(e)&&a.test(e)?g[0].parentNode.childNodes:g;default:return p?p(e):(m=s(e,o).querySelector(o)).childNodes;var m}}},2471:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=r(n(5496)),i=n(7731),a=/<(![a-zA-Z\s]+)>/;t.default=function(e){if("string"!=typeof e)throw new TypeError("First argument must be a string");if(!e)return[];var t=e.match(a),n=t?t[1]:void 0;return(0,i.formatDOM)((0,o.default)(e),null,n)}},7731:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatDOM=t.formatAttributes=void 0;var r=n(1141),o=n(5270);function i(e){for(var t={},n=0,r=e.length;n1&&(v=d(v,{key:v.key||g})),r.push(c(v,m,g));continue}}if("text"!==m.type){var _=m,b={};s(_)?((0,a.setStyleProp)(_.attribs.style,_.attribs),b=_.attribs):_.attribs&&(b=(0,i.default)(_.attribs,_.name));var y=void 0;switch(m.type){case"script":case"style":m.children[0]&&(b.dangerouslySetInnerHTML={__html:m.children[0].data});break;case"tag":"textarea"===m.name&&m.children[0]?b.defaultValue=m.children[0].data:m.children&&m.children.length&&(y=e(m.children,n));break;default:continue}h>1&&(b.key=g),r.push(c(f(m.name,b,y),m,g))}else{var x=!m.data.trim().length;if(x&&m.parent&&!(0,a.canTextBeChildOfNode)(m.parent))continue;if((null==n?void 0:n.trim)&&x)continue;r.push(c(m.data,m,g))}}return 1===r.length?r[0]:r}},442:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.htmlToDOM=t.domToReact=t.attributesToProps=t.Text=t.ProcessingInstruction=t.Element=t.Comment=void 0;var o=r(n(2471));t.htmlToDOM=o.default;var i=r(n(840));t.attributesToProps=i.default;var a=r(n(308));t.domToReact=a.default;var l=n(1141);Object.defineProperty(t,"Comment",{enumerable:!0,get:function(){return l.Comment}}),Object.defineProperty(t,"Element",{enumerable:!0,get:function(){return l.Element}}),Object.defineProperty(t,"ProcessingInstruction",{enumerable:!0,get:function(){return l.ProcessingInstruction}}),Object.defineProperty(t,"Text",{enumerable:!0,get:function(){return l.Text}});var s={lowerCaseAttributeNames:!1};t.default=function(e,t){if("string"!=typeof e)throw new TypeError("First argument must be a string");return e?(0,a.default)((0,o.default)(e,(null==t?void 0:t.htmlparser2)||s),t):[]}},4958:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.returnFirstArg=t.canTextBeChildOfNode=t.ELEMENTS_WITH_NO_TEXT_CHILDREN=t.PRESERVE_CUSTOM_ATTRIBUTES=t.setStyleProp=t.isCustomComponent=void 0;var o=n(6540),i=r(n(5229)),a=new Set(["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"]);t.isCustomComponent=function(e,t){return e.includes("-")?!a.has(e):Boolean(t&&"string"==typeof t.is)};var l={reactCompat:!0};t.setStyleProp=function(e,t){if("string"==typeof e)if(e.trim())try{t.style=(0,i.default)(e,l)}catch(e){t.style={}}else t.style={}},t.PRESERVE_CUSTOM_ATTRIBUTES=Number(o.version.split(".")[0])>=16,t.ELEMENTS_WITH_NO_TEXT_CHILDREN=new Set(["tr","tbody","thead","tfoot","colgroup","table","head","html","frameset"]);t.canTextBeChildOfNode=function(e){return!t.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(e.name)};t.returnFirstArg=function(e){return e}},9788:function(e){var t=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g,n=/\n/g,r=/^\s*/,o=/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/,i=/^:\s*/,a=/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/,l=/^[;\s]*/,s=/^\s+|\s+$/g,c="";function u(e){return e?e.replace(s,c):c}e.exports=function(e,s){if("string"!=typeof e)throw new TypeError("First argument must be a string");if(!e)return[];s=s||{};var d=1,f=1;function p(e){var t=e.match(n);t&&(d+=t.length);var r=e.lastIndexOf("\n");f=~r?e.length-r:f+e.length}function h(){var e={line:d,column:f};return function(t){return t.position=new g(e),b(),t}}function g(e){this.start=e,this.end={line:d,column:f},this.source=s.source}g.prototype.content=e;var m=[];function v(t){var n=new Error(s.source+":"+d+":"+f+": "+t);if(n.reason=t,n.filename=s.source,n.line=d,n.column=f,n.source=e,!s.silent)throw n;m.push(n)}function _(t){var n=t.exec(e);if(n){var r=n[0];return p(r),e=e.slice(r.length),n}}function b(){_(r)}function y(e){var t;for(e=e||[];t=x();)!1!==t&&e.push(t);return e}function x(){var t=h();if("/"==e.charAt(0)&&"*"==e.charAt(1)){for(var n=2;c!=e.charAt(n)&&("*"!=e.charAt(n)||"/"!=e.charAt(n+1));)++n;if(n+=2,c===e.charAt(n-1))return v("End of comment missing");var r=e.slice(2,n-2);return f+=2,p(r),e=e.slice(n),f+=2,t({type:"comment",comment:r})}}function w(){var e=h(),n=_(o);if(n){if(x(),!_(i))return v("property missing ':'");var r=_(a),s=e({type:"declaration",property:u(n[0].replace(t,c)),value:r?u(r[0].replace(t,c)):c});return _(l),s}}return b(),function(){var e,t=[];for(y(t);e=w();)!1!==e&&(t.push(e),y(t));return t}()}},2543:function(e,t,n){var r;e=n.nmd(e),function(){var o,i="Expected a function",a="__lodash_hash_undefined__",l="__lodash_placeholder__",s=16,c=32,u=64,d=128,f=256,p=1/0,h=9007199254740991,g=NaN,m=4294967295,v=[["ary",d],["bind",1],["bindKey",2],["curry",8],["curryRight",s],["flip",512],["partial",c],["partialRight",u],["rearg",f]],_="[object Arguments]",b="[object Array]",y="[object Boolean]",x="[object Date]",w="[object Error]",k="[object Function]",E="[object GeneratorFunction]",S="[object Map]",C="[object Number]",O="[object Object]",T="[object Promise]",I="[object RegExp]",z="[object Set]",j="[object String]",N="[object Symbol]",P="[object WeakMap]",L="[object ArrayBuffer]",R="[object DataView]",D="[object Float32Array]",M="[object Float64Array]",A="[object Int8Array]",B="[object Int16Array]",F="[object Int32Array]",H="[object Uint8Array]",$="[object Uint8ClampedArray]",V="[object Uint16Array]",U="[object Uint32Array]",W=/\b__p \+= '';/g,q=/\b(__p \+=) '' \+/g,K=/(__e\(.*?\)|\b__t\)) \+\n'';/g,G=/&(?:amp|lt|gt|quot|#39);/g,Q=/[&<>"']/g,Y=RegExp(G.source),X=RegExp(Q.source),J=/<%-([\s\S]+?)%>/g,Z=/<%([\s\S]+?)%>/g,ee=/<%=([\s\S]+?)%>/g,te=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,ne=/^\w*$/,re=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,oe=/[\\^$.*+?()[\]{}|]/g,ie=RegExp(oe.source),ae=/^\s+/,le=/\s/,se=/\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,ce=/\{\n\/\* \[wrapped with (.+)\] \*/,ue=/,? & /,de=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g,fe=/[()=,{}\[\]\/\s]/,pe=/\\(\\)?/g,he=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,ge=/\w*$/,me=/^[-+]0x[0-9a-f]+$/i,ve=/^0b[01]+$/i,_e=/^\[object .+?Constructor\]$/,be=/^0o[0-7]+$/i,ye=/^(?:0|[1-9]\d*)$/,xe=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,we=/($^)/,ke=/['\n\r\u2028\u2029\\]/g,Ee="\\ud800-\\udfff",Se="\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff",Ce="\\u2700-\\u27bf",Oe="a-z\\xdf-\\xf6\\xf8-\\xff",Te="A-Z\\xc0-\\xd6\\xd8-\\xde",Ie="\\ufe0e\\ufe0f",ze="\\xac\\xb1\\xd7\\xf7\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf\\u2000-\\u206f \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",je="['’]",Ne="["+Ee+"]",Pe="["+ze+"]",Le="["+Se+"]",Re="\\d+",De="["+Ce+"]",Me="["+Oe+"]",Ae="[^"+Ee+ze+Re+Ce+Oe+Te+"]",Be="\\ud83c[\\udffb-\\udfff]",Fe="[^"+Ee+"]",He="(?:\\ud83c[\\udde6-\\uddff]){2}",$e="[\\ud800-\\udbff][\\udc00-\\udfff]",Ve="["+Te+"]",Ue="\\u200d",We="(?:"+Me+"|"+Ae+")",qe="(?:"+Ve+"|"+Ae+")",Ke="(?:['’](?:d|ll|m|re|s|t|ve))?",Ge="(?:['’](?:D|LL|M|RE|S|T|VE))?",Qe="(?:"+Le+"|"+Be+")"+"?",Ye="["+Ie+"]?",Xe=Ye+Qe+("(?:"+Ue+"(?:"+[Fe,He,$e].join("|")+")"+Ye+Qe+")*"),Je="(?:"+[De,He,$e].join("|")+")"+Xe,Ze="(?:"+[Fe+Le+"?",Le,He,$e,Ne].join("|")+")",et=RegExp(je,"g"),tt=RegExp(Le,"g"),nt=RegExp(Be+"(?="+Be+")|"+Ze+Xe,"g"),rt=RegExp([Ve+"?"+Me+"+"+Ke+"(?="+[Pe,Ve,"$"].join("|")+")",qe+"+"+Ge+"(?="+[Pe,Ve+We,"$"].join("|")+")",Ve+"?"+We+"+"+Ke,Ve+"+"+Ge,"\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])","\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",Re,Je].join("|"),"g"),ot=RegExp("["+Ue+Ee+Se+Ie+"]"),it=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,at=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],lt=-1,st={};st[D]=st[M]=st[A]=st[B]=st[F]=st[H]=st[$]=st[V]=st[U]=!0,st[_]=st[b]=st[L]=st[y]=st[R]=st[x]=st[w]=st[k]=st[S]=st[C]=st[O]=st[I]=st[z]=st[j]=st[P]=!1;var ct={};ct[_]=ct[b]=ct[L]=ct[R]=ct[y]=ct[x]=ct[D]=ct[M]=ct[A]=ct[B]=ct[F]=ct[S]=ct[C]=ct[O]=ct[I]=ct[z]=ct[j]=ct[N]=ct[H]=ct[$]=ct[V]=ct[U]=!0,ct[w]=ct[k]=ct[P]=!1;var ut={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},dt=parseFloat,ft=parseInt,pt="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,ht="object"==typeof self&&self&&self.Object===Object&&self,gt=pt||ht||Function("return this")(),mt=t&&!t.nodeType&&t,vt=mt&&e&&!e.nodeType&&e,_t=vt&&vt.exports===mt,bt=_t&&pt.process,yt=function(){try{var e=vt&&vt.require&&vt.require("util").types;return e||bt&&bt.binding&&bt.binding("util")}catch(e){}}(),xt=yt&&yt.isArrayBuffer,wt=yt&&yt.isDate,kt=yt&&yt.isMap,Et=yt&&yt.isRegExp,St=yt&&yt.isSet,Ct=yt&&yt.isTypedArray;function Ot(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}function Tt(e,t,n,r){for(var o=-1,i=null==e?0:e.length;++o-1}function Lt(e,t,n){for(var r=-1,o=null==e?0:e.length;++r-1;);return n}function rn(e,t){for(var n=e.length;n--&&Vt(t,e[n],0)>-1;);return n}var on=Gt({À:"A",Á:"A",Â:"A",Ã:"A",Ä:"A",Å:"A",à:"a",á:"a",â:"a",ã:"a",ä:"a",å:"a",Ç:"C",ç:"c",Ð:"D",ð:"d",È:"E",É:"E",Ê:"E",Ë:"E",è:"e",é:"e",ê:"e",ë:"e",Ì:"I",Í:"I",Î:"I",Ï:"I",ì:"i",í:"i",î:"i",ï:"i",Ñ:"N",ñ:"n",Ò:"O",Ó:"O",Ô:"O",Õ:"O",Ö:"O",Ø:"O",ò:"o",ó:"o",ô:"o",õ:"o",ö:"o",ø:"o",Ù:"U",Ú:"U",Û:"U",Ü:"U",ù:"u",ú:"u",û:"u",ü:"u",Ý:"Y",ý:"y",ÿ:"y",Æ:"Ae",æ:"ae",Þ:"Th",þ:"th",ß:"ss",Ā:"A",Ă:"A",Ą:"A",ā:"a",ă:"a",ą:"a",Ć:"C",Ĉ:"C",Ċ:"C",Č:"C",ć:"c",ĉ:"c",ċ:"c",č:"c",Ď:"D",Đ:"D",ď:"d",đ:"d",Ē:"E",Ĕ:"E",Ė:"E",Ę:"E",Ě:"E",ē:"e",ĕ:"e",ė:"e",ę:"e",ě:"e",Ĝ:"G",Ğ:"G",Ġ:"G",Ģ:"G",ĝ:"g",ğ:"g",ġ:"g",ģ:"g",Ĥ:"H",Ħ:"H",ĥ:"h",ħ:"h",Ĩ:"I",Ī:"I",Ĭ:"I",Į:"I",İ:"I",ĩ:"i",ī:"i",ĭ:"i",į:"i",ı:"i",Ĵ:"J",ĵ:"j",Ķ:"K",ķ:"k",ĸ:"k",Ĺ:"L",Ļ:"L",Ľ:"L",Ŀ:"L",Ł:"L",ĺ:"l",ļ:"l",ľ:"l",ŀ:"l",ł:"l",Ń:"N",Ņ:"N",Ň:"N",Ŋ:"N",ń:"n",ņ:"n",ň:"n",ŋ:"n",Ō:"O",Ŏ:"O",Ő:"O",ō:"o",ŏ:"o",ő:"o",Ŕ:"R",Ŗ:"R",Ř:"R",ŕ:"r",ŗ:"r",ř:"r",Ś:"S",Ŝ:"S",Ş:"S",Š:"S",ś:"s",ŝ:"s",ş:"s",š:"s",Ţ:"T",Ť:"T",Ŧ:"T",ţ:"t",ť:"t",ŧ:"t",Ũ:"U",Ū:"U",Ŭ:"U",Ů:"U",Ű:"U",Ų:"U",ũ:"u",ū:"u",ŭ:"u",ů:"u",ű:"u",ų:"u",Ŵ:"W",ŵ:"w",Ŷ:"Y",ŷ:"y",Ÿ:"Y",Ź:"Z",Ż:"Z",Ž:"Z",ź:"z",ż:"z",ž:"z",IJ:"IJ",ij:"ij",Œ:"Oe",œ:"oe",ʼn:"'n",ſ:"s"}),an=Gt({"&":"&","<":"<",">":">",'"':""","'":"'"});function ln(e){return"\\"+ut[e]}function sn(e){return ot.test(e)}function cn(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}function un(e,t){return function(n){return e(t(n))}}function dn(e,t){for(var n=-1,r=e.length,o=0,i=[];++n",""":'"',"'":"'"});var _n=function e(t){var n,r=(t=null==t?gt:_n.defaults(gt.Object(),t,_n.pick(gt,at))).Array,le=t.Date,Ee=t.Error,Se=t.Function,Ce=t.Math,Oe=t.Object,Te=t.RegExp,Ie=t.String,ze=t.TypeError,je=r.prototype,Ne=Se.prototype,Pe=Oe.prototype,Le=t["__core-js_shared__"],Re=Ne.toString,De=Pe.hasOwnProperty,Me=0,Ae=(n=/[^.]+$/.exec(Le&&Le.keys&&Le.keys.IE_PROTO||""))?"Symbol(src)_1."+n:"",Be=Pe.toString,Fe=Re.call(Oe),He=gt._,$e=Te("^"+Re.call(De).replace(oe,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Ve=_t?t.Buffer:o,Ue=t.Symbol,We=t.Uint8Array,qe=Ve?Ve.allocUnsafe:o,Ke=un(Oe.getPrototypeOf,Oe),Ge=Oe.create,Qe=Pe.propertyIsEnumerable,Ye=je.splice,Xe=Ue?Ue.isConcatSpreadable:o,Je=Ue?Ue.iterator:o,Ze=Ue?Ue.toStringTag:o,nt=function(){try{var e=pi(Oe,"defineProperty");return e({},"",{}),e}catch(e){}}(),ot=t.clearTimeout!==gt.clearTimeout&&t.clearTimeout,ut=le&&le.now!==gt.Date.now&&le.now,pt=t.setTimeout!==gt.setTimeout&&t.setTimeout,ht=Ce.ceil,mt=Ce.floor,vt=Oe.getOwnPropertySymbols,bt=Ve?Ve.isBuffer:o,yt=t.isFinite,Ft=je.join,Gt=un(Oe.keys,Oe),bn=Ce.max,yn=Ce.min,xn=le.now,wn=t.parseInt,kn=Ce.random,En=je.reverse,Sn=pi(t,"DataView"),Cn=pi(t,"Map"),On=pi(t,"Promise"),Tn=pi(t,"Set"),In=pi(t,"WeakMap"),zn=pi(Oe,"create"),jn=In&&new In,Nn={},Pn=Bi(Sn),Ln=Bi(Cn),Rn=Bi(On),Dn=Bi(Tn),Mn=Bi(In),An=Ue?Ue.prototype:o,Bn=An?An.valueOf:o,Fn=An?An.toString:o;function Hn(e){if(nl(e)&&!Wa(e)&&!(e instanceof Wn)){if(e instanceof Un)return e;if(De.call(e,"__wrapped__"))return Fi(e)}return new Un(e)}var $n=function(){function e(){}return function(t){if(!tl(t))return{};if(Ge)return Ge(t);e.prototype=t;var n=new e;return e.prototype=o,n}}();function Vn(){}function Un(e,t){this.__wrapped__=e,this.__actions__=[],this.__chain__=!!t,this.__index__=0,this.__values__=o}function Wn(e){this.__wrapped__=e,this.__actions__=[],this.__dir__=1,this.__filtered__=!1,this.__iteratees__=[],this.__takeCount__=m,this.__views__=[]}function qn(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t=t?e:t)),e}function cr(e,t,n,r,i,a){var l,s=1&t,c=2&t,u=4&t;if(n&&(l=i?n(e,r,i,a):n(e)),l!==o)return l;if(!tl(e))return e;var d=Wa(e);if(d){if(l=function(e){var t=e.length,n=new e.constructor(t);t&&"string"==typeof e[0]&&De.call(e,"index")&&(n.index=e.index,n.input=e.input);return n}(e),!s)return jo(e,l)}else{var f=mi(e),p=f==k||f==E;if(Qa(e))return So(e,s);if(f==O||f==_||p&&!i){if(l=c||p?{}:_i(e),!s)return c?function(e,t){return No(e,gi(e),t)}(e,function(e,t){return e&&No(t,Pl(t),e)}(l,e)):function(e,t){return No(e,hi(e),t)}(e,ir(l,e))}else{if(!ct[f])return i?e:{};l=function(e,t,n){var r=e.constructor;switch(t){case L:return Co(e);case y:case x:return new r(+e);case R:return function(e,t){var n=t?Co(e.buffer):e.buffer;return new e.constructor(n,e.byteOffset,e.byteLength)}(e,n);case D:case M:case A:case B:case F:case H:case $:case V:case U:return Oo(e,n);case S:return new r;case C:case j:return new r(e);case I:return function(e){var t=new e.constructor(e.source,ge.exec(e));return t.lastIndex=e.lastIndex,t}(e);case z:return new r;case N:return o=e,Bn?Oe(Bn.call(o)):{}}var o}(e,f,s)}}a||(a=new Yn);var h=a.get(e);if(h)return h;a.set(e,l),ll(e)?e.forEach((function(r){l.add(cr(r,t,n,r,e,a))})):rl(e)&&e.forEach((function(r,o){l.set(o,cr(r,t,n,o,e,a))}));var g=d?o:(u?c?ai:ii:c?Pl:Nl)(e);return It(g||e,(function(r,o){g&&(r=e[o=r]),nr(l,o,cr(r,t,n,o,e,a))})),l}function ur(e,t,n){var r=n.length;if(null==e)return!r;for(e=Oe(e);r--;){var i=n[r],a=t[i],l=e[i];if(l===o&&!(i in e)||!a(l))return!1}return!0}function dr(e,t,n){if("function"!=typeof e)throw new ze(i);return Ni((function(){e.apply(o,n)}),t)}function fr(e,t,n,r){var o=-1,i=Pt,a=!0,l=e.length,s=[],c=t.length;if(!l)return s;n&&(t=Rt(t,Zt(n))),r?(i=Lt,a=!1):t.length>=200&&(i=tn,a=!1,t=new Qn(t));e:for(;++o-1},Kn.prototype.set=function(e,t){var n=this.__data__,r=rr(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this},Gn.prototype.clear=function(){this.size=0,this.__data__={hash:new qn,map:new(Cn||Kn),string:new qn}},Gn.prototype.delete=function(e){var t=di(this,e).delete(e);return this.size-=t?1:0,t},Gn.prototype.get=function(e){return di(this,e).get(e)},Gn.prototype.has=function(e){return di(this,e).has(e)},Gn.prototype.set=function(e,t){var n=di(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this},Qn.prototype.add=Qn.prototype.push=function(e){return this.__data__.set(e,a),this},Qn.prototype.has=function(e){return this.__data__.has(e)},Yn.prototype.clear=function(){this.__data__=new Kn,this.size=0},Yn.prototype.delete=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n},Yn.prototype.get=function(e){return this.__data__.get(e)},Yn.prototype.has=function(e){return this.__data__.has(e)},Yn.prototype.set=function(e,t){var n=this.__data__;if(n instanceof Kn){var r=n.__data__;if(!Cn||r.length<199)return r.push([e,t]),this.size=++n.size,this;n=this.__data__=new Gn(r)}return n.set(e,t),this.size=n.size,this};var pr=Ro(xr),hr=Ro(wr,!0);function gr(e,t){var n=!0;return pr(e,(function(e,r,o){return n=!!t(e,r,o)})),n}function mr(e,t,n){for(var r=-1,i=e.length;++r0&&n(l)?t>1?_r(l,t-1,n,r,o):Dt(o,l):r||(o[o.length]=l)}return o}var br=Do(),yr=Do(!0);function xr(e,t){return e&&br(e,t,Nl)}function wr(e,t){return e&&yr(e,t,Nl)}function kr(e,t){return Nt(t,(function(t){return Ja(e[t])}))}function Er(e,t){for(var n=0,r=(t=xo(t,e)).length;null!=e&&nt}function Tr(e,t){return null!=e&&De.call(e,t)}function Ir(e,t){return null!=e&&t in Oe(e)}function zr(e,t,n){for(var i=n?Lt:Pt,a=e[0].length,l=e.length,s=l,c=r(l),u=1/0,d=[];s--;){var f=e[s];s&&t&&(f=Rt(f,Zt(t))),u=yn(f.length,u),c[s]=!n&&(t||a>=120&&f.length>=120)?new Qn(s&&f):o}f=e[0];var p=-1,h=c[0];e:for(;++p=l?s:s*("desc"==n[r]?-1:1)}return e.index-t.index}(e,t,n)}))}function qr(e,t,n){for(var r=-1,o=t.length,i={};++r-1;)l!==e&&Ye.call(l,s,1),Ye.call(e,s,1);return e}function Gr(e,t){for(var n=e?t.length:0,r=n-1;n--;){var o=t[n];if(n==r||o!==i){var i=o;yi(o)?Ye.call(e,o,1):po(e,o)}}return e}function Qr(e,t){return e+mt(kn()*(t-e+1))}function Yr(e,t){var n="";if(!e||t<1||t>h)return n;do{t%2&&(n+=e),(t=mt(t/2))&&(e+=e)}while(t);return n}function Xr(e,t){return Pi(Ti(e,t,os),e+"")}function Jr(e){return Jn(Hl(e))}function Zr(e,t){var n=Hl(e);return Di(n,sr(t,0,n.length))}function eo(e,t,n,r){if(!tl(e))return e;for(var i=-1,a=(t=xo(t,e)).length,l=a-1,s=e;null!=s&&++ii?0:i+t),(n=n>i?i:n)<0&&(n+=i),i=t>n?0:n-t>>>0,t>>>=0;for(var a=r(i);++o>>1,a=e[i];null!==a&&!cl(a)&&(n?a<=t:a=200){var c=t?null:Xo(e);if(c)return fn(c);a=!1,o=tn,s=new Qn}else s=t?[]:l;e:for(;++r=r?e:oo(e,t,n)}var Eo=ot||function(e){return gt.clearTimeout(e)};function So(e,t){if(t)return e.slice();var n=e.length,r=qe?qe(n):new e.constructor(n);return e.copy(r),r}function Co(e){var t=new e.constructor(e.byteLength);return new We(t).set(new We(e)),t}function Oo(e,t){var n=t?Co(e.buffer):e.buffer;return new e.constructor(n,e.byteOffset,e.length)}function To(e,t){if(e!==t){var n=e!==o,r=null===e,i=e==e,a=cl(e),l=t!==o,s=null===t,c=t==t,u=cl(t);if(!s&&!u&&!a&&e>t||a&&l&&c&&!s&&!u||r&&l&&c||!n&&c||!i)return 1;if(!r&&!a&&!u&&e1?n[i-1]:o,l=i>2?n[2]:o;for(a=e.length>3&&"function"==typeof a?(i--,a):o,l&&xi(n[0],n[1],l)&&(a=i<3?o:a,i=1),t=Oe(t);++r-1?i[a?t[l]:l]:o}}function Ho(e){return oi((function(t){var n=t.length,r=n,a=Un.prototype.thru;for(e&&t.reverse();r--;){var l=t[r];if("function"!=typeof l)throw new ze(i);if(a&&!s&&"wrapper"==si(l))var s=new Un([],!0)}for(r=s?r:n;++r1&&y.reverse(),p&&us))return!1;var u=a.get(e),d=a.get(t);if(u&&d)return u==t&&d==e;var f=-1,p=!0,h=2&n?new Qn:o;for(a.set(e,t),a.set(t,e);++f-1&&e%1==0&&e1?"& ":"")+t[r],t=t.join(n>2?", ":" "),e.replace(se,"{\n/* [wrapped with "+t+"] */\n")}(r,function(e,t){return It(v,(function(n){var r="_."+n[0];t&n[1]&&!Pt(e,r)&&e.push(r)})),e.sort()}(function(e){var t=e.match(ce);return t?t[1].split(ue):[]}(r),n)))}function Ri(e){var t=0,n=0;return function(){var r=xn(),i=16-(r-n);if(n=r,i>0){if(++t>=800)return arguments[0]}else t=0;return e.apply(o,arguments)}}function Di(e,t){var n=-1,r=e.length,i=r-1;for(t=t===o?r:t;++n1?e[t-1]:o;return n="function"==typeof n?(e.pop(),n):o,aa(e,n)}));function pa(e){var t=Hn(e);return t.__chain__=!0,t}function ha(e,t){return t(e)}var ga=oi((function(e){var t=e.length,n=t?e[0]:0,r=this.__wrapped__,i=function(t){return lr(t,e)};return!(t>1||this.__actions__.length)&&r instanceof Wn&&yi(n)?((r=r.slice(n,+n+(t?1:0))).__actions__.push({func:ha,args:[i],thisArg:o}),new Un(r,this.__chain__).thru((function(e){return t&&!e.length&&e.push(o),e}))):this.thru(i)}));var ma=Po((function(e,t,n){De.call(e,n)?++e[n]:ar(e,n,1)}));var va=Fo(Ui),_a=Fo(Wi);function ba(e,t){return(Wa(e)?It:pr)(e,ui(t,3))}function ya(e,t){return(Wa(e)?zt:hr)(e,ui(t,3))}var xa=Po((function(e,t,n){De.call(e,n)?e[n].push(t):ar(e,n,[t])}));var wa=Xr((function(e,t,n){var o=-1,i="function"==typeof t,a=Ka(e)?r(e.length):[];return pr(e,(function(e){a[++o]=i?Ot(t,e,n):jr(e,t,n)})),a})),ka=Po((function(e,t,n){ar(e,n,t)}));function Ea(e,t){return(Wa(e)?Rt:Fr)(e,ui(t,3))}var Sa=Po((function(e,t,n){e[n?0:1].push(t)}),(function(){return[[],[]]}));var Ca=Xr((function(e,t){if(null==e)return[];var n=t.length;return n>1&&xi(e,t[0],t[1])?t=[]:n>2&&xi(t[0],t[1],t[2])&&(t=[t[0]]),Wr(e,_r(t,1),[])})),Oa=ut||function(){return gt.Date.now()};function Ta(e,t,n){return t=n?o:t,t=e&&null==t?e.length:t,Zo(e,d,o,o,o,o,t)}function Ia(e,t){var n;if("function"!=typeof t)throw new ze(i);return e=gl(e),function(){return--e>0&&(n=t.apply(this,arguments)),e<=1&&(t=o),n}}var za=Xr((function(e,t,n){var r=1;if(n.length){var o=dn(n,ci(za));r|=c}return Zo(e,r,t,n,o)})),ja=Xr((function(e,t,n){var r=3;if(n.length){var o=dn(n,ci(ja));r|=c}return Zo(t,r,e,n,o)}));function Na(e,t,n){var r,a,l,s,c,u,d=0,f=!1,p=!1,h=!0;if("function"!=typeof e)throw new ze(i);function g(t){var n=r,i=a;return r=a=o,d=t,s=e.apply(i,n)}function m(e){var n=e-u;return u===o||n>=t||n<0||p&&e-d>=l}function v(){var e=Oa();if(m(e))return _(e);c=Ni(v,function(e){var n=t-(e-u);return p?yn(n,l-(e-d)):n}(e))}function _(e){return c=o,h&&r?g(e):(r=a=o,s)}function b(){var e=Oa(),n=m(e);if(r=arguments,a=this,u=e,n){if(c===o)return function(e){return d=e,c=Ni(v,t),f?g(e):s}(u);if(p)return Eo(c),c=Ni(v,t),g(u)}return c===o&&(c=Ni(v,t)),s}return t=vl(t)||0,tl(n)&&(f=!!n.leading,l=(p="maxWait"in n)?bn(vl(n.maxWait)||0,t):l,h="trailing"in n?!!n.trailing:h),b.cancel=function(){c!==o&&Eo(c),d=0,r=u=a=c=o},b.flush=function(){return c===o?s:_(Oa())},b}var Pa=Xr((function(e,t){return dr(e,1,t)})),La=Xr((function(e,t,n){return dr(e,vl(t)||0,n)}));function Ra(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new ze(i);var n=function(){var r=arguments,o=t?t.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=e.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new(Ra.Cache||Gn),n}function Da(e){if("function"!=typeof e)throw new ze(i);return function(){var t=arguments;switch(t.length){case 0:return!e.call(this);case 1:return!e.call(this,t[0]);case 2:return!e.call(this,t[0],t[1]);case 3:return!e.call(this,t[0],t[1],t[2])}return!e.apply(this,t)}}Ra.Cache=Gn;var Ma=wo((function(e,t){var n=(t=1==t.length&&Wa(t[0])?Rt(t[0],Zt(ui())):Rt(_r(t,1),Zt(ui()))).length;return Xr((function(r){for(var o=-1,i=yn(r.length,n);++o=t})),Ua=Nr(function(){return arguments}())?Nr:function(e){return nl(e)&&De.call(e,"callee")&&!Qe.call(e,"callee")},Wa=r.isArray,qa=xt?Zt(xt):function(e){return nl(e)&&Cr(e)==L};function Ka(e){return null!=e&&el(e.length)&&!Ja(e)}function Ga(e){return nl(e)&&Ka(e)}var Qa=bt||vs,Ya=wt?Zt(wt):function(e){return nl(e)&&Cr(e)==x};function Xa(e){if(!nl(e))return!1;var t=Cr(e);return t==w||"[object DOMException]"==t||"string"==typeof e.message&&"string"==typeof e.name&&!il(e)}function Ja(e){if(!tl(e))return!1;var t=Cr(e);return t==k||t==E||"[object AsyncFunction]"==t||"[object Proxy]"==t}function Za(e){return"number"==typeof e&&e==gl(e)}function el(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=h}function tl(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}function nl(e){return null!=e&&"object"==typeof e}var rl=kt?Zt(kt):function(e){return nl(e)&&mi(e)==S};function ol(e){return"number"==typeof e||nl(e)&&Cr(e)==C}function il(e){if(!nl(e)||Cr(e)!=O)return!1;var t=Ke(e);if(null===t)return!0;var n=De.call(t,"constructor")&&t.constructor;return"function"==typeof n&&n instanceof n&&Re.call(n)==Fe}var al=Et?Zt(Et):function(e){return nl(e)&&Cr(e)==I};var ll=St?Zt(St):function(e){return nl(e)&&mi(e)==z};function sl(e){return"string"==typeof e||!Wa(e)&&nl(e)&&Cr(e)==j}function cl(e){return"symbol"==typeof e||nl(e)&&Cr(e)==N}var ul=Ct?Zt(Ct):function(e){return nl(e)&&el(e.length)&&!!st[Cr(e)]};var dl=Go(Br),fl=Go((function(e,t){return e<=t}));function pl(e){if(!e)return[];if(Ka(e))return sl(e)?gn(e):jo(e);if(Je&&e[Je])return function(e){for(var t,n=[];!(t=e.next()).done;)n.push(t.value);return n}(e[Je]());var t=mi(e);return(t==S?cn:t==z?fn:Hl)(e)}function hl(e){return e?(e=vl(e))===p||e===-1/0?17976931348623157e292*(e<0?-1:1):e==e?e:0:0===e?e:0}function gl(e){var t=hl(e),n=t%1;return t==t?n?t-n:t:0}function ml(e){return e?sr(gl(e),0,m):0}function vl(e){if("number"==typeof e)return e;if(cl(e))return g;if(tl(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=tl(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=Jt(e);var n=ve.test(e);return n||be.test(e)?ft(e.slice(2),n?2:8):me.test(e)?g:+e}function _l(e){return No(e,Pl(e))}function bl(e){return null==e?"":uo(e)}var yl=Lo((function(e,t){if(Si(t)||Ka(t))No(t,Nl(t),e);else for(var n in t)De.call(t,n)&&nr(e,n,t[n])})),xl=Lo((function(e,t){No(t,Pl(t),e)})),wl=Lo((function(e,t,n,r){No(t,Pl(t),e,r)})),kl=Lo((function(e,t,n,r){No(t,Nl(t),e,r)})),El=oi(lr);var Sl=Xr((function(e,t){e=Oe(e);var n=-1,r=t.length,i=r>2?t[2]:o;for(i&&xi(t[0],t[1],i)&&(r=1);++n1),t})),No(e,ai(e),n),r&&(n=cr(n,7,ni));for(var o=t.length;o--;)po(n,t[o]);return n}));var Ml=oi((function(e,t){return null==e?{}:function(e,t){return qr(e,t,(function(t,n){return Tl(e,n)}))}(e,t)}));function Al(e,t){if(null==e)return{};var n=Rt(ai(e),(function(e){return[e]}));return t=ui(t),qr(e,n,(function(e,n){return t(e,n[0])}))}var Bl=Jo(Nl),Fl=Jo(Pl);function Hl(e){return null==e?[]:en(e,Nl(e))}var $l=Ao((function(e,t,n){return t=t.toLowerCase(),e+(n?Vl(t):t)}));function Vl(e){return Xl(bl(e).toLowerCase())}function Ul(e){return(e=bl(e))&&e.replace(xe,on).replace(tt,"")}var Wl=Ao((function(e,t,n){return e+(n?"-":"")+t.toLowerCase()})),ql=Ao((function(e,t,n){return e+(n?" ":"")+t.toLowerCase()})),Kl=Mo("toLowerCase");var Gl=Ao((function(e,t,n){return e+(n?"_":"")+t.toLowerCase()}));var Ql=Ao((function(e,t,n){return e+(n?" ":"")+Xl(t)}));var Yl=Ao((function(e,t,n){return e+(n?" ":"")+t.toUpperCase()})),Xl=Mo("toUpperCase");function Jl(e,t,n){return e=bl(e),(t=n?o:t)===o?function(e){return it.test(e)}(e)?function(e){return e.match(rt)||[]}(e):function(e){return e.match(de)||[]}(e):e.match(t)||[]}var Zl=Xr((function(e,t){try{return Ot(e,o,t)}catch(e){return Xa(e)?e:new Ee(e)}})),es=oi((function(e,t){return It(t,(function(t){t=Ai(t),ar(e,t,za(e[t],e))})),e}));function ts(e){return function(){return e}}var ns=Ho(),rs=Ho(!0);function os(e){return e}function is(e){return Dr("function"==typeof e?e:cr(e,1))}var as=Xr((function(e,t){return function(n){return jr(n,e,t)}})),ls=Xr((function(e,t){return function(n){return jr(e,n,t)}}));function ss(e,t,n){var r=Nl(t),o=kr(t,r);null!=n||tl(t)&&(o.length||!r.length)||(n=t,t=e,e=this,o=kr(t,Nl(t)));var i=!(tl(n)&&"chain"in n&&!n.chain),a=Ja(e);return It(o,(function(n){var r=t[n];e[n]=r,a&&(e.prototype[n]=function(){var t=this.__chain__;if(i||t){var n=e(this.__wrapped__);return(n.__actions__=jo(this.__actions__)).push({func:r,args:arguments,thisArg:e}),n.__chain__=t,n}return r.apply(e,Dt([this.value()],arguments))})})),e}function cs(){}var us=Wo(Rt),ds=Wo(jt),fs=Wo(Bt);function ps(e){return wi(e)?Kt(Ai(e)):function(e){return function(t){return Er(t,e)}}(e)}var hs=Ko(),gs=Ko(!0);function ms(){return[]}function vs(){return!1}var _s=Uo((function(e,t){return e+t}),0),bs=Yo("ceil"),ys=Uo((function(e,t){return e/t}),1),xs=Yo("floor");var ws,ks=Uo((function(e,t){return e*t}),1),Es=Yo("round"),Ss=Uo((function(e,t){return e-t}),0);return Hn.after=function(e,t){if("function"!=typeof t)throw new ze(i);return e=gl(e),function(){if(--e<1)return t.apply(this,arguments)}},Hn.ary=Ta,Hn.assign=yl,Hn.assignIn=xl,Hn.assignInWith=wl,Hn.assignWith=kl,Hn.at=El,Hn.before=Ia,Hn.bind=za,Hn.bindAll=es,Hn.bindKey=ja,Hn.castArray=function(){if(!arguments.length)return[];var e=arguments[0];return Wa(e)?e:[e]},Hn.chain=pa,Hn.chunk=function(e,t,n){t=(n?xi(e,t,n):t===o)?1:bn(gl(t),0);var i=null==e?0:e.length;if(!i||t<1)return[];for(var a=0,l=0,s=r(ht(i/t));ai?0:i+n),(r=r===o||r>i?i:gl(r))<0&&(r+=i),r=n>r?0:ml(r);n>>0)?(e=bl(e))&&("string"==typeof t||null!=t&&!al(t))&&!(t=uo(t))&&sn(e)?ko(gn(e),0,n):e.split(t,n):[]},Hn.spread=function(e,t){if("function"!=typeof e)throw new ze(i);return t=null==t?0:bn(gl(t),0),Xr((function(n){var r=n[t],o=ko(n,0,t);return r&&Dt(o,r),Ot(e,this,o)}))},Hn.tail=function(e){var t=null==e?0:e.length;return t?oo(e,1,t):[]},Hn.take=function(e,t,n){return e&&e.length?oo(e,0,(t=n||t===o?1:gl(t))<0?0:t):[]},Hn.takeRight=function(e,t,n){var r=null==e?0:e.length;return r?oo(e,(t=r-(t=n||t===o?1:gl(t)))<0?0:t,r):[]},Hn.takeRightWhile=function(e,t){return e&&e.length?go(e,ui(t,3),!1,!0):[]},Hn.takeWhile=function(e,t){return e&&e.length?go(e,ui(t,3)):[]},Hn.tap=function(e,t){return t(e),e},Hn.throttle=function(e,t,n){var r=!0,o=!0;if("function"!=typeof e)throw new ze(i);return tl(n)&&(r="leading"in n?!!n.leading:r,o="trailing"in n?!!n.trailing:o),Na(e,t,{leading:r,maxWait:t,trailing:o})},Hn.thru=ha,Hn.toArray=pl,Hn.toPairs=Bl,Hn.toPairsIn=Fl,Hn.toPath=function(e){return Wa(e)?Rt(e,Ai):cl(e)?[e]:jo(Mi(bl(e)))},Hn.toPlainObject=_l,Hn.transform=function(e,t,n){var r=Wa(e),o=r||Qa(e)||ul(e);if(t=ui(t,4),null==n){var i=e&&e.constructor;n=o?r?new i:[]:tl(e)&&Ja(i)?$n(Ke(e)):{}}return(o?It:xr)(e,(function(e,r,o){return t(n,e,r,o)})),n},Hn.unary=function(e){return Ta(e,1)},Hn.union=na,Hn.unionBy=ra,Hn.unionWith=oa,Hn.uniq=function(e){return e&&e.length?fo(e):[]},Hn.uniqBy=function(e,t){return e&&e.length?fo(e,ui(t,2)):[]},Hn.uniqWith=function(e,t){return t="function"==typeof t?t:o,e&&e.length?fo(e,o,t):[]},Hn.unset=function(e,t){return null==e||po(e,t)},Hn.unzip=ia,Hn.unzipWith=aa,Hn.update=function(e,t,n){return null==e?e:ho(e,t,yo(n))},Hn.updateWith=function(e,t,n,r){return r="function"==typeof r?r:o,null==e?e:ho(e,t,yo(n),r)},Hn.values=Hl,Hn.valuesIn=function(e){return null==e?[]:en(e,Pl(e))},Hn.without=la,Hn.words=Jl,Hn.wrap=function(e,t){return Aa(yo(t),e)},Hn.xor=sa,Hn.xorBy=ca,Hn.xorWith=ua,Hn.zip=da,Hn.zipObject=function(e,t){return _o(e||[],t||[],nr)},Hn.zipObjectDeep=function(e,t){return _o(e||[],t||[],eo)},Hn.zipWith=fa,Hn.entries=Bl,Hn.entriesIn=Fl,Hn.extend=xl,Hn.extendWith=wl,ss(Hn,Hn),Hn.add=_s,Hn.attempt=Zl,Hn.camelCase=$l,Hn.capitalize=Vl,Hn.ceil=bs,Hn.clamp=function(e,t,n){return n===o&&(n=t,t=o),n!==o&&(n=(n=vl(n))==n?n:0),t!==o&&(t=(t=vl(t))==t?t:0),sr(vl(e),t,n)},Hn.clone=function(e){return cr(e,4)},Hn.cloneDeep=function(e){return cr(e,5)},Hn.cloneDeepWith=function(e,t){return cr(e,5,t="function"==typeof t?t:o)},Hn.cloneWith=function(e,t){return cr(e,4,t="function"==typeof t?t:o)},Hn.conformsTo=function(e,t){return null==t||ur(e,t,Nl(t))},Hn.deburr=Ul,Hn.defaultTo=function(e,t){return null==e||e!=e?t:e},Hn.divide=ys,Hn.endsWith=function(e,t,n){e=bl(e),t=uo(t);var r=e.length,i=n=n===o?r:sr(gl(n),0,r);return(n-=t.length)>=0&&e.slice(n,i)==t},Hn.eq=Ha,Hn.escape=function(e){return(e=bl(e))&&X.test(e)?e.replace(Q,an):e},Hn.escapeRegExp=function(e){return(e=bl(e))&&ie.test(e)?e.replace(oe,"\\$&"):e},Hn.every=function(e,t,n){var r=Wa(e)?jt:gr;return n&&xi(e,t,n)&&(t=o),r(e,ui(t,3))},Hn.find=va,Hn.findIndex=Ui,Hn.findKey=function(e,t){return Ht(e,ui(t,3),xr)},Hn.findLast=_a,Hn.findLastIndex=Wi,Hn.findLastKey=function(e,t){return Ht(e,ui(t,3),wr)},Hn.floor=xs,Hn.forEach=ba,Hn.forEachRight=ya,Hn.forIn=function(e,t){return null==e?e:br(e,ui(t,3),Pl)},Hn.forInRight=function(e,t){return null==e?e:yr(e,ui(t,3),Pl)},Hn.forOwn=function(e,t){return e&&xr(e,ui(t,3))},Hn.forOwnRight=function(e,t){return e&&wr(e,ui(t,3))},Hn.get=Ol,Hn.gt=$a,Hn.gte=Va,Hn.has=function(e,t){return null!=e&&vi(e,t,Tr)},Hn.hasIn=Tl,Hn.head=Ki,Hn.identity=os,Hn.includes=function(e,t,n,r){e=Ka(e)?e:Hl(e),n=n&&!r?gl(n):0;var o=e.length;return n<0&&(n=bn(o+n,0)),sl(e)?n<=o&&e.indexOf(t,n)>-1:!!o&&Vt(e,t,n)>-1},Hn.indexOf=function(e,t,n){var r=null==e?0:e.length;if(!r)return-1;var o=null==n?0:gl(n);return o<0&&(o=bn(r+o,0)),Vt(e,t,o)},Hn.inRange=function(e,t,n){return t=hl(t),n===o?(n=t,t=0):n=hl(n),function(e,t,n){return e>=yn(t,n)&&e=-9007199254740991&&e<=h},Hn.isSet=ll,Hn.isString=sl,Hn.isSymbol=cl,Hn.isTypedArray=ul,Hn.isUndefined=function(e){return e===o},Hn.isWeakMap=function(e){return nl(e)&&mi(e)==P},Hn.isWeakSet=function(e){return nl(e)&&"[object WeakSet]"==Cr(e)},Hn.join=function(e,t){return null==e?"":Ft.call(e,t)},Hn.kebabCase=Wl,Hn.last=Xi,Hn.lastIndexOf=function(e,t,n){var r=null==e?0:e.length;if(!r)return-1;var i=r;return n!==o&&(i=(i=gl(n))<0?bn(r+i,0):yn(i,r-1)),t==t?function(e,t,n){for(var r=n+1;r--;)if(e[r]===t)return r;return r}(e,t,i):$t(e,Wt,i,!0)},Hn.lowerCase=ql,Hn.lowerFirst=Kl,Hn.lt=dl,Hn.lte=fl,Hn.max=function(e){return e&&e.length?mr(e,os,Or):o},Hn.maxBy=function(e,t){return e&&e.length?mr(e,ui(t,2),Or):o},Hn.mean=function(e){return qt(e,os)},Hn.meanBy=function(e,t){return qt(e,ui(t,2))},Hn.min=function(e){return e&&e.length?mr(e,os,Br):o},Hn.minBy=function(e,t){return e&&e.length?mr(e,ui(t,2),Br):o},Hn.stubArray=ms,Hn.stubFalse=vs,Hn.stubObject=function(){return{}},Hn.stubString=function(){return""},Hn.stubTrue=function(){return!0},Hn.multiply=ks,Hn.nth=function(e,t){return e&&e.length?Ur(e,gl(t)):o},Hn.noConflict=function(){return gt._===this&&(gt._=He),this},Hn.noop=cs,Hn.now=Oa,Hn.pad=function(e,t,n){e=bl(e);var r=(t=gl(t))?hn(e):0;if(!t||r>=t)return e;var o=(t-r)/2;return qo(mt(o),n)+e+qo(ht(o),n)},Hn.padEnd=function(e,t,n){e=bl(e);var r=(t=gl(t))?hn(e):0;return t&&rt){var r=e;e=t,t=r}if(n||e%1||t%1){var i=kn();return yn(e+i*(t-e+dt("1e-"+((i+"").length-1))),t)}return Qr(e,t)},Hn.reduce=function(e,t,n){var r=Wa(e)?Mt:Qt,o=arguments.length<3;return r(e,ui(t,4),n,o,pr)},Hn.reduceRight=function(e,t,n){var r=Wa(e)?At:Qt,o=arguments.length<3;return r(e,ui(t,4),n,o,hr)},Hn.repeat=function(e,t,n){return t=(n?xi(e,t,n):t===o)?1:gl(t),Yr(bl(e),t)},Hn.replace=function(){var e=arguments,t=bl(e[0]);return e.length<3?t:t.replace(e[1],e[2])},Hn.result=function(e,t,n){var r=-1,i=(t=xo(t,e)).length;for(i||(i=1,e=o);++rh)return[];var n=m,r=yn(e,m);t=ui(t),e-=m;for(var o=Xt(r,t);++n=a)return e;var s=n-hn(r);if(s<1)return r;var c=l?ko(l,0,s).join(""):e.slice(0,s);if(i===o)return c+r;if(l&&(s+=c.length-s),al(i)){if(e.slice(s).search(i)){var u,d=c;for(i.global||(i=Te(i.source,bl(ge.exec(i))+"g")),i.lastIndex=0;u=i.exec(d);)var f=u.index;c=c.slice(0,f===o?s:f)}}else if(e.indexOf(uo(i),s)!=s){var p=c.lastIndexOf(i);p>-1&&(c=c.slice(0,p))}return c+r},Hn.unescape=function(e){return(e=bl(e))&&Y.test(e)?e.replace(G,vn):e},Hn.uniqueId=function(e){var t=++Me;return bl(e)+t},Hn.upperCase=Yl,Hn.upperFirst=Xl,Hn.each=ba,Hn.eachRight=ya,Hn.first=Ki,ss(Hn,(ws={},xr(Hn,(function(e,t){De.call(Hn.prototype,t)||(ws[t]=e)})),ws),{chain:!1}),Hn.VERSION="4.17.21",It(["bind","bindKey","curry","curryRight","partial","partialRight"],(function(e){Hn[e].placeholder=Hn})),It(["drop","take"],(function(e,t){Wn.prototype[e]=function(n){n=n===o?1:bn(gl(n),0);var r=this.__filtered__&&!t?new Wn(this):this.clone();return r.__filtered__?r.__takeCount__=yn(n,r.__takeCount__):r.__views__.push({size:yn(n,m),type:e+(r.__dir__<0?"Right":"")}),r},Wn.prototype[e+"Right"]=function(t){return this.reverse()[e](t).reverse()}})),It(["filter","map","takeWhile"],(function(e,t){var n=t+1,r=1==n||3==n;Wn.prototype[e]=function(e){var t=this.clone();return t.__iteratees__.push({iteratee:ui(e,3),type:n}),t.__filtered__=t.__filtered__||r,t}})),It(["head","last"],(function(e,t){var n="take"+(t?"Right":"");Wn.prototype[e]=function(){return this[n](1).value()[0]}})),It(["initial","tail"],(function(e,t){var n="drop"+(t?"":"Right");Wn.prototype[e]=function(){return this.__filtered__?new Wn(this):this[n](1)}})),Wn.prototype.compact=function(){return this.filter(os)},Wn.prototype.find=function(e){return this.filter(e).head()},Wn.prototype.findLast=function(e){return this.reverse().find(e)},Wn.prototype.invokeMap=Xr((function(e,t){return"function"==typeof e?new Wn(this):this.map((function(n){return jr(n,e,t)}))})),Wn.prototype.reject=function(e){return this.filter(Da(ui(e)))},Wn.prototype.slice=function(e,t){e=gl(e);var n=this;return n.__filtered__&&(e>0||t<0)?new Wn(n):(e<0?n=n.takeRight(-e):e&&(n=n.drop(e)),t!==o&&(n=(t=gl(t))<0?n.dropRight(-t):n.take(t-e)),n)},Wn.prototype.takeRightWhile=function(e){return this.reverse().takeWhile(e).reverse()},Wn.prototype.toArray=function(){return this.take(m)},xr(Wn.prototype,(function(e,t){var n=/^(?:filter|find|map|reject)|While$/.test(t),r=/^(?:head|last)$/.test(t),i=Hn[r?"take"+("last"==t?"Right":""):t],a=r||/^find/.test(t);i&&(Hn.prototype[t]=function(){var t=this.__wrapped__,l=r?[1]:arguments,s=t instanceof Wn,c=l[0],u=s||Wa(t),d=function(e){var t=i.apply(Hn,Dt([e],l));return r&&f?t[0]:t};u&&n&&"function"==typeof c&&1!=c.length&&(s=u=!1);var f=this.__chain__,p=!!this.__actions__.length,h=a&&!f,g=s&&!p;if(!a&&u){t=g?t:new Wn(this);var m=e.apply(t,l);return m.__actions__.push({func:ha,args:[d],thisArg:o}),new Un(m,f)}return h&&g?e.apply(this,l):(m=this.thru(d),h?r?m.value()[0]:m.value():m)})})),It(["pop","push","shift","sort","splice","unshift"],(function(e){var t=je[e],n=/^(?:push|sort|unshift)$/.test(e)?"tap":"thru",r=/^(?:pop|shift)$/.test(e);Hn.prototype[e]=function(){var e=arguments;if(r&&!this.__chain__){var o=this.value();return t.apply(Wa(o)?o:[],e)}return this[n]((function(n){return t.apply(Wa(n)?n:[],e)}))}})),xr(Wn.prototype,(function(e,t){var n=Hn[t];if(n){var r=n.name+"";De.call(Nn,r)||(Nn[r]=[]),Nn[r].push({name:t,func:n})}})),Nn[$o(o,2).name]=[{name:"wrapper",func:o}],Wn.prototype.clone=function(){var e=new Wn(this.__wrapped__);return e.__actions__=jo(this.__actions__),e.__dir__=this.__dir__,e.__filtered__=this.__filtered__,e.__iteratees__=jo(this.__iteratees__),e.__takeCount__=this.__takeCount__,e.__views__=jo(this.__views__),e},Wn.prototype.reverse=function(){if(this.__filtered__){var e=new Wn(this);e.__dir__=-1,e.__filtered__=!0}else(e=this.clone()).__dir__*=-1;return e},Wn.prototype.value=function(){var e=this.__wrapped__.value(),t=this.__dir__,n=Wa(e),r=t<0,o=n?e.length:0,i=function(e,t,n){var r=-1,o=n.length;for(;++r=this.__values__.length;return{done:e,value:e?o:this.__values__[this.__index__++]}},Hn.prototype.plant=function(e){for(var t,n=this;n instanceof Vn;){var r=Fi(n);r.__index__=0,r.__values__=o,t?i.__wrapped__=r:t=r;var i=r;n=n.__wrapped__}return i.__wrapped__=e,t},Hn.prototype.reverse=function(){var e=this.__wrapped__;if(e instanceof Wn){var t=e;return this.__actions__.length&&(t=new Wn(this)),(t=t.reverse()).__actions__.push({func:ha,args:[ta],thisArg:o}),new Un(t,this.__chain__)}return this.thru(ta)},Hn.prototype.toJSON=Hn.prototype.valueOf=Hn.prototype.value=function(){return mo(this.__wrapped__,this.__actions__)},Hn.prototype.first=Hn.prototype.head,Je&&(Hn.prototype[Je]=function(){return this}),Hn}();gt._=_n,(r=function(){return _n}.call(t,n,t,e))===o||(e.exports=r)}.call(this)},5228:function(e){"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var i,a,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),s=1;s