npm - @postenbring/hedwig-css - Versions diffs - 0.0.26 → 0.0.27 - Mend

@postenbring/hedwig-css 0.0.26 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/all-in-one.css.map +1 -1
package/package.json +1 -1

package/dist/all-in-one.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AIQA,mEAYA,8FAeA,uJAiBA,sBASA,wCAYA,2CASA,kCASA,yDASA,+CAWA,8DAaA,8FASA,oCASA,0DASA,4BAWA,gEAQA,iCAQA,0CAaA,0EAaA,qCAQA,wFAQA,0CAQA,yCASA,0CAUA,yEASA,wCAAA,wCASA,sDASA,oDASA,oEAYA,0MAeA,wCAQA,wDAWA,2CAQA,uCASA,6DASA,sDAIA,uFKtWA,0haAgOA,yrEP3NA,oIAOA,sIAOA,qIAOA,mIAUA,0HAMA,8HAMA,4HAMA,wHGjDA,8NAWA,2CAUA,uCAIA,uCAIA,wCASA,+CC5CA,ygBAsBE,oXAeA,2TAUA,0TAcA,wCAIA,+CAGE,yBAAyB,iDAS3B,sKAKE,uJAKA,kJAMF,mJAKE,+HAKA,oIAMF,sQASE,6JAAA,8JAQF,6QASE,yJAAA,0JAQF,gQASE,mHAAA,oHAcA,6OAAA,+OAWA,6MAAA,+MAXA,8OAAA,gPAWA,8MAAA,gNAXA,qPAAA,uPAWA,qNAAA,uNAeF,0GAaE,2EAIE,6EAMF,4EAIE,8EAMF,2EAIE,6EEjON,kTAQE,2JAME,0FANF,4JAME,2FASF,gNAKE,iGAAA,kGAMA,oLAUF,gEAIA,+DAIA,4HAME,qOAQF,mGAIE,qHAAA,sHAOF,iGAQE,mHAAA,iGARF,wFAQE,mHAAA,iGErFJ,iUAcE,wEAAA,yFAKA,qEAMA,4IAAA,+JAOA,wJAMA,mJAMA,4KEhDF,8FAME,+DAIA,gFAME,gKAKE,8FAMF,yEAGE,8FE9BN,+FAME,qDAGE,wDAKF,6CAAA,oCAIA,0CAAA,iCAOA,8DAIE,iDAQF,+FAKA,yCAAA,0DAKA,8FE5CF,uEAGE,sKAKA,sKAMF,uDAGE,sIAKA,sIAMF,uDAGE,sIAKA,sIAMF,wDAGE,wIAKA,wIAMF,oEAGE,gKAKA,gKAMF,qDAGE,kIAKA,kIAMF,iEAGE,0JAKA,0JAMF,iEAGE,0JAKA,0JAMF,6EAGE,kLAKA,kLAMF,2DAIA,uEAIA,+DAGE,sJAKA,sJAMF,2EAGE,8KAKA,8KASF,8FAQA,sFAIA,oGAKA,+PAeA,kHExMA,mKAIE,+DAAA,mFAKA,2EAIA,yGAKA,+EAOA,yBAAyB,kEAOzB,sCASF,yhCAmBE,oFAKA,0GPjEF,yWAIE,yBAAyB,0FAazB,yOASA,gGAGE,8iBAKF,4GAGE,06BAKF,+FAGE,25BAKF,gGAIE,yNASF,kDAAA,wDAMA,8GAAA,qGAIA,+EAIA,yGAGE,yBAAyB,0GEhF7B,wEAMI,6MAAA,0NAAA,8OAAA,iOAAA,2PAAA,8OAAA,6OAAA,iOAYA,glCAWA,2FAAA,8GAMA,kGAKF,+EAIA,mKAMA,iJAKA,uXAWE,8HAAA,+JAAA,kJAMA,sNAAA,yMAAA,qNAAA,yMAUF,6LASE,uGAAA,mGAAA,yFAKA,6CAGE,8FAAA,0FAAA,gFAKF,6GAAA,yGAAA,+FAKF,oLE7GF,qZAKE,yBAAyB,mKAYzB,mDAGE,+HAIA,oFAIA,iZAaE,kHAKA,kQAOE,gNAAA,qNAMA,6HAMA,gMAMJ,2LAIE,+GE3EN,yEAKE,0PAWE,iNAAA,8NAAA,mPAAA,qOAQA,2PAME,u7BAOJ,g7CAgDE,8RAUE,kFAIA,2JAMJ,kHAIA,o0BAoCA,sLEjJF,qEAIE,2LAAA,uLAAA,mLAQA,+OAYA,yBAAyB,yGAazB,uCAKA,uFAQF,wHElDA,onCAYE,oDAAA,sDAWE,iDAKE,oDAKF,oEAIA,8JAQA,6BACE,kDAIA,wDAGE,qIDrDR,gGAKE,wEAKE,8DAGE,yBAAyB,yJAIvB,yKAIE,8IAIA,8HAMJ,6BAAwB,sJAKtB,2IAIE,uOAQN,oJAKE,yIAIE,oOAOJ,gIAOE,kFAIA,iGAMJ,oEEjFF,2EAMI,yNAAA,sOAAA,gQAAA,6OAAA,6QAAA,0PAAA,+PAAA,6OAYA,4lCAWA,oGAAA,0HAMA,8GAKF,qFAIA,yKAMA,mKAKA,gYAWE,uIAAA,8KAAA,2JAMA,qOAAA,kNAAA,oOAAA,kNAUF,sMASE,gHAAA,4GAAA,kGAKA,sDAGE,uGAAA,mGAAA,yFAKF,sHAAA,kHAAA,wGAKF","sources":["../src/all-in-one.css","../src/fonts.css","../src/reset.css","../src/index.css","../src/body.css","../src/../../../node_modules/.pnpm/node_modules/sanitize.css/sanitize.css","../src/button/button.css","../src/tokens.css","../src/link/link.css","../src/../node_modules/@postenbring/hedwig-tokens/tokens-output/css/tokens.css","../src/badge/badge.css","../src/message/message.css","../src/list/description-list.css","../src/input/input.css","../src/list/list.css","../src/accordion/accordion.css","../src/typography/typography.css","../src/select/select.css","../src/box/box.css","../src/modal/modal.css","../src/tabs/tabs.css","../src/breadcrumb/breadcrumb.css","../src/textarea/textarea.css"],"sourcesContent":["@import url(\"reset.css\");\n@import url(\"tokens.css\");\n@import url(\"fonts.css\");\n@import url(\"index.css\");\n","/* https://caniuse.com/woff2 /\n\n/\n Font weight with style linking\n https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/\n /\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 300;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 400;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 500;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 700;\n}\n\n/\n Legacy font-face with an own family for each font\n /\n@font-face {\n font-family: \"Posten Sans Light\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Regular\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Medium\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Bold\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n}\n","/\n CSS Reset to get consistent styling across browsers.\n * Many ways to do this, sanitize.css is the one being used in hedwig legacy.\n /\n@import url(\"../../../node_modules/.pnpm/node_modules/sanitize.css/sanitize.css\");\n","@import url(\"body.css\");\n@import url(\"button/button.css\");\n@import url(\"link/link.css\");\n@import url(\"badge/badge.css\");\n@import url(\"list/description-list.css\");\n@import url(\"list/list.css\");\n@import url(\"typography/typography.css\");\n@import url(\"box/box.css\");\n@import url(\"message/message.css\");\n@import url(\"input/input.css\");\n@import url(\"accordion/accordion.css\");\n@import url(\"select/select.css\");\n@import url(\"modal/modal.css\");\n@import url(\"breadcrumb/breadcrumb.css\");\n@import url(\"tabs/tabs.css\");\n@import url(\"textarea/textarea.css\");\n","/\n * All element selector, and general global styles should be defined in this file\n \n Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n /\n:root {\n box-sizing: border-box;\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n line-height: 1.4;\n cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n background: var(--hds-ui-colors-white);\n}\n\n/\n Default typography for headings\n \n Since hedwig legacy sets default font-family\n * we need to override it to get the correct `Posten Sans`\n /\nh1 {\n font: var(--hds-brand-typography-h1);\n}\n\nh2 {\n font: var(--hds-brand-typography-h2);\n}\n\nh3 {\n font: var(--hds-typography-header-h3);\n}\n\n/\n * Uncommon to use these levels,\n * but default to body-title.\n * The consumer should override to whatever fit's their need\n /\nh4,\nh5,\nh6 {\n font: var(--hds-typography-body-title);\n}\n","/ Document\n * ========================================================================== /\n\n/\n 1. Add border box sizing in all browsers (opinionated).\n * 2. Backgrounds do not repeat by default (opinionated).\n /\n\n,\n::before,\n::after {\n box-sizing: border-box; /* 1 /\n background-repeat: no-repeat; / 2 /\n}\n\n/\n 1. Add text decoration inheritance in all browsers (opinionated).\n * 2. Add vertical alignment inheritance in all browsers (opinionated).\n /\n\n::before,\n::after {\n text-decoration: inherit; / 1 /\n vertical-align: inherit; / 2 /\n}\n\n/\n 1. Use the default cursor in all browsers (opinionated).\n * 2. Change the line height in all browsers (opinionated).\n * 3. Breaks words to prevent overflow in all browsers (opinionated).\n * 4. Use a 4-space tab width in all browsers (opinionated).\n * 5. Remove the grey highlight on links in iOS (opinionated).\n * 6. Prevent adjustments of font size after orientation changes in iOS.\n /\n\n:where(:root) {\n cursor: default; / 1 /\n line-height: 1.5; / 2 /\n overflow-wrap: break-word; / 3 /\n -moz-tab-size: 4; / 4 /\n tab-size: 4; / 4 /\n -webkit-tap-highlight-color: transparent; / 5 /\n -webkit-text-size-adjust: 100%; / 6 /\n}\n\n/ Sections\n * ========================================================================== /\n\n/\n Remove the margin in all browsers (opinionated).\n /\n\n:where(body) {\n margin: 0;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Edge, Firefox, and Safari.\n /\n\n:where(h1) {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n * ========================================================================== /\n\n/\n Remove the margin on nested lists in Chrome, Edge, and Safari.\n /\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n margin: 0;\n}\n\n/\n 1. Correct the inheritance of border color in Firefox.\n * 2. Add the correct box sizing in Firefox.\n /\n\n:where(hr) {\n color: inherit; / 1 /\n height: 0; / 2 /\n}\n\n/\n Remove the list style on navigation lists in all browsers (opinionated).\n /\n\n:where(nav) :where(ol, ul) {\n list-style-type: none;\n padding: 0;\n}\n\n/\n Prevent VoiceOver from ignoring list semantics in Safari (opinionated).\n /\n\n:where(nav li)::before {\n content: \"\\200B\";\n float: left;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n * 3. Prevent overflow of the container in all browsers (opinionated).\n /\n\n:where(pre) {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n overflow: auto; / 3 /\n}\n\n/ Text-level semantics\n * ========================================================================== /\n\n/\n Add the correct text decoration in Safari.\n /\n\n:where(abbr[title]) {\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\n:where(b, strong) {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\n:where(code, kbd, samp) {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\n:where(small) {\n font-size: 80%;\n}\n\n/ Embedded content\n * ========================================================================== /\n\n/\n * Change the alignment on media elements in all browsers (opinionated).\n /\n\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n/\n Remove the border on iframes in all browsers (opinionated).\n /\n\n:where(iframe) {\n border-style: none;\n}\n\n/\n Change the fill color to match the text color in all browsers (opinionated).\n /\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\n/ Tabular data\n * ========================================================================== /\n\n/\n 1. Collapse border spacing in all browsers (opinionated).\n * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.\n * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.\n /\n\n:where(table) {\n border-collapse: collapse; / 1 /\n border-color: inherit; / 2 /\n text-indent: 0; / 3 /\n}\n\n/ Forms\n * ========================================================================== /\n\n/\n Remove the margin on controls in Safari.\n /\n\n:where(button, input, select) {\n margin: 0;\n}\n\n/\n Correct the inability to style buttons in iOS and Safari.\n /\n\n:where(button, [type=\"button\" i], [type=\"reset\" i], [type=\"submit\" i]) {\n -webkit-appearance: button;\n}\n\n/\n Change the inconsistent appearance in all browsers (opinionated).\n /\n\n:where(fieldset) {\n border: 1px solid #a0a0a0;\n}\n\n/\n Add the correct vertical alignment in Chrome, Edge, and Firefox.\n /\n\n:where(progress) {\n vertical-align: baseline;\n}\n\n/\n 1. Remove the margin in Firefox and Safari.\n * 3. Change the resize direction in all browsers (opinionated).\n /\n\n:where(textarea) {\n margin: 0; / 1 /\n resize: vertical; / 3 /\n}\n\n/\n 1. Correct the odd appearance in Chrome, Edge, and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n:where([type=\"search\" i]) {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Safari.\n /\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n Correct the text style of placeholders in Chrome, Edge, and Safari.\n /\n\n::-webkit-input-placeholder {\n color: inherit;\n opacity: 0.54;\n}\n\n/\n Remove the inner padding in Chrome, Edge, and Safari on macOS.\n /\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style upload buttons in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n * ========================================================================== /\n\n/\n * Add the correct styles in Safari.\n /\n\n:where(dialog) {\n background-color: white;\n border: solid;\n color: black;\n height: -moz-fit-content;\n height: fit-content;\n left: 0;\n margin: auto;\n padding: 1em;\n position: absolute;\n right: 0;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n:where(dialog:not([open])) {\n display: none;\n}\n\n/\n * Add the correct display in Safari.\n /\n\n:where(details > summary:first-of-type) {\n display: list-item;\n}\n\n/ Accessibility\n * ========================================================================== /\n\n/\n Change the cursor on busy elements in all browsers (opinionated).\n /\n\n:where([aria-busy=\"true\" i]) {\n cursor: progress;\n}\n\n/\n * Change the cursor on control elements in all browsers (opinionated).\n /\n\n:where([aria-controls]) {\n cursor: pointer;\n}\n\n/\n * Change the cursor on disabled, not-editable, or otherwise\n * inoperable elements in all browsers (opinionated).\n /\n\n:where([aria-disabled=\"true\" i], [disabled]) {\n cursor: not-allowed;\n}\n\n/\n * Change the display on visually hidden accessible elements\n * in all browsers (opinionated).\n /\n\n:where([aria-hidden=\"false\" i][hidden]) {\n display: initial;\n}\n\n:where([aria-hidden=\"false\" i][hidden]:not(:focus)) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n",".hds-button {\n --hds-component-button-border-width: 0px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-block;\n border-style: solid;\n border-radius: var(--hds-border-radius);\n border-width: var(--hds-component-button-border-width);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n\n / When used as a link (<a>) /\n text-decoration: none;\n text-align: center;\n\n /\n Modifiers: sizes\n /\n &.hds-button--small {\n / In figma, the actual padding for the text is 10px /\n --hds-component-button-small-y-padding: 10px;\n\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: calc(\n var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width)\n )\n calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 44px;\n }\n\n &.hds-button--medium {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 50px;\n }\n\n &.hds-button--large {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 58px;\n }\n\n /\n Modifiers: Width\n /\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n width: 100%;\n\n @media (width >= 720px) {\n width: unset;\n }\n }\n\n /\n Modifiers: Variants\n /\n\n &.hds-button--primary {\n background-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n\n &:hover {\n background-color: var(--hds-brand-colors-signature-hover);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n }\n\n &.hds-button--secondary {\n background-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover {\n background-color: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-darker);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-primary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border-color: var(--hds-brand-colors-dark);\n }\n }\n\n &.hds-button--outline-secondary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-white {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n }\n }\n\n /\n State: Disabled\n /\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n &.hds-button--primary,\n &.hds-button--secondary {\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n outline: 0;\n box-shadow: none;\n cursor: default;\n }\n\n &.hds-button--outline-primary,\n &.hds-button--outline-secondary {\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: transparent;\n cursor: default;\n }\n }\n\n /\n Variant: Icon only\n * TODO: Support text + icon on either left or right side.\n * See button component in digdir/designsystemet and nav/aksel\n /\n &.hds-button--icon-only {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n /\n Modifiers: sizes\n \n TODO: Consider/figure out using css variables for these values\n * must make sense, not just choosing a value that matches for the sake of it\n /\n\n &.hds-button--small {\n height: 44px;\n width: 44px;\n\n & {\n height: 24px;\n width: 24px;\n }\n }\n\n &.hds-button--medium {\n height: 50px;\n width: 50px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n\n &.hds-button--large {\n height: 58px;\n width: 58px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n }\n}\n","@import url(\"../node_modules/@postenbring/hedwig-tokens/tokens-output/css/tokens.css\");\n","/*\n Block\n /\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /\n Modifers\n /\n\n &.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentcolor;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentcolor;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentcolor;\n border-color: currentcolor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &.hds-link--small {\n font: var(--hds-typography-body-small);\n }\n\n &.hds-link--large {\n font: var(--hds-typography-header-h3);\n }\n\n &.hds-link--no-underline {\n font-weight: 500;\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n\n &:is(button) {\n padding: 0;\n background: none;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n\n / Button inherits the font size from the user agent by default /\n &:not(.hds-link--small, .hds-link--large) {\n font: var(--hds-typography-body);\n }\n }\n}\n","\n:root {\n --hds-posten-colors-signature-red: #e32d22;\n --hds-posten-colors-darker-red: #4a1011;\n --hds-posten-colors-dark-red: #980000;\n --hds-posten-colors-light-red: #ff8a5f;\n --hds-posten-colors-lighter-red: #fff5f0;\n --hds-posten-colors-signature-red-hover: #d62722;\n --hds-posten-colors-light-red-hover: #ff7d55;\n --hds-bring-colors-signature-green: #7bc144;\n --hds-bring-colors-darker-green: #002f19;\n --hds-bring-colors-dark-green: #00643a;\n --hds-bring-colors-light-green: #c8dc8c;\n --hds-bring-colors-lighter-green: #f1f7e9;\n --hds-bring-colors-signature-green-hover: #86cc4a;\n --hds-bring-colors-light-green-hover: #d3e593;\n --hds-ui-colors-black: #000000;\n --hds-ui-colors-dark-grey: #6e6e6e;\n --hds-ui-colors-grey: #d6d6d6;\n --hds-ui-colors-light-grey-stroke: #e4e4e4;\n --hds-ui-colors-light-grey-fill: #f2f2f2;\n --hds-ui-colors-white: #ffffff;\n --hds-ui-colors-warning-yellow: #fdbb2f;\n --hds-ui-colors-warning-yellow-stroke: #d68000;\n --hds-ui-colors-warning-yellow-light-fill: #fff5e0;\n --hds-ui-colors-warning-yellow-hover: #ffc340;\n --hds-ui-colors-black-hover: #1e1e1e;\n --hds-dark-mode-colors-obsidian: #121212; / Base color for dark mode /\n --hds-dark-mode-colors-coal: #252525; / Background on none-clickable cards /\n --hds-dark-mode-colors-dusk: #2c2c2c; / Fill inputfields, checkbox, radiobuttons, toogles /\n --hds-dark-mode-colors-spider: #333333; / Clickable cards or tiles /\n --hds-dark-mode-colors-ash: #999999; / Default radio buttons, checkbox, label on inputsfields, toogle off (background) /\n --hds-spacing-small-1: 4px;\n --hds-spacing-small-2: 8px;\n --hds-spacing-small-3: 12px;\n --hds-spacing-small-4: 16px;\n --hds-spacing-medium-1: 20px;\n --hds-spacing-medium-2: 24px;\n --hds-spacing-medium-3: 32px;\n --hds-spacing-medium-4: 40px;\n --hds-spacing-large-1: 48px;\n --hds-spacing-large-2: 64px;\n --hds-spacing-large-3: 80px;\n --hds-spacing-large-4: 120px;\n --hds-spacing-large-5: 160px;\n --hds-fonts-posten-sans: 'Posten Sans', Arial, sans-serif;\n --hds-fonts-posten-sans-bold: 'Posten Sans Bold', Arial, sans-serif;\n --hds-fonts-posten-sans-medium: 'Posten Sans Medium', Arial, sans-serif;\n --hds-fonts-posten-sans-regular: 'Posten Sans Regular', Arial, sans-serif;\n --hds-fonts-posten-sans-light: 'Posten Sans Light', Arial, sans-serif;\n --hds-typography-posten-h1-display: 700 clamp(40px,calc(40px + (72 - 40) ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-posten-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-posten-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h1-display: 300 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h1: 300 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h2: 400 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-header-h3: 400 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-header-h3-title: 500 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body: 400 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-title: 500 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-small: 400 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-small-title: 500 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-technical: 400 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-technical-title: 500 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-caption: 400 13px/18px 'Posten Sans', Arial, sans-serif;\n --hds-typography-caption-title: 500 13px/18px 'Posten Sans', Arial, sans-serif;\n --hds-border-radius: 2px;\n --hds-stroke-default: 1px;\n --hds-stroke-thick: 2px;\n --hds-shadow-default: 0px 1px 5px 0px #00000022;\n --hds-micro-animation-easing-in: cubic-bezier(0.65, 0, 1, 0.1);\n --hds-micro-animation-easing-out: cubic-bezier(0, 0.45, 0.1, 1);\n --hds-micro-animation-easing-normal: cubic-bezier(0.45, 0.1, 0.65, 1);\n --hds-font-size-posten-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-font-size-posten-h1-display-min: 40px;\n --hds-font-size-posten-h1-display-max: 72px;\n --hds-font-size-posten-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-font-size-posten-h1-min: 32px;\n --hds-font-size-posten-h1-max: 48px;\n --hds-font-size-posten-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-font-size-posten-h2-min: 28px;\n --hds-font-size-posten-h2-max: 32px;\n --hds-font-size-bring-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-font-size-bring-h1-display-min: 40px;\n --hds-font-size-bring-h1-display-max: 72px;\n --hds-font-size-bring-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-font-size-bring-h1-min: 32px;\n --hds-font-size-bring-h1-max: 48px;\n --hds-font-size-bring-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-font-size-bring-h2-min: 28px;\n --hds-font-size-bring-h2-max: 32px;\n --hds-font-size-header-h3: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-font-size-header-h3-min: 22px;\n --hds-font-size-header-h3-max: 24px;\n --hds-font-size-header-h3-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-font-size-header-h3-title-min: 22px;\n --hds-font-size-header-h3-title-max: 24px;\n --hds-font-size-body: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);\n --hds-font-size-body-min: 18px;\n --hds-font-size-body-max: 20px;\n --hds-font-size-body-title: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);\n --hds-font-size-body-title-min: 18px;\n --hds-font-size-body-title-max: 20px;\n --hds-font-size-body-small: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);\n --hds-font-size-body-small-min: 16px;\n --hds-font-size-body-small-max: 18px;\n --hds-font-size-body-small-title: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);\n --hds-font-size-body-small-title-min: 16px;\n --hds-font-size-body-small-title-max: 18px;\n --hds-font-size-technical: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);\n --hds-font-size-technical-min: 14px;\n --hds-font-size-technical-max: 16px;\n --hds-font-size-technical-title: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);\n --hds-font-size-technical-title-min: 14px;\n --hds-font-size-technical-title-max: 16px;\n --hds-font-size-caption: 13px;\n --hds-font-size-caption-title: 13px;\n --hds-line-height-posten-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-line-height-posten-h1-display-min: 56px;\n --hds-line-height-posten-h1-display-max: 80px;\n --hds-line-height-posten-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-line-height-posten-h1-min: 40px;\n --hds-line-height-posten-h1-max: 56px;\n --hds-line-height-posten-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-line-height-posten-h2-min: 36px;\n --hds-line-height-posten-h2-max: 40px;\n --hds-line-height-bring-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-line-height-bring-h1-display-min: 56px;\n --hds-line-height-bring-h1-display-max: 80px;\n --hds-line-height-bring-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-line-height-bring-h1-min: 40px;\n --hds-line-height-bring-h1-max: 56px;\n --hds-line-height-bring-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-line-height-bring-h2-min: 36px;\n --hds-line-height-bring-h2-max: 40px;\n --hds-line-height-header-h3: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-line-height-header-h3-min: 28px;\n --hds-line-height-header-h3-max: 32px;\n --hds-line-height-header-h3-title: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-line-height-header-h3-title-min: 28px;\n --hds-line-height-header-h3-title-max: 32px;\n --hds-line-height-body: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);\n --hds-line-height-body-min: 26px;\n --hds-line-height-body-max: 28px;\n --hds-line-height-body-title: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);\n --hds-line-height-body-title-min: 26px;\n --hds-line-height-body-title-max: 28px;\n --hds-line-height-body-small: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);\n --hds-line-height-body-small-min: 24px;\n --hds-line-height-body-small-max: 26px;\n --hds-line-height-body-small-title: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);\n --hds-line-height-body-small-title-min: 24px;\n --hds-line-height-body-small-title-max: 26px;\n --hds-line-height-technical: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-line-height-technical-min: 22px;\n --hds-line-height-technical-max: 24px;\n --hds-line-height-technical-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-line-height-technical-title-min: 22px;\n --hds-line-height-technical-title-max: 24px;\n --hds-line-height-caption: 18px;\n --hds-line-height-caption-title: 18px;\n --hds-font-weight-posten-h1-display: 700;\n --hds-font-weight-posten-h1: 700;\n --hds-font-weight-posten-h2: 500;\n --hds-font-weight-bring-h1-display: 300;\n --hds-font-weight-bring-h1: 300;\n --hds-font-weight-bring-h2: 400;\n --hds-font-weight-header-h3: 400;\n --hds-font-weight-header-h3-title: 500;\n --hds-font-weight-body: 400;\n --hds-font-weight-body-title: 500;\n --hds-font-weight-body-small: 400;\n --hds-font-weight-body-small-title: 500;\n --hds-font-weight-technical: 400;\n --hds-font-weight-technical-title: 500;\n --hds-font-weight-caption: 400;\n --hds-font-weight-caption-title: 500;\n --hds-micro-animation-duration-quick: 0.130s;\n --hds-micro-animation-duration-normal: 0.300s;\n --hds-micro-animation-duration-slow: 0.700s;\n --hds-breakpoints-small: 460px;\n --hds-breakpoints-medium: 720px;\n --hds-breakpoints-large: 940px;\n --hds-breakpoints-xlarge: 1200px;\n --hds-opacity-7: .07;\n --hds-opacity-10: .1;\n --hds-opacity-20: .2;\n --hds-opacity-50: .5;\n --hds-brand-colors-signature: #e32d22;\n --hds-brand-colors-darker: #4a1011;\n --hds-brand-colors-dark: #980000;\n --hds-brand-colors-light: #ff8a5f;\n --hds-brand-colors-lighter: #fff5f0;\n --hds-brand-colors-signature-hover: #d62722;\n --hds-brand-colors-light-hover: #ff7d55;\n --hds-brand-button-colors-text: #ffffff;\n --hds-brand-link-colors-text: #000000;\n --hds-brand-link-colors-underline: #e32d22;\n --hds-brand-link-colors-hover: #e32d22;\n --hds-brand-link-colors-underline-hover: #e32d22;\n --hds-brand-typography-h1-display: 700 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-brand-font-size-h1-display-min: 40px;\n --hds-brand-font-size-h1-display-max: 72px;\n --hds-brand-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-brand-font-size-h1-min: 32px;\n --hds-brand-font-size-h1-max: 48px;\n --hds-brand-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-brand-font-size-h2-min: 28px;\n --hds-brand-font-size-h2-max: 32px;\n --hds-brand-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-brand-line-height-h1-display-min: 56px;\n --hds-brand-line-height-h1-display-max: 80px;\n --hds-brand-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-brand-line-height-h1-min: 40px;\n --hds-brand-line-height-h1-max: 56px;\n --hds-brand-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-brand-line-height-h2-min: 36px;\n --hds-brand-line-height-h2-max: 40px;\n --hds-brand-font-weight-h1-display: 700;\n --hds-brand-font-weight-h1: 700;\n --hds-brand-font-weight-h2: 500;\n}\n.hds-theme-bring {\n --hds-brand-colors-signature: #7bc144;\n --hds-brand-colors-darker: #002f19;\n --hds-brand-colors-dark: #00643a;\n --hds-brand-colors-light: #c8dc8c;\n --hds-brand-colors-lighter: #f1f7e9;\n --hds-brand-colors-signature-hover: #86cc4a;\n --hds-brand-colors-light-hover: #d3e593;\n --hds-brand-button-colors-text: #000000;\n --hds-brand-link-colors-text: #000000;\n --hds-brand-link-colors-underline: #7bc144;\n --hds-brand-link-colors-hover: #00643a;\n --hds-brand-link-colors-underline-hover: #00643a;\n --hds-brand-typography-h1-display: 300 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h1: 300 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h2: 400 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-brand-font-size-h1-display-min: 40px;\n --hds-brand-font-size-h1-display-max: 72px;\n --hds-brand-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-brand-font-size-h1-min: 32px;\n --hds-brand-font-size-h1-max: 48px;\n --hds-brand-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-brand-font-size-h2-min: 28px;\n --hds-brand-font-size-h2-max: 32px;\n --hds-brand-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-brand-line-height-h1-display-min: 56px;\n --hds-brand-line-height-h1-display-max: 80px;\n --hds-brand-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-brand-line-height-h1-min: 40px;\n --hds-brand-line-height-h1-max: 56px;\n --hds-brand-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-brand-line-height-h2-min: 36px;\n --hds-brand-line-height-h2-max: 40px;\n --hds-brand-font-weight-h1-display: 300;\n --hds-brand-font-weight-h1: 300;\n --hds-brand-font-weight-h2: 400;\n}\n","/*\n Block\n /\n\n.hds-badge {\n display: inline-block;\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n text-transform: uppercase;\n line-height: 1.1;\n font-size: 12px; / For now, this might be changed later /\n font-weight: 500;\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n / Size variations /\n\n &, / Default /\n &.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &.hds-badge--smaller {\n padding: 2px var(--hds-spacing-small-1);\n }\n\n / Color variations /\n\n &, / Default /\n &.hds-badge--lighter {\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n }\n}\n",".hds-box.hds-message {\n --hds-component-message-icon-width: var(--hds-spacing-medium-3);\n --hds-component-message-spacing-between: var(--hds-spacing-small-4);\n\n @media (width >= 720px) {\n --hds-component-message-spacing-between: var(--hds-spacing-medium-2);\n }\n\n / stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- Comes from `box.css` /\n --hds-component-message-padding: var(--hds-component-box-padding);\n\n padding-left: calc(\n var(--hds-component-message-padding) + var(--hds-component-message-icon-width) +\n var(--hds-component-message-spacing-between)\n );\n\n / Icon placement /\n &::before {\n content: \"\";\n position: absolute;\n top: var(--hds-component-message-padding);\n left: var(--hds-component-message-padding);\n width: var(--hds-component-message-icon-width);\n height: var(--hds-component-message-icon-width);\n }\n\n &.hds-message--success {\n background-color: var(--hds-ui-colors-light-grey-fill);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M27.6412 7.54758C28.3713 8.22153 28.3713 9.40094 27.6412 10.0749L13.2636 24.4524C12.5897 25.1825 11.4103 25.1825 10.7363 24.4524L3.54758 17.2637C2.81747 16.5897 2.81747 15.4103 3.54758 14.7363C4.22153 14.0062 5.40094 14.0062 6.07488 14.7363L11.9719 20.6334L25.1139 7.54758C25.7878 6.81747 26.9672 6.81747 27.6412 7.54758Z\" fill=\"%237BC144\"/></svg>');\n }\n }\n\n &.hds-message--attention {\n background-color: var(--hds-ui-colors-warning-yellow-light-fill);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M29.0323 23.7656C29.8537 25.2031 28.8269 27 27.1327 27H5.21084C3.51664 27 2.48986 25.2031 3.25994 23.7656L14.2466 5.07812C14.7086 4.35938 15.4274 4 16.1974 4C16.9162 4 17.6349 4.35938 18.097 5.07812L29.0323 23.7656ZM5.72423 24.5357H26.6193L16.1461 6.72098L5.72423 24.5357ZM16.1974 19.7098C17.0702 19.7098 17.789 20.4286 17.789 21.3013C17.789 22.1741 17.0702 22.8929 16.1974 22.8929C15.2733 22.8929 14.5546 22.1741 14.5546 21.3013C14.5546 20.4286 15.2733 19.7098 16.1974 19.7098ZM14.9653 11.8036C14.9653 11.1362 15.4787 10.5714 16.1974 10.5714C16.8649 10.5714 17.4296 11.1362 17.4296 11.8036V16.7321C17.4296 17.4509 16.8649 17.9643 16.1974 17.9643C15.4787 17.9643 14.9653 17.4509 14.9653 16.7321V11.8036Z\" fill=\"black\"/></svg>');\n }\n }\n\n &.hds-message--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"12\" y=\"10\" width=\"8\" height=\"14.6667\" rx=\"4\" fill=\"%23FDBB2F\"/><path d=\"M29.0094 24.7656C29.8308 26.2031 28.804 28 27.1098 28H5.18794C3.49374 28 2.46695 26.2031 3.28838 24.7656L14.275 6.07812C15.0964 4.64062 17.2013 4.64062 18.0741 6.07812L29.0094 24.7656ZM14.9424 11.9821V18.5536C14.9424 19.2723 15.5585 19.7857 16.1745 19.7857C16.842 19.7857 17.4067 19.2723 17.4067 18.5536V11.9821C17.4067 11.3147 16.842 10.75 16.1745 10.75C15.4558 10.75 14.9424 11.3147 14.9424 11.9821ZM16.1745 24.7143C17.0473 24.7143 17.7661 23.9955 17.7661 23.1228C17.7661 22.25 17.0473 21.5312 16.1745 21.5312C15.2504 21.5312 14.5317 22.25 14.5317 23.1228C14.5317 23.9955 15.2504 24.7143 16.1745 24.7143Z\" fill=\"black\"/></svg>');\n }\n }\n\n &.hds-message--neutral {\n background-color: var(--hds-ui-colors-light-grey-fill);\n\n / stylelint-disable-next-line selector-class-pattern -- Custom icon is only available for the neutral variant /\n .hds-message--neutral__icon {\n position: absolute;\n top: var(--hds-component-message-padding);\n left: var(--hds-component-message-padding);\n width: var(--hds-component-message-icon-width);\n }\n }\n\n / Reset margin /\n & .hds-message__title,\n & .hds-message__description {\n margin: 0;\n }\n\n / Offset to match the icon /\n & :is(.hds-message__title, .hds-message__description):first-of-type {\n margin-top: 2px;\n }\n\n & .hds-message__title {\n font: var(--hds-typography-body-title);\n }\n\n & .hds-message__title ~ .hds-message__description {\n margin-top: var(--hds-spacing-small-3);\n\n @media (width >= 940px) {\n margin-top: var(--hds-spacing-small-4);\n }\n }\n}\n",".hds-description-list {\n list-style: none;\n margin: 0;\n padding-left: 0;\n font: var(--hds-typography-body);\n\n & dt {\n font: var(--hds-typography-body-title);\n }\n\n & dd {\n margin-left: 0;\n margin-bottom: var(--hds-spacing-small-3);\n }\n\n &.hds-description-list--horizontal {\n & dt {\n display: inline-block;\n margin-right: var(--hds-spacing-small-1);\n margin-bottom: var(--hds-spacing-small-2);\n\n &::after {\n content: \"\\a\";\n white-space: pre;\n }\n }\n\n & dd {\n display: inline;\n\n &::after {\n content: \"\\a\";\n white-space: pre;\n }\n }\n }\n}\n",".hds-input {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n &.hds-input--error {\n .hds-input__input-wrapper,\n .hds-input__input-wrapper:focus-within,\n .hds-input__input-wrapper:has(.hds-input__input:read-only),\n .hds-input__input-wrapper[data-readonly=\"true\"] /* Fallback for :has /,\n .hds-input__input-wrapper:has(.hds-input__input:read-only):focus-within,\n .hds-input__input-wrapper[data-readonly=\"true\"]:focus-within / Fallback for :has /,\n .hds-input__input-wrapper:has(.hds-input__input:disabled),\n .hds-input__input-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-input__input-wrapper {\n background-image: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n }\n }\n\n &, / Default /\n &.hds-input--default {\n .hds-input__input-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n }\n\n &.hds-input--white {\n .hds-input__input-wrapper {\n background-color: var(--hds-ui-colors-white);\n }\n }\n\n &:focus-within .hds-input__label {\n color: var(--hds-brand-colors-darker);\n }\n\n & .hds-input__label {\n transition: color var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n }\n\n &:has(.hds-input__input:read-only, .hds-input__input:disabled):not(:focus-within)\n .hds-input__label {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n & .hds-input__input-wrapper {\n display: flex;\n flex-flow: row nowrap;\n width: 100%;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n transition:\n border var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal),\n margin var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n box-sizing: border-box;\n\n &:focus-within,\n &:has(.hds-input__input:read-only):focus-within,\n &[data-readonly=\"true\"]:focus-within / Fallback for :has / {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n\n &:has(.hds-input__input:read-only),\n &[data-readonly=\"true\"] / Fallback for :has /,\n &:has(.hds-input__input:disabled),\n &[data-disabled=\"true\"] / Fallback for :has / {\n color: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border: var(--hds-stroke-default) solid var(--hds-ui-colors-grey);\n }\n }\n\n & .hds-input__input {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n\n &::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n opacity: 1;\n }\n\n &:focus {\n outline: 0;\n\n &::placeholder {\n color: var(--hds-ui-colors-grey);\n }\n }\n\n &:read-only:focus::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n & .hds-input__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n",".hds-list {\n margin: 0;\n display: flex;\n flex-direction: column;\n padding-left: var(--hds-spacing-medium-3);\n\n & li {\n padding-left: var(--hds-spacing-small-2);\n\n &::marker {\n color: var(--hds-brand-colors-dark);\n }\n }\n\n &:is(ol) {\n list-style: decimal;\n }\n\n &:is(ul) {\n list-style: disc;\n }\n\n /\n Modifers: Style\n /\n &.hds-list--no-bullets {\n list-style: none;\n padding-left: 0;\n\n & li {\n padding-left: 0;\n }\n }\n\n /\n Modifers: Sizes\n /\n &.hds-list--small {\n font: var(--hds-typography-body-small);\n gap: var(--hds-spacing-small-1);\n }\n\n &, / Default /\n &.hds-list--medium {\n gap: var(--hds-spacing-small-2);\n }\n\n &.hds-list--large {\n font: var(--hds-typography-header-h3);\n gap: var(--hds-spacing-small-3);\n }\n}\n",".hds-accordion {\n --hds-accordion-icon-dimension: 24px;\n --hds-component-accordion-trigger-spacing-between: var(--hds-spacing-small-4);\n --hds-component-accordion-content-spacing: var(--hds-spacing-medium-3);\n\n @media (width >= 720px) {\n --hds-component-accordion-content-spacing: var(--hds-spacing-large-1);\n --hds-component-accordion-trigger-spacing-between: var(--hds-spacing-medium-2);\n }\n\n display: block;\n border: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-stroke);\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n\n .hds-accordion-item {\n overflow: hidden;\n\n &.hds-accordion-item__expanded .hds-accordion-item-trigger {\n color: var(--hds-brand-colors-dark);\n }\n\n &:first-child .hds-accordion-item-trigger {\n border: 0 none;\n }\n\n .hds-accordion-item-trigger {\n cursor: pointer;\n display: grid;\n grid-template-columns: 24px auto;\n grid-gap: var(--hds-spacing-small-4);\n width: 100%;\n padding: var(--hds-component-accordion-trigger-spacing-between) 0;\n border: 0;\n border-top: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-stroke);\n text-align: left;\n background-color: transparent;\n font: var(--hds-typography-body);\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n outline: 0;\n }\n\n .hds-accordion-item-trigger--icon {\n transition: all 0.05s ease;\n display: inline-block;\n color: var(--hds-brand-colors-dark);\n width: var(--hds-accordion-icon-dimension);\n height: var(--hds-accordion-icon-dimension);\n\n .hds-accordion-item-trigger--icon-chevron,\n .hds-accordion-item-trigger--icon-chevron-down {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n }\n\n & svg {\n vertical-align: baseline;\n }\n }\n\n &.hds-accordion-item-trigger--open {\n .hds-accordion-item-trigger--icon svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .hds-accordion-item-content {\n padding: 0 0 var(--hds-component-accordion-content-spacing) var(--hds-spacing-medium-4);\n font: var(--hds-typography-body-small);\n\n &.hds-accordion-item-content--closed {\n display: none;\n }\n }\n }\n}\n","/\n Font\n /\n.hds-typography-h1-display {\n font: var(--hds-brand-typography-h1-display);\n\n &.hds-typography-h1-display--min {\n font-size: var(--hds-brand-font-size-h1-display-min);\n line-height: var(--hds-brand-line-height-h1-display-min);\n }\n\n &.hds-typography-h1-display--max {\n font-size: var(--hds-brand-font-size-h1-display-max);\n line-height: var(--hds-brand-line-height-h1-display-max);\n }\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n\n &.hds-typography-h1--min {\n font-size: var(--hds-brand-font-size-h1-min);\n line-height: var(--hds-brand-line-height-h1-min);\n }\n\n &.hds-typography-h1--max {\n font-size: var(--hds-brand-font-size-h1-max);\n line-height: var(--hds-brand-line-height-h1-max);\n }\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n\n &.hds-typography-h2--min {\n font-size: var(--hds-brand-font-size-h2-min);\n line-height: var(--hds-brand-line-height-h2-min);\n }\n\n &.hds-typography-h2--max {\n font-size: var(--hds-brand-font-size-h2-max);\n line-height: var(--hds-brand-line-height-h2-max);\n }\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n\n &.hds-typography-h3--min {\n font-size: var(--hds-font-size-header-h3-min);\n line-height: var(--hds-line-height-header-h3-min);\n }\n\n &.hds-typography-h3--max {\n font-size: var(--hds-font-size-header-h3-max);\n line-height: var(--hds-line-height-header-h3-max);\n }\n}\n\n.hds-typography-h3-title {\n font: var(--hds-typography-header-h3-title);\n\n &.hds-typography-h3-title--min {\n font-size: var(--hds-font-size-header-h3-title-min);\n line-height: var(--hds-line-height-header-h3-title-min);\n }\n\n &.hds-typography-h3-title--max {\n font-size: var(--hds-font-size-header-h3-title-max);\n line-height: var(--hds-line-height-header-h3-title-max);\n }\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n\n &.hds-typography-body--min {\n font-size: var(--hds-font-size-body-min);\n line-height: var(--hds-line-height-body-min);\n }\n\n &.hds-typography-body--max {\n font-size: var(--hds-font-size-body-max);\n line-height: var(--hds-line-height-body-max);\n }\n}\n\n.hds-typography-body-title {\n font: var(--hds-typography-body-title);\n\n &.hds-typography-body-title--min {\n font-size: var(--hds-font-size-body-title-min);\n line-height: var(--hds-line-height-body-title-min);\n }\n\n &.hds-typography-body-title--max {\n font-size: var(--hds-font-size-body-title-max);\n line-height: var(--hds-line-height-body-title-max);\n }\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n\n &.hds-typography-body-small--min {\n font-size: var(--hds-font-size-body-small-min);\n line-height: var(--hds-line-height-body-small-min);\n }\n\n &.hds-typography-body-small--max {\n font-size: var(--hds-font-size-body-small-max);\n line-height: var(--hds-line-height-body-small-max);\n }\n}\n\n.hds-typography-body-small-title {\n font: var(--hds-typography-body-small-title);\n\n &.hds-typography-body-small-title--min {\n font-size: var(--hds-font-size-body-small-title-min);\n line-height: var(--hds-line-height-body-small-title-min);\n }\n\n &.hds-typography-body-small-title--max {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n }\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n}\n\n.hds-typography-caption-title {\n font: var(--hds-typography-caption-title);\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n\n &.hds-typography-technical--min {\n font-size: var(--hds-font-size-technical-min);\n line-height: var(--hds-line-height-technical-min);\n }\n\n &.hds-typography-technical--max {\n font-size: var(--hds-font-size-technical-max);\n line-height: var(--hds-line-height-technical-max);\n }\n}\n\n.hds-typography-technical-title {\n font: var(--hds-typography-technical-title);\n\n &.hds-typography-technical-title--min {\n font-size: var(--hds-font-size-technical-title-min);\n line-height: var(--hds-line-height-technical-title-min);\n }\n\n &.hds-typography-technical-title--max {\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n }\n}\n\n/\n Spacing\n /\n.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h1 ~ .hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n}\n\n.hds-typography-h3--spacing,\n.hds-typography-h3-title--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-body--spacing,\n.hds-typography-body-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-body-small--spacing,\n.hds-typography-body-small-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-caption--spacing,\n.hds-typography-caption-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-technical--spacing,\n.hds-typography-technical-title--spacing {\n margin-top: var(--hds-spacing-small-1);\n}\n",".hds-select {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n & label.hds-select__label {\n transition: color var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n color: var(--hds-ui-colors-black);\n margin-bottom: 0;\n display: block;\n text-align: left;\n }\n\n &.hds-select--error {\n .hds-select__select-wrapper,\n .hds-select__select-wrapper:focus-within,\n .hds-select__select-wrapper:has(.hds-select__select:disabled),\n .hds-select__select-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-select__select-wrapper {\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n\n &::after {\n content: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n padding-top: var(--hds-spacing-small-4);\n }\n }\n }\n\n & .hds-select__select-wrapper {\n display: flex;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n font: var(--hds-typography-body-small);\n width: 100%;\n height: 58px; / should this be a token? /\n cursor: pointer;\n transition:\n border-color var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-normal),\n max-height var(--hds-micro-animation-duration-normal) var(--hds-micro-animation-easing-normal),\n transform var(--hds-micro-animation-duration-normal) var(--hds-micro-animation-easing-normal);\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-image:\n linear-gradient(45deg, transparent 74%, var(--hds-ui-colors-light-grey-fill) 0%),\n linear-gradient(135deg, var(--hds-ui-colors-light-grey-fill) 26%, transparent 26%),\n / Draw the arrow /\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 72%,\n var(--hds-ui-colors-light-grey-fill) 73%,\n var(--hds-ui-colors-light-grey-fill) 100%\n ),\n linear-gradient(\n 45deg,\n var(--hds-ui-colors-light-grey-fill) 0,\n var(--hds-ui-colors-light-grey-fill) 28%,\n var(--hds-ui-colors-dark-grey) 29%,\n var(--hds-ui-colors-dark-grey) 37%,\n transparent 38%,\n transparent 100%\n ),\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 62%,\n var(--hds-ui-colors-dark-grey) 63%,\n var(--hds-ui-colors-dark-grey) 71%,\n var(--hds-ui-colors-light-grey-fill) 72%,\n var(--hds-ui-colors-light-grey-fill) 100%\n );\n background-size: var(--hds-spacing-small-4) var(--hds-spacing-small-4);\n background-position: calc(100% - var(--hds-spacing-small-4)) 45%;\n background-repeat: no-repeat;\n\n & select.hds-select__select {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n appearance: none; / Hide default arrow /\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n }\n }\n\n &.hds-select--default .hds-select__select-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-select--white .hds-select__select-wrapper {\n background-color: var(--hds-ui-colors-white);\n background-image:\n / Cut off the sharp ends of the arrow /\n linear-gradient(45deg, transparent 74%, var(--hds-ui-colors-white) 0%),\n linear-gradient(135deg, var(--hds-ui-colors-white) 26%, transparent 26%),\n / Draw the arrow /\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 72%,\n var(--hds-ui-colors-white) 73%,\n var(--hds-ui-colors-white) 100%\n ),\n linear-gradient(\n 45deg,\n var(--hds-ui-colors-white) 0,\n var(--hds-ui-colors-white) 28%,\n var(--hds-ui-colors-dark-grey) 29%,\n var(--hds-ui-colors-dark-grey) 37%,\n transparent 38%,\n transparent 100%\n ),\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 62%,\n var(--hds-ui-colors-dark-grey) 63%,\n var(--hds-ui-colors-dark-grey) 71%,\n var(--hds-ui-colors-white) 72%,\n var(--hds-ui-colors-white) 100%\n );\n background-size: var(--hds-spacing-small-4) var(--hds-spacing-small-4);\n background-repeat: no-repeat;\n }\n\n & .hds-select__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n",".hds-box {\n position: relative;\n border-radius: var(--hds-border-radius);\n\n &, / Default /\n &.hds-box--light-grey {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-box--lighter {\n background-color: var(--hds-brand-colors-lighter);\n }\n\n &.hds-box--white {\n background-color: var(--hds-ui-colors-white);\n box-shadow: var(--hds-shadow-default);\n }\n\n &.hds-box--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n }\n\n / Padding /\n --hds-component-box-padding: var(--hds-spacing-medium-2);\n\n @media (width >= 720px) {\n --hds-component-box-padding: var(--hds-spacing-medium-3);\n }\n\n padding: var(--hds-component-box-padding);\n\n / Closed state /\n &.hds-box--closed {\n display: none;\n }\n}\n\n/\n Close button\n * TODO: Styling for the hover and focus effect can be improved upon\n /\n.hds-box .hds-box__close-button {\n / Icon /\n width: 24px;\n height: 24px;\n background: transparent;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>');\n\n / Positioning /\n position: absolute;\n top: var(--hds-spacing-small-4);\n right: var(--hds-spacing-small-4);\n padding: 0;\n border: none;\n cursor: pointer;\n\n / Hover effect /\n transition: filter var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n\n &:hover {\n filter: invert(40%);\n }\n\n / Active effect /\n &:active {\n outline: none;\n box-shadow: 0 0 0 2px var(--hds-ui-colors-black-hover);\n }\n}\n",".hds-modal {\n / Reset /\n border: none;\n\n &::backdrop {\n / Need to hardcode values in css for now.\n https://stackoverflow.com/questions/58818299/css-variables-not-working-in-dialogbackdrop\n /\n background-color: rgba(0 0 0 / 40%);\n animation: hds-modal-fade-in 0.3s cubic-bezier(0.45, 0.1, 0.65, 1); / --hds-micro-animation-duration-normal /\n }\n\n &[open] {\n animation: hds-modal-fade-in var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-in);\n }\n\n /\n Size\n /\n min-width: 100%;\n max-width: 100%;\n border-radius: 0;\n\n @media (width >= 720px) {\n min-width: 720px;\n max-width: min(720px, calc(100% - 6px - 2em));\n\n / NOTE: Re-adding border radius.\n * We actually get the border radius from .hds-box,\n * but since we are resetting border radius above for small screens\n * we need to re-add it here for larger screens.\n /\n border-radius: var(--hds-border-radius);\n }\n\n / Reset margin /\n & .hds-modal__header {\n margin: 0;\n }\n\n / stylelint-disable-next-line no-duplicate-selectors -- It's ok /\n & .hds-modal__header {\n font: var(--hds-typography-body-title);\n\n / Offset the close button, so text is not overlapping or right next to the button /\n padding-right: 16px;\n }\n}\n\n@keyframes hds-modal-fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n",".hds-tabs {\n --hds-tabs-border-active-size: var(--hds-stroke-thick);\n\n font: var(--hds-typography-body);\n\n .hds-tabs--list {\n padding-left: 0;\n display: inline-flex;\n width: auto;\n\n &.hds-tabs--list-horizontal {\n color: red;\n\n @media (width >= 720px) {\n border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: row;\n\n .hds-tabs--tab {\n padding: var(--hds-spacing-small-3) 0;\n border-bottom: var(--hds-tabs-border-active-size) solid transparent;\n\n &.hds-tabs--tab-active {\n border-bottom-color: var(--hds-brand-colors-signature);\n }\n\n &:not(:last-child) {\n margin-right: var(--hds-spacing-medium-3);\n }\n }\n }\n\n @media (width < 720px) {\n border-left: 1px solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: column;\n padding-left: 1px;\n\n .hds-tabs--tab {\n width: auto;\n padding: var(--hds-spacing-small-2) var(--hds-spacing-small-3);\n\n &.hds-tabs--tab-active {\n margin-left: calc(var(--hds-tabs-border-active-size) -1);\n border-left: var(--hds-tabs-border-active-size) solid var(--hds-brand-colors-signature);\n }\n }\n }\n }\n\n &.hds-tabs--list-vertical {\n border-left: 1px solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: column;\n padding-left: 1px;\n\n .hds-tabs--tab {\n width: auto;\n padding: var(--hds-spacing-small-2) var(--hds-spacing-small-3);\n\n &.hds-tabs--tab-active {\n margin-left: calc(var(--hds-tabs-border-active-size) * -1);\n border-left: var(--hds-tabs-border-active-size) solid var(--hds-brand-colors-signature);\n }\n }\n }\n\n .hds-tabs--tab {\n cursor: pointer;\n font: var(--hds-typography-body);\n background: transparent;\n border: 0 none;\n text-align: left;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-tabs--tab-active {\n color: var(--hds-brand-colors-dark);\n }\n }\n }\n\n .hds-tabs--contents {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n",".hds-breadcrumbs {\n --hds-breadcrumb-image-left: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"> <path d=\"M11.0404 13.9322L11.3917 13.5887C11.462 13.4983 11.462 13.3537 11.3917 13.2814L8.21212 9.99096L11.3917 6.71864C11.462 6.64633 11.462 6.50169 11.3917 6.4113L11.0404 6.0678C10.9526 5.9774 10.8296 5.9774 10.7418 6.0678L7.0527 9.84633C6.98243 9.93672 6.98243 10.0633 7.0527 10.1537L10.7418 13.9322C10.8296 14.0226 10.9526 14.0226 11.0404 13.9322Z\" fill=\"black\"/></svg>');\n --hds-breadcrumb-image-right: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7.9596 6.0678L7.60826 6.4113C7.53799 6.50169 7.53799 6.64633 7.60826 6.71864L10.7879 10.009L7.60826 13.2814C7.53799 13.3537 7.53799 13.4983 7.60826 13.5887L7.9596 13.9322C8.04743 14.0226 8.1704 14.0226 8.25823 13.9322L11.9473 10.1537C12.0176 10.0633 12.0176 9.93672 11.9473 9.84633L8.25823 6.0678C8.1704 5.9774 8.04743 5.9774 7.9596 6.0678Z\" fill=\"%236E6E6E\"/></svg>');\n\n padding: 0;\n list-style-type: none;\n display: flex;\n\n /\n Ensure the caption typography is used\n * Override general styling for links that sets the font-size\n /\n &,\n & a {\n font: var(--hds-typography-caption);\n }\n\n & li {\n /\n * Design in Figma has an extra 2px distance between\n * the text and underline border on links\n * making the total height 21px\n /\n .hds-link {\n padding-bottom: 2px;\n }\n\n &:first-child {\n &::before {\n display: none;\n }\n }\n\n &:last-child {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n &::before {\n display: inline-block;\n background-image: var(--hds-breadcrumb-image-right);\n width: 20px;\n height: 20px;\n margin: 0 var(--hds-spacing-small-1);\n }\n\n @media (width < 720px) {\n &:not(:only-child) {\n display: none;\n }\n\n &:nth-last-of-type(2) {\n display: inherit;\n\n &::before {\n display: inline-block;\n margin-left: 0;\n background-image: var(--hds-breadcrumb-image-left);\n }\n }\n }\n }\n}\n",".hds-textarea {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n &.hds-textarea--error {\n .hds-textarea__textarea-wrapper,\n .hds-textarea__textarea-wrapper:focus-within,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:read-only),\n .hds-textarea__textarea-wrapper[data-readonly=\"true\"] / Fallback for :has /,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:read-only):focus-within,\n .hds-textarea__textarea-wrapper[data-readonly=\"true\"]:focus-within / Fallback for :has /,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:disabled),\n .hds-textarea__textarea-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-textarea__textarea-wrapper {\n background-image: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n }\n }\n\n &, / Default /\n &.hds-textarea--default {\n .hds-textarea__textarea-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n }\n\n &.hds-textarea--white {\n .hds-textarea__textarea-wrapper {\n background-color: var(--hds-ui-colors-white);\n }\n }\n\n &:focus-within .hds-textarea__label {\n color: var(--hds-brand-colors-darker);\n }\n\n & .hds-textarea__label {\n transition: color var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n }\n\n &:has(.hds-textarea__textarea:read-only, .hds-textarea__textarea:disabled):not(:focus-within)\n .hds-textarea__label {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n & .hds-textarea__textarea-wrapper {\n display: flex;\n flex-flow: row nowrap;\n width: 100%;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n transition:\n border var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal),\n margin var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n box-sizing: border-box;\n\n &:focus-within,\n &:has(.hds-textarea__textarea:read-only):focus-within,\n &[data-readonly=\"true\"]:focus-within / Fallback for :has / {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n\n &:has(.hds-textarea__textarea:read-only),\n &[data-readonly=\"true\"] / Fallback for :has /,\n &:has(.hds-textarea__textarea:disabled),\n &[data-disabled=\"true\"] / Fallback for :has */ {\n color: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border: var(--hds-stroke-default) solid var(--hds-ui-colors-grey);\n }\n }\n\n & .hds-textarea__textarea {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n\n &::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n opacity: 1;\n }\n\n &:focus {\n outline: 0;\n\n &::placeholder {\n color: var(--hds-ui-colors-grey);\n }\n }\n\n &:read-only:focus::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n & .hds-textarea__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AGQA,mEAYA,8FAeA,uJAiBA,sBASA,wCAYA,2CASA,kCASA,yDASA,+CAWA,8DAaA,8FASA,oCASA,0DASA,4BAWA,gEAQA,iCAQA,0CAaA,0EAaA,qCAQA,wFAQA,0CAQA,yCASA,0CAUA,yEASA,wCAAA,wCASA,sDASA,oDASA,oEAYA,0MAeA,wCAQA,wDAWA,2CAQA,uCASA,6DASA,sDAIA,uFItWA,0haAgOA,yrEL3NA,oIAOA,sIAOA,qIAOA,mIAUA,0HAMA,8HAMA,4HAMA,wHIjDA,8NAWA,2CAUA,uCAIA,uCAIA,wCASA,+CE5CA,ygBAsBE,oXAeA,2TAUA,0TAcA,wCAIA,+CAGE,yBAAyB,iDAS3B,sKAKE,uJAKA,kJAMF,mJAKE,+HAKA,oIAMF,sQASE,6JAAA,8JAQF,6QASE,yJAAA,0JAQF,gQASE,mHAAA,oHAcA,6OAAA,+OAWA,6MAAA,+MAXA,8OAAA,gPAWA,8MAAA,gNAXA,qPAAA,uPAWA,qNAAA,uNAeF,0GAaE,2EAIE,6EAMF,4EAIE,8EAMF,2EAIE,6EEjON,kTAQE,2JAME,0FANF,4JAME,2FASF,gNAKE,iGAAA,kGAMA,oLAUF,gEAIA,+DAIA,4HAME,qOAQF,mGAIE,qHAAA,sHAOF,iGAQE,mHAAA,iGARF,wFAQE,mHAAA,iGErFJ,iUAcE,wEAAA,yFAKA,qEAMA,4IAAA,+JAOA,wJAMA,mJAMA,4KEhDF,8FAME,+DAIA,gFAME,gKAKE,8FAMF,yEAGE,8FE9BN,+FAME,qDAGE,wDAKF,6CAAA,oCAIA,0CAAA,iCAOA,8DAIE,iDAQF,+FAKA,yCAAA,0DAKA,8FE5CF,uEAGE,sKAKA,sKAMF,uDAGE,sIAKA,sIAMF,uDAGE,sIAKA,sIAMF,wDAGE,wIAKA,wIAMF,oEAGE,gKAKA,gKAMF,qDAGE,kIAKA,kIAMF,iEAGE,0JAKA,0JAMF,iEAGE,0JAKA,0JAMF,6EAGE,kLAKA,kLAMF,2DAIA,uEAIA,+DAGE,sJAKA,sJAMF,2EAGE,8KAKA,8KASF,8FAQA,sFAIA,oGAKA,+PAeA,kHExMA,mKAIE,+DAAA,mFAKA,2EAIA,yGAKA,+EAOA,yBAAyB,kEAOzB,sCASF,yhCAmBE,oFAKA,0GXjEF,yWAIE,yBAAyB,0FAazB,yOASA,gGAGE,8iBAKF,4GAGE,06BAKF,+FAGE,25BAKF,gGAIE,yNASF,kDAAA,wDAMA,8GAAA,qGAIA,+EAIA,yGAGE,yBAAyB,0GEhF7B,wEAMI,6MAAA,0NAAA,8OAAA,iOAAA,2PAAA,8OAAA,6OAAA,iOAYA,glCAWA,2FAAA,8GAMA,kGAKF,+EAIA,mKAMA,iJAKA,uXAWE,8HAAA,+JAAA,kJAMA,sNAAA,yMAAA,qNAAA,yMAUF,6LASE,uGAAA,mGAAA,yFAKA,6CAGE,8FAAA,0FAAA,gFAKF,6GAAA,yGAAA,+FAKF,oLE7GF,qZAKE,yBAAyB,mKAYzB,mDAGE,+HAIA,oFAIA,iZAaE,kHAKA,kQAOE,gNAAA,qNAMA,6HAMA,gMAMJ,2LAIE,+GE3EN,yEAKE,0PAWE,iNAAA,8NAAA,mPAAA,qOAQA,2PAME,u7BAOJ,g7CAgDE,8RAUE,kFAIA,2JAMJ,kHAIA,o0BAoCA,sLEjJF,qEAIE,2LAAA,uLAAA,mLAQA,+OAYA,yBAAyB,yGAazB,uCAKA,uFAQF,wHElDA,onCAYE,oDAAA,sDAWE,iDAKE,oDAKF,oEAIA,8JAQA,6BACE,kDAIA,wDAGE,qIErDR,gGAKE,wEAKE,8DAGE,yBAAyB,yJAIvB,yKAIE,8IAIA,8HAMJ,6BAAwB,sJAKtB,2IAIE,uOAQN,oJAKE,yIAIE,oOAOJ,gIAOE,kFAIA,iGAMJ,oECjFF,2EAMI,yNAAA,sOAAA,gQAAA,6OAAA,6QAAA,0PAAA,+PAAA,6OAYA,4lCAWA,oGAAA,0HAMA,8GAKF,qFAIA,yKAMA,mKAKA,gYAWE,uIAAA,8KAAA,2JAMA,qOAAA,kNAAA,oOAAA,kNAUF,sMASE,gHAAA,4GAAA,kGAKA,sDAGE,uGAAA,mGAAA,yFAKF,sHAAA,kHAAA,wGAKF","sources":["../src/all-in-one.css","../src/reset.css","../src/fonts.css","../src/../../../node_modules/.pnpm/node_modules/sanitize.css/sanitize.css","../src/index.css","../src/tokens.css","../src/body.css","../src/../node_modules/@postenbring/hedwig-tokens/tokens-output/css/tokens.css","../src/button/button.css","../src/message/message.css","../src/link/link.css","../src/input/input.css","../src/badge/badge.css","../src/accordion/accordion.css","../src/list/description-list.css","../src/select/select.css","../src/list/list.css","../src/modal/modal.css","../src/typography/typography.css","../src/breadcrumb/breadcrumb.css","../src/box/box.css","../src/tabs/tabs.css","../src/textarea/textarea.css"],"sourcesContent":["@import url(\"reset.css\");\n@import url(\"tokens.css\");\n@import url(\"fonts.css\");\n@import url(\"index.css\");\n","/*\n CSS Reset to get consistent styling across browsers.\n * Many ways to do this, sanitize.css is the one being used in hedwig legacy.\n /\n@import url(\"../../../node_modules/.pnpm/node_modules/sanitize.css/sanitize.css\");\n","/ https://caniuse.com/woff2 /\n\n/\n Font weight with style linking\n https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/\n /\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 300;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 400;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 500;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 700;\n}\n\n/\n Legacy font-face with an own family for each font\n /\n@font-face {\n font-family: \"Posten Sans Light\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Regular\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Medium\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Bold\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n}\n","/ Document\n * ========================================================================== /\n\n/\n 1. Add border box sizing in all browsers (opinionated).\n * 2. Backgrounds do not repeat by default (opinionated).\n /\n\n,\n::before,\n::after {\n box-sizing: border-box; /* 1 /\n background-repeat: no-repeat; / 2 /\n}\n\n/\n 1. Add text decoration inheritance in all browsers (opinionated).\n * 2. Add vertical alignment inheritance in all browsers (opinionated).\n /\n\n::before,\n::after {\n text-decoration: inherit; / 1 /\n vertical-align: inherit; / 2 /\n}\n\n/\n 1. Use the default cursor in all browsers (opinionated).\n * 2. Change the line height in all browsers (opinionated).\n * 3. Breaks words to prevent overflow in all browsers (opinionated).\n * 4. Use a 4-space tab width in all browsers (opinionated).\n * 5. Remove the grey highlight on links in iOS (opinionated).\n * 6. Prevent adjustments of font size after orientation changes in iOS.\n /\n\n:where(:root) {\n cursor: default; / 1 /\n line-height: 1.5; / 2 /\n overflow-wrap: break-word; / 3 /\n -moz-tab-size: 4; / 4 /\n tab-size: 4; / 4 /\n -webkit-tap-highlight-color: transparent; / 5 /\n -webkit-text-size-adjust: 100%; / 6 /\n}\n\n/ Sections\n * ========================================================================== /\n\n/\n Remove the margin in all browsers (opinionated).\n /\n\n:where(body) {\n margin: 0;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Edge, Firefox, and Safari.\n /\n\n:where(h1) {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n * ========================================================================== /\n\n/\n Remove the margin on nested lists in Chrome, Edge, and Safari.\n /\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n margin: 0;\n}\n\n/\n 1. Correct the inheritance of border color in Firefox.\n * 2. Add the correct box sizing in Firefox.\n /\n\n:where(hr) {\n color: inherit; / 1 /\n height: 0; / 2 /\n}\n\n/\n Remove the list style on navigation lists in all browsers (opinionated).\n /\n\n:where(nav) :where(ol, ul) {\n list-style-type: none;\n padding: 0;\n}\n\n/\n Prevent VoiceOver from ignoring list semantics in Safari (opinionated).\n /\n\n:where(nav li)::before {\n content: \"\\200B\";\n float: left;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n * 3. Prevent overflow of the container in all browsers (opinionated).\n /\n\n:where(pre) {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n overflow: auto; / 3 /\n}\n\n/ Text-level semantics\n * ========================================================================== /\n\n/\n Add the correct text decoration in Safari.\n /\n\n:where(abbr[title]) {\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\n:where(b, strong) {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\n:where(code, kbd, samp) {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\n:where(small) {\n font-size: 80%;\n}\n\n/ Embedded content\n * ========================================================================== /\n\n/\n * Change the alignment on media elements in all browsers (opinionated).\n /\n\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n/\n Remove the border on iframes in all browsers (opinionated).\n /\n\n:where(iframe) {\n border-style: none;\n}\n\n/\n Change the fill color to match the text color in all browsers (opinionated).\n /\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\n/ Tabular data\n * ========================================================================== /\n\n/\n 1. Collapse border spacing in all browsers (opinionated).\n * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.\n * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.\n /\n\n:where(table) {\n border-collapse: collapse; / 1 /\n border-color: inherit; / 2 /\n text-indent: 0; / 3 /\n}\n\n/ Forms\n * ========================================================================== /\n\n/\n Remove the margin on controls in Safari.\n /\n\n:where(button, input, select) {\n margin: 0;\n}\n\n/\n Correct the inability to style buttons in iOS and Safari.\n /\n\n:where(button, [type=\"button\" i], [type=\"reset\" i], [type=\"submit\" i]) {\n -webkit-appearance: button;\n}\n\n/\n Change the inconsistent appearance in all browsers (opinionated).\n /\n\n:where(fieldset) {\n border: 1px solid #a0a0a0;\n}\n\n/\n Add the correct vertical alignment in Chrome, Edge, and Firefox.\n /\n\n:where(progress) {\n vertical-align: baseline;\n}\n\n/\n 1. Remove the margin in Firefox and Safari.\n * 3. Change the resize direction in all browsers (opinionated).\n /\n\n:where(textarea) {\n margin: 0; / 1 /\n resize: vertical; / 3 /\n}\n\n/\n 1. Correct the odd appearance in Chrome, Edge, and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n:where([type=\"search\" i]) {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Safari.\n /\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n Correct the text style of placeholders in Chrome, Edge, and Safari.\n /\n\n::-webkit-input-placeholder {\n color: inherit;\n opacity: 0.54;\n}\n\n/\n Remove the inner padding in Chrome, Edge, and Safari on macOS.\n /\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style upload buttons in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n * ========================================================================== /\n\n/\n * Add the correct styles in Safari.\n /\n\n:where(dialog) {\n background-color: white;\n border: solid;\n color: black;\n height: -moz-fit-content;\n height: fit-content;\n left: 0;\n margin: auto;\n padding: 1em;\n position: absolute;\n right: 0;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n:where(dialog:not([open])) {\n display: none;\n}\n\n/\n * Add the correct display in Safari.\n /\n\n:where(details > summary:first-of-type) {\n display: list-item;\n}\n\n/ Accessibility\n * ========================================================================== /\n\n/\n Change the cursor on busy elements in all browsers (opinionated).\n /\n\n:where([aria-busy=\"true\" i]) {\n cursor: progress;\n}\n\n/\n * Change the cursor on control elements in all browsers (opinionated).\n /\n\n:where([aria-controls]) {\n cursor: pointer;\n}\n\n/\n * Change the cursor on disabled, not-editable, or otherwise\n * inoperable elements in all browsers (opinionated).\n /\n\n:where([aria-disabled=\"true\" i], [disabled]) {\n cursor: not-allowed;\n}\n\n/\n * Change the display on visually hidden accessible elements\n * in all browsers (opinionated).\n /\n\n:where([aria-hidden=\"false\" i][hidden]) {\n display: initial;\n}\n\n:where([aria-hidden=\"false\" i][hidden]:not(:focus)) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n","@import url(\"body.css\");\n@import url(\"button/button.css\");\n@import url(\"link/link.css\");\n@import url(\"badge/badge.css\");\n@import url(\"list/description-list.css\");\n@import url(\"list/list.css\");\n@import url(\"typography/typography.css\");\n@import url(\"box/box.css\");\n@import url(\"message/message.css\");\n@import url(\"input/input.css\");\n@import url(\"accordion/accordion.css\");\n@import url(\"select/select.css\");\n@import url(\"modal/modal.css\");\n@import url(\"breadcrumb/breadcrumb.css\");\n@import url(\"tabs/tabs.css\");\n@import url(\"textarea/textarea.css\");\n","@import url(\"../node_modules/@postenbring/hedwig-tokens/tokens-output/css/tokens.css\");\n","/\n * All element selector, and general global styles should be defined in this file\n \n Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n /\n:root {\n box-sizing: border-box;\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n line-height: 1.4;\n cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n background: var(--hds-ui-colors-white);\n}\n\n/\n Default typography for headings\n \n Since hedwig legacy sets default font-family\n * we need to override it to get the correct `Posten Sans`\n /\nh1 {\n font: var(--hds-brand-typography-h1);\n}\n\nh2 {\n font: var(--hds-brand-typography-h2);\n}\n\nh3 {\n font: var(--hds-typography-header-h3);\n}\n\n/\n * Uncommon to use these levels,\n * but default to body-title.\n * The consumer should override to whatever fit's their need\n /\nh4,\nh5,\nh6 {\n font: var(--hds-typography-body-title);\n}\n","\n:root {\n --hds-posten-colors-signature-red: #e32d22;\n --hds-posten-colors-darker-red: #4a1011;\n --hds-posten-colors-dark-red: #980000;\n --hds-posten-colors-light-red: #ff8a5f;\n --hds-posten-colors-lighter-red: #fff5f0;\n --hds-posten-colors-signature-red-hover: #d62722;\n --hds-posten-colors-light-red-hover: #ff7d55;\n --hds-bring-colors-signature-green: #7bc144;\n --hds-bring-colors-darker-green: #002f19;\n --hds-bring-colors-dark-green: #00643a;\n --hds-bring-colors-light-green: #c8dc8c;\n --hds-bring-colors-lighter-green: #f1f7e9;\n --hds-bring-colors-signature-green-hover: #86cc4a;\n --hds-bring-colors-light-green-hover: #d3e593;\n --hds-ui-colors-black: #000000;\n --hds-ui-colors-dark-grey: #6e6e6e;\n --hds-ui-colors-grey: #d6d6d6;\n --hds-ui-colors-light-grey-stroke: #e4e4e4;\n --hds-ui-colors-light-grey-fill: #f2f2f2;\n --hds-ui-colors-white: #ffffff;\n --hds-ui-colors-warning-yellow: #fdbb2f;\n --hds-ui-colors-warning-yellow-stroke: #d68000;\n --hds-ui-colors-warning-yellow-light-fill: #fff5e0;\n --hds-ui-colors-warning-yellow-hover: #ffc340;\n --hds-ui-colors-black-hover: #1e1e1e;\n --hds-dark-mode-colors-obsidian: #121212; / Base color for dark mode /\n --hds-dark-mode-colors-coal: #252525; / Background on none-clickable cards /\n --hds-dark-mode-colors-dusk: #2c2c2c; / Fill inputfields, checkbox, radiobuttons, toogles /\n --hds-dark-mode-colors-spider: #333333; / Clickable cards or tiles /\n --hds-dark-mode-colors-ash: #999999; / Default radio buttons, checkbox, label on inputsfields, toogle off (background) /\n --hds-spacing-small-1: 4px;\n --hds-spacing-small-2: 8px;\n --hds-spacing-small-3: 12px;\n --hds-spacing-small-4: 16px;\n --hds-spacing-medium-1: 20px;\n --hds-spacing-medium-2: 24px;\n --hds-spacing-medium-3: 32px;\n --hds-spacing-medium-4: 40px;\n --hds-spacing-large-1: 48px;\n --hds-spacing-large-2: 64px;\n --hds-spacing-large-3: 80px;\n --hds-spacing-large-4: 120px;\n --hds-spacing-large-5: 160px;\n --hds-fonts-posten-sans: 'Posten Sans', Arial, sans-serif;\n --hds-fonts-posten-sans-bold: 'Posten Sans Bold', Arial, sans-serif;\n --hds-fonts-posten-sans-medium: 'Posten Sans Medium', Arial, sans-serif;\n --hds-fonts-posten-sans-regular: 'Posten Sans Regular', Arial, sans-serif;\n --hds-fonts-posten-sans-light: 'Posten Sans Light', Arial, sans-serif;\n --hds-typography-posten-h1-display: 700 clamp(40px,calc(40px + (72 - 40) ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-posten-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-posten-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h1-display: 300 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h1: 300 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-bring-h2: 400 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-header-h3: 400 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-header-h3-title: 500 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body: 400 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-title: 500 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-small: 400 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-body-small-title: 500 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-technical: 400 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-technical-title: 500 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;\n --hds-typography-caption: 400 13px/18px 'Posten Sans', Arial, sans-serif;\n --hds-typography-caption-title: 500 13px/18px 'Posten Sans', Arial, sans-serif;\n --hds-border-radius: 2px;\n --hds-stroke-default: 1px;\n --hds-stroke-thick: 2px;\n --hds-shadow-default: 0px 1px 5px 0px #00000022;\n --hds-micro-animation-easing-in: cubic-bezier(0.65, 0, 1, 0.1);\n --hds-micro-animation-easing-out: cubic-bezier(0, 0.45, 0.1, 1);\n --hds-micro-animation-easing-normal: cubic-bezier(0.45, 0.1, 0.65, 1);\n --hds-font-size-posten-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-font-size-posten-h1-display-min: 40px;\n --hds-font-size-posten-h1-display-max: 72px;\n --hds-font-size-posten-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-font-size-posten-h1-min: 32px;\n --hds-font-size-posten-h1-max: 48px;\n --hds-font-size-posten-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-font-size-posten-h2-min: 28px;\n --hds-font-size-posten-h2-max: 32px;\n --hds-font-size-bring-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-font-size-bring-h1-display-min: 40px;\n --hds-font-size-bring-h1-display-max: 72px;\n --hds-font-size-bring-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-font-size-bring-h1-min: 32px;\n --hds-font-size-bring-h1-max: 48px;\n --hds-font-size-bring-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-font-size-bring-h2-min: 28px;\n --hds-font-size-bring-h2-max: 32px;\n --hds-font-size-header-h3: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-font-size-header-h3-min: 22px;\n --hds-font-size-header-h3-max: 24px;\n --hds-font-size-header-h3-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-font-size-header-h3-title-min: 22px;\n --hds-font-size-header-h3-title-max: 24px;\n --hds-font-size-body: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);\n --hds-font-size-body-min: 18px;\n --hds-font-size-body-max: 20px;\n --hds-font-size-body-title: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);\n --hds-font-size-body-title-min: 18px;\n --hds-font-size-body-title-max: 20px;\n --hds-font-size-body-small: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);\n --hds-font-size-body-small-min: 16px;\n --hds-font-size-body-small-max: 18px;\n --hds-font-size-body-small-title: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);\n --hds-font-size-body-small-title-min: 16px;\n --hds-font-size-body-small-title-max: 18px;\n --hds-font-size-technical: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);\n --hds-font-size-technical-min: 14px;\n --hds-font-size-technical-max: 16px;\n --hds-font-size-technical-title: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);\n --hds-font-size-technical-title-min: 14px;\n --hds-font-size-technical-title-max: 16px;\n --hds-font-size-caption: 13px;\n --hds-font-size-caption-title: 13px;\n --hds-line-height-posten-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-line-height-posten-h1-display-min: 56px;\n --hds-line-height-posten-h1-display-max: 80px;\n --hds-line-height-posten-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-line-height-posten-h1-min: 40px;\n --hds-line-height-posten-h1-max: 56px;\n --hds-line-height-posten-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-line-height-posten-h2-min: 36px;\n --hds-line-height-posten-h2-max: 40px;\n --hds-line-height-bring-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-line-height-bring-h1-display-min: 56px;\n --hds-line-height-bring-h1-display-max: 80px;\n --hds-line-height-bring-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-line-height-bring-h1-min: 40px;\n --hds-line-height-bring-h1-max: 56px;\n --hds-line-height-bring-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-line-height-bring-h2-min: 36px;\n --hds-line-height-bring-h2-max: 40px;\n --hds-line-height-header-h3: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-line-height-header-h3-min: 28px;\n --hds-line-height-header-h3-max: 32px;\n --hds-line-height-header-h3-title: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-line-height-header-h3-title-min: 28px;\n --hds-line-height-header-h3-title-max: 32px;\n --hds-line-height-body: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);\n --hds-line-height-body-min: 26px;\n --hds-line-height-body-max: 28px;\n --hds-line-height-body-title: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);\n --hds-line-height-body-title-min: 26px;\n --hds-line-height-body-title-max: 28px;\n --hds-line-height-body-small: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);\n --hds-line-height-body-small-min: 24px;\n --hds-line-height-body-small-max: 26px;\n --hds-line-height-body-small-title: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);\n --hds-line-height-body-small-title-min: 24px;\n --hds-line-height-body-small-title-max: 26px;\n --hds-line-height-technical: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-line-height-technical-min: 22px;\n --hds-line-height-technical-max: 24px;\n --hds-line-height-technical-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);\n --hds-line-height-technical-title-min: 22px;\n --hds-line-height-technical-title-max: 24px;\n --hds-line-height-caption: 18px;\n --hds-line-height-caption-title: 18px;\n --hds-font-weight-posten-h1-display: 700;\n --hds-font-weight-posten-h1: 700;\n --hds-font-weight-posten-h2: 500;\n --hds-font-weight-bring-h1-display: 300;\n --hds-font-weight-bring-h1: 300;\n --hds-font-weight-bring-h2: 400;\n --hds-font-weight-header-h3: 400;\n --hds-font-weight-header-h3-title: 500;\n --hds-font-weight-body: 400;\n --hds-font-weight-body-title: 500;\n --hds-font-weight-body-small: 400;\n --hds-font-weight-body-small-title: 500;\n --hds-font-weight-technical: 400;\n --hds-font-weight-technical-title: 500;\n --hds-font-weight-caption: 400;\n --hds-font-weight-caption-title: 500;\n --hds-micro-animation-duration-quick: 0.130s;\n --hds-micro-animation-duration-normal: 0.300s;\n --hds-micro-animation-duration-slow: 0.700s;\n --hds-breakpoints-small: 460px;\n --hds-breakpoints-medium: 720px;\n --hds-breakpoints-large: 940px;\n --hds-breakpoints-xlarge: 1200px;\n --hds-opacity-7: .07;\n --hds-opacity-10: .1;\n --hds-opacity-20: .2;\n --hds-opacity-50: .5;\n --hds-brand-colors-signature: #e32d22;\n --hds-brand-colors-darker: #4a1011;\n --hds-brand-colors-dark: #980000;\n --hds-brand-colors-light: #ff8a5f;\n --hds-brand-colors-lighter: #fff5f0;\n --hds-brand-colors-signature-hover: #d62722;\n --hds-brand-colors-light-hover: #ff7d55;\n --hds-brand-button-colors-text: #ffffff;\n --hds-brand-link-colors-text: #000000;\n --hds-brand-link-colors-underline: #e32d22;\n --hds-brand-link-colors-hover: #e32d22;\n --hds-brand-link-colors-underline-hover: #e32d22;\n --hds-brand-typography-h1-display: 700 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-brand-font-size-h1-display-min: 40px;\n --hds-brand-font-size-h1-display-max: 72px;\n --hds-brand-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-brand-font-size-h1-min: 32px;\n --hds-brand-font-size-h1-max: 48px;\n --hds-brand-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-brand-font-size-h2-min: 28px;\n --hds-brand-font-size-h2-max: 32px;\n --hds-brand-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-brand-line-height-h1-display-min: 56px;\n --hds-brand-line-height-h1-display-max: 80px;\n --hds-brand-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-brand-line-height-h1-min: 40px;\n --hds-brand-line-height-h1-max: 56px;\n --hds-brand-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-brand-line-height-h2-min: 36px;\n --hds-brand-line-height-h2-max: 40px;\n --hds-brand-font-weight-h1-display: 700;\n --hds-brand-font-weight-h1: 700;\n --hds-brand-font-weight-h2: 500;\n}\n.hds-theme-bring {\n --hds-brand-colors-signature: #7bc144;\n --hds-brand-colors-darker: #002f19;\n --hds-brand-colors-dark: #00643a;\n --hds-brand-colors-light: #c8dc8c;\n --hds-brand-colors-lighter: #f1f7e9;\n --hds-brand-colors-signature-hover: #86cc4a;\n --hds-brand-colors-light-hover: #d3e593;\n --hds-brand-button-colors-text: #000000;\n --hds-brand-link-colors-text: #000000;\n --hds-brand-link-colors-underline: #7bc144;\n --hds-brand-link-colors-hover: #00643a;\n --hds-brand-link-colors-underline-hover: #00643a;\n --hds-brand-typography-h1-display: 300 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h1: 300 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-typography-h2: 400 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;\n --hds-brand-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);\n --hds-brand-font-size-h1-display-min: 40px;\n --hds-brand-font-size-h1-display-max: 72px;\n --hds-brand-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);\n --hds-brand-font-size-h1-min: 32px;\n --hds-brand-font-size-h1-max: 48px;\n --hds-brand-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);\n --hds-brand-font-size-h2-min: 28px;\n --hds-brand-font-size-h2-max: 32px;\n --hds-brand-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);\n --hds-brand-line-height-h1-display-min: 56px;\n --hds-brand-line-height-h1-display-max: 80px;\n --hds-brand-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);\n --hds-brand-line-height-h1-min: 40px;\n --hds-brand-line-height-h1-max: 56px;\n --hds-brand-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);\n --hds-brand-line-height-h2-min: 36px;\n --hds-brand-line-height-h2-max: 40px;\n --hds-brand-font-weight-h1-display: 300;\n --hds-brand-font-weight-h1: 300;\n --hds-brand-font-weight-h2: 400;\n}\n",".hds-button {\n --hds-component-button-border-width: 0px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-block;\n border-style: solid;\n border-radius: var(--hds-border-radius);\n border-width: var(--hds-component-button-border-width);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n\n /* When used as a link (<a>) /\n text-decoration: none;\n text-align: center;\n\n /\n Modifiers: sizes\n /\n &.hds-button--small {\n / In figma, the actual padding for the text is 10px /\n --hds-component-button-small-y-padding: 10px;\n\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: calc(\n var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width)\n )\n calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 44px;\n }\n\n &.hds-button--medium {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 50px;\n }\n\n &.hds-button--large {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));\n\n / The height can be more if the text inside the button wraps /\n min-height: 58px;\n }\n\n /\n Modifiers: Width\n /\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n width: 100%;\n\n @media (width >= 720px) {\n width: unset;\n }\n }\n\n /\n Modifiers: Variants\n /\n\n &.hds-button--primary {\n background-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n\n &:hover {\n background-color: var(--hds-brand-colors-signature-hover);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n }\n\n &.hds-button--secondary {\n background-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover {\n background-color: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-darker);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-primary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border-color: var(--hds-brand-colors-dark);\n }\n }\n\n &.hds-button--outline-secondary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-white {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n }\n }\n\n /\n State: Disabled\n /\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n &.hds-button--primary,\n &.hds-button--secondary {\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n outline: 0;\n box-shadow: none;\n cursor: default;\n }\n\n &.hds-button--outline-primary,\n &.hds-button--outline-secondary {\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: transparent;\n cursor: default;\n }\n }\n\n /\n Variant: Icon only\n * TODO: Support text + icon on either left or right side.\n * See button component in digdir/designsystemet and nav/aksel\n /\n &.hds-button--icon-only {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n /\n Modifiers: sizes\n \n TODO: Consider/figure out using css variables for these values\n * must make sense, not just choosing a value that matches for the sake of it\n /\n\n &.hds-button--small {\n height: 44px;\n width: 44px;\n\n & {\n height: 24px;\n width: 24px;\n }\n }\n\n &.hds-button--medium {\n height: 50px;\n width: 50px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n\n &.hds-button--large {\n height: 58px;\n width: 58px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n }\n}\n",".hds-box.hds-message {\n --hds-component-message-icon-width: var(--hds-spacing-medium-3);\n --hds-component-message-spacing-between: var(--hds-spacing-small-4);\n\n @media (width >= 720px) {\n --hds-component-message-spacing-between: var(--hds-spacing-medium-2);\n }\n\n /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- Comes from `box.css` /\n --hds-component-message-padding: var(--hds-component-box-padding);\n\n padding-left: calc(\n var(--hds-component-message-padding) + var(--hds-component-message-icon-width) +\n var(--hds-component-message-spacing-between)\n );\n\n / Icon placement /\n &::before {\n content: \"\";\n position: absolute;\n top: var(--hds-component-message-padding);\n left: var(--hds-component-message-padding);\n width: var(--hds-component-message-icon-width);\n height: var(--hds-component-message-icon-width);\n }\n\n &.hds-message--success {\n background-color: var(--hds-ui-colors-light-grey-fill);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M27.6412 7.54758C28.3713 8.22153 28.3713 9.40094 27.6412 10.0749L13.2636 24.4524C12.5897 25.1825 11.4103 25.1825 10.7363 24.4524L3.54758 17.2637C2.81747 16.5897 2.81747 15.4103 3.54758 14.7363C4.22153 14.0062 5.40094 14.0062 6.07488 14.7363L11.9719 20.6334L25.1139 7.54758C25.7878 6.81747 26.9672 6.81747 27.6412 7.54758Z\" fill=\"%237BC144\"/></svg>');\n }\n }\n\n &.hds-message--attention {\n background-color: var(--hds-ui-colors-warning-yellow-light-fill);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M29.0323 23.7656C29.8537 25.2031 28.8269 27 27.1327 27H5.21084C3.51664 27 2.48986 25.2031 3.25994 23.7656L14.2466 5.07812C14.7086 4.35938 15.4274 4 16.1974 4C16.9162 4 17.6349 4.35938 18.097 5.07812L29.0323 23.7656ZM5.72423 24.5357H26.6193L16.1461 6.72098L5.72423 24.5357ZM16.1974 19.7098C17.0702 19.7098 17.789 20.4286 17.789 21.3013C17.789 22.1741 17.0702 22.8929 16.1974 22.8929C15.2733 22.8929 14.5546 22.1741 14.5546 21.3013C14.5546 20.4286 15.2733 19.7098 16.1974 19.7098ZM14.9653 11.8036C14.9653 11.1362 15.4787 10.5714 16.1974 10.5714C16.8649 10.5714 17.4296 11.1362 17.4296 11.8036V16.7321C17.4296 17.4509 16.8649 17.9643 16.1974 17.9643C15.4787 17.9643 14.9653 17.4509 14.9653 16.7321V11.8036Z\" fill=\"black\"/></svg>');\n }\n }\n\n &.hds-message--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n\n &::before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"12\" y=\"10\" width=\"8\" height=\"14.6667\" rx=\"4\" fill=\"%23FDBB2F\"/><path d=\"M29.0094 24.7656C29.8308 26.2031 28.804 28 27.1098 28H5.18794C3.49374 28 2.46695 26.2031 3.28838 24.7656L14.275 6.07812C15.0964 4.64062 17.2013 4.64062 18.0741 6.07812L29.0094 24.7656ZM14.9424 11.9821V18.5536C14.9424 19.2723 15.5585 19.7857 16.1745 19.7857C16.842 19.7857 17.4067 19.2723 17.4067 18.5536V11.9821C17.4067 11.3147 16.842 10.75 16.1745 10.75C15.4558 10.75 14.9424 11.3147 14.9424 11.9821ZM16.1745 24.7143C17.0473 24.7143 17.7661 23.9955 17.7661 23.1228C17.7661 22.25 17.0473 21.5312 16.1745 21.5312C15.2504 21.5312 14.5317 22.25 14.5317 23.1228C14.5317 23.9955 15.2504 24.7143 16.1745 24.7143Z\" fill=\"black\"/></svg>');\n }\n }\n\n &.hds-message--neutral {\n background-color: var(--hds-ui-colors-light-grey-fill);\n\n / stylelint-disable-next-line selector-class-pattern -- Custom icon is only available for the neutral variant /\n .hds-message--neutral__icon {\n position: absolute;\n top: var(--hds-component-message-padding);\n left: var(--hds-component-message-padding);\n width: var(--hds-component-message-icon-width);\n }\n }\n\n / Reset margin /\n & .hds-message__title,\n & .hds-message__description {\n margin: 0;\n }\n\n / Offset to match the icon /\n & :is(.hds-message__title, .hds-message__description):first-of-type {\n margin-top: 2px;\n }\n\n & .hds-message__title {\n font: var(--hds-typography-body-title);\n }\n\n & .hds-message__title ~ .hds-message__description {\n margin-top: var(--hds-spacing-small-3);\n\n @media (width >= 940px) {\n margin-top: var(--hds-spacing-small-4);\n }\n }\n}\n","/*\n Block\n /\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /\n Modifers\n /\n\n &.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentcolor;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentcolor;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentcolor;\n border-color: currentcolor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &.hds-link--small {\n font: var(--hds-typography-body-small);\n }\n\n &.hds-link--large {\n font: var(--hds-typography-header-h3);\n }\n\n &.hds-link--no-underline {\n font-weight: 500;\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n\n &:is(button) {\n padding: 0;\n background: none;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n\n / Button inherits the font size from the user agent by default /\n &:not(.hds-link--small, .hds-link--large) {\n font: var(--hds-typography-body);\n }\n }\n}\n",".hds-input {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n &.hds-input--error {\n .hds-input__input-wrapper,\n .hds-input__input-wrapper:focus-within,\n .hds-input__input-wrapper:has(.hds-input__input:read-only),\n .hds-input__input-wrapper[data-readonly=\"true\"] / Fallback for :has /,\n .hds-input__input-wrapper:has(.hds-input__input:read-only):focus-within,\n .hds-input__input-wrapper[data-readonly=\"true\"]:focus-within / Fallback for :has /,\n .hds-input__input-wrapper:has(.hds-input__input:disabled),\n .hds-input__input-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-input__input-wrapper {\n background-image: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n }\n }\n\n &, / Default /\n &.hds-input--default {\n .hds-input__input-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n }\n\n &.hds-input--white {\n .hds-input__input-wrapper {\n background-color: var(--hds-ui-colors-white);\n }\n }\n\n &:focus-within .hds-input__label {\n color: var(--hds-brand-colors-darker);\n }\n\n & .hds-input__label {\n transition: color var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n }\n\n &:has(.hds-input__input:read-only, .hds-input__input:disabled):not(:focus-within)\n .hds-input__label {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n & .hds-input__input-wrapper {\n display: flex;\n flex-flow: row nowrap;\n width: 100%;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n transition:\n border var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal),\n margin var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n box-sizing: border-box;\n\n &:focus-within,\n &:has(.hds-input__input:read-only):focus-within,\n &[data-readonly=\"true\"]:focus-within / Fallback for :has / {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n\n &:has(.hds-input__input:read-only),\n &[data-readonly=\"true\"] / Fallback for :has /,\n &:has(.hds-input__input:disabled),\n &[data-disabled=\"true\"] / Fallback for :has / {\n color: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border: var(--hds-stroke-default) solid var(--hds-ui-colors-grey);\n }\n }\n\n & .hds-input__input {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n\n &::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n opacity: 1;\n }\n\n &:focus {\n outline: 0;\n\n &::placeholder {\n color: var(--hds-ui-colors-grey);\n }\n }\n\n &:read-only:focus::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n & .hds-input__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n","/\n Block\n /\n\n.hds-badge {\n display: inline-block;\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n text-transform: uppercase;\n line-height: 1.1;\n font-size: 12px; / For now, this might be changed later /\n font-weight: 500;\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n / Size variations /\n\n &, / Default /\n &.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &.hds-badge--smaller {\n padding: 2px var(--hds-spacing-small-1);\n }\n\n / Color variations /\n\n &, / Default /\n &.hds-badge--lighter {\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n }\n}\n",".hds-accordion {\n --hds-accordion-icon-dimension: 24px;\n --hds-component-accordion-trigger-spacing-between: var(--hds-spacing-small-4);\n --hds-component-accordion-content-spacing: var(--hds-spacing-medium-3);\n\n @media (width >= 720px) {\n --hds-component-accordion-content-spacing: var(--hds-spacing-large-1);\n --hds-component-accordion-trigger-spacing-between: var(--hds-spacing-medium-2);\n }\n\n display: block;\n border: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-stroke);\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n\n .hds-accordion-item {\n overflow: hidden;\n\n &.hds-accordion-item__expanded .hds-accordion-item-trigger {\n color: var(--hds-brand-colors-dark);\n }\n\n &:first-child .hds-accordion-item-trigger {\n border: 0 none;\n }\n\n .hds-accordion-item-trigger {\n cursor: pointer;\n display: grid;\n grid-template-columns: 24px auto;\n grid-gap: var(--hds-spacing-small-4);\n width: 100%;\n padding: var(--hds-component-accordion-trigger-spacing-between) 0;\n border: 0;\n border-top: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-stroke);\n text-align: left;\n background-color: transparent;\n font: var(--hds-typography-body);\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n outline: 0;\n }\n\n .hds-accordion-item-trigger--icon {\n transition: all 0.05s ease;\n display: inline-block;\n color: var(--hds-brand-colors-dark);\n width: var(--hds-accordion-icon-dimension);\n height: var(--hds-accordion-icon-dimension);\n\n .hds-accordion-item-trigger--icon-chevron,\n .hds-accordion-item-trigger--icon-chevron-down {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n }\n\n & svg {\n vertical-align: baseline;\n }\n }\n\n &.hds-accordion-item-trigger--open {\n .hds-accordion-item-trigger--icon svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .hds-accordion-item-content {\n padding: 0 0 var(--hds-component-accordion-content-spacing) var(--hds-spacing-medium-4);\n font: var(--hds-typography-body-small);\n\n &.hds-accordion-item-content--closed {\n display: none;\n }\n }\n }\n}\n",".hds-description-list {\n list-style: none;\n margin: 0;\n padding-left: 0;\n font: var(--hds-typography-body);\n\n & dt {\n font: var(--hds-typography-body-title);\n }\n\n & dd {\n margin-left: 0;\n margin-bottom: var(--hds-spacing-small-3);\n }\n\n &.hds-description-list--horizontal {\n & dt {\n display: inline-block;\n margin-right: var(--hds-spacing-small-1);\n margin-bottom: var(--hds-spacing-small-2);\n\n &::after {\n content: \"\\a\";\n white-space: pre;\n }\n }\n\n & dd {\n display: inline;\n\n &::after {\n content: \"\\a\";\n white-space: pre;\n }\n }\n }\n}\n",".hds-select {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n & label.hds-select__label {\n transition: color var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n color: var(--hds-ui-colors-black);\n margin-bottom: 0;\n display: block;\n text-align: left;\n }\n\n &.hds-select--error {\n .hds-select__select-wrapper,\n .hds-select__select-wrapper:focus-within,\n .hds-select__select-wrapper:has(.hds-select__select:disabled),\n .hds-select__select-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-select__select-wrapper {\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n\n &::after {\n content: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n padding-top: var(--hds-spacing-small-4);\n }\n }\n }\n\n & .hds-select__select-wrapper {\n display: flex;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n font: var(--hds-typography-body-small);\n width: 100%;\n height: 58px; / should this be a token? /\n cursor: pointer;\n transition:\n border-color var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-normal),\n max-height var(--hds-micro-animation-duration-normal) var(--hds-micro-animation-easing-normal),\n transform var(--hds-micro-animation-duration-normal) var(--hds-micro-animation-easing-normal);\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-image:\n linear-gradient(45deg, transparent 74%, var(--hds-ui-colors-light-grey-fill) 0%),\n linear-gradient(135deg, var(--hds-ui-colors-light-grey-fill) 26%, transparent 26%),\n / Draw the arrow /\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 72%,\n var(--hds-ui-colors-light-grey-fill) 73%,\n var(--hds-ui-colors-light-grey-fill) 100%\n ),\n linear-gradient(\n 45deg,\n var(--hds-ui-colors-light-grey-fill) 0,\n var(--hds-ui-colors-light-grey-fill) 28%,\n var(--hds-ui-colors-dark-grey) 29%,\n var(--hds-ui-colors-dark-grey) 37%,\n transparent 38%,\n transparent 100%\n ),\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 62%,\n var(--hds-ui-colors-dark-grey) 63%,\n var(--hds-ui-colors-dark-grey) 71%,\n var(--hds-ui-colors-light-grey-fill) 72%,\n var(--hds-ui-colors-light-grey-fill) 100%\n );\n background-size: var(--hds-spacing-small-4) var(--hds-spacing-small-4);\n background-position: calc(100% - var(--hds-spacing-small-4)) 45%;\n background-repeat: no-repeat;\n\n & select.hds-select__select {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n appearance: none; / Hide default arrow /\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n }\n }\n\n &.hds-select--default .hds-select__select-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-select--white .hds-select__select-wrapper {\n background-color: var(--hds-ui-colors-white);\n background-image:\n / Cut off the sharp ends of the arrow /\n linear-gradient(45deg, transparent 74%, var(--hds-ui-colors-white) 0%),\n linear-gradient(135deg, var(--hds-ui-colors-white) 26%, transparent 26%),\n / Draw the arrow /\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 72%,\n var(--hds-ui-colors-white) 73%,\n var(--hds-ui-colors-white) 100%\n ),\n linear-gradient(\n 45deg,\n var(--hds-ui-colors-white) 0,\n var(--hds-ui-colors-white) 28%,\n var(--hds-ui-colors-dark-grey) 29%,\n var(--hds-ui-colors-dark-grey) 37%,\n transparent 38%,\n transparent 100%\n ),\n linear-gradient(\n 135deg,\n transparent 0,\n transparent 62%,\n var(--hds-ui-colors-dark-grey) 63%,\n var(--hds-ui-colors-dark-grey) 71%,\n var(--hds-ui-colors-white) 72%,\n var(--hds-ui-colors-white) 100%\n );\n background-size: var(--hds-spacing-small-4) var(--hds-spacing-small-4);\n background-repeat: no-repeat;\n }\n\n & .hds-select__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n",".hds-list {\n margin: 0;\n display: flex;\n flex-direction: column;\n padding-left: var(--hds-spacing-medium-3);\n\n & li {\n padding-left: var(--hds-spacing-small-2);\n\n &::marker {\n color: var(--hds-brand-colors-dark);\n }\n }\n\n &:is(ol) {\n list-style: decimal;\n }\n\n &:is(ul) {\n list-style: disc;\n }\n\n /\n Modifers: Style\n /\n &.hds-list--no-bullets {\n list-style: none;\n padding-left: 0;\n\n & li {\n padding-left: 0;\n }\n }\n\n /\n Modifers: Sizes\n /\n &.hds-list--small {\n font: var(--hds-typography-body-small);\n gap: var(--hds-spacing-small-1);\n }\n\n &, / Default /\n &.hds-list--medium {\n gap: var(--hds-spacing-small-2);\n }\n\n &.hds-list--large {\n font: var(--hds-typography-header-h3);\n gap: var(--hds-spacing-small-3);\n }\n}\n",".hds-modal {\n / Reset /\n border: none;\n\n &::backdrop {\n / Need to hardcode values in css for now.\n https://stackoverflow.com/questions/58818299/css-variables-not-working-in-dialogbackdrop\n /\n background-color: rgba(0 0 0 / 40%);\n animation: hds-modal-fade-in 0.3s cubic-bezier(0.45, 0.1, 0.65, 1); / --hds-micro-animation-duration-normal /\n }\n\n &[open] {\n animation: hds-modal-fade-in var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-in);\n }\n\n /\n Size\n /\n min-width: 100%;\n max-width: 100%;\n border-radius: 0;\n\n @media (width >= 720px) {\n min-width: 720px;\n max-width: min(720px, calc(100% - 6px - 2em));\n\n / NOTE: Re-adding border radius.\n * We actually get the border radius from .hds-box,\n * but since we are resetting border radius above for small screens\n * we need to re-add it here for larger screens.\n /\n border-radius: var(--hds-border-radius);\n }\n\n / Reset margin /\n & .hds-modal__header {\n margin: 0;\n }\n\n / stylelint-disable-next-line no-duplicate-selectors -- It's ok /\n & .hds-modal__header {\n font: var(--hds-typography-body-title);\n\n / Offset the close button, so text is not overlapping or right next to the button /\n padding-right: 16px;\n }\n}\n\n@keyframes hds-modal-fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n","/\n Font\n /\n.hds-typography-h1-display {\n font: var(--hds-brand-typography-h1-display);\n\n &.hds-typography-h1-display--min {\n font-size: var(--hds-brand-font-size-h1-display-min);\n line-height: var(--hds-brand-line-height-h1-display-min);\n }\n\n &.hds-typography-h1-display--max {\n font-size: var(--hds-brand-font-size-h1-display-max);\n line-height: var(--hds-brand-line-height-h1-display-max);\n }\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n\n &.hds-typography-h1--min {\n font-size: var(--hds-brand-font-size-h1-min);\n line-height: var(--hds-brand-line-height-h1-min);\n }\n\n &.hds-typography-h1--max {\n font-size: var(--hds-brand-font-size-h1-max);\n line-height: var(--hds-brand-line-height-h1-max);\n }\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n\n &.hds-typography-h2--min {\n font-size: var(--hds-brand-font-size-h2-min);\n line-height: var(--hds-brand-line-height-h2-min);\n }\n\n &.hds-typography-h2--max {\n font-size: var(--hds-brand-font-size-h2-max);\n line-height: var(--hds-brand-line-height-h2-max);\n }\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n\n &.hds-typography-h3--min {\n font-size: var(--hds-font-size-header-h3-min);\n line-height: var(--hds-line-height-header-h3-min);\n }\n\n &.hds-typography-h3--max {\n font-size: var(--hds-font-size-header-h3-max);\n line-height: var(--hds-line-height-header-h3-max);\n }\n}\n\n.hds-typography-h3-title {\n font: var(--hds-typography-header-h3-title);\n\n &.hds-typography-h3-title--min {\n font-size: var(--hds-font-size-header-h3-title-min);\n line-height: var(--hds-line-height-header-h3-title-min);\n }\n\n &.hds-typography-h3-title--max {\n font-size: var(--hds-font-size-header-h3-title-max);\n line-height: var(--hds-line-height-header-h3-title-max);\n }\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n\n &.hds-typography-body--min {\n font-size: var(--hds-font-size-body-min);\n line-height: var(--hds-line-height-body-min);\n }\n\n &.hds-typography-body--max {\n font-size: var(--hds-font-size-body-max);\n line-height: var(--hds-line-height-body-max);\n }\n}\n\n.hds-typography-body-title {\n font: var(--hds-typography-body-title);\n\n &.hds-typography-body-title--min {\n font-size: var(--hds-font-size-body-title-min);\n line-height: var(--hds-line-height-body-title-min);\n }\n\n &.hds-typography-body-title--max {\n font-size: var(--hds-font-size-body-title-max);\n line-height: var(--hds-line-height-body-title-max);\n }\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n\n &.hds-typography-body-small--min {\n font-size: var(--hds-font-size-body-small-min);\n line-height: var(--hds-line-height-body-small-min);\n }\n\n &.hds-typography-body-small--max {\n font-size: var(--hds-font-size-body-small-max);\n line-height: var(--hds-line-height-body-small-max);\n }\n}\n\n.hds-typography-body-small-title {\n font: var(--hds-typography-body-small-title);\n\n &.hds-typography-body-small-title--min {\n font-size: var(--hds-font-size-body-small-title-min);\n line-height: var(--hds-line-height-body-small-title-min);\n }\n\n &.hds-typography-body-small-title--max {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n }\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n}\n\n.hds-typography-caption-title {\n font: var(--hds-typography-caption-title);\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n\n &.hds-typography-technical--min {\n font-size: var(--hds-font-size-technical-min);\n line-height: var(--hds-line-height-technical-min);\n }\n\n &.hds-typography-technical--max {\n font-size: var(--hds-font-size-technical-max);\n line-height: var(--hds-line-height-technical-max);\n }\n}\n\n.hds-typography-technical-title {\n font: var(--hds-typography-technical-title);\n\n &.hds-typography-technical-title--min {\n font-size: var(--hds-font-size-technical-title-min);\n line-height: var(--hds-line-height-technical-title-min);\n }\n\n &.hds-typography-technical-title--max {\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n }\n}\n\n/\n Spacing\n /\n.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h1 ~ .hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n}\n\n.hds-typography-h3--spacing,\n.hds-typography-h3-title--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-body--spacing,\n.hds-typography-body-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-body-small--spacing,\n.hds-typography-body-small-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-caption--spacing,\n.hds-typography-caption-title--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-technical--spacing,\n.hds-typography-technical-title--spacing {\n margin-top: var(--hds-spacing-small-1);\n}\n",".hds-breadcrumbs {\n --hds-breadcrumb-image-left: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"> <path d=\"M11.0404 13.9322L11.3917 13.5887C11.462 13.4983 11.462 13.3537 11.3917 13.2814L8.21212 9.99096L11.3917 6.71864C11.462 6.64633 11.462 6.50169 11.3917 6.4113L11.0404 6.0678C10.9526 5.9774 10.8296 5.9774 10.7418 6.0678L7.0527 9.84633C6.98243 9.93672 6.98243 10.0633 7.0527 10.1537L10.7418 13.9322C10.8296 14.0226 10.9526 14.0226 11.0404 13.9322Z\" fill=\"black\"/></svg>');\n --hds-breadcrumb-image-right: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7.9596 6.0678L7.60826 6.4113C7.53799 6.50169 7.53799 6.64633 7.60826 6.71864L10.7879 10.009L7.60826 13.2814C7.53799 13.3537 7.53799 13.4983 7.60826 13.5887L7.9596 13.9322C8.04743 14.0226 8.1704 14.0226 8.25823 13.9322L11.9473 10.1537C12.0176 10.0633 12.0176 9.93672 11.9473 9.84633L8.25823 6.0678C8.1704 5.9774 8.04743 5.9774 7.9596 6.0678Z\" fill=\"%236E6E6E\"/></svg>');\n\n padding: 0;\n list-style-type: none;\n display: flex;\n\n /\n * Ensure the caption typography is used\n * Override general styling for links that sets the font-size\n /\n &,\n & a {\n font: var(--hds-typography-caption);\n }\n\n & li {\n /\n * Design in Figma has an extra 2px distance between\n * the text and underline border on links\n * making the total height 21px\n /\n .hds-link {\n padding-bottom: 2px;\n }\n\n &:first-child {\n &::before {\n display: none;\n }\n }\n\n &:last-child {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n &::before {\n display: inline-block;\n background-image: var(--hds-breadcrumb-image-right);\n width: 20px;\n height: 20px;\n margin: 0 var(--hds-spacing-small-1);\n }\n\n @media (width < 720px) {\n &:not(:only-child) {\n display: none;\n }\n\n &:nth-last-of-type(2) {\n display: inherit;\n\n &::before {\n display: inline-block;\n margin-left: 0;\n background-image: var(--hds-breadcrumb-image-left);\n }\n }\n }\n }\n}\n",".hds-box {\n position: relative;\n border-radius: var(--hds-border-radius);\n\n &, / Default /\n &.hds-box--light-grey {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-box--lighter {\n background-color: var(--hds-brand-colors-lighter);\n }\n\n &.hds-box--white {\n background-color: var(--hds-ui-colors-white);\n box-shadow: var(--hds-shadow-default);\n }\n\n &.hds-box--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n }\n\n / Padding /\n --hds-component-box-padding: var(--hds-spacing-medium-2);\n\n @media (width >= 720px) {\n --hds-component-box-padding: var(--hds-spacing-medium-3);\n }\n\n padding: var(--hds-component-box-padding);\n\n / Closed state /\n &.hds-box--closed {\n display: none;\n }\n}\n\n/\n Close button\n * TODO: Styling for the hover and focus effect can be improved upon\n /\n.hds-box .hds-box__close-button {\n / Icon /\n width: 24px;\n height: 24px;\n background: transparent;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>');\n\n / Positioning /\n position: absolute;\n top: var(--hds-spacing-small-4);\n right: var(--hds-spacing-small-4);\n padding: 0;\n border: none;\n cursor: pointer;\n\n / Hover effect /\n transition: filter var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n\n &:hover {\n filter: invert(40%);\n }\n\n / Active effect /\n &:active {\n outline: none;\n box-shadow: 0 0 0 2px var(--hds-ui-colors-black-hover);\n }\n}\n",".hds-tabs {\n --hds-tabs-border-active-size: var(--hds-stroke-thick);\n\n font: var(--hds-typography-body);\n\n .hds-tabs--list {\n padding-left: 0;\n display: inline-flex;\n width: auto;\n\n &.hds-tabs--list-horizontal {\n color: red;\n\n @media (width >= 720px) {\n border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: row;\n\n .hds-tabs--tab {\n padding: var(--hds-spacing-small-3) 0;\n border-bottom: var(--hds-tabs-border-active-size) solid transparent;\n\n &.hds-tabs--tab-active {\n border-bottom-color: var(--hds-brand-colors-signature);\n }\n\n &:not(:last-child) {\n margin-right: var(--hds-spacing-medium-3);\n }\n }\n }\n\n @media (width < 720px) {\n border-left: 1px solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: column;\n padding-left: 1px;\n\n .hds-tabs--tab {\n width: auto;\n padding: var(--hds-spacing-small-2) var(--hds-spacing-small-3);\n\n &.hds-tabs--tab-active {\n margin-left: calc(var(--hds-tabs-border-active-size) -1);\n border-left: var(--hds-tabs-border-active-size) solid var(--hds-brand-colors-signature);\n }\n }\n }\n }\n\n &.hds-tabs--list-vertical {\n border-left: 1px solid var(--hds-ui-colors-light-grey-fill);\n flex-direction: column;\n padding-left: 1px;\n\n .hds-tabs--tab {\n width: auto;\n padding: var(--hds-spacing-small-2) var(--hds-spacing-small-3);\n\n &.hds-tabs--tab-active {\n margin-left: calc(var(--hds-tabs-border-active-size) * -1);\n border-left: var(--hds-tabs-border-active-size) solid var(--hds-brand-colors-signature);\n }\n }\n }\n\n .hds-tabs--tab {\n cursor: pointer;\n font: var(--hds-typography-body);\n background: transparent;\n border: 0 none;\n text-align: left;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-tabs--tab-active {\n color: var(--hds-brand-colors-dark);\n }\n }\n }\n\n .hds-tabs--contents {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n",".hds-textarea {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n\n &.hds-textarea--error {\n .hds-textarea__textarea-wrapper,\n .hds-textarea__textarea-wrapper:focus-within,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:read-only),\n .hds-textarea__textarea-wrapper[data-readonly=\"true\"] /* Fallback for :has /,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:read-only):focus-within,\n .hds-textarea__textarea-wrapper[data-readonly=\"true\"]:focus-within / Fallback for :has /,\n .hds-textarea__textarea-wrapper:has(.hds-textarea__textarea:disabled),\n .hds-textarea__textarea-wrapper[data-disabled=\"true\"] / Fallback for :has / {\n border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n margin-bottom: calc(var(--hds-stroke-thick) - var(--hds-stroke-default));\n }\n\n .hds-textarea__textarea-wrapper {\n background-image: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n background-repeat: no-repeat;\n background-position-x: calc(100% - var(--hds-spacing-small-4));\n background-position-y: center;\n padding-right: calc(var(--hds-spacing-small-4) + var(--hds-spacing-medium-2));\n }\n }\n\n &, / Default /\n &.hds-textarea--default {\n .hds-textarea__textarea-wrapper {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n }\n\n &.hds-textarea--white {\n .hds-textarea__textarea-wrapper {\n background-color: var(--hds-ui-colors-white);\n }\n }\n\n &:focus-within .hds-textarea__label {\n color: var(--hds-brand-colors-darker);\n }\n\n & .hds-textarea__label {\n transition: color var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n }\n\n &:has(.hds-textarea__textarea:read-only, .hds-textarea__textarea:disabled):not(:focus-within)\n .hds-textarea__label {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n & .hds-textarea__textarea-wrapper {\n display: flex;\n flex-flow: row nowrap;\n width: 100%;\n border: var(--hds-stroke-default) solid transparent;\n border-radius: var(--hds-border-radius);\n transition:\n border var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal),\n margin var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n box-sizing: border-box;\n\n &:focus-within,\n &:has(.hds-textarea__textarea:read-only):focus-within,\n &[data-readonly=\"true\"]:focus-within / Fallback for :has / {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-colors-darker);\n }\n\n &:has(.hds-textarea__textarea:read-only),\n &[data-readonly=\"true\"] / Fallback for :has /,\n &:has(.hds-textarea__textarea:disabled),\n &[data-disabled=\"true\"] / Fallback for :has */ {\n color: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border: var(--hds-stroke-default) solid var(--hds-ui-colors-grey);\n }\n }\n\n & .hds-textarea__textarea {\n color: var(--hds-ui-colors-black);\n width: 100%;\n padding: var(--hds-spacing-small-4);\n font: var(--hds-typography-body-small);\n line-height: normal;\n border: 0;\n background: transparent;\n\n &::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n opacity: 1;\n }\n\n &:focus {\n outline: 0;\n\n &::placeholder {\n color: var(--hds-ui-colors-grey);\n }\n }\n\n &:read-only:focus::placeholder {\n color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n & .hds-textarea__error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-small-4);\n }\n}\n"],"names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-css",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "",
   "files": [
     "dist/**",