.spinnerContainer[data-stb-spinner='true'] { /* * Default values result in type = 'Large' * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx */ --spinner-container-size: var(--p-spacing-rem-96); --spinner-radius: 44; --spinner-perimeter: calc(2 * pi * var(--spinner-radius)); --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px); --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px); --spinner-track-color: var(--p-color-static-grey-background); --spinner-ticker-color: var(--p-color-static-red-foreground); --text-color: var(--p-color-text-primary); align-items: center; color: var(--text-color); display: flex; flex-direction: column; gap: var(--p-spacing-08); width: var(--spinner-container-size); p { font-size: 1rem; white-space: nowrap; } &.xxsmall { --spinner-radius: 8; --spinner-container-size: var(--p-spacing-rem-16); } &.xsmall { --spinner-radius: 10; --spinner-container-size: 1.375rem; } &.small { --spinner-radius: 11; --spinner-container-size: var(--p-spacing-rem-24); } &.medium { --spinner-radius: 24; --spinner-container-size: var(--p-spacing-rem-48); p { font-size: 0.875rem; } } &.onRed { --spinner-track-color: var(--p-color-static-grey-background); --spinner-ticker-color: var(--p-color-static-grey-foreground); --text-color: var(--p-color-text-primary); } & .spinner { animation: loading-indicator-spinner-rotate 5s linear infinite; } & .spinnerTrack { stroke: var(--spinner-track-color); } & .spinnerInMotion { animation: loading-indicator-spinner-spin infinite 6s ease-in-out; stroke: var(--spinner-ticker-color); stroke-dasharray: var(--spinner-perimeter); transform-origin: var(--spinner-radius) var(--spinner-radius) 0; } } @keyframes loading-indicator-spinner-spin { 0% { stroke-dasharray: var(--spinner-perimeter-full), var(--spinner-perimeter-fraction); transform: rotate(0deg); } 50% { stroke-dasharray: var(--spinner-perimeter-fraction), var(--spinner-perimeter-full); transform: rotate(720deg); } 100% { stroke-dasharray: var(--spinner-perimeter-full), var(--spinner-perimeter-fraction); transform: rotate(1080deg); } } @keyframes loading-indicator-spinner-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(720deg); } 100% { transform: rotate(1080deg); } } .button[data-stb-button='true'] { --button-background-color: var(--p-color-button-action-fill); --button-color: var(--p-color-text-on-color); --button-color-active: var(--p-color-text-on-color); --button-border-color: var(--p-color-button-action-fill); --button-outline: none; --button-height: var(--p-spacing-rem-40); align-items: center; background-color: var(--button-background-color); border: var(--p-border-rem-xsmall) solid var(--button-border-color); border-radius: var(--p-corner-radius-rem-extreme); box-sizing: border-box; color: var(--button-color); cursor: pointer; display: inline-flex; gap: var(--p-spacing-rem-08); height: var(--button-height); justify-content: center; max-height: var(--button-height); min-height: var(--button-height); outline: var(--button-outline); outline-offset: var(--p-outline-offset); padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24); position: relative; text-decoration: none; transition-duration: var(--p-transition-duration); transition-property: border, background-color, color; white-space: nowrap; &:focus-visible { --button-outline: var(--p-outline); } &[data-size='large'] { --button-height: var(--p-spacing-rem-40); @media (min-width: 600px) { --button-height: var(--p-spacing-rem-48); } } &[data-size='medium'] { --button-height: var(--p-spacing-rem-32); @media (min-width: 600px) { --button-height: var(--p-spacing-rem-40); } } &[data-size='small'] { --button-height: var(--p-spacing-rem-28); @media (min-width: 600px) { --button-height: var(--p-spacing-rem-32); } } &[data-variant='primary'] { &[disabled] { --button-color: var(--p-color-text-disabled); --button-background-color: var(--p-color-button-disabled); --button-border-color: var(--p-color-button-disabled); } &[data-loading='true'] { --button-background-color: var(--p-color-button-action-fill-active); --button-border-color: var(--p-color-button-action-fill-active); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-button-action-fill-hover); --button-border-color: var(--p-color-button-action-fill-hover); } } &:active { --button-background-color: var(--p-color-button-action-fill-active); --button-border-color: var(--p-color-button-action-fill-active); } } &[data-variant='secondary'] { --button-color: var(--p-color-text-primary); --button-background-color: transparent; --button-border-color: var(--p-color-stroke-strong); &[disabled] { --button-color: var(--p-color-text-disabled); --button-border-color: var(--p-color-stroke-disabled); } &[data-loading='true'] { --button-background-color: transparent; } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-primary-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-primary-active); } } &[data-variant='subtle'] { --button-color: var(--p-color-text-primary); --button-background-color: transparent; --button-border-color: var(--p-color-stroke-subtle-0); &[disabled] { --button-color: var(--p-color-text-disabled); --button-border-color: var(--p-color-stroke-disabled); } &[data-loading='true'] { --button-background-color: transparent; } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-primary-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-primary-active); } } &[data-variant='tertiary'] { --button-color: var(--p-color-text-interactive); --button-background-color: transparent; --button-border-color: transparent; &[disabled] { --button-color: var(--p-color-text-disabled); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-interactive-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-interactive-active); } &:focus-visible { --button-border-color: transparent; } &.underlined { & > span { position: relative; &::after { background-color: var(--button-color); bottom: 2px; content: ''; height: 1px; left: 0; position: absolute; width: 100%; } } @media (hover: hover) and (pointer: fine) { &:hover:not([disabled]) { & > span::after { background-color: var(--button-color); } } } &[disabled] { & > span::after { background-color: var(--button-color); } } } } &[disabled] { pointer-events: none; } } .buttonBrand[data-stb-button-brand='true'] { --button-background-color: var(--p-color-button-brand-fill); --button-color: var(--p-color-text-on-color); --button-border-color: var(--p-color-button-brand-fill); --button-outline: none; --button-height: var(--p-spacing-rem-40); align-items: center; background-color: var(--button-background-color); border: var(--p-border-rem-xsmall) solid var(--button-border-color); border-radius: var(--p-corner-radius-rem-extreme); box-sizing: border-box; color: var(--button-color); cursor: pointer; display: inline-flex; height: var(--button-height); justify-content: center; max-height: var(--button-height); min-height: var(--button-height); outline: var(--button-outline); outline-offset: var(--p-outline-offset); padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24); position: relative; text-decoration: none; transition-duration: var(--p-transition-duration); transition-property: border, background-color, color; white-space: nowrap; & .iconLeft { margin-right: var(--p-spacing-rem-08); } & .iconRight { margin-left: var(--p-spacing-rem-08); } &:focus-visible { --button-outline: var(--p-outline); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-button-brand-fill-hover); --button-border-color: var(--p-color-button-brand-fill-hover); } } &:active { --button-background-color: var(--p-color-button-brand-fill-active); --button-border-color: var(--p-color-button-brand-fill-active); } &[data-loading='true'] { --button-background-color: var(--p-color-button-brand-fill); --button-border-color: var(--p-color-button-brand-fill); } &[disabled] { --button-color: var(--p-color-text-disabled); --button-background-color: var(--p-color-button-disabled); --button-border-color: var(--p-color-button-disabled); pointer-events: none; } @media (min-width: 600px) { --button-height: var(--p-spacing-rem-48); } } .buttonCircle[data-stb-button-circle='true'] { --button-background-color: var(--p-color-button-action-fill); --button-color: var(--p-color-text-on-color); --button-color-active: var(--p-color-text-on-color); --button-border-color: var(--p-color-button-action-fill); --button-outline: none; --button-size: var(--p-spacing-rem-40); align-items: center; background-color: var(--button-background-color); border: var(--p-border-rem-xsmall) solid var(--button-border-color); border-radius: var(--p-corner-radius-rem-extreme); box-sizing: border-box; color: var(--button-color); cursor: pointer; display: inline-flex; height: var(--button-size); justify-content: center; max-height: var(--button-size); max-width: var(--button-size); min-height: var(--button-size); min-width: var(--button-size); outline: var(--button-outline); outline-offset: var(--p-outline-offset); position: relative; text-decoration: none; transition-duration: var(--p-transition-duration); transition-property: border, background-color, color; white-space: nowrap; width: var(--button-size); &:focus-visible { --button-outline: var(--p-outline); } &[data-size='large'] { --button-size: var(--p-spacing-rem-40); @media (min-width: 600px) { --button-size: var(--p-spacing-rem-48); } } &[data-size='medium'] { --button-size: var(--p-spacing-rem-32); @media (min-width: 600px) { --button-size: var(--p-spacing-rem-40); } } &[data-size='small'] { --button-size: var(--p-spacing-rem-28); @media (min-width: 600px) { --button-size: var(--p-spacing-rem-32); } } &[data-variant='primary'] { &[disabled] { --button-color: var(--p-color-text-disabled); --button-background-color: var(--p-color-button-disabled); --button-border-color: var(--p-color-button-disabled); } &[data-loading='true'] { --button-background-color: var(--p-color-button-action-fill-active); --button-border-color: var(--p-color-button-action-fill-active); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-button-action-fill-hover); --button-border-color: var(--p-color-button-action-fill-hover); } } &:active { --button-background-color: var(--p-color-button-action-fill-active); --button-border-color: var(--p-color-button-action-fill-active); } } &[data-variant='secondary'] { --button-color: var(--p-color-text-primary); --button-background-color: transparent; --button-border-color: var(--p-color-stroke-strong); &[disabled] { --button-color: var(--p-color-text-disabled); --button-border-color: var(--p-color-stroke-disabled); } &[data-loading='true'] { --button-background-color: transparent; } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-primary-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-primary-active); } } &[data-variant='subtle'] { --button-color: var(--p-color-text-primary); --button-background-color: transparent; --button-border-color: var(--p-color-stroke-subtle-0); &[disabled] { --button-color: var(--p-color-text-disabled); --button-border-color: var(--p-color-stroke-disabled); } &[data-loading='true'] { --button-background-color: transparent; } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-primary-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-primary-active); } } &[data-variant='tertiary'] { --button-color: var(--p-color-text-interactive); --button-background-color: transparent; --button-border-color: transparent; &[disabled] { --button-color: var(--p-color-text-disabled); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-background-hover); --button-color: var(--p-color-text-interactive-hover); } } &:active { --button-background-color: var(--p-color-background-pressed); --button-color: var(--p-color-text-interactive-active); } &:focus-visible { --button-border-color: transparent; } &.underlined { & > span { position: relative; &::after { background-color: var(--button-color); bottom: 2px; content: ''; height: 1px; left: 0; position: absolute; width: 100%; } } @media (hover: hover) and (pointer: fine) { &:hover:not([disabled]) { & > span::after { background-color: var(--button-color); } } } &[disabled] { & > span::after { background-color: var(--button-color); } } } } &[disabled] { pointer-events: none; } } .buttonCircleBrand[data-stb-button-circle-brand='true'] { --button-background-color: var(--p-color-button-brand-fill); --button-color: var(--p-color-text-on-color); --button-border-color: var(--p-color-button-brand-fill); --button-outline: none; --button-size: var(--p-spacing-rem-40); align-items: center; background-color: var(--button-background-color); border: var(--p-border-rem-xsmall) solid var(--button-border-color); border-radius: var(--p-corner-radius-rem-extreme); box-sizing: border-box; color: var(--button-color); cursor: pointer; display: inline-flex; height: var(--button-size); justify-content: center; max-height: var(--button-size); max-width: var(--button-size); min-height: var(--button-size); min-width: var(--button-size); outline: var(--button-outline); outline-offset: var(--p-outline-offset); position: relative; text-decoration: none; transition-duration: var(--p-transition-duration); transition-property: border, background-color, color; white-space: nowrap; &:focus-visible { --button-outline: var(--p-outline); } @media (hover: hover) and (pointer: fine) { &:hover { --button-background-color: var(--p-color-button-brand-fill-hover); --button-border-color: var(--p-color-button-brand-fill-hover); } } &:active { --button-background-color: var(--p-color-button-brand-fill-active); --button-border-color: var(--p-color-button-brand-fill-active); } &[data-loading='true'] { --button-background-color: var(--p-color-button-brand-fill); --button-border-color: var(--p-color-button-brand-fill); } &[disabled] { --button-color: var(--p-color-text-disabled); --button-background-color: var(--p-color-button-disabled); --button-border-color: var(--p-color-button-disabled); pointer-events: none; } @media (min-width: 600px) { --button-size: var(--p-spacing-rem-48); } } .buttonIcon[data-stb-button-icon='true'] { --button-icon-background-color: transparent; --button-icon-color: var(--p-color-icon-primary); --button-icon-outline: none; --button-icon-size: clamp(1.375rem, 3vw, 1.375rem); align-items: center; background-color: var(--button-icon-background-color); border: none; border-radius: 0.125rem; box-sizing: border-box; color: var(--button-icon-color); cursor: pointer; display: inline-flex; justify-content: center; margin: 0; max-height: var(--button-icon-size); max-width: var(--button-icon-size); min-height: var(--button-icon-size); min-width: var(--button-icon-size); outline: var(--button-icon-outline); outline-offset: var(--p-outline-offset); padding: 0; position: relative; text-decoration: none; transition-duration: var(--p-transition-duration); transition-property: border, background-color, color; white-space: nowrap; width: var(--button-icon-size); & > i { font-size: var(--button-icon-size); height: var(--button-icon-size); line-height: var(--button-icon-size); width: var(--button-icon-size); } &:focus-visible { --button-icon-outline: var(--p-outline); } @media (hover: hover) and (pointer: fine) { &:hover { --button-icon-color: var(--p-color-icon-primary-hover); } } &:active { --button-icon-color: var(--p-color-icon-primary-active); } &[data-size='xlarge'] { --button-icon-size: clamp(1.625rem, 3vw, 1.625rem); @media (min-width: 600px) { --button-icon-size: clamp(1.75rem, 3vw, 1.75rem); } } &[data-size='large'] { --button-icon-size: clamp(1.375rem, 3vw, 1.375rem); @media (min-width: 600px) { --button-icon-size: clamp(1.625rem, 3vw, 1.625rem); } } &[data-size='medium'] { --button-icon-size: clamp(1.25rem, 3vw, 1.25rem); @media (min-width: 600px) { --button-icon-size: clamp(1.375rem, 3vw, 1.375rem); } } &[data-size='small'] { --button-icon-size: clamp(1rem, 3vw, 1rem); @media (min-width: 600px) { --button-icon-size: clamp(1.125rem, 3vw, 1.125rem); } } &[disabled] { --button-icon-color: var(--p-color-icon-disabled); pointer-events: none; } } .systemIconBase[data-stb-system-icon='true'] { flex-shrink: 0; font-family: 'Storebrand Symbols'; font-size: 1rem; height: 1rem; line-height: 1rem; white-space: nowrap; width: 1rem; /* An option to turn on the legacy System Icons, if necessary. */ &[data-legacy='true'] { font-family: 'System-Icons' !important; } @media (min-width: 600px) { font-size: 1.5rem; height: 1.5rem; line-height: 1.5rem; width: 1.5rem; } } .iconBase[data-stb-icon='true'] { display: inline-flex; & svg { height: 100%; width: 100%; } & img { height: 100%; width: 100%; } } .illustrationBase[data-stb-illustration='true'] { display: inline-flex; &.autoHeight { img { height: auto; width: auto; } } & img { max-width: 100%; vertical-align: middle; } } .spinnerContainer[data-stb-spinner='true'] { /* * Default values result in type = 'Large' * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx */ --spinner-container-size: var(--p-spacing-rem-96); --spinner-radius: 44; --spinner-perimeter: calc(2 * pi * var(--spinner-radius)); --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px); --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px); --spinner-track-color: var(--p-color-static-grey-background); --spinner-ticker-color: var(--p-color-static-red-foreground); --text-color: var(--p-color-text-primary); align-items: center; color: var(--text-color); display: flex; flex-direction: column; gap: var(--p-spacing-08); width: var(--spinner-container-size); p { font-size: 1rem; white-space: nowrap; } &.xxsmall { --spinner-radius: 8; --spinner-container-size: var(--p-spacing-rem-16); } &.xsmall { --spinner-radius: 10; --spinner-container-size: 1.375rem; } &.small { --spinner-radius: 11; --spinner-container-size: var(--p-spacing-rem-24); } &.medium { --spinner-radius: 24; --spinner-container-size: var(--p-spacing-rem-48); p { font-size: 0.875rem; } } &.onRed { --spinner-track-color: var(--p-color-static-grey-background); --spinner-ticker-color: var(--p-color-static-grey-foreground); --text-color: var(--p-color-text-primary); } & .spinner { animation: loading-indicator-spinner-rotate 5s linear infinite; } & .spinnerTrack { stroke: var(--spinner-track-color); } & .spinnerInMotion { animation: loading-indicator-spinner-spin infinite 6s ease-in-out; stroke: var(--spinner-ticker-color); stroke-dasharray: var(--spinner-perimeter); transform-origin: var(--spinner-radius) var(--spinner-radius) 0; } } @keyframes loading-indicator-spinner-spin { 0% { stroke-dasharray: var(--spinner-perimeter-full), var(--spinner-perimeter-fraction); transform: rotate(0deg); } 50% { stroke-dasharray: var(--spinner-perimeter-fraction), var(--spinner-perimeter-full); transform: rotate(720deg); } 100% { stroke-dasharray: var(--spinner-perimeter-full), var(--spinner-perimeter-fraction); transform: rotate(1080deg); } } @keyframes loading-indicator-spinner-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(720deg); } 100% { transform: rotate(1080deg); } } nav[data-stb-breadcrumbs] { align-items: center; display: inline-flex; flex-wrap: wrap; & > button { cursor: pointer; } /* bold + equal padding for last item */ & a:last-child, & button:last-child { pointer-events: none; > span { text-decoration: none; } /* hide icon in last item */ & i { display: none; } } & > a, & > button { align-items: center; background: transparent; border: none; box-sizing: border-box; color: var(--p-color-text-primary); display: flex; height: 3rem; margin-right: var(--p-spacing-rem-12); padding: var(--p-spacing-rem-08) 0; position: relative; text-decoration: none; transition: background-color 0.1s ease; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--p-color-text-primary-hover); } } &:active { > span { color: var(--p-color-text-interactive); text-decoration: none; } } &:focus-visible { outline: var(--p-outline); } > span { text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: var(--p-spacing-rem-04); } } & i { margin-left: var(--p-spacing-rem-08); } } .systemIconBase[data-stb-system-icon='true'] { flex-shrink: 0; font-family: 'Storebrand Symbols'; font-size: 1rem; height: 1rem; line-height: 1rem; white-space: nowrap; width: 1rem; /* An option to turn on the legacy System Icons, if necessary. */ &[data-legacy='true'] { font-family: 'System-Icons' !important; } @media (min-width: 600px) { font-size: 1.5rem; height: 1.5rem; line-height: 1.5rem; width: 1.5rem; } } .iconBase[data-stb-icon='true'] { display: inline-flex; & svg { height: 100%; width: 100%; } & img { height: 100%; width: 100%; } } .illustrationBase[data-stb-illustration='true'] { display: inline-flex; &.autoHeight { img { height: auto; width: auto; } } & img { max-width: 100%; vertical-align: middle; } } /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-outline-style: solid; } } } @layer pretzel-assets { @font-face { font-display: swap; font-family: Storebrand Display; font-stretch: 100%; font-style: normal; font-weight: 400 700; src: url("/bank/lan/mine-boliger/assets/StorebrandDisplay-CA9Xw8Sr.woff2") format("woff2"); } @font-face { font-display: swap; font-family: Storebrand Display; font-stretch: 100%; font-style: italic; font-weight: 400 700; src: url("/bank/lan/mine-boliger/assets/StorebrandDisplay-Italic-CqCcSe91.woff2") format("woff2"); } @font-face { font-display: swap; font-family: Storebrand Text; font-stretch: 100%; font-style: normal; font-weight: 400 700; src: url("/bank/lan/mine-boliger/assets/StorebrandText-CYEBqy8k.woff2") format("woff2"); } @font-face { font-display: swap; font-family: Storebrand Text; font-stretch: 100%; font-style: italic; font-weight: 400 700; src: url("/bank/lan/mine-boliger/assets/StorebrandText-Italic-D-ROECLA.woff2") format("woff2"); } @font-face { font-family: Phosphor; src: url("/bank/lan/mine-boliger/assets/Phosphor-Bt6ABX3B.eot") format("eot"), url("/bank/lan/mine-boliger/assets/Phosphor-BlaQkZyc.woff") format("woff"), url("/bank/lan/mine-boliger/assets/Phosphor-Nhx53jOG.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/Phosphor-EW-6w6WG.ttf") format("truetype"); text-rendering: optimizelegibility; } body[data-phosphor-icons="true"] i, body [data-phosphor-icons="true"] i, body i[data-phosphor-icons="true"] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; font-style: normal; font-weight: normal; line-height: 1rem; font-family: Phosphor !important; } @font-face { font-family: Storebrand Symbols; src: url("/bank/lan/mine-boliger/assets/StorebrandSymbols-dmOhXooN.eot") format("eot"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-RC8376sd.woff") format("woff"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-prhhb4Gy.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-BepqQLXx.ttf") format("truetype"); text-rendering: optimizelegibility; } i { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1rem; font-style: normal; font-weight: normal; line-height: 1rem; font-family: Storebrand Symbols !important; } i:empty:not([class*="system-icon"]) { background: var(--p-color-icon-error); width: 1.5em; height: 1.5em; display: inline-flex; } @font-face { font-family: System-Icons; src: url("/bank/lan/mine-boliger/assets/System-Icons-BGh4jq34.eot") format("eot"), url("/bank/lan/mine-boliger/assets/System-Icons-Q4f6c94i.woff") format("woff"), url("/bank/lan/mine-boliger/assets/System-Icons-DHmz-9_p.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/System-Icons-gpLXqfZt.ttf") format("truetype"); text-rendering: optimizelegibility; } i.legacy, body[data-legacy-icons="true"] i { font-family: System-Icons !important; } :root, :host { --p-border-xsmall: 1px; --p-border-small: 2px; --p-border-medium: 3px; --p-border-large: 4px; --p-border-rem-xsmall: .0625rem; --p-border-rem-small: .125rem; --p-border-rem-medium: .1875rem; --p-border-rem-large: .25rem; --p-button-icon-desktop-xl: 2rem; --p-button-icon-desktop-lg: 1.5rem; --p-button-icon-desktop-md: 1.25rem; --p-button-icon-desktop-sm: 1.125rem; --p-button-icon-desktop-xsm: 1rem; --p-button-icon-mobile-xl: 1.125rem; --p-button-icon-mobile-lg: 1.125rem; --p-button-icon-mobile-md: 1.125rem; --p-button-icon-mobile-sm: 1.125rem; --p-button-icon-mobile-xsm: 1rem; --p-color-red-100: #fff0f0; --p-color-red-200: #ffdfdf; --p-color-red-300: #ffb8b8; --p-color-red-400: #fc9797; --p-color-red-500: #ff6c6c; --p-color-red-550: #ff5d5d; --p-color-red-600: #b20000; --p-color-red-700: #940000; --p-color-red-800: #700; --p-color-red-pale-800: #492727; --p-color-red-900: #560000; --p-color-red-1000: #310502; --p-color-purple-100: #f7f0ff; --p-color-purple-200: #f0deff; --p-color-purple-300: #e5ccff; --p-color-purple-400: #dbb8ff; --p-color-purple-500: #ce99ff; --p-color-purple-550: #ba6fff; --p-color-purple-600: #730099; --p-color-purple-700: #610080; --p-color-purple-800: #521264; --p-color-purple-pale-800: #472749; --p-color-purple-900: #410e44; --p-color-purple-1000: #29082b; --p-color-orange-100: #fff0eb; --p-color-orange-200: #ffe7e0; --p-color-orange-300: #ffc4b2; --p-color-orange-400: #ffa58f; --p-color-orange-500: #ff8468; --p-color-orange-600: #943100; --p-color-orange-pale-800: #493227; --p-color-grey-000: #fff; --p-color-grey-100: #f7f3f3; --p-color-grey-200: #e9e2e2; --p-color-grey-300: #d1c7c7; --p-color-grey-400: #b6a5a5; --p-color-grey-500: #9a8989; --p-color-grey-600: #7f6c6c; --p-color-grey-700: #5e5050; --p-color-grey-800: #3d3434; --p-color-grey-900: #2b2525; --p-color-grey-1000: #191515; --p-color-grey-cold-000: #fff; --p-color-grey-cold-100: #f2f1f4; --p-color-grey-cold-200: #e3e0e6; --p-color-grey-cold-300: #d1c7c7; --p-color-grey-cold-400: #afa5b6; --p-color-grey-cold-500: #93869c; --p-color-grey-cold-600: #776a81; --p-color-grey-cold-700: #584e5f; --p-color-grey-cold-800: #39323e; --p-color-grey-cold-900: #27222a; --p-color-grey-cold-1000: #171519; --p-color-logo-red: #da291c; --p-color-yellow-100: #fff7e6; --p-color-yellow-200: #fff0d1; --p-color-yellow-300: #ffe9bd; --p-color-yellow-400: #ffdb94; --p-color-yellow-500: #ffcf70; --p-color-yellow-600: #8f5f00; --p-color-yellow-700: #754e00; --p-color-yellow-800: #5c3d00; --p-color-yellow-pale-800: #433723; --p-color-yellow-900: #473000; --p-color-yellow-1000: #320; --p-color-green-100: #e6f9ec; --p-color-green-200: #d0f5dc; --p-color-green-300: #adebc1; --p-color-green-400: #88dda3; --p-color-green-500: #48cb71; --p-color-green-550: #30a956; --p-color-green-600: #1f6f3d; --p-color-green-700: #1a5b32; --p-color-green-800: #134425; --p-color-green-pale-800: #1e3828; --p-color-green-900: #10381e; --p-color-green-1000: #0b2816; --p-color-blue-100: #e1f2fe; --p-color-blue-200: #c9e7fd; --p-color-blue-300: #9dd2fb; --p-color-blue-400: #6cb5f9; --p-color-blue-500: #388fe5; --p-color-blue-600: #1f47ad; --p-color-blue-700: #17368c; --p-color-blue-800: #0b2365; --p-color-blue-pale-800: #273049; --p-color-blue-900: #001247; --p-color-blue-1000: #000a29; --p-color-focus-1: #00f; --p-color-scrim-1: #19151560; --p-corner-radius-none: 0px; --p-corner-radius-small: 8px; --p-corner-radius-medium: 16px; --p-corner-radius-extreme: 999px; --p-corner-radius-rem-none: 0rem; --p-corner-radius-rem-small: .5rem; --p-corner-radius-rem-medium: 1rem; --p-corner-radius-rem-extreme: 62.4375rem; --p-font-styles-size-12: 12px; --p-font-styles-size-14: 14px; --p-font-styles-size-16: 16px; --p-font-styles-size-18: 18px; --p-font-styles-size-20: 20px; --p-font-styles-size-24: 24px; --p-font-styles-size-28: 28px; --p-font-styles-size-32: 32px; --p-font-styles-size-36: 36px; --p-font-styles-size-40: 40px; --p-font-styles-size-64: 64px; --p-font-styles-line-height-desktop-14: 18px; --p-font-styles-line-height-desktop-16: 22px; --p-font-styles-line-height-desktop-18: 26px; --p-font-styles-line-height-desktop-20: 28px; --p-font-styles-line-height-desktop-24: 32px; --p-font-styles-line-height-desktop-32: 40px; --p-font-styles-line-height-desktop-40: 52px; --p-font-styles-line-height-desktop-64: 72px; --p-font-styles-line-height-mobile-12: 16px; --p-font-styles-line-height-mobile-14: 20px; --p-font-styles-line-height-mobile-16: 22px; --p-font-styles-line-height-mobile-18: 26px; --p-font-styles-line-height-mobile-20: 28px; --p-font-styles-line-height-mobile-24: 32px; --p-font-styles-line-height-mobile-28: 36px; --p-font-styles-line-height-mobile-36: 44px; --p-grid-column-04: 4px; --p-grid-column-08: 8px; --p-grid-column-12: 12px; --p-grid-margin-16: 16px; --p-grid-margin-24: 24px; --p-grid-gutter-16: 16px; --p-grid-gutter-24: 24px; --p-spacing-04: 4px; --p-spacing-08: 8px; --p-spacing-12: 12px; --p-spacing-16: 16px; --p-spacing-20: 20px; --p-spacing-24: 24px; --p-spacing-28: 28px; --p-spacing-32: 32px; --p-spacing-40: 40px; --p-spacing-48: 48px; --p-spacing-56: 56px; --p-spacing-64: 64px; --p-spacing-96: 96px; --p-spacing-rem-04: .25rem; --p-spacing-rem-08: .5rem; --p-spacing-rem-12: .75rem; --p-spacing-rem-16: 1rem; --p-spacing-rem-20: 1.25rem; --p-spacing-rem-24: 1.5rem; --p-spacing-rem-28: 1.75rem; --p-spacing-rem-32: 2rem; --p-spacing-rem-40: 2.5rem; --p-spacing-rem-48: 3rem; --p-spacing-rem-56: 3.5rem; --p-spacing-rem-64: 4rem; --p-spacing-rem-96: 6rem; } .section-away { margin: var(--p-spacing-rem-64) 0; } @media (min-width: 600px) { .section-away { margin: var(--p-spacing-rem-96) 0; } } .section-away-top { margin-top: var(--p-spacing-rem-64); } @media (min-width: 600px) { .section-away-top { margin-top: var(--p-spacing-rem-96); } } .section-away-bottom { margin-bottom: var(--p-spacing-rem-64); } @media (min-width: 600px) { .section-away-bottom { margin-bottom: var(--p-spacing-rem-96); } } .section-near { margin: var(--p-spacing-rem-40) 0; } @media (min-width: 600px) { .section-near { margin: var(--p-spacing-rem-48) 0; } } .section-near-top { margin-top: var(--p-spacing-rem-40); } @media (min-width: 600px) { .section-near-top { margin-top: var(--p-spacing-rem-48); } } .section-near-bottom { margin-bottom: var(--p-spacing-rem-40); } @media (min-width: 600px) { .section-near-bottom { margin-bottom: var(--p-spacing-rem-48); } } .subsection-away { margin: var(--p-spacing-rem-24) 0; } @media (min-width: 600px) { .subsection-away { margin: var(--p-spacing-rem-32) 0; } } .subsection-away-top { margin-top: var(--p-spacing-rem-24); } @media (min-width: 600px) { .subsection-away-top { margin-top: var(--p-spacing-rem-32); } } .subsection-away-bottom { margin-bottom: var(--p-spacing-rem-24); } @media (min-width: 600px) { .subsection-away-bottom { margin-bottom: var(--p-spacing-rem-32); } } .subsection-near { margin: var(--p-spacing-rem-12) 0; } @media (min-width: 600px) { .subsection-near { margin: var(--p-spacing-rem-16) 0; } } .subsection-near-top { margin-top: var(--p-spacing-rem-12); } @media (min-width: 600px) { .subsection-near-top { margin-top: var(--p-spacing-rem-16); } } .subsection-near-bottom { margin-bottom: var(--p-spacing-rem-12); } @media (min-width: 600px) { .subsection-near-bottom { margin-bottom: var(--p-spacing-rem-16); } } .heading-near { margin: var(--p-spacing-rem-08) 0; } @media (min-width: 600px) { .heading-near { margin: var(--p-spacing-rem-12) 0; } } .heading-near-top { margin-top: var(--p-spacing-rem-08); } @media (min-width: 600px) { .heading-near-top { margin-top: var(--p-spacing-rem-12); } } .heading-near-bottom { margin-bottom: var(--p-spacing-rem-08); } @media (min-width: 600px) { .heading-near-bottom { margin-bottom: var(--p-spacing-rem-12); } } .body-away { margin: var(--p-spacing-rem-12) 0; } @media (min-width: 600px) { .body-away { margin: var(--p-spacing-rem-16) 0; } } .body-away-top { margin-top: var(--p-spacing-rem-12); } @media (min-width: 600px) { .body-away-top { margin-top: var(--p-spacing-rem-16); } } .body-away-bottom { margin-bottom: var(--p-spacing-rem-12); } @media (min-width: 600px) { .body-away-bottom { margin-bottom: var(--p-spacing-rem-16); } } .body-near { margin: var(--p-spacing-rem-04) 0; } @media (min-width: 600px) { .body-near { margin: var(--p-spacing-rem-04) 0; } } .body-near-top { margin-top: var(--p-spacing-rem-04); } @media (min-width: 600px) { .body-near-top { margin-top: var(--p-spacing-rem-04); } } .body-near-bottom { margin-bottom: var(--p-spacing-rem-04); } @media (min-width: 600px) { .body-near-bottom { margin-bottom: var(--p-spacing-rem-04); } } :root, :host { --p-transition-duration: .1s; } :root, :host, [data-theme="pretzel-light"] { --p-color-background: var(--p-color-grey-000); --p-color-background-white: var(--p-color-grey-000); --p-color-background-grey: var(--p-color-grey-100); --p-color-background-hover: var(--p-color-grey-100); --p-color-background-hover-white: var(--p-color-grey-100); --p-color-background-hover-grey: var(--p-color-grey-200); --p-color-background-pressed: var(--p-color-grey-200); --p-color-background-pressed-white: var(--p-color-grey-200); --p-color-background-pressed-grey: var(--p-color-grey-300); --p-color-background-active: var(--p-color-red-600); --p-color-background-active-white: var(--p-color-red-600); --p-color-background-active-grey: var(--p-color-red-600); --p-color-background-disabled: var(--p-color-grey-200); --p-color-background-disabled-white: var(--p-color-grey-200); --p-color-background-disabled-grey: var(--p-color-grey-300); --p-color-background-selected: var(--p-color-red-700); --p-color-background-selected-white: var(--p-color-red-700); --p-color-background-selected-grey: var(--p-color-red-700); --p-color-background-selected-hover: var(--p-color-red-800); --p-color-background-selected-hover-white: var(--p-color-red-800); --p-color-background-selected-hover-grey: var(--p-color-red-800); --p-color-background-selected-pressed: var(--p-color-red-900); --p-color-background-selected-pressed-white: var(--p-color-red-900); --p-color-background-selected-pressed-grey: var(--p-color-red-900); --p-color-text-primary: var(--p-color-red-900); --p-color-text-primary-white: var(--p-color-red-900); --p-color-text-primary-grey: var(--p-color-red-900); --p-color-text-primary-hover: var(--p-color-red-800); --p-color-text-primary-hover-white: var(--p-color-red-800); --p-color-text-primary-hover-grey: var(--p-color-red-800); --p-color-text-primary-pressed: var(--p-color-red-700); --p-color-text-primary-pressed-white: var(--p-color-red-700); --p-color-text-primary-pressed-grey: var(--p-color-red-700); --p-color-text-primary-active: var(--p-color-red-700); --p-color-text-primary-active-white: var(--p-color-red-700); --p-color-text-primary-active-grey: var(--p-color-red-700); --p-color-text-interactive: var(--p-color-red-600); --p-color-text-interactive-white: var(--p-color-red-600); --p-color-text-interactive-grey: var(--p-color-red-600); --p-color-text-interactive-hover: var(--p-color-red-700); --p-color-text-interactive-hover-white: var(--p-color-red-700); --p-color-text-interactive-hover-grey: var(--p-color-red-700); --p-color-text-interactive-pressed: var(--p-color-red-800); --p-color-text-interactive-pressed-white: var(--p-color-red-800); --p-color-text-interactive-pressed-grey: var(--p-color-red-800); --p-color-text-interactive-active: var(--p-color-red-800); --p-color-text-interactive-active-white: var(--p-color-red-800); --p-color-text-interactive-active-grey: var(--p-color-red-800); --p-color-text-selected: var(--p-color-red-700); --p-color-text-selected-white: var(--p-color-red-700); --p-color-text-selected-grey: var(--p-color-red-700); --p-color-text-selected-hover: var(--p-color-red-800); --p-color-text-selected-hover-white: var(--p-color-red-800); --p-color-text-selected-hover-grey: var(--p-color-red-800); --p-color-text-selected-pressed: var(--p-color-red-900); --p-color-text-selected-pressed-white: var(--p-color-red-900); --p-color-text-selected-pressed-grey: var(--p-color-red-900); --p-color-text-secondary: var(--p-color-grey-700); --p-color-text-secondary-white: var(--p-color-grey-700); --p-color-text-secondary-grey: var(--p-color-grey-700); --p-color-text-placeholder: var(--p-color-grey-600); --p-color-text-placeholder-white: var(--p-color-grey-600); --p-color-text-placeholder-grey: var(--p-color-grey-600); --p-color-text-on-color: var(--p-color-red-100); --p-color-text-on-color-white: var(--p-color-red-100); --p-color-text-on-color-grey: var(--p-color-red-100); --p-color-text-disabled: var(--p-color-grey-400); --p-color-text-disabled-white: var(--p-color-grey-400); --p-color-text-disabled-grey: var(--p-color-grey-500); --p-color-text-error: var(--p-color-red-600); --p-color-text-alert: var(--p-color-grey-900); --p-color-text-alert-white: var(--p-color-grey-900); --p-color-text-alert-grey: var(--p-color-grey-900); --p-color-text-on-brand: var(--p-color-red-100); --p-color-text-on-brand-white: var(--p-color-red-100); --p-color-text-on-brand-grey: var(--p-color-red-100); --p-color-text-on-error: var(--p-color-red-800); --p-color-text-on-info: var(--p-color-blue-900); --p-color-text-on-warning: var(--p-color-yellow-900); --p-color-text-on-success: var(--p-color-green-900); --p-color-icon-primary: var(--p-color-red-900); --p-color-icon-primary-white: var(--p-color-red-900); --p-color-icon-primary-grey: var(--p-color-red-900); --p-color-icon-primary-hover: var(--p-color-red-800); --p-color-icon-primary-hover-white: var(--p-color-red-800); --p-color-icon-primary-hover-grey: var(--p-color-red-800); --p-color-icon-primary-active: var(--p-color-red-700); --p-color-icon-primary-active-white: var(--p-color-red-700); --p-color-icon-primary-active-grey: var(--p-color-red-700); --p-color-icon-primary-pressed: var(--p-color-red-700); --p-color-icon-primary-pressed-white: var(--p-color-red-700); --p-color-icon-primary-pressed-grey: var(--p-color-red-700); --p-color-icon-interactive: var(--p-color-red-600); --p-color-icon-interactive-white: var(--p-color-red-600); --p-color-icon-interactive-grey: var(--p-color-red-600); --p-color-icon-interactive-hover: var(--p-color-red-700); --p-color-icon-interactive-hover-white: var(--p-color-red-700); --p-color-icon-interactive-hover-grey: var(--p-color-red-700); --p-color-icon-interactive-pressed: var(--p-color-red-800); --p-color-icon-interactive-pressed-white: var(--p-color-red-800); --p-color-icon-interactive-pressed-grey: var(--p-color-red-800); --p-color-icon-interactive-active: var(--p-color-red-800); --p-color-icon-interactive-active-white: var(--p-color-red-800); --p-color-icon-interactive-active-grey: var(--p-color-red-800); --p-color-icon-on-color: var(--p-color-red-100); --p-color-icon-on-color-white: var(--p-color-red-100); --p-color-icon-on-color-grey: var(--p-color-red-100); --p-color-icon-disabled: var(--p-color-grey-400); --p-color-icon-disabled-white: var(--p-color-grey-400); --p-color-icon-disabled-grey: var(--p-color-grey-500); --p-color-icon-error: var(--p-color-red-600); --p-color-icon-error-white: var(--p-color-red-600); --p-color-icon-error-grey: var(--p-color-red-600); --p-color-icon-success: var(--p-color-green-600); --p-color-icon-success-white: var(--p-color-green-600); --p-color-icon-success-grey: var(--p-color-green-600); --p-color-icon-warning: var(--p-color-yellow-600); --p-color-icon-warning-white: var(--p-color-yellow-600); --p-color-icon-warning-grey: var(--p-color-yellow-600); --p-color-icon-info: var(--p-color-blue-600); --p-color-icon-info-white: var(--p-color-blue-600); --p-color-icon-info-grey: var(--p-color-blue-600); --p-color-icon-neutral: var(--p-color-grey-900); --p-color-icon-neutral-white: var(--p-color-grey-900); --p-color-icon-neutral-grey: var(--p-color-grey-900); --p-color-icon-on-brand: var(--p-color-red-100); --p-color-icon-on-brand-white: var(--p-color-red-100); --p-color-icon-on-brand-grey: var(--p-color-red-100); --p-color-icon-on-error: var(--p-color-red-800); --p-color-icon-on-info: var(--p-color-blue-900); --p-color-icon-on-warning: var(--p-color-yellow-900); --p-color-icon-on-success: var(--p-color-green-900); --p-color-button-brand-fill: var(--p-color-red-600); --p-color-button-brand-fill-white: var(--p-color-red-600); --p-color-button-brand-fill-grey: var(--p-color-red-600); --p-color-button-brand-fill-hover: var(--p-color-red-700); --p-color-button-brand-fill-hover-white: var(--p-color-red-700); --p-color-button-brand-fill-hover-grey: var(--p-color-red-700); --p-color-button-brand-fill-pressed: var(--p-color-red-800); --p-color-button-brand-fill-pressed-white: var(--p-color-red-800); --p-color-button-brand-fill-pressed-grey: var(--p-color-red-800); --p-color-button-brand-fill-active: var(--p-color-red-800); --p-color-button-brand-fill-active-white: var(--p-color-red-800); --p-color-button-brand-fill-active-grey: var(--p-color-red-800); --p-color-button-action-fill: var(--p-color-red-900); --p-color-button-action-fill-white: var(--p-color-red-900); --p-color-button-action-fill-grey: var(--p-color-red-900); --p-color-button-action-fill-hover: var(--p-color-red-800); --p-color-button-action-fill-hover-white: var(--p-color-red-800); --p-color-button-action-fill-hover-grey: var(--p-color-red-800); --p-color-button-action-fill-pressed: var(--p-color-red-700); --p-color-button-action-fill-pressed-white: var(--p-color-red-700); --p-color-button-action-fill-pressed-grey: var(--p-color-red-700); --p-color-button-action-fill-active: var(--p-color-red-700); --p-color-button-action-fill-active-white: var(--p-color-red-700); --p-color-button-action-fill-active-grey: var(--p-color-red-700); --p-color-button-disabled: var(--p-color-grey-200); --p-color-button-disabled-white: var(--p-color-grey-200); --p-color-button-disabled-grey: var(--p-color-grey-300); --p-color-graphics-illustration-primary: var(--p-color-red-600); --p-color-graphics-illustration-primary-white: var(--p-color-red-600); --p-color-graphics-illustration-primary-grey: var(--p-color-red-600); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-900); --p-color-graphics-illustration-base-white: var(--p-color-purple-900); --p-color-graphics-illustration-base-grey: var(--p-color-purple-900); --p-color-graphics-illustration-white: var(--p-color-grey-000); --p-color-graphics-illustration-white-white: var(--p-color-grey-000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800); --p-color-static-brand-foreground: var(--p-color-red-600); --p-color-static-brand-foreground-white: var(--p-color-red-600); --p-color-static-brand-foreground-grey: var(--p-color-red-600); --p-color-static-brand-background: var(--p-color-red-200); --p-color-static-brand-background-white: var(--p-color-red-200); --p-color-static-brand-background-grey: var(--p-color-red-200); --p-color-static-orange-foreground: var(--p-color-orange-600); --p-color-static-orange-foreground-white: var(--p-color-orange-600); --p-color-static-orange-foreground-grey: var(--p-color-orange-600); --p-color-static-orange-background: var(--p-color-orange-200); --p-color-static-orange-background-white: var(--p-color-orange-200); --p-color-static-orange-background-grey: var(--p-color-orange-300); --p-color-static-purple-foreground: var(--p-color-purple-600); --p-color-static-purple-foreground-white: var(--p-color-purple-600); --p-color-static-purple-foreground-grey: var(--p-color-purple-600); --p-color-static-purple-background: var(--p-color-purple-200); --p-color-static-purple-background-white: var(--p-color-purple-200); --p-color-static-purple-background-grey: var(--p-color-purple-300); --p-color-static-red-foreground: var(--p-color-red-600); --p-color-static-red-foreground-white: var(--p-color-red-600); --p-color-static-red-foreground-grey: var(--p-color-red-600); --p-color-static-red-background: var(--p-color-red-200); --p-color-static-red-background-white: var(--p-color-red-200); --p-color-static-red-background-grey: var(--p-color-red-200); --p-color-static-grey-foreground: var(--p-color-grey-600); --p-color-static-grey-foreground-white: var(--p-color-grey-600); --p-color-static-grey-foreground-grey: var(--p-color-grey-600); --p-color-static-grey-background: var(--p-color-grey-200); --p-color-static-grey-background-white: var(--p-color-grey-200); --p-color-static-grey-background-grey: var(--p-color-grey-300); --p-color-static-risk-filled: var(--p-color-orange-600); --p-color-static-risk-filled-white: var(--p-color-orange-600); --p-color-static-risk-filled-grey: var(--p-color-orange-600); --p-color-static-risk-unfilled: var(--p-color-orange-200); --p-color-static-risk-unfilled-white: var(--p-color-orange-200); --p-color-static-risk-unfilled-grey: var(--p-color-orange-300); --p-color-static-sustainability-filled: var(--p-color-purple-600); --p-color-static-sustainability-filled-white: var(--p-color-purple-600); --p-color-static-sustainability-filled-grey: var(--p-color-purple-600); --p-color-static-sustainability-unfilled: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-400); --p-color-states-toggle-off-white: var(--p-color-grey-400); --p-color-states-toggle-off-grey: var(--p-color-grey-500); --p-color-states-toggle-off-hover: var(--p-color-grey-300); --p-color-states-toggle-off-hover-white: var(--p-color-grey-300); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-400); --p-color-surface-1: var(--p-color-grey-100); --p-color-surface-1-white: var(--p-color-grey-100); --p-color-surface-1-grey: var(--p-color-grey-000); --p-color-surface-2: var(--p-color-grey-000); --p-color-surface-2-white: var(--p-color-grey-000); --p-color-surface-2-grey: var(--p-color-grey-100); --p-color-surface-1-hover: var(--p-color-grey-200); --p-color-surface-1-hover-white: var(--p-color-grey-200); --p-color-surface-1-hover-grey: var(--p-color-grey-200); --p-color-surface-2-hover: var(--p-color-grey-200); --p-color-surface-2-hover-white: var(--p-color-grey-200); --p-color-surface-2-hover-grey: var(--p-color-grey-200); --p-color-surface-inverse: var(--p-color-red-900); --p-color-surface-inverse-white: var(--p-color-red-900); --p-color-surface-inverse-grey: var(--p-color-red-900); --p-color-surface-inverse-hover: var(--p-color-red-800); --p-color-surface-inverse-hover-white: var(--p-color-red-800); --p-color-surface-inverse-hover-grey: var(--p-color-red-800); --p-color-surface-inverse-pressed: var(--p-color-red-700); --p-color-surface-inverse-pressed-white: var(--p-color-red-700); --p-color-surface-inverse-pressed-grey: var(--p-color-red-700); --p-color-surface-selected: var(--p-color-red-700); --p-color-surface-selected-white: var(--p-color-red-700); --p-color-surface-selected-grey: var(--p-color-red-700); --p-color-surface-selected-hover: var(--p-color-red-800); --p-color-surface-selected-hover-white: var(--p-color-red-800); --p-color-surface-selected-hover-grey: var(--p-color-red-800); --p-color-surface-selected-pressed: var(--p-color-red-800); --p-color-surface-selected-pressed-white: var(--p-color-red-800); --p-color-surface-selected-pressed-grey: var(--p-color-red-800); --p-color-surface-selected-active: var(--p-color-red-900); --p-color-surface-selected-active-white: var(--p-color-red-900); --p-color-surface-selected-active-grey: var(--p-color-red-900); --p-color-surface-error: var(--p-color-red-200); --p-color-surface-error-white: var(--p-color-red-200); --p-color-surface-error-grey: var(--p-color-red-200); --p-color-surface-success: var(--p-color-green-200); --p-color-surface-success-white: var(--p-color-green-200); --p-color-surface-success-grey: var(--p-color-green-200); --p-color-surface-warning: var(--p-color-yellow-200); --p-color-surface-warning-white: var(--p-color-yellow-200); --p-color-surface-warning-grey: var(--p-color-yellow-200); --p-color-surface-info: var(--p-color-blue-200); --p-color-surface-info-white: var(--p-color-blue-200); --p-color-surface-info-grey: var(--p-color-blue-200); --p-color-surface-neutral: var(--p-color-grey-100); --p-color-surface-neutral-white: var(--p-color-grey-000); --p-color-surface-neutral-grey: var(--p-color-grey-100); --p-color-surface-static: var(--p-color-grey-000); --p-color-surface-static-white: var(--p-color-grey-000); --p-color-surface-static-grey: var(--p-color-grey-000); --p-color-stroke-strong: var(--p-color-red-900); --p-color-stroke-strong-white: var(--p-color-red-900); --p-color-stroke-strong-grey: var(--p-color-red-900); --p-color-stroke-strong-hover: var(--p-color-red-800); --p-color-stroke-strong-hover-white: var(--p-color-red-800); --p-color-stroke-strong-hover-grey: var(--p-color-red-800); --p-color-stroke-strong-pressed: var(--p-color-red-700); --p-color-stroke-strong-pressed-white: var(--p-color-red-700); --p-color-stroke-strong-pressed-grey: var(--p-color-red-700); --p-color-stroke-0: var(--p-color-grey-300); --p-color-stroke-0-white: var(--p-color-grey-300); --p-color-stroke-0-grey: var(--p-color-grey-400); --p-color-stroke-1: var(--p-color-grey-400); --p-color-stroke-1-white: var(--p-color-grey-400); --p-color-stroke-1-grey: var(--p-color-grey-300); --p-color-stroke-2: var(--p-color-grey-300); --p-color-stroke-2-white: var(--p-color-grey-300); --p-color-stroke-2-grey: var(--p-color-grey-400); --p-color-stroke-on-white: var(--p-color-grey-300); --p-color-stroke-on-white-white: var(--p-color-grey-300); --p-color-stroke-on-white-grey: var(--p-color-grey-300); --p-color-stroke-subtle-0: var(--p-color-grey-200); --p-color-stroke-subtle-0-white: var(--p-color-grey-200); --p-color-stroke-subtle-0-grey: var(--p-color-grey-300); --p-color-stroke-subtle-1: var(--p-color-grey-300); --p-color-stroke-subtle-1-white: var(--p-color-grey-300); --p-color-stroke-subtle-1-grey: var(--p-color-grey-200); --p-color-stroke-subtle-2: var(--p-color-grey-200); --p-color-stroke-subtle-2-white: var(--p-color-grey-200); --p-color-stroke-subtle-2-grey: var(--p-color-grey-300); --p-color-stroke-subtle-on-white: var(--p-color-grey-200); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-200); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-200); --p-color-stroke-subtle-hover: var(--p-color-red-800); --p-color-stroke-subtle-hover-white: var(--p-color-red-800); --p-color-stroke-subtle-hover-grey: var(--p-color-red-800); --p-color-stroke-subtle-pressed: var(--p-color-red-700); --p-color-stroke-subtle-pressed-white: var(--p-color-red-700); --p-color-stroke-subtle-pressed-grey: var(--p-color-red-700); --p-color-stroke-on-color: var(--p-color-red-100); --p-color-stroke-on-color-white: var(--p-color-red-100); --p-color-stroke-on-color-grey: var(--p-color-red-100); --p-color-stroke-interactive: var(--p-color-red-600); --p-color-stroke-interactive-white: var(--p-color-red-600); --p-color-stroke-interactive-grey: var(--p-color-red-600); --p-color-stroke-interactive-hover: var(--p-color-red-700); --p-color-stroke-interactive-hover-white: var(--p-color-red-700); --p-color-stroke-interactive-hover-grey: var(--p-color-red-700); --p-color-stroke-interactive-pressed: var(--p-color-red-800); --p-color-stroke-interactive-pressed-white: var(--p-color-red-800); --p-color-stroke-interactive-pressed-grey: var(--p-color-red-800); --p-color-stroke-selected: var(--p-color-red-700); --p-color-stroke-selected-white: var(--p-color-red-700); --p-color-stroke-selected-grey: var(--p-color-red-700); --p-color-stroke-selected-hover: var(--p-color-red-800); --p-color-stroke-selected-hover-white: var(--p-color-red-800); --p-color-stroke-selected-hover-grey: var(--p-color-red-800); --p-color-stroke-selected-pressed: var(--p-color-red-900); --p-color-stroke-selected-pressed-white: var(--p-color-red-900); --p-color-stroke-selected-pressed-grey: var(--p-color-red-900); --p-color-stroke-disabled: var(--p-color-grey-400); --p-color-stroke-disabled-white: var(--p-color-grey-400); --p-color-stroke-disabled-grey: var(--p-color-grey-500); --p-color-stroke-error: var(--p-color-red-600); --p-color-stroke-error-white: var(--p-color-red-600); --p-color-stroke-error-grey: var(--p-color-red-600); --p-color-stroke-success: var(--p-color-green-600); --p-color-stroke-success-white: var(--p-color-green-600); --p-color-stroke-success-grey: var(--p-color-green-600); --p-color-stroke-warning: var(--p-color-yellow-600); --p-color-stroke-warning-white: var(--p-color-yellow-600); --p-color-stroke-warning-grey: var(--p-color-yellow-600); --p-color-monochromatic-red-1: var(--p-color-red-550); --p-color-monochromatic-red-1-white: var(--p-color-red-550); --p-color-monochromatic-red-1-grey: var(--p-color-red-550); --p-color-monochromatic-red-2: var(--p-color-red-600); --p-color-monochromatic-red-2-white: var(--p-color-red-600); --p-color-monochromatic-red-2-grey: var(--p-color-red-600); --p-color-monochromatic-red-3: var(--p-color-red-800); --p-color-monochromatic-red-3-white: var(--p-color-red-800); --p-color-monochromatic-red-3-grey: var(--p-color-red-800); --p-color-monochromatic-red-4: var(--p-color-red-900); --p-color-monochromatic-red-4-white: var(--p-color-red-900); --p-color-monochromatic-red-4-grey: var(--p-color-red-900); --p-color-monochromatic-purple-1: var(--p-color-purple-550); --p-color-monochromatic-purple-1-white: var(--p-color-purple-550); --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550); --p-color-monochromatic-purple-2: var(--p-color-purple-600); --p-color-monochromatic-purple-2-white: var(--p-color-purple-600); --p-color-monochromatic-purple-2-grey: var(--p-color-purple-600); --p-color-monochromatic-purple-3: var(--p-color-purple-800); --p-color-monochromatic-purple-3-white: var(--p-color-purple-800); --p-color-monochromatic-purple-3-grey: var(--p-color-purple-800); --p-color-monochromatic-purple-4: var(--p-color-purple-900); --p-color-monochromatic-purple-4-white: var(--p-color-purple-900); --p-color-monochromatic-purple-4-grey: var(--p-color-purple-900); --p-color-categorical-1: var(--p-color-purple-800); --p-color-categorical-1-white: var(--p-color-purple-800); --p-color-categorical-1-grey: var(--p-color-purple-800); --p-color-categorical-2: var(--p-color-red-550); --p-color-categorical-2-white: var(--p-color-red-550); --p-color-categorical-2-grey: var(--p-color-red-550); --p-color-categorical-3: var(--p-color-red-600); --p-color-categorical-3-white: var(--p-color-red-600); --p-color-categorical-3-grey: var(--p-color-red-600); --p-color-categorical-4: var(--p-color-purple-550); --p-color-categorical-4-white: var(--p-color-purple-550); --p-color-categorical-4-grey: var(--p-color-purple-550); --p-color-categorical-5: var(--p-color-red-800); --p-color-categorical-5-white: var(--p-color-red-800); --p-color-categorical-5-grey: var(--p-color-red-800); --p-color-categorical-6: var(--p-color-grey-500); --p-color-categorical-6-white: var(--p-color-grey-500); --p-color-categorical-6-grey: var(--p-color-grey-500); --p-color-categorical-7: var(--p-color-blue-700); --p-color-categorical-7-white: var(--p-color-blue-700); --p-color-categorical-7-grey: var(--p-color-blue-700); --p-color-categorical-8: var(--p-color-green-550); --p-color-categorical-8-white: var(--p-color-green-550); --p-color-categorical-8-grey: var(--p-color-green-550); --p-color-categorical-9: var(--p-color-purple-600); --p-color-categorical-9-white: var(--p-color-purple-600); --p-color-categorical-9-grey: var(--p-color-purple-600); --p-color-categorical-10: var(--p-color-blue-500); --p-color-categorical-10-white: var(--p-color-blue-500); --p-color-categorical-10-grey: var(--p-color-blue-500); --p-color-categorical-11: var(--p-color-green-700); --p-color-categorical-11-white: var(--p-color-green-700); --p-color-categorical-11-grey: var(--p-color-green-700); --p-color-categorical-12: var(--p-color-grey-700); --p-color-categorical-12-white: var(--p-color-grey-700); --p-color-categorical-12-grey: var(--p-color-grey-700); --p-outline: .125rem solid var(--p-color-states-focus); --p-outline-offset: .125rem; } [data-theme="pretzel-dark"] { --p-color-background: var(--p-color-grey-1000); --p-color-background-white: var(--p-color-grey-1000); --p-color-background-grey: var(--p-color-grey-1000); --p-color-background-hover: var(--p-color-grey-900); --p-color-background-hover-white: var(--p-color-grey-900); --p-color-background-hover-grey: var(--p-color-grey-800); --p-color-background-pressed: var(--p-color-grey-800); --p-color-background-pressed-white: var(--p-color-grey-800); --p-color-background-pressed-grey: var(--p-color-grey-700); --p-color-background-active: var(--p-color-red-400); --p-color-background-active-white: var(--p-color-red-400); --p-color-background-active-grey: var(--p-color-red-400); --p-color-background-disabled: var(--p-color-grey-800); --p-color-background-disabled-white: var(--p-color-grey-800); --p-color-background-disabled-grey: var(--p-color-grey-700); --p-color-background-selected: var(--p-color-red-300); --p-color-background-selected-white: var(--p-color-red-300); --p-color-background-selected-grey: var(--p-color-red-300); --p-color-background-selected-hover: var(--p-color-red-200); --p-color-background-selected-hover-white: var(--p-color-red-200); --p-color-background-selected-hover-grey: var(--p-color-red-200); --p-color-background-selected-pressed: var(--p-color-red-100); --p-color-background-selected-pressed-white: var(--p-color-red-100); --p-color-background-selected-pressed-grey: var(--p-color-red-100); --p-color-text-primary: var(--p-color-red-100); --p-color-text-primary-white: var(--p-color-red-100); --p-color-text-primary-grey: var(--p-color-red-100); --p-color-text-primary-hover: var(--p-color-red-200); --p-color-text-primary-hover-white: var(--p-color-red-200); --p-color-text-primary-hover-grey: var(--p-color-red-200); --p-color-text-primary-pressed: var(--p-color-red-300); --p-color-text-primary-pressed-white: var(--p-color-red-300); --p-color-text-primary-pressed-grey: var(--p-color-red-300); --p-color-text-primary-active: var(--p-color-red-300); --p-color-text-primary-active-white: var(--p-color-red-300); --p-color-text-primary-active-grey: var(--p-color-red-300); --p-color-text-interactive: var(--p-color-red-200); --p-color-text-interactive-white: var(--p-color-red-200); --p-color-text-interactive-grey: var(--p-color-red-200); --p-color-text-interactive-hover: var(--p-color-red-400); --p-color-text-interactive-hover-white: var(--p-color-red-400); --p-color-text-interactive-hover-grey: var(--p-color-red-400); --p-color-text-interactive-pressed: var(--p-color-red-300); --p-color-text-interactive-pressed-white: var(--p-color-red-300); --p-color-text-interactive-pressed-grey: var(--p-color-red-300); --p-color-text-interactive-active: var(--p-color-red-300); --p-color-text-interactive-active-white: var(--p-color-red-300); --p-color-text-interactive-active-grey: var(--p-color-red-300); --p-color-text-selected: var(--p-color-red-300); --p-color-text-selected-white: var(--p-color-red-300); --p-color-text-selected-grey: var(--p-color-red-300); --p-color-text-selected-hover: var(--p-color-red-200); --p-color-text-selected-hover-white: var(--p-color-red-200); --p-color-text-selected-hover-grey: var(--p-color-red-200); --p-color-text-selected-pressed: var(--p-color-red-100); --p-color-text-selected-pressed-white: var(--p-color-red-100); --p-color-text-selected-pressed-grey: var(--p-color-red-100); --p-color-text-secondary: var(--p-color-grey-300); --p-color-text-secondary-white: var(--p-color-grey-300); --p-color-text-secondary-grey: var(--p-color-grey-300); --p-color-text-placeholder: var(--p-color-grey-400); --p-color-text-placeholder-white: var(--p-color-grey-400); --p-color-text-placeholder-grey: var(--p-color-grey-400); --p-color-text-on-color: var(--p-color-red-900); --p-color-text-on-color-white: var(--p-color-red-900); --p-color-text-on-color-grey: var(--p-color-red-900); --p-color-text-disabled: var(--p-color-grey-600); --p-color-text-disabled-white: var(--p-color-grey-600); --p-color-text-disabled-grey: var(--p-color-grey-500); --p-color-text-error: var(--p-color-red-400); --p-color-text-alert: var(--p-color-grey-100); --p-color-text-alert-white: var(--p-color-grey-100); --p-color-text-alert-grey: var(--p-color-grey-100); --p-color-text-on-brand: var(--p-color-red-900); --p-color-text-on-brand-white: var(--p-color-red-900); --p-color-text-on-brand-grey: var(--p-color-red-900); --p-color-text-on-error: var(--p-color-red-200); --p-color-text-on-info: var(--p-color-blue-100); --p-color-text-on-warning: var(--p-color-yellow-100); --p-color-text-on-success: var(--p-color-green-100); --p-color-icon-primary: var(--p-color-red-100); --p-color-icon-primary-white: var(--p-color-red-100); --p-color-icon-primary-grey: var(--p-color-red-100); --p-color-icon-primary-hover: var(--p-color-red-200); --p-color-icon-primary-hover-white: var(--p-color-red-200); --p-color-icon-primary-hover-grey: var(--p-color-red-200); --p-color-icon-primary-active: var(--p-color-red-300); --p-color-icon-primary-active-white: var(--p-color-red-300); --p-color-icon-primary-active-grey: var(--p-color-red-300); --p-color-icon-primary-pressed: var(--p-color-red-300); --p-color-icon-primary-pressed-white: var(--p-color-red-300); --p-color-icon-primary-pressed-grey: var(--p-color-red-300); --p-color-icon-interactive: var(--p-color-red-200); --p-color-icon-interactive-white: var(--p-color-red-200); --p-color-icon-interactive-grey: var(--p-color-red-200); --p-color-icon-interactive-hover: var(--p-color-red-400); --p-color-icon-interactive-hover-white: var(--p-color-red-400); --p-color-icon-interactive-hover-grey: var(--p-color-red-400); --p-color-icon-interactive-pressed: var(--p-color-red-300); --p-color-icon-interactive-pressed-white: var(--p-color-red-300); --p-color-icon-interactive-pressed-grey: var(--p-color-red-300); --p-color-icon-interactive-active: var(--p-color-red-300); --p-color-icon-interactive-active-white: var(--p-color-red-300); --p-color-icon-interactive-active-grey: var(--p-color-red-300); --p-color-icon-on-color: var(--p-color-red-900); --p-color-icon-on-color-white: var(--p-color-red-900); --p-color-icon-on-color-grey: var(--p-color-red-900); --p-color-icon-disabled: var(--p-color-grey-600); --p-color-icon-disabled-white: var(--p-color-grey-600); --p-color-icon-disabled-grey: var(--p-color-grey-500); --p-color-icon-error: var(--p-color-red-400); --p-color-icon-error-white: var(--p-color-red-400); --p-color-icon-error-grey: var(--p-color-red-400); --p-color-icon-success: var(--p-color-green-400); --p-color-icon-success-white: var(--p-color-green-400); --p-color-icon-success-grey: var(--p-color-green-400); --p-color-icon-warning: var(--p-color-yellow-400); --p-color-icon-warning-white: var(--p-color-yellow-400); --p-color-icon-warning-grey: var(--p-color-yellow-400); --p-color-icon-info: var(--p-color-blue-400); --p-color-icon-info-white: var(--p-color-blue-400); --p-color-icon-info-grey: var(--p-color-blue-400); --p-color-icon-neutral: var(--p-color-grey-100); --p-color-icon-neutral-white: var(--p-color-grey-100); --p-color-icon-neutral-grey: var(--p-color-grey-100); --p-color-icon-on-brand: var(--p-color-red-900); --p-color-icon-on-brand-white: var(--p-color-red-900); --p-color-icon-on-brand-grey: var(--p-color-red-900); --p-color-icon-on-error: var(--p-color-red-200); --p-color-icon-on-info: var(--p-color-blue-100); --p-color-icon-on-warning: var(--p-color-yellow-100); --p-color-icon-on-success: var(--p-color-green-100); --p-color-button-brand-fill: var(--p-color-red-400); --p-color-button-brand-fill-white: var(--p-color-red-400); --p-color-button-brand-fill-grey: var(--p-color-red-400); --p-color-button-brand-fill-hover: var(--p-color-red-300); --p-color-button-brand-fill-hover-white: var(--p-color-red-300); --p-color-button-brand-fill-hover-grey: var(--p-color-red-300); --p-color-button-brand-fill-pressed: var(--p-color-red-200); --p-color-button-brand-fill-pressed-white: var(--p-color-red-200); --p-color-button-brand-fill-pressed-grey: var(--p-color-red-200); --p-color-button-brand-fill-active: var(--p-color-red-200); --p-color-button-brand-fill-active-white: var(--p-color-red-200); --p-color-button-brand-fill-active-grey: var(--p-color-red-200); --p-color-button-action-fill: var(--p-color-red-100); --p-color-button-action-fill-white: var(--p-color-red-100); --p-color-button-action-fill-grey: var(--p-color-red-100); --p-color-button-action-fill-hover: var(--p-color-red-200); --p-color-button-action-fill-hover-white: var(--p-color-red-200); --p-color-button-action-fill-hover-grey: var(--p-color-red-200); --p-color-button-action-fill-pressed: var(--p-color-red-300); --p-color-button-action-fill-pressed-white: var(--p-color-red-300); --p-color-button-action-fill-pressed-grey: var(--p-color-red-300); --p-color-button-action-fill-active: var(--p-color-red-300); --p-color-button-action-fill-active-white: var(--p-color-red-300); --p-color-button-action-fill-active-grey: var(--p-color-red-300); --p-color-button-disabled: var(--p-color-grey-800); --p-color-button-disabled-white: var(--p-color-grey-800); --p-color-button-disabled-grey: var(--p-color-grey-800); --p-color-graphics-illustration-primary: var(--p-color-red-400); --p-color-graphics-illustration-primary-white: var(--p-color-red-400); --p-color-graphics-illustration-primary-grey: var(--p-color-red-400); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-100); --p-color-graphics-illustration-base-white: var(--p-color-purple-100); --p-color-graphics-illustration-base-grey: var(--p-color-purple-100); --p-color-graphics-illustration-white: var(--p-color-grey-1000); --p-color-graphics-illustration-white-white: var(--p-color-grey-1000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-1000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200); --p-color-static-brand-foreground: var(--p-color-red-400); --p-color-static-brand-foreground-white: var(--p-color-red-400); --p-color-static-brand-foreground-grey: var(--p-color-red-400); --p-color-static-brand-background: var(--p-color-red-800); --p-color-static-brand-background-white: var(--p-color-red-800); --p-color-static-brand-background-grey: var(--p-color-red-800); --p-color-static-orange-foreground: var(--p-color-orange-400); --p-color-static-orange-foreground-white: var(--p-color-orange-400); --p-color-static-orange-foreground-grey: var(--p-color-orange-400); --p-color-static-orange-background: var(--p-color-orange-200); --p-color-static-orange-background-white: var(--p-color-orange-200); --p-color-static-orange-background-grey: var(--p-color-orange-300); --p-color-static-purple-foreground: var(--p-color-purple-400); --p-color-static-purple-foreground-white: var(--p-color-purple-400); --p-color-static-purple-foreground-grey: var(--p-color-purple-400); --p-color-static-purple-background: var(--p-color-purple-800); --p-color-static-purple-background-white: var(--p-color-purple-800); --p-color-static-purple-background-grey: var(--p-color-purple-800); --p-color-static-red-foreground: var(--p-color-red-400); --p-color-static-red-foreground-white: var(--p-color-red-400); --p-color-static-red-foreground-grey: var(--p-color-red-400); --p-color-static-red-background: var(--p-color-red-800); --p-color-static-red-background-white: var(--p-color-red-800); --p-color-static-red-background-grey: var(--p-color-red-800); --p-color-static-grey-foreground: var(--p-color-grey-400); --p-color-static-grey-foreground-white: var(--p-color-grey-400); --p-color-static-grey-foreground-grey: var(--p-color-grey-400); --p-color-static-grey-background: var(--p-color-grey-800); --p-color-static-grey-background-white: var(--p-color-grey-800); --p-color-static-grey-background-grey: var(--p-color-grey-800); --p-color-static-risk-filled: var(--p-color-orange-200); --p-color-static-risk-filled-white: var(--p-color-orange-200); --p-color-static-risk-filled-grey: var(--p-color-orange-200); --p-color-static-risk-unfilled: var(--p-color-orange-600); --p-color-static-risk-unfilled-white: var(--p-color-orange-600); --p-color-static-risk-unfilled-grey: var(--p-color-orange-600); --p-color-static-sustainability-filled: var(--p-color-purple-400); --p-color-static-sustainability-filled-white: var(--p-color-purple-400); --p-color-static-sustainability-filled-grey: var(--p-color-purple-400); --p-color-static-sustainability-unfilled: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-800); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-600); --p-color-states-toggle-off-white: var(--p-color-grey-600); --p-color-states-toggle-off-grey: var(--p-color-grey-500); --p-color-states-toggle-off-hover: var(--p-color-grey-700); --p-color-states-toggle-off-hover-white: var(--p-color-grey-700); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-600); --p-color-surface-1: var(--p-color-grey-900); --p-color-surface-1-white: var(--p-color-grey-900); --p-color-surface-1-grey: var(--p-color-grey-1000); --p-color-surface-2: var(--p-color-grey-800); --p-color-surface-2-white: var(--p-color-grey-800); --p-color-surface-2-grey: var(--p-color-grey-800); --p-color-surface-1-hover: var(--p-color-grey-800); --p-color-surface-1-hover-white: var(--p-color-grey-800); --p-color-surface-1-hover-grey: var(--p-color-grey-800); --p-color-surface-2-hover: var(--p-color-grey-800); --p-color-surface-2-hover-white: var(--p-color-grey-800); --p-color-surface-2-hover-grey: var(--p-color-grey-800); --p-color-surface-inverse: var(--p-color-red-100); --p-color-surface-inverse-white: var(--p-color-red-100); --p-color-surface-inverse-grey: var(--p-color-red-100); --p-color-surface-inverse-hover: var(--p-color-red-200); --p-color-surface-inverse-hover-white: var(--p-color-red-200); --p-color-surface-inverse-hover-grey: var(--p-color-red-200); --p-color-surface-inverse-pressed: var(--p-color-red-300); --p-color-surface-inverse-pressed-white: var(--p-color-red-300); --p-color-surface-inverse-pressed-grey: var(--p-color-red-300); --p-color-surface-selected: var(--p-color-red-400); --p-color-surface-selected-white: var(--p-color-red-400); --p-color-surface-selected-grey: var(--p-color-red-400); --p-color-surface-selected-hover: var(--p-color-red-300); --p-color-surface-selected-hover-white: var(--p-color-red-300); --p-color-surface-selected-hover-grey: var(--p-color-red-300); --p-color-surface-selected-pressed: var(--p-color-red-200); --p-color-surface-selected-pressed-white: var(--p-color-red-200); --p-color-surface-selected-pressed-grey: var(--p-color-red-200); --p-color-surface-selected-active: var(--p-color-red-200); --p-color-surface-selected-active-white: var(--p-color-red-200); --p-color-surface-selected-active-grey: var(--p-color-red-200); --p-color-surface-error: var(--p-color-red-800); --p-color-surface-error-white: var(--p-color-red-800); --p-color-surface-error-grey: var(--p-color-red-800); --p-color-surface-success: var(--p-color-green-800); --p-color-surface-success-white: var(--p-color-green-800); --p-color-surface-success-grey: var(--p-color-green-800); --p-color-surface-warning: var(--p-color-yellow-800); --p-color-surface-warning-white: var(--p-color-yellow-800); --p-color-surface-warning-grey: var(--p-color-yellow-800); --p-color-surface-info: var(--p-color-blue-800); --p-color-surface-info-white: var(--p-color-blue-800); --p-color-surface-info-grey: var(--p-color-blue-800); --p-color-surface-neutral: var(--p-color-grey-900); --p-color-surface-neutral-white: var(--p-color-grey-1000); --p-color-surface-neutral-grey: var(--p-color-grey-900); --p-color-surface-static: var(--p-color-grey-1000); --p-color-surface-static-white: var(--p-color-grey-900); --p-color-surface-static-grey: var(--p-color-grey-900); --p-color-stroke-strong: var(--p-color-red-200); --p-color-stroke-strong-white: var(--p-color-red-200); --p-color-stroke-strong-grey: var(--p-color-red-200); --p-color-stroke-strong-hover: var(--p-color-red-400); --p-color-stroke-strong-hover-white: var(--p-color-red-400); --p-color-stroke-strong-hover-grey: var(--p-color-red-400); --p-color-stroke-strong-pressed: var(--p-color-red-300); --p-color-stroke-strong-pressed-white: var(--p-color-red-300); --p-color-stroke-strong-pressed-grey: var(--p-color-red-300); --p-color-stroke-0: var(--p-color-grey-700); --p-color-stroke-0-white: var(--p-color-grey-700); --p-color-stroke-0-grey: var(--p-color-grey-600); --p-color-stroke-1: var(--p-color-grey-600); --p-color-stroke-1-white: var(--p-color-grey-600); --p-color-stroke-1-grey: var(--p-color-grey-700); --p-color-stroke-2: var(--p-color-grey-700); --p-color-stroke-2-white: var(--p-color-grey-700); --p-color-stroke-2-grey: var(--p-color-grey-600); --p-color-stroke-on-white: var(--p-color-grey-700); --p-color-stroke-on-white-white: var(--p-color-grey-700); --p-color-stroke-on-white-grey: var(--p-color-grey-700); --p-color-stroke-subtle-0: var(--p-color-grey-800); --p-color-stroke-subtle-0-white: var(--p-color-grey-800); --p-color-stroke-subtle-0-grey: var(--p-color-grey-700); --p-color-stroke-subtle-1: var(--p-color-grey-700); --p-color-stroke-subtle-1-white: var(--p-color-grey-700); --p-color-stroke-subtle-1-grey: var(--p-color-grey-800); --p-color-stroke-subtle-2: var(--p-color-grey-800); --p-color-stroke-subtle-2-white: var(--p-color-grey-800); --p-color-stroke-subtle-2-grey: var(--p-color-grey-700); --p-color-stroke-subtle-on-white: var(--p-color-grey-800); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-800); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-800); --p-color-stroke-subtle-hover: var(--p-color-red-200); --p-color-stroke-subtle-hover-white: var(--p-color-red-200); --p-color-stroke-subtle-hover-grey: var(--p-color-red-200); --p-color-stroke-subtle-pressed: var(--p-color-red-300); --p-color-stroke-subtle-pressed-white: var(--p-color-red-300); --p-color-stroke-subtle-pressed-grey: var(--p-color-red-300); --p-color-stroke-on-color: var(--p-color-red-900); --p-color-stroke-on-color-white: var(--p-color-red-900); --p-color-stroke-on-color-grey: var(--p-color-red-900); --p-color-stroke-interactive: var(--p-color-red-400); --p-color-stroke-interactive-white: var(--p-color-red-400); --p-color-stroke-interactive-grey: var(--p-color-red-400); --p-color-stroke-interactive-hover: var(--p-color-red-300); --p-color-stroke-interactive-hover-white: var(--p-color-red-300); --p-color-stroke-interactive-hover-grey: var(--p-color-red-300); --p-color-stroke-interactive-pressed: var(--p-color-red-200); --p-color-stroke-interactive-pressed-white: var(--p-color-red-200); --p-color-stroke-interactive-pressed-grey: var(--p-color-red-200); --p-color-stroke-selected: var(--p-color-red-300); --p-color-stroke-selected-white: var(--p-color-red-300); --p-color-stroke-selected-grey: var(--p-color-red-300); --p-color-stroke-selected-hover: var(--p-color-red-200); --p-color-stroke-selected-hover-white: var(--p-color-red-200); --p-color-stroke-selected-hover-grey: var(--p-color-red-200); --p-color-stroke-selected-pressed: var(--p-color-red-100); --p-color-stroke-selected-pressed-white: var(--p-color-red-100); --p-color-stroke-selected-pressed-grey: var(--p-color-red-100); --p-color-stroke-disabled: var(--p-color-grey-600); --p-color-stroke-disabled-white: var(--p-color-grey-600); --p-color-stroke-disabled-grey: var(--p-color-grey-500); --p-color-stroke-error: var(--p-color-red-400); --p-color-stroke-error-white: var(--p-color-red-400); --p-color-stroke-error-grey: var(--p-color-red-400); --p-color-stroke-success: var(--p-color-green-400); --p-color-stroke-success-white: var(--p-color-green-400); --p-color-stroke-success-grey: var(--p-color-green-400); --p-color-stroke-warning: var(--p-color-yellow-200); --p-color-stroke-warning-white: var(--p-color-yellow-200); --p-color-stroke-warning-grey: var(--p-color-yellow-200); --p-outline: 2px solid var(--p-color-states-focus); --p-outline-offset: 2px; } [data-theme="kron"] { --p-color-background: var(--p-color-grey-cold-000); --p-color-background-white: var(--p-color-grey-cold-000); --p-color-background-grey: var(--p-color-grey-cold-100); --p-color-background-hover: var(--p-color-grey-cold-100); --p-color-background-hover-white: var(--p-color-grey-cold-100); --p-color-background-hover-grey: var(--p-color-grey-cold-200); --p-color-background-pressed: var(--p-color-grey-cold-200); --p-color-background-pressed-white: var(--p-color-grey-cold-200); --p-color-background-pressed-grey: var(--p-color-grey-cold-300); --p-color-background-active: var(--p-color-red-600); --p-color-background-active-white: var(--p-color-red-600); --p-color-background-active-grey: var(--p-color-red-600); --p-color-background-disabled: var(--p-color-grey-cold-200); --p-color-background-disabled-white: var(--p-color-grey-cold-200); --p-color-background-disabled-grey: var(--p-color-grey-cold-300); --p-color-background-selected: var(--p-color-purple-700); --p-color-background-selected-white: var(--p-color-purple-700); --p-color-background-selected-grey: var(--p-color-purple-700); --p-color-background-selected-hover: var(--p-color-purple-800); --p-color-background-selected-hover-white: var(--p-color-purple-800); --p-color-background-selected-hover-grey: var(--p-color-purple-800); --p-color-background-selected-pressed: var(--p-color-purple-900); --p-color-background-selected-pressed-white: var(--p-color-purple-900); --p-color-background-selected-pressed-grey: var(--p-color-purple-900); --p-color-text-primary: var(--p-color-purple-900); --p-color-text-primary-white: var(--p-color-purple-900); --p-color-text-primary-grey: var(--p-color-purple-900); --p-color-text-primary-hover: var(--p-color-purple-800); --p-color-text-primary-hover-white: var(--p-color-purple-800); --p-color-text-primary-hover-grey: var(--p-color-purple-800); --p-color-text-primary-pressed: var(--p-color-purple-700); --p-color-text-primary-pressed-white: var(--p-color-purple-700); --p-color-text-primary-pressed-grey: var(--p-color-purple-700); --p-color-text-primary-active: var(--p-color-purple-700); --p-color-text-primary-active-white: var(--p-color-purple-700); --p-color-text-primary-active-grey: var(--p-color-purple-700); --p-color-text-interactive: var(--p-color-purple-800); --p-color-text-interactive-white: var(--p-color-purple-800); --p-color-text-interactive-grey: var(--p-color-purple-800); --p-color-text-interactive-hover: var(--p-color-purple-600); --p-color-text-interactive-hover-white: var(--p-color-purple-600); --p-color-text-interactive-hover-grey: var(--p-color-purple-600); --p-color-text-interactive-pressed: var(--p-color-purple-700); --p-color-text-interactive-pressed-white: var(--p-color-purple-700); --p-color-text-interactive-pressed-grey: var(--p-color-purple-700); --p-color-text-interactive-active: var(--p-color-purple-700); --p-color-text-interactive-active-white: var(--p-color-purple-700); --p-color-text-interactive-active-grey: var(--p-color-purple-700); --p-color-text-selected: var(--p-color-purple-700); --p-color-text-selected-white: var(--p-color-purple-700); --p-color-text-selected-grey: var(--p-color-purple-700); --p-color-text-selected-hover: var(--p-color-purple-800); --p-color-text-selected-hover-white: var(--p-color-purple-800); --p-color-text-selected-hover-grey: var(--p-color-purple-800); --p-color-text-selected-pressed: var(--p-color-purple-900); --p-color-text-selected-pressed-white: var(--p-color-purple-900); --p-color-text-selected-pressed-grey: var(--p-color-purple-900); --p-color-text-secondary: var(--p-color-grey-cold-700); --p-color-text-secondary-white: var(--p-color-grey-cold-700); --p-color-text-secondary-grey: var(--p-color-grey-cold-700); --p-color-text-placeholder: var(--p-color-grey-cold-600); --p-color-text-placeholder-white: var(--p-color-grey-cold-600); --p-color-text-placeholder-grey: var(--p-color-grey-cold-600); --p-color-text-on-color: var(--p-color-purple-100); --p-color-text-on-color-white: var(--p-color-purple-100); --p-color-text-on-color-grey: var(--p-color-purple-100); --p-color-text-disabled: var(--p-color-grey-cold-500); --p-color-text-disabled-white: var(--p-color-grey-cold-500); --p-color-text-disabled-grey: var(--p-color-grey-cold-500); --p-color-text-error: var(--p-color-red-600); --p-color-text-alert: var(--p-color-grey-cold-900); --p-color-text-alert-white: var(--p-color-grey-cold-900); --p-color-text-alert-grey: var(--p-color-grey-cold-900); --p-color-text-on-brand: var(--p-color-purple-100); --p-color-text-on-brand-white: var(--p-color-purple-100); --p-color-text-on-brand-grey: var(--p-color-purple-100); --p-color-text-on-error: var(--p-color-red-800); --p-color-text-on-info: var(--p-color-purple-900); --p-color-text-on-warning: var(--p-color-yellow-900); --p-color-text-on-success: var(--p-color-green-900); --p-color-icon-primary: var(--p-color-purple-900); --p-color-icon-primary-white: var(--p-color-purple-900); --p-color-icon-primary-grey: var(--p-color-purple-900); --p-color-icon-primary-hover: var(--p-color-purple-800); --p-color-icon-primary-hover-white: var(--p-color-purple-800); --p-color-icon-primary-hover-grey: var(--p-color-purple-800); --p-color-icon-primary-active: var(--p-color-purple-700); --p-color-icon-primary-active-white: var(--p-color-purple-700); --p-color-icon-primary-active-grey: var(--p-color-purple-700); --p-color-icon-primary-pressed: var(--p-color-purple-700); --p-color-icon-primary-pressed-white: var(--p-color-purple-700); --p-color-icon-primary-pressed-grey: var(--p-color-purple-700); --p-color-icon-interactive: var(--p-color-purple-800); --p-color-icon-interactive-white: var(--p-color-purple-800); --p-color-icon-interactive-grey: var(--p-color-purple-800); --p-color-icon-interactive-hover: var(--p-color-purple-600); --p-color-icon-interactive-hover-white: var(--p-color-purple-600); --p-color-icon-interactive-hover-grey: var(--p-color-purple-600); --p-color-icon-interactive-pressed: var(--p-color-purple-700); --p-color-icon-interactive-pressed-white: var(--p-color-purple-700); --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700); --p-color-icon-interactive-active: var(--p-color-purple-700); --p-color-icon-interactive-active-white: var(--p-color-purple-700); --p-color-icon-interactive-active-grey: var(--p-color-purple-700); --p-color-icon-on-color: var(--p-color-purple-100); --p-color-icon-on-color-white: var(--p-color-purple-100); --p-color-icon-on-color-grey: var(--p-color-purple-100); --p-color-icon-disabled: var(--p-color-grey-cold-500); --p-color-icon-disabled-white: var(--p-color-grey-cold-500); --p-color-icon-disabled-grey: var(--p-color-grey-cold-500); --p-color-icon-error: var(--p-color-red-600); --p-color-icon-error-white: var(--p-color-red-600); --p-color-icon-error-grey: var(--p-color-red-600); --p-color-icon-success: var(--p-color-green-600); --p-color-icon-success-white: var(--p-color-green-600); --p-color-icon-success-grey: var(--p-color-green-600); --p-color-icon-warning: var(--p-color-yellow-600); --p-color-icon-warning-white: var(--p-color-yellow-600); --p-color-icon-warning-grey: var(--p-color-yellow-600); --p-color-icon-info: var(--p-color-purple-600); --p-color-icon-info-white: var(--p-color-purple-600); --p-color-icon-info-grey: var(--p-color-purple-600); --p-color-icon-neutral: var(--p-color-grey-cold-900); --p-color-icon-neutral-white: var(--p-color-grey-cold-900); --p-color-icon-neutral-grey: var(--p-color-grey-cold-900); --p-color-icon-on-brand: var(--p-color-purple-100); --p-color-icon-on-brand-white: var(--p-color-purple-100); --p-color-icon-on-brand-grey: var(--p-color-purple-100); --p-color-icon-on-error: var(--p-color-red-800); --p-color-icon-on-info: var(--p-color-purple-900); --p-color-icon-on-warning: var(--p-color-yellow-900); --p-color-icon-on-success: var(--p-color-green-900); --p-color-button-brand-fill: var(--p-color-purple-900); --p-color-button-brand-fill-white: var(--p-color-purple-900); --p-color-button-brand-fill-grey: var(--p-color-purple-900); --p-color-button-brand-fill-hover: var(--p-color-purple-800); --p-color-button-brand-fill-hover-white: var(--p-color-purple-800); --p-color-button-brand-fill-hover-grey: var(--p-color-purple-800); --p-color-button-brand-fill-pressed: var(--p-color-purple-800); --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800); --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800); --p-color-button-brand-fill-active: var(--p-color-purple-800); --p-color-button-brand-fill-active-white: var(--p-color-purple-800); --p-color-button-brand-fill-active-grey: var(--p-color-purple-800); --p-color-button-action-fill: var(--p-color-purple-800); --p-color-button-action-fill-white: var(--p-color-purple-800); --p-color-button-action-fill-grey: var(--p-color-purple-800); --p-color-button-action-fill-hover: var(--p-color-purple-600); --p-color-button-action-fill-hover-white: var(--p-color-purple-600); --p-color-button-action-fill-hover-grey: var(--p-color-purple-600); --p-color-button-action-fill-pressed: var(--p-color-purple-700); --p-color-button-action-fill-pressed-white: var(--p-color-purple-700); --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700); --p-color-button-action-fill-active: var(--p-color-purple-700); --p-color-button-action-fill-active-white: var(--p-color-purple-700); --p-color-button-action-fill-active-grey: var(--p-color-purple-700); --p-color-button-disabled: var(--p-color-grey-cold-200); --p-color-button-disabled-white: var(--p-color-grey-cold-200); --p-color-button-disabled-grey: var(--p-color-grey-cold-300); --p-color-graphics-illustration-primary: var(--p-color-red-600); --p-color-graphics-illustration-primary-white: var(--p-color-red-600); --p-color-graphics-illustration-primary-grey: var(--p-color-red-600); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-900); --p-color-graphics-illustration-base-white: var(--p-color-purple-900); --p-color-graphics-illustration-base-grey: var(--p-color-purple-900); --p-color-graphics-illustration-white: var(--p-color-grey-cold-000); --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800); --p-color-static-brand-foreground: var(--p-color-purple-600); --p-color-static-brand-foreground-white: var(--p-color-purple-600); --p-color-static-brand-foreground-grey: var(--p-color-purple-600); --p-color-static-brand-background: var(--p-color-purple-200); --p-color-static-brand-background-white: var(--p-color-purple-200); --p-color-static-brand-background-grey: var(--p-color-purple-200); --p-color-static-orange-foreground: var(--p-color-orange-600); --p-color-static-orange-foreground-white: var(--p-color-orange-600); --p-color-static-orange-foreground-grey: var(--p-color-orange-600); --p-color-static-orange-background: var(--p-color-orange-200); --p-color-static-orange-background-white: var(--p-color-orange-200); --p-color-static-orange-background-grey: var(--p-color-orange-300); --p-color-static-purple-foreground: var(--p-color-purple-600); --p-color-static-purple-foreground-white: var(--p-color-purple-600); --p-color-static-purple-foreground-grey: var(--p-color-purple-600); --p-color-static-purple-background: var(--p-color-purple-200); --p-color-static-purple-background-white: var(--p-color-purple-200); --p-color-static-purple-background-grey: var(--p-color-purple-300); --p-color-static-red-foreground: var(--p-color-red-600); --p-color-static-red-foreground-white: var(--p-color-red-600); --p-color-static-red-foreground-grey: var(--p-color-red-600); --p-color-static-red-background: var(--p-color-red-200); --p-color-static-red-background-white: var(--p-color-red-200); --p-color-static-red-background-grey: var(--p-color-red-200); --p-color-static-grey-foreground: var(--p-color-grey-cold-600); --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600); --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600); --p-color-static-grey-background: var(--p-color-grey-cold-200); --p-color-static-grey-background-white: var(--p-color-grey-cold-200); --p-color-static-grey-background-grey: var(--p-color-grey-cold-300); --p-color-static-risk-filled: var(--p-color-orange-600); --p-color-static-risk-filled-white: var(--p-color-orange-600); --p-color-static-risk-filled-grey: var(--p-color-orange-600); --p-color-static-risk-unfilled: var(--p-color-orange-200); --p-color-static-risk-unfilled-white: var(--p-color-orange-200); --p-color-static-risk-unfilled-grey: var(--p-color-orange-300); --p-color-static-sustainability-filled: var(--p-color-purple-600); --p-color-static-sustainability-filled-white: var(--p-color-purple-600); --p-color-static-sustainability-filled-grey: var(--p-color-purple-600); --p-color-static-sustainability-unfilled: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-cold-400); --p-color-states-toggle-off-white: var(--p-color-grey-cold-400); --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500); --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300); --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400); --p-color-surface-1: var(--p-color-grey-cold-100); --p-color-surface-1-white: var(--p-color-grey-cold-100); --p-color-surface-1-grey: var(--p-color-grey-cold-000); --p-color-surface-2: var(--p-color-grey-cold-000); --p-color-surface-2-white: var(--p-color-grey-cold-000); --p-color-surface-2-grey: var(--p-color-grey-cold-100); --p-color-surface-1-hover: var(--p-color-grey-cold-200); --p-color-surface-1-hover-white: var(--p-color-grey-cold-200); --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200); --p-color-surface-2-hover: var(--p-color-grey-cold-200); --p-color-surface-2-hover-white: var(--p-color-grey-cold-200); --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200); --p-color-surface-inverse: var(--p-color-purple-900); --p-color-surface-inverse-white: var(--p-color-purple-900); --p-color-surface-inverse-grey: var(--p-color-purple-900); --p-color-surface-inverse-hover: var(--p-color-purple-800); --p-color-surface-inverse-hover-white: var(--p-color-purple-800); --p-color-surface-inverse-hover-grey: var(--p-color-purple-800); --p-color-surface-inverse-pressed: var(--p-color-purple-700); --p-color-surface-inverse-pressed-white: var(--p-color-purple-700); --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700); --p-color-surface-selected: var(--p-color-purple-600); --p-color-surface-selected-white: var(--p-color-purple-600); --p-color-surface-selected-grey: var(--p-color-purple-600); --p-color-surface-selected-hover: var(--p-color-purple-700); --p-color-surface-selected-hover-white: var(--p-color-purple-700); --p-color-surface-selected-hover-grey: var(--p-color-purple-700); --p-color-surface-selected-pressed: var(--p-color-purple-800); --p-color-surface-selected-pressed-white: var(--p-color-purple-800); --p-color-surface-selected-pressed-grey: var(--p-color-purple-800); --p-color-surface-selected-active: var(--p-color-purple-800); --p-color-surface-selected-active-white: var(--p-color-purple-800); --p-color-surface-selected-active-grey: var(--p-color-purple-800); --p-color-surface-error: var(--p-color-red-200); --p-color-surface-error-white: var(--p-color-red-200); --p-color-surface-error-grey: var(--p-color-red-200); --p-color-surface-success: var(--p-color-green-200); --p-color-surface-success-white: var(--p-color-green-200); --p-color-surface-success-grey: var(--p-color-green-200); --p-color-surface-warning: var(--p-color-yellow-200); --p-color-surface-warning-white: var(--p-color-yellow-200); --p-color-surface-warning-grey: var(--p-color-yellow-200); --p-color-surface-info: var(--p-color-purple-200); --p-color-surface-info-white: var(--p-color-purple-200); --p-color-surface-info-grey: var(--p-color-purple-200); --p-color-surface-neutral: var(--p-color-grey-cold-100); --p-color-surface-neutral-white: var(--p-color-grey-cold-000); --p-color-surface-neutral-grey: var(--p-color-grey-cold-100); --p-color-surface-static: var(--p-color-grey-cold-000); --p-color-surface-static-white: var(--p-color-grey-cold-000); --p-color-surface-static-grey: var(--p-color-grey-cold-000); --p-color-stroke-strong: var(--p-color-purple-900); --p-color-stroke-strong-white: var(--p-color-purple-900); --p-color-stroke-strong-grey: var(--p-color-purple-900); --p-color-stroke-strong-hover: var(--p-color-purple-800); --p-color-stroke-strong-hover-white: var(--p-color-purple-800); --p-color-stroke-strong-hover-grey: var(--p-color-purple-800); --p-color-stroke-strong-pressed: var(--p-color-purple-700); --p-color-stroke-strong-pressed-white: var(--p-color-purple-700); --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700); --p-color-stroke-0: var(--p-color-grey-cold-300); --p-color-stroke-0-white: var(--p-color-grey-cold-300); --p-color-stroke-0-grey: var(--p-color-grey-cold-400); --p-color-stroke-1: var(--p-color-grey-cold-400); --p-color-stroke-1-white: var(--p-color-grey-cold-400); --p-color-stroke-1-grey: var(--p-color-grey-cold-300); --p-color-stroke-2: var(--p-color-grey-cold-300); --p-color-stroke-2-white: var(--p-color-grey-cold-300); --p-color-stroke-2-grey: var(--p-color-grey-cold-400); --p-color-stroke-on-white: var(--p-color-grey-cold-300); --p-color-stroke-on-white-white: var(--p-color-grey-cold-300); --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-0: var(--p-color-grey-cold-200); --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200); --p-color-stroke-on-color: var(--p-color-purple-100); --p-color-stroke-on-color-white: var(--p-color-purple-100); --p-color-stroke-on-color-grey: var(--p-color-purple-100); --p-color-stroke-interactive: var(--p-color-purple-600); --p-color-stroke-interactive-white: var(--p-color-purple-600); --p-color-stroke-interactive-grey: var(--p-color-purple-600); --p-color-stroke-interactive-hover: var(--p-color-purple-700); --p-color-stroke-interactive-hover-white: var(--p-color-purple-700); --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700); --p-color-stroke-interactive-pressed: var(--p-color-purple-800); --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800); --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800); --p-color-stroke-selected: var(--p-color-purple-700); --p-color-stroke-selected-white: var(--p-color-purple-700); --p-color-stroke-selected-grey: var(--p-color-purple-700); --p-color-stroke-selected-hover: var(--p-color-purple-800); --p-color-stroke-selected-hover-white: var(--p-color-purple-800); --p-color-stroke-selected-hover-grey: var(--p-color-purple-800); --p-color-stroke-selected-pressed: var(--p-color-purple-900); --p-color-stroke-selected-pressed-white: var(--p-color-purple-900); --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900); --p-color-stroke-disabled: var(--p-color-grey-cold-400); --p-color-stroke-disabled-white: var(--p-color-grey-cold-400); --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500); --p-color-stroke-error: var(--p-color-red-600); --p-color-stroke-error-white: var(--p-color-red-600); --p-color-stroke-error-grey: var(--p-color-red-600); --p-color-stroke-success: var(--p-color-green-600); --p-color-stroke-success-white: var(--p-color-green-600); --p-color-stroke-success-grey: var(--p-color-green-600); --p-color-stroke-warning: var(--p-color-yellow-600); --p-color-stroke-warning-white: var(--p-color-yellow-600); --p-color-stroke-warning-grey: var(--p-color-yellow-600); --p-outline: 2px solid var(--p-color-states-focus); --p-outline-offset: 2px; } @media (prefers-color-scheme: dark) { [data-theme="kron"] { --p-color-background: var(--p-color-grey-cold-1000); --p-color-background-white: var(--p-color-grey-cold-1000); --p-color-background-grey: var(--p-color-grey-cold-900); --p-color-background-hover: var(--p-color-grey-cold-900); --p-color-background-hover-white: var(--p-color-grey-cold-900); --p-color-background-hover-grey: var(--p-color-grey-cold-800); --p-color-background-pressed: var(--p-color-grey-cold-800); --p-color-background-pressed-white: var(--p-color-grey-cold-800); --p-color-background-pressed-grey: var(--p-color-grey-cold-700); --p-color-background-active: var(--p-color-red-400); --p-color-background-active-white: var(--p-color-red-400); --p-color-background-active-grey: var(--p-color-red-400); --p-color-background-disabled: var(--p-color-grey-cold-800); --p-color-background-disabled-white: var(--p-color-grey-cold-800); --p-color-background-disabled-grey: var(--p-color-grey-cold-700); --p-color-background-selected: var(--p-color-purple-300); --p-color-background-selected-white: var(--p-color-purple-300); --p-color-background-selected-grey: var(--p-color-purple-300); --p-color-background-selected-hover: var(--p-color-purple-200); --p-color-background-selected-hover-white: var(--p-color-purple-200); --p-color-background-selected-hover-grey: var(--p-color-purple-200); --p-color-background-selected-pressed: var(--p-color-purple-100); --p-color-background-selected-pressed-white: var(--p-color-purple-100); --p-color-background-selected-pressed-grey: var(--p-color-purple-100); --p-color-text-primary: var(--p-color-purple-100); --p-color-text-primary-white: var(--p-color-purple-100); --p-color-text-primary-grey: var(--p-color-purple-100); --p-color-text-primary-hover: var(--p-color-purple-200); --p-color-text-primary-hover-white: var(--p-color-purple-200); --p-color-text-primary-hover-grey: var(--p-color-purple-200); --p-color-text-primary-pressed: var(--p-color-purple-300); --p-color-text-primary-pressed-white: var(--p-color-purple-300); --p-color-text-primary-pressed-grey: var(--p-color-purple-300); --p-color-text-primary-active: var(--p-color-purple-300); --p-color-text-primary-active-white: var(--p-color-purple-300); --p-color-text-primary-active-grey: var(--p-color-purple-300); --p-color-text-interactive: var(--p-color-purple-200); --p-color-text-interactive-white: var(--p-color-purple-200); --p-color-text-interactive-grey: var(--p-color-purple-200); --p-color-text-interactive-hover: var(--p-color-purple-400); --p-color-text-interactive-hover-white: var(--p-color-purple-400); --p-color-text-interactive-hover-grey: var(--p-color-purple-400); --p-color-text-interactive-pressed: var(--p-color-purple-300); --p-color-text-interactive-pressed-white: var(--p-color-purple-300); --p-color-text-interactive-pressed-grey: var(--p-color-purple-300); --p-color-text-interactive-active: var(--p-color-purple-300); --p-color-text-interactive-active-white: var(--p-color-purple-300); --p-color-text-interactive-active-grey: var(--p-color-purple-300); --p-color-text-selected: var(--p-color-purple-300); --p-color-text-selected-white: var(--p-color-purple-300); --p-color-text-selected-grey: var(--p-color-purple-300); --p-color-text-selected-hover: var(--p-color-purple-200); --p-color-text-selected-hover-white: var(--p-color-purple-200); --p-color-text-selected-hover-grey: var(--p-color-purple-200); --p-color-text-selected-pressed: var(--p-color-purple-100); --p-color-text-selected-pressed-white: var(--p-color-purple-100); --p-color-text-selected-pressed-grey: var(--p-color-purple-100); --p-color-text-secondary: var(--p-color-grey-cold-300); --p-color-text-secondary-white: var(--p-color-grey-cold-300); --p-color-text-secondary-grey: var(--p-color-grey-cold-300); --p-color-text-placeholder: var(--p-color-grey-cold-400); --p-color-text-placeholder-white: var(--p-color-grey-cold-400); --p-color-text-placeholder-grey: var(--p-color-grey-cold-400); --p-color-text-on-color: var(--p-color-purple-900); --p-color-text-on-color-white: var(--p-color-purple-900); --p-color-text-on-color-grey: var(--p-color-purple-900); --p-color-text-disabled: var(--p-color-grey-cold-700); --p-color-text-disabled-white: var(--p-color-grey-cold-700); --p-color-text-disabled-grey: var(--p-color-grey-cold-700); --p-color-text-error: var(--p-color-red-400); --p-color-text-alert: var(--p-color-grey-cold-100); --p-color-text-alert-white: var(--p-color-grey-cold-100); --p-color-text-alert-grey: var(--p-color-grey-cold-100); --p-color-text-on-brand: var(--p-color-purple-900); --p-color-text-on-brand-white: var(--p-color-purple-900); --p-color-text-on-brand-grey: var(--p-color-purple-900); --p-color-text-on-error: var(--p-color-red-200); --p-color-text-on-info: var(--p-color-purple-100); --p-color-text-on-warning: var(--p-color-yellow-100); --p-color-text-on-success: var(--p-color-green-100); --p-color-icon-primary: var(--p-color-purple-100); --p-color-icon-primary-white: var(--p-color-purple-100); --p-color-icon-primary-grey: var(--p-color-purple-100); --p-color-icon-primary-hover: var(--p-color-purple-200); --p-color-icon-primary-hover-white: var(--p-color-purple-200); --p-color-icon-primary-hover-grey: var(--p-color-purple-200); --p-color-icon-primary-active: var(--p-color-purple-300); --p-color-icon-primary-active-white: var(--p-color-purple-300); --p-color-icon-primary-active-grey: var(--p-color-purple-300); --p-color-icon-primary-pressed: var(--p-color-purple-300); --p-color-icon-primary-pressed-white: var(--p-color-purple-300); --p-color-icon-primary-pressed-grey: var(--p-color-purple-300); --p-color-icon-interactive: var(--p-color-purple-200); --p-color-icon-interactive-white: var(--p-color-purple-200); --p-color-icon-interactive-grey: var(--p-color-purple-200); --p-color-icon-interactive-hover: var(--p-color-purple-400); --p-color-icon-interactive-hover-white: var(--p-color-purple-400); --p-color-icon-interactive-hover-grey: var(--p-color-purple-400); --p-color-icon-interactive-pressed: var(--p-color-purple-300); --p-color-icon-interactive-pressed-white: var(--p-color-purple-300); --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300); --p-color-icon-interactive-active: var(--p-color-purple-300); --p-color-icon-interactive-active-white: var(--p-color-purple-300); --p-color-icon-interactive-active-grey: var(--p-color-purple-300); --p-color-icon-on-color: var(--p-color-purple-900); --p-color-icon-on-color-white: var(--p-color-purple-900); --p-color-icon-on-color-grey: var(--p-color-purple-900); --p-color-icon-disabled: var(--p-color-grey-cold-700); --p-color-icon-disabled-white: var(--p-color-grey-cold-700); --p-color-icon-disabled-grey: var(--p-color-grey-cold-700); --p-color-icon-error: var(--p-color-red-400); --p-color-icon-error-white: var(--p-color-red-400); --p-color-icon-error-grey: var(--p-color-red-400); --p-color-icon-success: var(--p-color-green-400); --p-color-icon-success-white: var(--p-color-green-400); --p-color-icon-success-grey: var(--p-color-green-400); --p-color-icon-warning: var(--p-color-yellow-400); --p-color-icon-warning-white: var(--p-color-yellow-400); --p-color-icon-warning-grey: var(--p-color-yellow-400); --p-color-icon-info: var(--p-color-purple-400); --p-color-icon-info-white: var(--p-color-purple-400); --p-color-icon-info-grey: var(--p-color-purple-400); --p-color-icon-neutral: var(--p-color-grey-cold-100); --p-color-icon-neutral-white: var(--p-color-grey-cold-100); --p-color-icon-neutral-grey: var(--p-color-grey-cold-100); --p-color-icon-on-brand: var(--p-color-purple-900); --p-color-icon-on-brand-white: var(--p-color-purple-900); --p-color-icon-on-brand-grey: var(--p-color-purple-900); --p-color-icon-on-error: var(--p-color-red-200); --p-color-icon-on-info: var(--p-color-purple-100); --p-color-icon-on-warning: var(--p-color-yellow-100); --p-color-icon-on-success: var(--p-color-green-100); --p-color-button-brand-fill: var(--p-color-purple-400); --p-color-button-brand-fill-white: var(--p-color-purple-400); --p-color-button-brand-fill-grey: var(--p-color-purple-400); --p-color-button-brand-fill-hover: var(--p-color-purple-300); --p-color-button-brand-fill-hover-white: var(--p-color-purple-300); --p-color-button-brand-fill-hover-grey: var(--p-color-purple-300); --p-color-button-brand-fill-pressed: var(--p-color-purple-200); --p-color-button-brand-fill-pressed-white: var(--p-color-purple-200); --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-200); --p-color-button-brand-fill-active: var(--p-color-purple-200); --p-color-button-brand-fill-active-white: var(--p-color-purple-200); --p-color-button-brand-fill-active-grey: var(--p-color-purple-200); --p-color-button-action-fill: var(--p-color-purple-200); --p-color-button-action-fill-white: var(--p-color-purple-200); --p-color-button-action-fill-grey: var(--p-color-purple-200); --p-color-button-action-fill-hover: var(--p-color-purple-400); --p-color-button-action-fill-hover-white: var(--p-color-purple-400); --p-color-button-action-fill-hover-grey: var(--p-color-purple-400); --p-color-button-action-fill-pressed: var(--p-color-purple-300); --p-color-button-action-fill-pressed-white: var(--p-color-purple-300); --p-color-button-action-fill-pressed-grey: var(--p-color-purple-300); --p-color-button-action-fill-active: var(--p-color-purple-300); --p-color-button-action-fill-active-white: var(--p-color-purple-300); --p-color-button-action-fill-active-grey: var(--p-color-purple-300); --p-color-button-disabled: var(--p-color-grey-cold-500); --p-color-button-disabled-white: var(--p-color-grey-cold-500); --p-color-button-disabled-grey: var(--p-color-grey-cold-600); --p-color-graphics-illustration-primary: var(--p-color-red-400); --p-color-graphics-illustration-primary-white: var(--p-color-red-400); --p-color-graphics-illustration-primary-grey: var(--p-color-red-400); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-100); --p-color-graphics-illustration-base-white: var(--p-color-purple-100); --p-color-graphics-illustration-base-grey: var(--p-color-purple-100); --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000); --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200); --p-color-static-brand-foreground: var(--p-color-purple-400); --p-color-static-brand-foreground-white: var(--p-color-purple-400); --p-color-static-brand-foreground-grey: var(--p-color-purple-400); --p-color-static-brand-background: var(--p-color-purple-800); --p-color-static-brand-background-white: var(--p-color-purple-800); --p-color-static-brand-background-grey: var(--p-color-purple-800); --p-color-static-orange-foreground: var(--p-color-orange-400); --p-color-static-orange-foreground-white: var(--p-color-orange-400); --p-color-static-orange-foreground-grey: var(--p-color-orange-400); --p-color-static-orange-background: var(--p-color-orange-800); --p-color-static-orange-background-white: var(--p-color-orange-800); --p-color-static-orange-background-grey: var(--p-color-orange-700); --p-color-static-purple-foreground: var(--p-color-purple-400); --p-color-static-purple-foreground-white: var(--p-color-purple-400); --p-color-static-purple-foreground-grey: var(--p-color-purple-400); --p-color-static-purple-background: var(--p-color-purple-800); --p-color-static-purple-background-white: var(--p-color-purple-800); --p-color-static-purple-background-grey: var(--p-color-purple-700); --p-color-static-red-foreground: var(--p-color-red-400); --p-color-static-red-foreground-white: var(--p-color-red-400); --p-color-static-red-foreground-grey: var(--p-color-red-400); --p-color-static-red-background: var(--p-color-red-800); --p-color-static-red-background-white: var(--p-color-red-800); --p-color-static-red-background-grey: var(--p-color-red-800); --p-color-static-grey-foreground: var(--p-color-grey-cold-400); --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400); --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400); --p-color-static-grey-background: var(--p-color-grey-cold-800); --p-color-static-grey-background-white: var(--p-color-grey-cold-800); --p-color-static-grey-background-grey: var(--p-color-grey-cold-700); --p-color-static-risk-filled: var(--p-color-orange-400); --p-color-static-risk-filled-white: var(--p-color-orange-400); --p-color-static-risk-filled-grey: var(--p-color-orange-400); --p-color-static-risk-unfilled: var(--p-color-orange-800); --p-color-static-risk-unfilled-white: var(--p-color-orange-800); --p-color-static-risk-unfilled-grey: var(--p-color-orange-700); --p-color-static-sustainability-filled: var(--p-color-purple-400); --p-color-static-sustainability-filled-white: var(--p-color-purple-400); --p-color-static-sustainability-filled-grey: var(--p-color-purple-400); --p-color-static-sustainability-unfilled: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-700); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-cold-800); --p-color-states-toggle-off-white: var(--p-color-grey-cold-800); --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500); --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700); --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600); --p-color-surface-1: var(--p-color-grey-cold-900); --p-color-surface-1-white: var(--p-color-grey-cold-900); --p-color-surface-1-grey: var(--p-color-grey-cold-1000); --p-color-surface-2: var(--p-color-grey-cold-1000); --p-color-surface-2-white: var(--p-color-grey-cold-1000); --p-color-surface-2-grey: var(--p-color-grey-cold-900); --p-color-surface-1-hover: var(--p-color-grey-cold-800); --p-color-surface-1-hover-white: var(--p-color-grey-cold-800); --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800); --p-color-surface-2-hover: var(--p-color-grey-cold-800); --p-color-surface-2-hover-white: var(--p-color-grey-cold-800); --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800); --p-color-surface-inverse: var(--p-color-purple-100); --p-color-surface-inverse-white: var(--p-color-purple-100); --p-color-surface-inverse-grey: var(--p-color-purple-100); --p-color-surface-inverse-hover: var(--p-color-purple-200); --p-color-surface-inverse-hover-white: var(--p-color-purple-200); --p-color-surface-inverse-hover-grey: var(--p-color-purple-200); --p-color-surface-inverse-pressed: var(--p-color-purple-300); --p-color-surface-inverse-pressed-white: var(--p-color-purple-300); --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300); --p-color-surface-selected: var(--p-color-purple-400); --p-color-surface-selected-white: var(--p-color-purple-400); --p-color-surface-selected-grey: var(--p-color-purple-400); --p-color-surface-selected-hover: var(--p-color-purple-300); --p-color-surface-selected-hover-white: var(--p-color-purple-300); --p-color-surface-selected-hover-grey: var(--p-color-purple-300); --p-color-surface-selected-pressed: var(--p-color-purple-200); --p-color-surface-selected-pressed-white: var(--p-color-purple-200); --p-color-surface-selected-pressed-grey: var(--p-color-purple-200); --p-color-surface-selected-active: var(--p-color-purple-200); --p-color-surface-selected-active-white: var(--p-color-purple-200); --p-color-surface-selected-active-grey: var(--p-color-purple-200); --p-color-surface-error: var(--p-color-red-800); --p-color-surface-error-white: var(--p-color-red-800); --p-color-surface-error-grey: var(--p-color-red-800); --p-color-surface-success: var(--p-color-green-800); --p-color-surface-success-white: var(--p-color-green-800); --p-color-surface-success-grey: var(--p-color-green-800); --p-color-surface-warning: var(--p-color-yellow-800); --p-color-surface-warning-white: var(--p-color-yellow-800); --p-color-surface-warning-grey: var(--p-color-yellow-800); --p-color-surface-info: var(--p-color-purple-800); --p-color-surface-info-white: var(--p-color-purple-800); --p-color-surface-info-grey: var(--p-color-purple-800); --p-color-surface-neutral: var(--p-color-grey-cold-900); --p-color-surface-neutral-white: var(--p-color-grey-cold-1000); --p-color-surface-neutral-grey: var(--p-color-grey-cold-900); --p-color-surface-static: var(--p-color-grey-cold-1000); --p-color-surface-static-white: var(--p-color-grey-cold-1000); --p-color-surface-static-grey: var(--p-color-grey-cold-1000); --p-color-stroke-strong: var(--p-color-purple-100); --p-color-stroke-strong-white: var(--p-color-purple-100); --p-color-stroke-strong-grey: var(--p-color-purple-100); --p-color-stroke-strong-hover: var(--p-color-purple-200); --p-color-stroke-strong-hover-white: var(--p-color-purple-200); --p-color-stroke-strong-hover-grey: var(--p-color-purple-200); --p-color-stroke-strong-pressed: var(--p-color-purple-300); --p-color-stroke-strong-pressed-white: var(--p-color-purple-300); --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300); --p-color-stroke-0: var(--p-color-grey-cold-700); --p-color-stroke-0-white: var(--p-color-grey-cold-700); --p-color-stroke-0-grey: var(--p-color-grey-cold-600); --p-color-stroke-1: var(--p-color-grey-cold-600); --p-color-stroke-1-white: var(--p-color-grey-cold-600); --p-color-stroke-1-grey: var(--p-color-grey-cold-700); --p-color-stroke-2: var(--p-color-grey-cold-700); --p-color-stroke-2-white: var(--p-color-grey-cold-700); --p-color-stroke-2-grey: var(--p-color-grey-cold-600); --p-color-stroke-on-white: var(--p-color-grey-cold-700); --p-color-stroke-on-white-white: var(--p-color-grey-cold-700); --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-0: var(--p-color-grey-cold-800); --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800); --p-color-stroke-on-color: var(--p-color-purple-900); --p-color-stroke-on-color-white: var(--p-color-purple-900); --p-color-stroke-on-color-grey: var(--p-color-purple-900); --p-color-stroke-interactive: var(--p-color-purple-400); --p-color-stroke-interactive-white: var(--p-color-purple-400); --p-color-stroke-interactive-grey: var(--p-color-purple-400); --p-color-stroke-interactive-hover: var(--p-color-purple-300); --p-color-stroke-interactive-hover-white: var(--p-color-purple-300); --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300); --p-color-stroke-interactive-pressed: var(--p-color-purple-200); --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200); --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200); --p-color-stroke-selected: var(--p-color-purple-300); --p-color-stroke-selected-white: var(--p-color-purple-300); --p-color-stroke-selected-grey: var(--p-color-purple-300); --p-color-stroke-selected-hover: var(--p-color-purple-200); --p-color-stroke-selected-hover-white: var(--p-color-purple-200); --p-color-stroke-selected-hover-grey: var(--p-color-purple-200); --p-color-stroke-selected-pressed: var(--p-color-purple-100); --p-color-stroke-selected-pressed-white: var(--p-color-purple-100); --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100); --p-color-stroke-disabled: var(--p-color-grey-cold-600); --p-color-stroke-disabled-white: var(--p-color-grey-cold-600); --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500); --p-color-stroke-error: var(--p-color-red-400); --p-color-stroke-error-white: var(--p-color-red-400); --p-color-stroke-error-grey: var(--p-color-red-400); --p-color-stroke-success: var(--p-color-green-400); --p-color-stroke-success-white: var(--p-color-green-400); --p-color-stroke-success-grey: var(--p-color-green-400); --p-color-stroke-warning: var(--p-color-yellow-400); --p-color-stroke-warning-white: var(--p-color-yellow-400); --p-color-stroke-warning-grey: var(--p-color-yellow-400); --p-outline: 2px solid var(--p-color-states-focus); --p-outline-offset: 2px; } } [data-theme="kron-light"] { --p-color-background: var(--p-color-grey-cold-000); --p-color-background-white: var(--p-color-grey-cold-000); --p-color-background-grey: var(--p-color-grey-cold-100); --p-color-background-hover: var(--p-color-grey-cold-100); --p-color-background-hover-white: var(--p-color-grey-cold-100); --p-color-background-hover-grey: var(--p-color-grey-cold-200); --p-color-background-pressed: var(--p-color-grey-cold-200); --p-color-background-pressed-white: var(--p-color-grey-cold-200); --p-color-background-pressed-grey: var(--p-color-grey-cold-300); --p-color-background-active: var(--p-color-red-600); --p-color-background-active-white: var(--p-color-red-600); --p-color-background-active-grey: var(--p-color-red-600); --p-color-background-disabled: var(--p-color-grey-cold-200); --p-color-background-disabled-white: var(--p-color-grey-cold-200); --p-color-background-disabled-grey: var(--p-color-grey-cold-300); --p-color-background-selected: var(--p-color-purple-700); --p-color-background-selected-white: var(--p-color-purple-700); --p-color-background-selected-grey: var(--p-color-purple-700); --p-color-background-selected-hover: var(--p-color-purple-800); --p-color-background-selected-hover-white: var(--p-color-purple-800); --p-color-background-selected-hover-grey: var(--p-color-purple-800); --p-color-background-selected-pressed: var(--p-color-purple-900); --p-color-background-selected-pressed-white: var(--p-color-purple-900); --p-color-background-selected-pressed-grey: var(--p-color-purple-900); --p-color-text-primary: var(--p-color-purple-900); --p-color-text-primary-white: var(--p-color-purple-900); --p-color-text-primary-grey: var(--p-color-purple-900); --p-color-text-primary-hover: var(--p-color-purple-800); --p-color-text-primary-hover-white: var(--p-color-purple-800); --p-color-text-primary-hover-grey: var(--p-color-purple-800); --p-color-text-primary-pressed: var(--p-color-purple-700); --p-color-text-primary-pressed-white: var(--p-color-purple-700); --p-color-text-primary-pressed-grey: var(--p-color-purple-700); --p-color-text-primary-active: var(--p-color-purple-700); --p-color-text-primary-active-white: var(--p-color-purple-700); --p-color-text-primary-active-grey: var(--p-color-purple-700); --p-color-text-interactive: var(--p-color-purple-800); --p-color-text-interactive-white: var(--p-color-purple-800); --p-color-text-interactive-grey: var(--p-color-purple-800); --p-color-text-interactive-hover: var(--p-color-purple-600); --p-color-text-interactive-hover-white: var(--p-color-purple-600); --p-color-text-interactive-hover-grey: var(--p-color-purple-600); --p-color-text-interactive-pressed: var(--p-color-purple-700); --p-color-text-interactive-pressed-white: var(--p-color-purple-700); --p-color-text-interactive-pressed-grey: var(--p-color-purple-700); --p-color-text-interactive-active: var(--p-color-purple-700); --p-color-text-interactive-active-white: var(--p-color-purple-700); --p-color-text-interactive-active-grey: var(--p-color-purple-700); --p-color-text-selected: var(--p-color-purple-700); --p-color-text-selected-white: var(--p-color-purple-700); --p-color-text-selected-grey: var(--p-color-purple-700); --p-color-text-selected-hover: var(--p-color-purple-800); --p-color-text-selected-hover-white: var(--p-color-purple-800); --p-color-text-selected-hover-grey: var(--p-color-purple-800); --p-color-text-selected-pressed: var(--p-color-purple-900); --p-color-text-selected-pressed-white: var(--p-color-purple-900); --p-color-text-selected-pressed-grey: var(--p-color-purple-900); --p-color-text-secondary: var(--p-color-grey-cold-700); --p-color-text-secondary-white: var(--p-color-grey-cold-700); --p-color-text-secondary-grey: var(--p-color-grey-cold-700); --p-color-text-placeholder: var(--p-color-grey-cold-600); --p-color-text-placeholder-white: var(--p-color-grey-cold-600); --p-color-text-placeholder-grey: var(--p-color-grey-cold-600); --p-color-text-on-color: var(--p-color-purple-100); --p-color-text-on-color-white: var(--p-color-purple-100); --p-color-text-on-color-grey: var(--p-color-purple-100); --p-color-text-disabled: var(--p-color-grey-cold-500); --p-color-text-disabled-white: var(--p-color-grey-cold-500); --p-color-text-disabled-grey: var(--p-color-grey-cold-500); --p-color-text-error: var(--p-color-red-600); --p-color-text-alert: var(--p-color-grey-cold-900); --p-color-text-alert-white: var(--p-color-grey-cold-900); --p-color-text-alert-grey: var(--p-color-grey-cold-900); --p-color-text-on-brand: var(--p-color-purple-100); --p-color-text-on-brand-white: var(--p-color-purple-100); --p-color-text-on-brand-grey: var(--p-color-purple-100); --p-color-text-on-error: var(--p-color-red-800); --p-color-text-on-info: var(--p-color-purple-900); --p-color-text-on-warning: var(--p-color-yellow-900); --p-color-text-on-success: var(--p-color-green-900); --p-color-icon-primary: var(--p-color-purple-900); --p-color-icon-primary-white: var(--p-color-purple-900); --p-color-icon-primary-grey: var(--p-color-purple-900); --p-color-icon-primary-hover: var(--p-color-purple-800); --p-color-icon-primary-hover-white: var(--p-color-purple-800); --p-color-icon-primary-hover-grey: var(--p-color-purple-800); --p-color-icon-primary-active: var(--p-color-purple-700); --p-color-icon-primary-active-white: var(--p-color-purple-700); --p-color-icon-primary-active-grey: var(--p-color-purple-700); --p-color-icon-primary-pressed: var(--p-color-purple-700); --p-color-icon-primary-pressed-white: var(--p-color-purple-700); --p-color-icon-primary-pressed-grey: var(--p-color-purple-700); --p-color-icon-interactive: var(--p-color-purple-800); --p-color-icon-interactive-white: var(--p-color-purple-800); --p-color-icon-interactive-grey: var(--p-color-purple-800); --p-color-icon-interactive-hover: var(--p-color-purple-600); --p-color-icon-interactive-hover-white: var(--p-color-purple-600); --p-color-icon-interactive-hover-grey: var(--p-color-purple-600); --p-color-icon-interactive-pressed: var(--p-color-purple-700); --p-color-icon-interactive-pressed-white: var(--p-color-purple-700); --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700); --p-color-icon-interactive-active: var(--p-color-purple-700); --p-color-icon-interactive-active-white: var(--p-color-purple-700); --p-color-icon-interactive-active-grey: var(--p-color-purple-700); --p-color-icon-on-color: var(--p-color-purple-100); --p-color-icon-on-color-white: var(--p-color-purple-100); --p-color-icon-on-color-grey: var(--p-color-purple-100); --p-color-icon-disabled: var(--p-color-grey-cold-500); --p-color-icon-disabled-white: var(--p-color-grey-cold-500); --p-color-icon-disabled-grey: var(--p-color-grey-cold-500); --p-color-icon-error: var(--p-color-red-600); --p-color-icon-error-white: var(--p-color-red-600); --p-color-icon-error-grey: var(--p-color-red-600); --p-color-icon-success: var(--p-color-green-600); --p-color-icon-success-white: var(--p-color-green-600); --p-color-icon-success-grey: var(--p-color-green-600); --p-color-icon-warning: var(--p-color-yellow-600); --p-color-icon-warning-white: var(--p-color-yellow-600); --p-color-icon-warning-grey: var(--p-color-yellow-600); --p-color-icon-info: var(--p-color-purple-600); --p-color-icon-info-white: var(--p-color-purple-600); --p-color-icon-info-grey: var(--p-color-purple-600); --p-color-icon-neutral: var(--p-color-grey-cold-900); --p-color-icon-neutral-white: var(--p-color-grey-cold-900); --p-color-icon-neutral-grey: var(--p-color-grey-cold-900); --p-color-icon-on-brand: var(--p-color-purple-100); --p-color-icon-on-brand-white: var(--p-color-purple-100); --p-color-icon-on-brand-grey: var(--p-color-purple-100); --p-color-icon-on-error: var(--p-color-red-800); --p-color-icon-on-info: var(--p-color-purple-900); --p-color-icon-on-warning: var(--p-color-yellow-900); --p-color-icon-on-success: var(--p-color-green-900); --p-color-button-brand-fill: var(--p-color-purple-900); --p-color-button-brand-fill-white: var(--p-color-purple-900); --p-color-button-brand-fill-grey: var(--p-color-purple-900); --p-color-button-brand-fill-hover: var(--p-color-purple-800); --p-color-button-brand-fill-hover-white: var(--p-color-purple-800); --p-color-button-brand-fill-hover-grey: var(--p-color-purple-800); --p-color-button-brand-fill-pressed: var(--p-color-purple-800); --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800); --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800); --p-color-button-brand-fill-active: var(--p-color-purple-800); --p-color-button-brand-fill-active-white: var(--p-color-purple-800); --p-color-button-brand-fill-active-grey: var(--p-color-purple-800); --p-color-button-action-fill: var(--p-color-purple-800); --p-color-button-action-fill-white: var(--p-color-purple-800); --p-color-button-action-fill-grey: var(--p-color-purple-800); --p-color-button-action-fill-hover: var(--p-color-purple-600); --p-color-button-action-fill-hover-white: var(--p-color-purple-600); --p-color-button-action-fill-hover-grey: var(--p-color-purple-600); --p-color-button-action-fill-pressed: var(--p-color-purple-700); --p-color-button-action-fill-pressed-white: var(--p-color-purple-700); --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700); --p-color-button-action-fill-active: var(--p-color-purple-700); --p-color-button-action-fill-active-white: var(--p-color-purple-700); --p-color-button-action-fill-active-grey: var(--p-color-purple-700); --p-color-button-disabled: var(--p-color-grey-cold-200); --p-color-button-disabled-white: var(--p-color-grey-cold-200); --p-color-button-disabled-grey: var(--p-color-grey-cold-300); --p-color-graphics-illustration-primary: var(--p-color-red-600); --p-color-graphics-illustration-primary-white: var(--p-color-red-600); --p-color-graphics-illustration-primary-grey: var(--p-color-red-600); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-900); --p-color-graphics-illustration-base-white: var(--p-color-purple-900); --p-color-graphics-illustration-base-grey: var(--p-color-purple-900); --p-color-graphics-illustration-white: var(--p-color-grey-cold-000); --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800); --p-color-static-brand-foreground: var(--p-color-purple-600); --p-color-static-brand-foreground-white: var(--p-color-purple-600); --p-color-static-brand-foreground-grey: var(--p-color-purple-600); --p-color-static-brand-background: var(--p-color-purple-200); --p-color-static-brand-background-white: var(--p-color-purple-200); --p-color-static-brand-background-grey: var(--p-color-purple-200); --p-color-static-orange-foreground: var(--p-color-orange-600); --p-color-static-orange-foreground-white: var(--p-color-orange-600); --p-color-static-orange-foreground-grey: var(--p-color-orange-600); --p-color-static-orange-background: var(--p-color-orange-200); --p-color-static-orange-background-white: var(--p-color-orange-200); --p-color-static-orange-background-grey: var(--p-color-orange-300); --p-color-static-purple-foreground: var(--p-color-purple-600); --p-color-static-purple-foreground-white: var(--p-color-purple-600); --p-color-static-purple-foreground-grey: var(--p-color-purple-600); --p-color-static-purple-background: var(--p-color-purple-200); --p-color-static-purple-background-white: var(--p-color-purple-200); --p-color-static-purple-background-grey: var(--p-color-purple-300); --p-color-static-red-foreground: var(--p-color-red-600); --p-color-static-red-foreground-white: var(--p-color-red-600); --p-color-static-red-foreground-grey: var(--p-color-red-600); --p-color-static-red-background: var(--p-color-red-200); --p-color-static-red-background-white: var(--p-color-red-200); --p-color-static-red-background-grey: var(--p-color-red-200); --p-color-static-grey-foreground: var(--p-color-grey-cold-600); --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600); --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600); --p-color-static-grey-background: var(--p-color-grey-cold-200); --p-color-static-grey-background-white: var(--p-color-grey-cold-200); --p-color-static-grey-background-grey: var(--p-color-grey-cold-300); --p-color-static-risk-filled: var(--p-color-orange-600); --p-color-static-risk-filled-white: var(--p-color-orange-600); --p-color-static-risk-filled-grey: var(--p-color-orange-600); --p-color-static-risk-unfilled: var(--p-color-orange-200); --p-color-static-risk-unfilled-white: var(--p-color-orange-200); --p-color-static-risk-unfilled-grey: var(--p-color-orange-300); --p-color-static-sustainability-filled: var(--p-color-purple-600); --p-color-static-sustainability-filled-white: var(--p-color-purple-600); --p-color-static-sustainability-filled-grey: var(--p-color-purple-600); --p-color-static-sustainability-unfilled: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-cold-400); --p-color-states-toggle-off-white: var(--p-color-grey-cold-400); --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500); --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300); --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400); --p-color-surface-1: var(--p-color-grey-cold-100); --p-color-surface-1-white: var(--p-color-grey-cold-100); --p-color-surface-1-grey: var(--p-color-grey-cold-000); --p-color-surface-2: var(--p-color-grey-cold-000); --p-color-surface-2-white: var(--p-color-grey-cold-000); --p-color-surface-2-grey: var(--p-color-grey-cold-100); --p-color-surface-1-hover: var(--p-color-grey-cold-200); --p-color-surface-1-hover-white: var(--p-color-grey-cold-200); --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200); --p-color-surface-2-hover: var(--p-color-grey-cold-200); --p-color-surface-2-hover-white: var(--p-color-grey-cold-200); --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200); --p-color-surface-inverse: var(--p-color-purple-900); --p-color-surface-inverse-white: var(--p-color-purple-900); --p-color-surface-inverse-grey: var(--p-color-purple-900); --p-color-surface-inverse-hover: var(--p-color-purple-800); --p-color-surface-inverse-hover-white: var(--p-color-purple-800); --p-color-surface-inverse-hover-grey: var(--p-color-purple-800); --p-color-surface-inverse-pressed: var(--p-color-purple-700); --p-color-surface-inverse-pressed-white: var(--p-color-purple-700); --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700); --p-color-surface-selected: var(--p-color-purple-600); --p-color-surface-selected-white: var(--p-color-purple-600); --p-color-surface-selected-grey: var(--p-color-purple-600); --p-color-surface-selected-hover: var(--p-color-purple-700); --p-color-surface-selected-hover-white: var(--p-color-purple-700); --p-color-surface-selected-hover-grey: var(--p-color-purple-700); --p-color-surface-selected-pressed: var(--p-color-purple-800); --p-color-surface-selected-pressed-white: var(--p-color-purple-800); --p-color-surface-selected-pressed-grey: var(--p-color-purple-800); --p-color-surface-selected-active: var(--p-color-purple-800); --p-color-surface-selected-active-white: var(--p-color-purple-800); --p-color-surface-selected-active-grey: var(--p-color-purple-800); --p-color-surface-error: var(--p-color-red-200); --p-color-surface-error-white: var(--p-color-red-200); --p-color-surface-error-grey: var(--p-color-red-200); --p-color-surface-success: var(--p-color-green-200); --p-color-surface-success-white: var(--p-color-green-200); --p-color-surface-success-grey: var(--p-color-green-200); --p-color-surface-warning: var(--p-color-yellow-200); --p-color-surface-warning-white: var(--p-color-yellow-200); --p-color-surface-warning-grey: var(--p-color-yellow-200); --p-color-surface-info: var(--p-color-purple-200); --p-color-surface-info-white: var(--p-color-purple-200); --p-color-surface-info-grey: var(--p-color-purple-200); --p-color-surface-neutral: var(--p-color-grey-cold-100); --p-color-surface-neutral-white: var(--p-color-grey-cold-000); --p-color-surface-neutral-grey: var(--p-color-grey-cold-100); --p-color-surface-static: var(--p-color-grey-cold-000); --p-color-surface-static-white: var(--p-color-grey-cold-000); --p-color-surface-static-grey: var(--p-color-grey-cold-000); --p-color-stroke-strong: var(--p-color-purple-900); --p-color-stroke-strong-white: var(--p-color-purple-900); --p-color-stroke-strong-grey: var(--p-color-purple-900); --p-color-stroke-strong-hover: var(--p-color-purple-800); --p-color-stroke-strong-hover-white: var(--p-color-purple-800); --p-color-stroke-strong-hover-grey: var(--p-color-purple-800); --p-color-stroke-strong-pressed: var(--p-color-purple-700); --p-color-stroke-strong-pressed-white: var(--p-color-purple-700); --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700); --p-color-stroke-0: var(--p-color-grey-cold-300); --p-color-stroke-0-white: var(--p-color-grey-cold-300); --p-color-stroke-0-grey: var(--p-color-grey-cold-400); --p-color-stroke-1: var(--p-color-grey-cold-400); --p-color-stroke-1-white: var(--p-color-grey-cold-400); --p-color-stroke-1-grey: var(--p-color-grey-cold-300); --p-color-stroke-2: var(--p-color-grey-cold-300); --p-color-stroke-2-white: var(--p-color-grey-cold-300); --p-color-stroke-2-grey: var(--p-color-grey-cold-400); --p-color-stroke-on-white: var(--p-color-grey-cold-300); --p-color-stroke-on-white-white: var(--p-color-grey-cold-300); --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-0: var(--p-color-grey-cold-200); --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300); --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300); --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200); --p-color-stroke-on-color: var(--p-color-purple-100); --p-color-stroke-on-color-white: var(--p-color-purple-100); --p-color-stroke-on-color-grey: var(--p-color-purple-100); --p-color-stroke-interactive: var(--p-color-purple-600); --p-color-stroke-interactive-white: var(--p-color-purple-600); --p-color-stroke-interactive-grey: var(--p-color-purple-600); --p-color-stroke-interactive-hover: var(--p-color-purple-700); --p-color-stroke-interactive-hover-white: var(--p-color-purple-700); --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700); --p-color-stroke-interactive-pressed: var(--p-color-purple-800); --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800); --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800); --p-color-stroke-selected: var(--p-color-purple-700); --p-color-stroke-selected-white: var(--p-color-purple-700); --p-color-stroke-selected-grey: var(--p-color-purple-700); --p-color-stroke-selected-hover: var(--p-color-purple-800); --p-color-stroke-selected-hover-white: var(--p-color-purple-800); --p-color-stroke-selected-hover-grey: var(--p-color-purple-800); --p-color-stroke-selected-pressed: var(--p-color-purple-900); --p-color-stroke-selected-pressed-white: var(--p-color-purple-900); --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900); --p-color-stroke-disabled: var(--p-color-grey-cold-400); --p-color-stroke-disabled-white: var(--p-color-grey-cold-400); --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500); --p-color-stroke-error: var(--p-color-red-600); --p-color-stroke-error-white: var(--p-color-red-600); --p-color-stroke-error-grey: var(--p-color-red-600); --p-color-stroke-success: var(--p-color-green-600); --p-color-stroke-success-white: var(--p-color-green-600); --p-color-stroke-success-grey: var(--p-color-green-600); --p-color-stroke-warning: var(--p-color-yellow-600); --p-color-stroke-warning-white: var(--p-color-yellow-600); --p-color-stroke-warning-grey: var(--p-color-yellow-600); --p-outline: 2px solid var(--p-color-states-focus); --p-outline-offset: 2px; } [data-theme="kron-dark"] { --p-color-background: var(--p-color-grey-cold-1000); --p-color-background-white: var(--p-color-grey-cold-1000); --p-color-background-grey: var(--p-color-grey-cold-1000); --p-color-background-hover: var(--p-color-grey-cold-900); --p-color-background-hover-white: var(--p-color-grey-cold-900); --p-color-background-hover-grey: var(--p-color-grey-cold-800); --p-color-background-pressed: var(--p-color-grey-cold-800); --p-color-background-pressed-white: var(--p-color-grey-cold-800); --p-color-background-pressed-grey: var(--p-color-grey-cold-700); --p-color-background-active: var(--p-color-red-400); --p-color-background-active-white: var(--p-color-red-400); --p-color-background-active-grey: var(--p-color-red-400); --p-color-background-disabled: var(--p-color-grey-cold-800); --p-color-background-disabled-white: var(--p-color-grey-cold-800); --p-color-background-disabled-grey: var(--p-color-grey-cold-700); --p-color-background-selected: var(--p-color-purple-300); --p-color-background-selected-white: var(--p-color-purple-300); --p-color-background-selected-grey: var(--p-color-purple-300); --p-color-background-selected-hover: var(--p-color-purple-200); --p-color-background-selected-hover-white: var(--p-color-purple-200); --p-color-background-selected-hover-grey: var(--p-color-purple-200); --p-color-background-selected-pressed: var(--p-color-purple-100); --p-color-background-selected-pressed-white: var(--p-color-purple-100); --p-color-background-selected-pressed-grey: var(--p-color-purple-100); --p-color-text-primary: var(--p-color-purple-100); --p-color-text-primary-white: var(--p-color-purple-100); --p-color-text-primary-grey: var(--p-color-purple-100); --p-color-text-primary-hover: var(--p-color-purple-200); --p-color-text-primary-hover-white: var(--p-color-purple-200); --p-color-text-primary-hover-grey: var(--p-color-purple-200); --p-color-text-primary-pressed: var(--p-color-purple-300); --p-color-text-primary-pressed-white: var(--p-color-purple-300); --p-color-text-primary-pressed-grey: var(--p-color-purple-300); --p-color-text-primary-active: var(--p-color-purple-300); --p-color-text-primary-active-white: var(--p-color-purple-300); --p-color-text-primary-active-grey: var(--p-color-purple-300); --p-color-text-interactive: var(--p-color-purple-200); --p-color-text-interactive-white: var(--p-color-purple-200); --p-color-text-interactive-grey: var(--p-color-purple-200); --p-color-text-interactive-hover: var(--p-color-purple-400); --p-color-text-interactive-hover-white: var(--p-color-purple-400); --p-color-text-interactive-hover-grey: var(--p-color-purple-400); --p-color-text-interactive-pressed: var(--p-color-purple-300); --p-color-text-interactive-pressed-white: var(--p-color-purple-300); --p-color-text-interactive-pressed-grey: var(--p-color-purple-300); --p-color-text-interactive-active: var(--p-color-purple-300); --p-color-text-interactive-active-white: var(--p-color-purple-300); --p-color-text-interactive-active-grey: var(--p-color-purple-300); --p-color-text-selected: var(--p-color-purple-300); --p-color-text-selected-white: var(--p-color-purple-300); --p-color-text-selected-grey: var(--p-color-purple-300); --p-color-text-selected-hover: var(--p-color-purple-200); --p-color-text-selected-hover-white: var(--p-color-purple-200); --p-color-text-selected-hover-grey: var(--p-color-purple-200); --p-color-text-selected-pressed: var(--p-color-purple-100); --p-color-text-selected-pressed-white: var(--p-color-purple-100); --p-color-text-selected-pressed-grey: var(--p-color-purple-100); --p-color-text-secondary: var(--p-color-grey-cold-300); --p-color-text-secondary-white: var(--p-color-grey-cold-300); --p-color-text-secondary-grey: var(--p-color-grey-cold-300); --p-color-text-placeholder: var(--p-color-grey-cold-400); --p-color-text-placeholder-white: var(--p-color-grey-cold-400); --p-color-text-placeholder-grey: var(--p-color-grey-cold-400); --p-color-text-on-color: var(--p-color-purple-900); --p-color-text-on-color-white: var(--p-color-purple-900); --p-color-text-on-color-grey: var(--p-color-purple-900); --p-color-text-disabled: var(--p-color-grey-cold-700); --p-color-text-disabled-white: var(--p-color-grey-cold-700); --p-color-text-disabled-grey: var(--p-color-grey-cold-700); --p-color-text-error: var(--p-color-red-400); --p-color-text-alert: var(--p-color-grey-cold-100); --p-color-text-alert-white: var(--p-color-grey-cold-100); --p-color-text-alert-grey: var(--p-color-grey-cold-100); --p-color-text-on-brand: var(--p-color-purple-900); --p-color-text-on-brand-white: var(--p-color-purple-900); --p-color-text-on-brand-grey: var(--p-color-purple-900); --p-color-text-on-error: var(--p-color-red-200); --p-color-text-on-info: var(--p-color-purple-100); --p-color-text-on-warning: var(--p-color-yellow-100); --p-color-text-on-success: var(--p-color-green-100); --p-color-icon-primary: var(--p-color-purple-100); --p-color-icon-primary-white: var(--p-color-purple-100); --p-color-icon-primary-grey: var(--p-color-purple-100); --p-color-icon-primary-hover: var(--p-color-purple-200); --p-color-icon-primary-hover-white: var(--p-color-purple-200); --p-color-icon-primary-hover-grey: var(--p-color-purple-200); --p-color-icon-primary-active: var(--p-color-purple-300); --p-color-icon-primary-active-white: var(--p-color-purple-300); --p-color-icon-primary-active-grey: var(--p-color-purple-300); --p-color-icon-primary-pressed: var(--p-color-purple-300); --p-color-icon-primary-pressed-white: var(--p-color-purple-300); --p-color-icon-primary-pressed-grey: var(--p-color-purple-300); --p-color-icon-interactive: var(--p-color-purple-200); --p-color-icon-interactive-white: var(--p-color-purple-200); --p-color-icon-interactive-grey: var(--p-color-purple-200); --p-color-icon-interactive-hover: var(--p-color-purple-400); --p-color-icon-interactive-hover-white: var(--p-color-purple-400); --p-color-icon-interactive-hover-grey: var(--p-color-purple-400); --p-color-icon-interactive-pressed: var(--p-color-purple-300); --p-color-icon-interactive-pressed-white: var(--p-color-purple-300); --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300); --p-color-icon-interactive-active: var(--p-color-purple-300); --p-color-icon-interactive-active-white: var(--p-color-purple-300); --p-color-icon-interactive-active-grey: var(--p-color-purple-300); --p-color-icon-on-color: var(--p-color-purple-900); --p-color-icon-on-color-white: var(--p-color-purple-900); --p-color-icon-on-color-grey: var(--p-color-purple-900); --p-color-icon-disabled: var(--p-color-grey-cold-700); --p-color-icon-disabled-white: var(--p-color-grey-cold-700); --p-color-icon-disabled-grey: var(--p-color-grey-cold-700); --p-color-icon-error: var(--p-color-red-400); --p-color-icon-error-white: var(--p-color-red-400); --p-color-icon-error-grey: var(--p-color-red-400); --p-color-icon-success: var(--p-color-green-400); --p-color-icon-success-white: var(--p-color-green-400); --p-color-icon-success-grey: var(--p-color-green-400); --p-color-icon-warning: var(--p-color-yellow-400); --p-color-icon-warning-white: var(--p-color-yellow-400); --p-color-icon-warning-grey: var(--p-color-yellow-400); --p-color-icon-info: var(--p-color-purple-400); --p-color-icon-info-white: var(--p-color-purple-400); --p-color-icon-info-grey: var(--p-color-purple-400); --p-color-icon-neutral: var(--p-color-grey-cold-100); --p-color-icon-neutral-white: var(--p-color-grey-cold-100); --p-color-icon-neutral-grey: var(--p-color-grey-cold-100); --p-color-icon-on-brand: var(--p-color-purple-900); --p-color-icon-on-brand-white: var(--p-color-purple-900); --p-color-icon-on-brand-grey: var(--p-color-purple-900); --p-color-icon-on-error: var(--p-color-red-200); --p-color-icon-on-info: var(--p-color-purple-100); --p-color-icon-on-warning: var(--p-color-yellow-100); --p-color-icon-on-success: var(--p-color-green-100); --p-color-button-brand-fill: var(--p-color-purple-400); --p-color-button-brand-fill-white: var(--p-color-purple-400); --p-color-button-brand-fill-grey: var(--p-color-purple-400); --p-color-button-brand-fill-hover: var(--p-color-purple-300); --p-color-button-brand-fill-hover-white: var(--p-color-purple-300); --p-color-button-brand-fill-hover-grey: var(--p-color-purple-300); --p-color-button-brand-fill-pressed: var(--p-color-purple-200); --p-color-button-brand-fill-pressed-white: var(--p-color-purple-200); --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-200); --p-color-button-brand-fill-active: var(--p-color-purple-200); --p-color-button-brand-fill-active-white: var(--p-color-purple-200); --p-color-button-brand-fill-active-grey: var(--p-color-purple-200); --p-color-button-action-fill: var(--p-color-purple-200); --p-color-button-action-fill-white: var(--p-color-purple-200); --p-color-button-action-fill-grey: var(--p-color-purple-200); --p-color-button-action-fill-hover: var(--p-color-purple-400); --p-color-button-action-fill-hover-white: var(--p-color-purple-400); --p-color-button-action-fill-hover-grey: var(--p-color-purple-400); --p-color-button-action-fill-pressed: var(--p-color-purple-300); --p-color-button-action-fill-pressed-white: var(--p-color-purple-300); --p-color-button-action-fill-pressed-grey: var(--p-color-purple-300); --p-color-button-action-fill-active: var(--p-color-purple-300); --p-color-button-action-fill-active-white: var(--p-color-purple-300); --p-color-button-action-fill-active-grey: var(--p-color-purple-300); --p-color-button-disabled: var(--p-color-grey-cold-500); --p-color-button-disabled-white: var(--p-color-grey-cold-500); --p-color-button-disabled-grey: var(--p-color-grey-cold-600); --p-color-graphics-illustration-primary: var(--p-color-red-400); --p-color-graphics-illustration-primary-white: var(--p-color-red-400); --p-color-graphics-illustration-primary-grey: var(--p-color-red-400); --p-color-graphics-illustration-detail: var(--p-color-logo-red); --p-color-graphics-illustration-detail-white: var(--p-color-logo-red); --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red); --p-color-graphics-illustration-base: var(--p-color-purple-100); --p-color-graphics-illustration-base-white: var(--p-color-purple-100); --p-color-graphics-illustration-base-grey: var(--p-color-purple-100); --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000); --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000); --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000); --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red); --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200); --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200); --p-color-static-brand-foreground: var(--p-color-purple-400); --p-color-static-brand-foreground-white: var(--p-color-purple-400); --p-color-static-brand-foreground-grey: var(--p-color-purple-400); --p-color-static-brand-background: var(--p-color-purple-800); --p-color-static-brand-background-white: var(--p-color-purple-800); --p-color-static-brand-background-grey: var(--p-color-purple-800); --p-color-static-orange-foreground: var(--p-color-orange-400); --p-color-static-orange-foreground-white: var(--p-color-orange-400); --p-color-static-orange-foreground-grey: var(--p-color-orange-400); --p-color-static-orange-background: var(--p-color-orange-800); --p-color-static-orange-background-white: var(--p-color-orange-800); --p-color-static-orange-background-grey: var(--p-color-orange-700); --p-color-static-purple-foreground: var(--p-color-purple-400); --p-color-static-purple-foreground-white: var(--p-color-purple-400); --p-color-static-purple-foreground-grey: var(--p-color-purple-400); --p-color-static-purple-background: var(--p-color-purple-800); --p-color-static-purple-background-white: var(--p-color-purple-800); --p-color-static-purple-background-grey: var(--p-color-purple-700); --p-color-static-red-foreground: var(--p-color-red-400); --p-color-static-red-foreground-white: var(--p-color-red-400); --p-color-static-red-foreground-grey: var(--p-color-red-400); --p-color-static-red-background: var(--p-color-red-800); --p-color-static-red-background-white: var(--p-color-red-800); --p-color-static-red-background-grey: var(--p-color-red-800); --p-color-static-grey-foreground: var(--p-color-grey-cold-400); --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400); --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400); --p-color-static-grey-background: var(--p-color-grey-cold-800); --p-color-static-grey-background-white: var(--p-color-grey-cold-800); --p-color-static-grey-background-grey: var(--p-color-grey-cold-700); --p-color-static-risk-filled: var(--p-color-orange-400); --p-color-static-risk-filled-white: var(--p-color-orange-400); --p-color-static-risk-filled-grey: var(--p-color-orange-400); --p-color-static-risk-unfilled: var(--p-color-orange-800); --p-color-static-risk-unfilled-white: var(--p-color-orange-800); --p-color-static-risk-unfilled-grey: var(--p-color-orange-700); --p-color-static-sustainability-filled: var(--p-color-purple-400); --p-color-static-sustainability-filled-white: var(--p-color-purple-400); --p-color-static-sustainability-filled-grey: var(--p-color-purple-400); --p-color-static-sustainability-unfilled: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-white: var(--p-color-purple-800); --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-700); --p-color-states-focus: var(--p-color-focus-1); --p-color-states-focus-white: var(--p-color-focus-1); --p-color-states-focus-grey: var(--p-color-focus-1); --p-color-states-scrim: var(--p-color-scrim-1); --p-color-states-scrim-white: var(--p-color-scrim-1); --p-color-states-scrim-grey: var(--p-color-scrim-1); --p-color-states-toggle-off: var(--p-color-grey-cold-800); --p-color-states-toggle-off-white: var(--p-color-grey-cold-800); --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500); --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700); --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700); --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600); --p-color-surface-1: var(--p-color-grey-cold-900); --p-color-surface-1-white: var(--p-color-grey-cold-900); --p-color-surface-1-grey: var(--p-color-grey-cold-900); --p-color-surface-2: var(--p-color-grey-cold-800); --p-color-surface-2-white: var(--p-color-grey-cold-800); --p-color-surface-2-grey: var(--p-color-grey-cold-800); --p-color-surface-1-hover: var(--p-color-grey-cold-800); --p-color-surface-1-hover-white: var(--p-color-grey-cold-800); --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800); --p-color-surface-2-hover: var(--p-color-grey-cold-800); --p-color-surface-2-hover-white: var(--p-color-grey-cold-800); --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800); --p-color-surface-inverse: var(--p-color-purple-100); --p-color-surface-inverse-white: var(--p-color-purple-100); --p-color-surface-inverse-grey: var(--p-color-purple-100); --p-color-surface-inverse-hover: var(--p-color-purple-200); --p-color-surface-inverse-hover-white: var(--p-color-purple-200); --p-color-surface-inverse-hover-grey: var(--p-color-purple-200); --p-color-surface-inverse-pressed: var(--p-color-purple-300); --p-color-surface-inverse-pressed-white: var(--p-color-purple-300); --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300); --p-color-surface-selected: var(--p-color-purple-400); --p-color-surface-selected-white: var(--p-color-purple-400); --p-color-surface-selected-grey: var(--p-color-purple-400); --p-color-surface-selected-hover: var(--p-color-purple-300); --p-color-surface-selected-hover-white: var(--p-color-purple-300); --p-color-surface-selected-hover-grey: var(--p-color-purple-300); --p-color-surface-selected-pressed: var(--p-color-purple-200); --p-color-surface-selected-pressed-white: var(--p-color-purple-200); --p-color-surface-selected-pressed-grey: var(--p-color-purple-200); --p-color-surface-selected-active: var(--p-color-purple-200); --p-color-surface-selected-active-white: var(--p-color-purple-200); --p-color-surface-selected-active-grey: var(--p-color-purple-200); --p-color-surface-error: var(--p-color-red-800); --p-color-surface-error-white: var(--p-color-red-800); --p-color-surface-error-grey: var(--p-color-red-800); --p-color-surface-success: var(--p-color-green-800); --p-color-surface-success-white: var(--p-color-green-800); --p-color-surface-success-grey: var(--p-color-green-800); --p-color-surface-warning: var(--p-color-yellow-800); --p-color-surface-warning-white: var(--p-color-yellow-800); --p-color-surface-warning-grey: var(--p-color-yellow-800); --p-color-surface-info: var(--p-color-purple-800); --p-color-surface-info-white: var(--p-color-purple-800); --p-color-surface-info-grey: var(--p-color-purple-800); --p-color-surface-neutral: var(--p-color-grey-cold-900); --p-color-surface-neutral-white: var(--p-color-grey-cold-1000); --p-color-surface-neutral-grey: var(--p-color-grey-cold-900); --p-color-surface-static: var(--p-color-grey-cold-1000); --p-color-surface-static-white: var(--p-color-grey-cold-1000); --p-color-surface-static-grey: var(--p-color-grey-cold-1000); --p-color-stroke-strong: var(--p-color-purple-100); --p-color-stroke-strong-white: var(--p-color-purple-100); --p-color-stroke-strong-grey: var(--p-color-purple-100); --p-color-stroke-strong-hover: var(--p-color-purple-200); --p-color-stroke-strong-hover-white: var(--p-color-purple-200); --p-color-stroke-strong-hover-grey: var(--p-color-purple-200); --p-color-stroke-strong-pressed: var(--p-color-purple-300); --p-color-stroke-strong-pressed-white: var(--p-color-purple-300); --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300); --p-color-stroke-0: var(--p-color-grey-cold-700); --p-color-stroke-0-white: var(--p-color-grey-cold-700); --p-color-stroke-0-grey: var(--p-color-grey-cold-600); --p-color-stroke-1: var(--p-color-grey-cold-600); --p-color-stroke-1-white: var(--p-color-grey-cold-600); --p-color-stroke-1-grey: var(--p-color-grey-cold-700); --p-color-stroke-2: var(--p-color-grey-cold-700); --p-color-stroke-2-white: var(--p-color-grey-cold-700); --p-color-stroke-2-grey: var(--p-color-grey-cold-600); --p-color-stroke-on-white: var(--p-color-grey-cold-700); --p-color-stroke-on-white-white: var(--p-color-grey-cold-700); --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-0: var(--p-color-grey-cold-800); --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700); --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700); --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800); --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800); --p-color-stroke-on-color: var(--p-color-purple-900); --p-color-stroke-on-color-white: var(--p-color-purple-900); --p-color-stroke-on-color-grey: var(--p-color-purple-900); --p-color-stroke-interactive: var(--p-color-purple-400); --p-color-stroke-interactive-white: var(--p-color-purple-400); --p-color-stroke-interactive-grey: var(--p-color-purple-400); --p-color-stroke-interactive-hover: var(--p-color-purple-300); --p-color-stroke-interactive-hover-white: var(--p-color-purple-300); --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300); --p-color-stroke-interactive-pressed: var(--p-color-purple-200); --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200); --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200); --p-color-stroke-selected: var(--p-color-purple-300); --p-color-stroke-selected-white: var(--p-color-purple-300); --p-color-stroke-selected-grey: var(--p-color-purple-300); --p-color-stroke-selected-hover: var(--p-color-purple-200); --p-color-stroke-selected-hover-white: var(--p-color-purple-200); --p-color-stroke-selected-hover-grey: var(--p-color-purple-200); --p-color-stroke-selected-pressed: var(--p-color-purple-100); --p-color-stroke-selected-pressed-white: var(--p-color-purple-100); --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100); --p-color-stroke-disabled: var(--p-color-grey-cold-600); --p-color-stroke-disabled-white: var(--p-color-grey-cold-600); --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500); --p-color-stroke-error: var(--p-color-red-400); --p-color-stroke-error-white: var(--p-color-red-400); --p-color-stroke-error-grey: var(--p-color-red-400); --p-color-stroke-success: var(--p-color-green-400); --p-color-stroke-success-white: var(--p-color-green-400); --p-color-stroke-success-grey: var(--p-color-green-400); --p-color-stroke-warning: var(--p-color-yellow-400); --p-color-stroke-warning-white: var(--p-color-yellow-400); --p-color-stroke-warning-grey: var(--p-color-yellow-400); --p-outline: 2px solid var(--p-color-states-focus); --p-outline-offset: 2px; } a { color: var(--p-color-text-interactive); text-underline-offset: 2px; text-decoration: underline; } a:hover { color: var(--p-color-text-interactive-hover); } a:focus-visible { outline: var(--p-outline); } @media (min-width: 600px) { :-webkit-any(.p, .font-paragraph, .font-body) { font-size: 1.125rem; line-height: 1.625rem; } } :-moz-any(.p, .font-paragraph, .font-body) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.375rem; } @media (min-width: 600px) { :-moz-any(.p, .font-paragraph, .font-body) { font-size: 1.125rem; line-height: 1.625rem; } } :is(.p, .font-paragraph, .font-body) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.375rem; } @media (min-width: 600px) { :is(.p, .font-paragraph, .font-body) { font-size: 1.125rem; line-height: 1.625rem; } :-webkit-any(h1, .h1, .font-heading-1, p.font-heading-1) { font-size: 2.5rem; line-height: 3.25rem; } } :-moz-any(h1, .h1, .font-heading-1, p.font-heading-1) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 2.25rem; } @media (min-width: 600px) { :-moz-any(h1, .h1, .font-heading-1, p.font-heading-1) { font-size: 2.5rem; line-height: 3.25rem; } } :is(h1, .h1, .font-heading-1, p.font-heading-1) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 2.25rem; } @media (min-width: 600px) { :is(h1, .h1, .font-heading-1, p.font-heading-1) { font-size: 2.5rem; line-height: 3.25rem; } :-webkit-any(h2, .h2, .font-heading-2, p.font-heading-2) { font-size: 2rem; line-height: 2.5rem; } } :-moz-any(h2, .h2, .font-heading-2, p.font-heading-2) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; } @media (min-width: 600px) { :-moz-any(h2, .h2, .font-heading-2, p.font-heading-2) { font-size: 2rem; line-height: 2.5rem; } } :is(h2, .h2, .font-heading-2, p.font-heading-2) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; } @media (min-width: 600px) { :is(h2, .h2, .font-heading-2, p.font-heading-2) { font-size: 2rem; line-height: 2.5rem; } :-webkit-any(h3, .h3, .font-heading-3, p.font-heading-3) { font-size: 1.5rem; line-height: 2rem; } } :-moz-any(h3, .h3, .font-heading-3, p.font-heading-3) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :-moz-any(h3, .h3, .font-heading-3, p.font-heading-3) { font-size: 1.5rem; line-height: 2rem; } } :is(h3, .h3, .font-heading-3, p.font-heading-3) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :is(h3, .h3, .font-heading-3, p.font-heading-3) { font-size: 1.5rem; line-height: 2rem; } :-webkit-any(h4, .h4, .font-heading-4, p.font-heading-4) { font-size: 1.5rem; line-height: 2rem; } } :-moz-any(h4, .h4, .font-heading-4, p.font-heading-4) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :-moz-any(h4, .h4, .font-heading-4, p.font-heading-4) { font-size: 1.5rem; line-height: 2rem; } } :is(h4, .h4, .font-heading-4, p.font-heading-4) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :is(h4, .h4, .font-heading-4, p.font-heading-4) { font-size: 1.5rem; line-height: 2rem; } :-webkit-any(h5, .h5, .font-heading-5, p.font-heading-5) { font-size: 1.25rem; line-height: 1.75rem; } } :-moz-any(h5, .h5, .font-heading-5, p.font-heading-5) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.5rem; } @media (min-width: 600px) { :-moz-any(h5, .h5, .font-heading-5, p.font-heading-5) { font-size: 1.25rem; line-height: 1.75rem; } } :is(h5, .h5, .font-heading-5, p.font-heading-5) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.5rem; } @media (min-width: 600px) { :is(h5, .h5, .font-heading-5, p.font-heading-5) { font-size: 1.25rem; line-height: 1.75rem; } :-webkit-any(.ingress, .font-ingress, .font-large, .label, .font-label) { font-size: 1.25rem; line-height: 1.75rem; } } :-moz-any(.ingress, .font-ingress, .font-large, .label, .font-label) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.625rem; } @media (min-width: 600px) { :-moz-any(.ingress, .font-ingress, .font-large, .label, .font-label) { font-size: 1.25rem; line-height: 1.75rem; } } :is(.ingress, .font-ingress, .font-large, .label, .font-label) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.625rem; } @media (min-width: 600px) { :is(.ingress, .font-ingress, .font-large, .label, .font-label) { font-size: 1.25rem; line-height: 1.75rem; } :-webkit-any(.display, .font-display, p.font-display) { font-size: 4rem; line-height: 113%; } } :-moz-any(.display, .font-display, p.font-display) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 2.25rem; font-weight: 600; line-height: 122%; } @media (min-width: 600px) { :-moz-any(.display, .font-display, p.font-display) { font-size: 4rem; line-height: 113%; } } :is(.display, .font-display, p.font-display) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 2.25rem; font-weight: 600; line-height: 122%; } @media (min-width: 600px) { :is(.display, .font-display, p.font-display) { font-size: 4rem; line-height: 113%; } :-webkit-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) { font-size: 1.25rem; line-height: 140%; } } :-moz-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 144%; } @media (min-width: 600px) { :-moz-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) { font-size: 1.25rem; line-height: 140%; } } :is(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 144%; } @media (min-width: 600px) { :is(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) { font-size: 1.25rem; line-height: 140%; } :-webkit-any(.font-large, .font-body-large, .font-body-lg) { font-size: 1.25rem; line-height: 140%; } } :-moz-any(.font-large, .font-body-large, .font-body-lg) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 144%; } @media (min-width: 600px) { :-moz-any(.font-large, .font-body-large, .font-body-lg) { font-size: 1.25rem; line-height: 140%; } } :is(.font-large, .font-body-large, .font-body-lg) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 144%; } @media (min-width: 600px) { :is(.font-large, .font-body-large, .font-body-lg) { font-size: 1.25rem; line-height: 140%; } :-webkit-any(.font-alert-title, .font-body-demibold) { font-size: 1.125rem; } } :-moz-any(.font-alert-title, .font-body-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 600; line-height: 150%; } @media (min-width: 600px) { :-moz-any(.font-alert-title, .font-body-demibold) { font-size: 1.125rem; } } :is(.font-alert-title, .font-body-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 600; line-height: 150%; } @media (min-width: 600px) { :is(.font-alert-title, .font-body-demibold) { font-size: 1.125rem; } } .font-body-italic { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-style: italic; font-weight: 400; line-height: 150%; } @media (min-width: 600px) { .font-body-italic { font-size: 1.125rem; } :-webkit-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) { font-size: 1rem; line-height: 1.375rem; } } :-moz-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.25rem; } @media (min-width: 600px) { :-moz-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) { font-size: 1rem; line-height: 1.375rem; } } :is(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.25rem; } @media (min-width: 600px) { :is(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) { font-size: 1rem; line-height: 1.375rem; } :-webkit-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) { font-size: 1rem; line-height: 1.375rem; } } :-moz-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 600; line-height: 1.25rem; } @media (min-width: 600px) { :-moz-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) { font-size: 1rem; line-height: 1.375rem; } } :is(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 600; line-height: 1.25rem; } @media (min-width: 600px) { :is(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) { font-size: 1rem; line-height: 1.375rem; } :-webkit-any(.subtitle, .font-subtitle) { font-size: 1.25rem; line-height: 1.75rem; } } :-moz-any(.subtitle, .font-subtitle) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.375rem; } @media (min-width: 600px) { :-moz-any(.subtitle, .font-subtitle) { font-size: 1.25rem; line-height: 1.75rem; } } :is(.subtitle, .font-subtitle) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.375rem; } @media (min-width: 600px) { :is(.subtitle, .font-subtitle) { font-size: 1.25rem; line-height: 1.75rem; } :-webkit-any(.overline, .font-overline) { font-size: 1rem; line-height: 1.375rem; } } :-moz-any(.overline, .font-overline) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 500; line-height: 1.25rem; } @media (min-width: 600px) { :-moz-any(.overline, .font-overline) { font-size: 1rem; line-height: 1.375rem; } } :is(.overline, .font-overline) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 500; line-height: 1.25rem; } @media (min-width: 600px) { :is(.overline, .font-overline) { font-size: 1rem; line-height: 1.375rem; } :-webkit-any(.title, .font-title) { font-size: 1.5rem; line-height: 1.75rem; } } :-moz-any(.title, .font-title) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.375rem; } @media (min-width: 600px) { :-moz-any(.title, .font-title) { font-size: 1.5rem; line-height: 1.75rem; } } :is(.title, .font-title) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.375rem; } @media (min-width: 600px) { :is(.title, .font-title) { font-size: 1.5rem; line-height: 1.75rem; } :-webkit-any(.button, .font-button, .font-button-large, .font-button-lg) { font-size: 1.125rem; } } :-moz-any(.button, .font-button, .font-button-large, .font-button-lg) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 500; } @media (min-width: 600px) { :-moz-any(.button, .font-button, .font-button-large, .font-button-lg) { font-size: 1.125rem; } } :is(.button, .font-button, .font-button-large, .font-button-lg) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 500; } @media (min-width: 600px) { :is(.button, .font-button, .font-button-large, .font-button-lg) { font-size: 1.125rem; } :-webkit-any(.font-button-medium, .font-button-md) { font-size: 1rem; } } :-moz-any(.font-button-medium, .font-button-md) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 500; } @media (min-width: 600px) { :-moz-any(.font-button-medium, .font-button-md) { font-size: 1rem; } } :is(.font-button-medium, .font-button-md) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 500; } @media (min-width: 600px) { :is(.font-button-medium, .font-button-md) { font-size: 1rem; } :-webkit-any(.font-button-small, .font-button-sm) { font-size: .875rem; } } :-moz-any(.font-button-small, .font-button-sm) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 500; } @media (min-width: 600px) { :-moz-any(.font-button-small, .font-button-sm) { font-size: .875rem; } } :is(.font-button-small, .font-button-sm) { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 500; } @media (min-width: 600px) { :is(.font-button-small, .font-button-sm) { font-size: .875rem; } } .font-button-mobile { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: 1rem; font-weight: 500; } .font-button-small { color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; font-size: .875rem; font-weight: 500; } @media (min-width: 600px) { :-webkit-any(.hint, .font-hint, .font-caption, .font-details) { font-size: .875rem; line-height: 1.125rem; } } :-moz-any(.hint, .font-hint, .font-caption, .font-details) { color: var(--p-color-text-secondary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 400; line-height: 1rem; } @media (min-width: 600px) { :-moz-any(.hint, .font-hint, .font-caption, .font-details) { font-size: .875rem; line-height: 1.125rem; } } :is(.hint, .font-hint, .font-caption, .font-details) { color: var(--p-color-text-secondary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 400; line-height: 1rem; } @media (min-width: 600px) { :is(.hint, .font-hint, .font-caption, .font-details) { font-size: .875rem; line-height: 1.125rem; } :-webkit-any(.font-caption-demibold, .font-details-demibold) { font-size: .875rem; line-height: 1.125rem; } } :-moz-any(.font-caption-demibold, .font-details-demibold) { color: var(--p-color-text-secondary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 600; line-height: 1rem; } @media (min-width: 600px) { :-moz-any(.font-caption-demibold, .font-details-demibold) { font-size: .875rem; line-height: 1.125rem; } } :is(.font-caption-demibold, .font-details-demibold) { color: var(--p-color-text-secondary); font-family: Storebrand Text, sans-serif; font-size: .75rem; font-weight: 600; line-height: 1rem; } @media (min-width: 600px) { :is(.font-caption-demibold, .font-details-demibold) { font-size: .875rem; line-height: 1.125rem; } :-webkit-any(.key-statistic-1, .font-key-statistic-1) { font-size: 2rem; line-height: 2.5rem; } } :-moz-any(.key-statistic-1, .font-key-statistic-1) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; } @media (min-width: 600px) { :-moz-any(.key-statistic-1, .font-key-statistic-1) { font-size: 2rem; line-height: 2.5rem; } } :is(.key-statistic-1, .font-key-statistic-1) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; } @media (min-width: 600px) { :is(.key-statistic-1, .font-key-statistic-1) { font-size: 2rem; line-height: 2.5rem; } :-webkit-any(.key-statistic-2, .font-key-statistic-2) { font-size: 1.5rem; line-height: 2rem; } } :-moz-any(.key-statistic-2, .font-key-statistic-2) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :-moz-any(.key-statistic-2, .font-key-statistic-2) { font-size: 1.5rem; line-height: 2rem; } } :is(.key-statistic-2, .font-key-statistic-2) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; } @media (min-width: 600px) { :is(.key-statistic-2, .font-key-statistic-2) { font-size: 1.5rem; line-height: 2rem; } :-webkit-any(.key-statistic-3, .font-key-statistic-3) { font-size: 1.25rem; line-height: 1.75rem; } } :-moz-any(.key-statistic-3, .font-key-statistic-3) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.625rem; } @media (min-width: 600px) { :-moz-any(.key-statistic-3, .font-key-statistic-3) { font-size: 1.25rem; line-height: 1.75rem; } } :is(.key-statistic-3, .font-key-statistic-3) { color: var(--p-color-text-primary); font-family: Storebrand Display, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.625rem; } @media (min-width: 600px) { :is(.key-statistic-3, .font-key-statistic-3) { font-size: 1.25rem; line-height: 1.75rem; } } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .font-style-italic { font-style: italic; } .text-underline { text-decoration: underline; } :root, :host { --p-z-index-base: 0; --p-z-index-above: 1; --p-z-index-below: -1; --p-z-index-input: calc(var(--p-z-index-base) + var(--p-z-index-above)); --p-z-index-tooltip: calc(var(--p-z-index-input) + var(--p-z-index-above)); --p-z-index-popover: calc(var(--p-z-index-tooltip) + var(--p-z-index-above)); --p-z-index-dropdown: calc(var(--p-z-index-popover) + var(--p-z-index-above)); --p-z-index-navbar-menu: calc(var(--p-z-index-dropdown) + var(--p-z-index-above)); --p-z-index-toast: calc(var(--p-z-index-navbar-menu) + var(--p-z-index-above)); --p-z-index-dialog: calc(var(--p-z-index-toast) + var(--p-z-index-above)); --p-z-index-modal: calc(var(--p-z-index-dialog) + var(--p-z-index-above)); } .grid-container { --grid-columns: 12; --grid-gap: 2rem; --grid-max-width: 1128px; --grid-span: 12; --grid-start: auto; column-gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-columns), 1fr); max-width: var(--grid-max-width); width: 100%; margin: 0 auto; display: grid; } .grid-container .grid-item { grid-column: var(--grid-start) / span var(--grid-span); } @media screen and (min-width: 992px) { .grid-container .grid-item.lg_cols-1 { --grid-span: 1; } .grid-container .grid-item.lg_cols-2 { --grid-span: 2; } .grid-container .grid-item.lg_cols-3 { --grid-span: 3; } .grid-container .grid-item.lg_cols-4 { --grid-span: 4; } .grid-container .grid-item.lg_cols-5 { --grid-span: 5; } .grid-container .grid-item.lg_cols-6 { --grid-span: 6; } .grid-container .grid-item.lg_cols-7 { --grid-span: 7; } .grid-container .grid-item.lg_cols-8 { --grid-span: 8; } .grid-container .grid-item.lg_cols-9 { --grid-span: 9; } .grid-container .grid-item.lg_cols-10 { --grid-span: 10; } .grid-container .grid-item.lg_cols-11 { --grid-span: 11; } .grid-container .grid-item.lg_cols-12 { --grid-span: 12; } .grid-container .grid-item.lg_off-1 { --grid-start: 1; } .grid-container .grid-item.lg_off-2 { --grid-start: 2; } .grid-container .grid-item.lg_off-3 { --grid-start: 3; } .grid-container .grid-item.lg_off-4 { --grid-start: 4; } .grid-container .grid-item.lg_off-5 { --grid-start: 5; } .grid-container .grid-item.lg_off-6 { --grid-start: 6; } .grid-container .grid-item.lg_off-7 { --grid-start: 7; } .grid-container .grid-item.lg_off-8 { --grid-start: 8; } .grid-container .grid-item.lg_off-9 { --grid-start: 9; } .grid-container .grid-item.lg_off-10 { --grid-start: 10; } .grid-container .grid-item.lg_off-11 { --grid-start: 11; } .grid-container .grid-item.lg_off-12 { --grid-start: 12; } } @media screen and (max-width: 991px) and (min-width: 768px) { .grid-container { --grid-columns: 8; --grid-span: 8; } .grid-container .grid-item.md_cols-1 { --grid-span: 1; } .grid-container .grid-item.md_cols-2 { --grid-span: 2; } .grid-container .grid-item.md_cols-3 { --grid-span: 3; } .grid-container .grid-item.md_cols-4 { --grid-span: 4; } .grid-container .grid-item.md_cols-5 { --grid-span: 5; } .grid-container .grid-item.md_cols-6 { --grid-span: 6; } .grid-container .grid-item.md_cols-7 { --grid-span: 7; } .grid-container .grid-item.md_cols-8 { --grid-span: 8; } .grid-container .grid-item.md_off-1 { --grid-start: 1; } .grid-container .grid-item.md_off-2 { --grid-start: 2; } .grid-container .grid-item.md_off-3 { --grid-start: 3; } .grid-container .grid-item.md_off-4 { --grid-start: 4; } .grid-container .grid-item.md_off-5 { --grid-start: 5; } .grid-container .grid-item.md_off-6 { --grid-start: 6; } .grid-container .grid-item.md_off-7 { --grid-start: 7; } .grid-container .grid-item.md_off-8 { --grid-start: 8; } } @media screen and (max-width: 767px) { .grid-container { --grid-columns: 4; --grid-gap: 1rem; --grid-span: 4; } .grid-container .grid-item.sm_cols-1 { --grid-span: 1; } .grid-container .grid-item.sm_cols-2 { --grid-span: 2; } .grid-container .grid-item.sm_cols-3 { --grid-span: 3; } .grid-container .grid-item.sm_cols-4 { --grid-span: 4; } .grid-container .grid-item.sm_off-1 { --grid-start: 1; } .grid-container .grid-item.sm_off-2 { --grid-start: 2; } .grid-container .grid-item.sm_off-3 { --grid-start: 3; } .grid-container .grid-item.sm_off-4 { --grid-start: 4; } } * { font-synthesis: none; margin: 0; } html { font-size: 100%; } body { background: var(--p-color-background); color: var(--p-color-text-primary); font-family: Storebrand Text, sans-serif; } } @layer theme { :root, :host { --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --container-standard: 600px; } } @layer base, components; @layer utilities { .visible { visibility: visible; } .relative { position: relative; } .static { position: static; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .mx-auto { margin-inline: auto; } .my-16 { margin-block: var(--spacing-16); } .mr-8 { margin-right: var(--spacing-8); } .mb-12 { margin-bottom: var(--spacing-12); } .mb-16 { margin-bottom: var(--spacing-16); } .ml-8 { margin-left: var(--spacing-8); } .contents { display: contents; } .flex { display: flex; } .max-w-\[110px\] { max-width: 110px; } .max-w-standard { max-width: var(--container-standard); } .flex-grow { flex-grow: 1; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .gap-4 { gap: var(--spacing-4); } .gap-12 { gap: var(--spacing-12); } .border { border-style: var(--tw-border-style); border-width: 1px; } .text-center { text-align: center; } .capitalize { text-transform: capitalize; } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }