@jorilindell/hds-core 4.10.1

package/lib/components/all.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/_bem.scss","../../src/components/all.css","../../src/components/breadcrumb/_breadcrumb-mixin.scss","../../src/components/button/_button-mixin.scss","../../src/components/checkbox/_checkbox-mixin.scss","../../src/components/status-label/_status-label-mixin.scss","../../src/components/table/_table-mixin.scss","../../src/icons/icon.css","../../src/icons/alert-circle-fill.css","../../src/icons/check-circle-fill.css","../../src/icons/error-fill.css","../../src/icons/info-circle-fill.css","../../src/components/notification/_notification-mixin.scss","../../src/components/card/card.css","../../src/components/container/container.css","../../src/components/error-summary/error-summary.css","../../src/components/fieldset/fieldset.css","../../src/components/hero/hero.css","../../src/components/highlight/highlight.css","../../src/components/koros/koros.css","../../src/components/link/link.css","../../src/components/loading-spinner/loading-spinner.css","../../src/components/pagination/pagination.css","../../src/components/radio-button/radio-button.css","../../src/components/search-input/search-input.css","../../src/components/selection-group/selection-group.css","../../src/components/step-by-step/step-by-step.css","../../src/components/tag/tag.css","../../src/components/text-input/text-input.css"],"names":[],"mappings":"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","file":"all.min.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './breadcrumb/breadcrumb.scss';\n@use './button/button.scss';\n@use './checkbox/checkbox.scss';\n@use './status-label/status-label.scss';\n@use './table/table.scss';\n@use './notification/notification.scss';\n@use './card/card.css';\n@use './container/container.css';\n@use './error-summary/error-summary.css';\n@use './fieldset/fieldset.css';\n@use './hero/hero.css';\n@use './highlight/highlight.css';\n@use './koros/koros.css';\n@use './link/link.css';\n@use './loading-spinner/loading-spinner.css';\n@use './pagination/pagination.css';\n@use './radio-button/radio-button.css';\n@use './search-input/search-input.css';\n@use './selection-group/selection-group.css';\n@use './step-by-step/step-by-step.css';\n@use './tag/tag.css';\n@use './text-input/text-input.css';\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --horizontal-margin-small: var(--spacing-layout-2-xs);\n  --horizontal-margin-medium: var(--spacing-layout-xs);\n  --horizontal-margin-large: var(--spacing-layout-xs);\n  --horizontal-margin-x-large: var(--spacing-layout-s);\n  --horizontal-margin: var(--horizontal-margin-small);\n\n  display: flex;\n  margin: 0 var(--horizontal-margin);\n  padding: var(--spacing-s) 0;\n\n  &__list {\n    align-items: center;\n    flex-direction: row;\n    word-wrap: break-word;\n\n    &-item {\n      align-items: center;\n      display: flex;\n      line-height: var(--lineheight-l);\n    }\n  }\n\n  &__link#{&}__link {\n    --link-visited-color: none;\n    --link-color: var(--color-black-90);\n  }\n\n  &__link {\n    &:hover,\n    &:focus {\n      -webkit-text-decoration-color: var(--color-black-90);\n      text-decoration-color: var(--color-black-90);\n    }\n  }\n\n  &__back-arrow#{&}__back-arrow {\n    display: inline-flex;\n\n    /* compensate the white space in the icon */\n    margin-left: -5px;\n    margin-right: -3px;\n\n    --icon-size: var(--spacing-m);\n  }\n\n  &__separator#{&}__separator {\n    display: inline-flex;\n    padding-left: var(--spacing-3-xs);\n\n    --icon-size: var(--spacing-s);\n  }\n\n  @media (min-width: 768px) {\n    --horizontal-margin: var(--horizontal-margin-medium);\n  }\n\n  @media (min-width: 992px) {\n    --horizontal-margin: var(--horizontal-margin-large);\n  }\n\n  @media (min-width: 1248px) {\n    --horizontal-margin: var(--horizontal-margin-x-large);\n  }\n}\n\n@mixin active {\n  &__list {\n    &-item {\n      &--active {\n        font-weight: 700;\n\n        /* to match 3px border around links */\n        padding: 3px;\n      }\n    }\n  }\n}\n\n@mixin mobile {\n  &__list {\n    &--mobile {\n      display: flex;\n\n      #{BemUtil.get-block(&)}__link {\n        font-size: var(--fontsize-body-l);\n      }\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--mobile {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin desktop {\n  &__list {\n    &--desktop {\n      display: none;\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--desktop {\n        display: flex;\n        flex-wrap: wrap;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n    }\n  }\n}\n\n@mixin breadcrumb(\n  $all: true,\n  $base: false,\n  $active: false,\n  $mobile: false,\n  $desktop: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'breadcrumb';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $active {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include active;\n    }\n  }\n\n  @if $all or $mobile {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n  @if $all or $desktop {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include desktop;\n    }\n  }\n}\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --border-width: 2px;\n  --outline-width-focus: 3px;\n  --padding-horizontal: var(--spacing-l);\n  --min-size: 56px;\n  --padding-vertical: var(--spacing-s);\n  --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));\n  --icon-reposition: calc(-1 * var(--spacing-2-xs));\n\n\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, transparent);\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent));\n  --computed-color: var(--color, inherit);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-color-disabled: var(--color-disabled, var(--color-white, inherit));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent));\n  --computed-outline-color-focus: var(--outline-color-focus, transparent);\n  --computed-icon-size: var(--icon-size, var(--spacing-m));\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border: var(--border-width) solid var(--computed-border-color);\n  border-radius: 0;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  column-gap: var(--spacing-2-xs);\n  cursor: var(--cursor, pointer);\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: 500;\n  hyphens: auto;\n  place-content: flex-start center;\n  line-height: var(--lineheight-l);\n  margin: 0;\n  min-height: var(--min-size);\n  min-width: var(--min-size);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  padding: var(--padding);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: none;\n  vertical-align: top;\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    margin-right: var(--icon-reposition);\n  }\n\n  &:before {\n    margin-left: var(--icon-reposition);\n  }\n\n  &,\n  &[type=\"button\"],\n  &[type=\"reset\"],\n  &[type=\"submit\"]\n  {\n    -webkit-appearance: button;\n  }\n\n  &:focus-visible { /* focus */\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:hover { /* hover */\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  &:active { /* active */\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:disabled { /* disabled */\n    --cursor: not-allowed;\n\n    background-color: var(--computed-background-color-disabled);\n    border-color: var(--computed-border-color-disabled);\n    color: var(--computed-color-disabled);\n    outline: none;\n  }\n}\n\n@mixin icon {\n  flex-shrink: 0;\n  height: var(--computed-icon-size);\n  width: var(--computed-icon-size);\n\n  /* start-side icon */\n  &:first-child:not(:last-child) {\n    margin-left: var(--icon-reposition);\n  }\n\n  &:last-child:not(:first-child) { /* end-side icon */\n    margin-right: var(--icon-reposition);\n  }\n}\n\n@mixin small {\n  --min-size: 44px;\n  --padding-horizontal: var(--spacing-m);\n  --padding-vertical: var(--spacing-2-xs);\n}\n\n@mixin fullwidth {\n  width: 100%;\n}\n\n/* PRIMARY */\n\n/* default (bus) */\n\n@mixin primary {\n  --background-color: var(--color-bus);\n  --background-color-hover: var(--color-bus-dark);\n  --background-color-focus: var(--color-bus);\n  --background-color-disabled: var(--color-black-20);\n  --border-color: transparent;\n  --color: var(--color-white);\n  --color-disabled: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SECONDARY */\n\n/* default (bus) */\n\n@mixin secondary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: var(--color-bus);\n  --border-color-disabled: var(--color-disabled);\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SUPPLEMENTARY */\n\n@mixin supplementary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* CLEAR */\n\n@mixin clear {\n  --background-color: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-black-90);\n  --color-disabled: var(--color-black-90);\n}\n\n/* UTILITY */\n\n/* success */\n\n@mixin success {\n  --background-color: var(--color-success);\n  --background-color-hover: var(--color-success-dark);\n  --background-color-focus: var(--color-success);\n  --border-color: var(--color-success);\n  --border-color-hover: var(--color-success-dark);\n  --border-color-focus: var(--color-success);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* danger */\n\n@mixin danger {\n  --background-color: var(--color-error);\n  --background-color-hover: var(--color-error-dark);\n  --background-color-focus: var(--color-error);\n  --border-color: var(--color-error);\n  --border-color-hover: var(--color-error-dark);\n  --border-color-focus: var(--color-error);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* THEMES */\n\n/* coat */\n\n@mixin primaryThemeCoat {\n  --background-color: var(--color-coat-of-arms);\n  --background-color-hover: var(--color-coat-of-arms-dark);\n  --background-color-focus: var(--color-coat-of-arms);\n  --border-color: var(--color-coat-of-arms);\n  --border-color-hover: var(--color-coat-of-arms-dark);\n  --border-color-focus: var(--color-coat-of-arms);\n  --color: var(--color-white);\n}\n\n@mixin secondaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: var(--color-coat-of-arms);\n  --color: var(--color-coat-of-arms);\n}\n\n@mixin supplementaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --color: var(--color-coat-of-arms);\n}\n\n/* black */\n\n@mixin primaryThemeBlack {\n  --background-color: var(--color-black);\n  --background-color-hover: var(--color-black);\n  --background-color-focus: var(--color-black);\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-white);\n  --color-hover: var(--color-white);\n  --color-focus: var(--color-white);\n}\n\n@mixin secondaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin supplementaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --border-color-hover: transparent;\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin button(\n  $all: true,\n  $base: false,\n  $icon: false,\n  $small: false,\n  $fullwidth: false,\n  $primary: false,\n  $secondary: false,\n  $supplementary: false,\n  $clear: false,\n  $success: false,\n  $danger: false,\n  $themeCoat: false,\n  $themeBlack: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'button';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n\n    button.#{$className} {\n      -webkit-appearance: button;\n    }\n  }\n\n  @if $all or $icon {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'icon', true) {\n        @include icon;\n      }\n    } @else {\n      $buttonClass: $className;\n      $iconClass: 'icon';\n\n      @if not($override) {\n        $buttonClass: #{'hds-' + $buttonClass};\n        $iconClass: #{'hds-' + $iconClass};\n      }\n\n      @at-root {\n        .#{$buttonClass} .#{$iconClass} {\n          @include icon;\n        }\n      }\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.unscopedModifier($className, 'small', $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $fullwidth {\n    @include BemUtil.unscopedModifier($className, 'fullwidth', $react) {\n      @include fullwidth;\n    }\n  }\n\n  @if $all or $primary {\n    @include BemUtil.unscopedModifier($className, 'primary', $react) {\n      @include primary;\n    }\n  }\n\n  @if $all or $secondary {\n    @include BemUtil.unscopedModifier($className, 'secondary', $react) {\n      @include secondary;\n    }\n  }\n\n  @if $all or $supplementary {\n    @include BemUtil.unscopedModifier($className, 'supplementary', $react) {\n      @include supplementary;\n    }\n  }\n\n  @if $all or $clear {\n    @include BemUtil.unscopedModifier($className, 'clear', $react) {\n      @include clear;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.unscopedModifier($className, 'success', $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $danger {\n    @include BemUtil.unscopedModifier($className, 'danger', $react) {\n      @include danger;\n    }\n  }\n\n  @if $all or ($themeCoat and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-coat', $react) {\n      @include primaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-coat', $react) {\n      @include secondaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-coat', $react) {\n      @include supplementaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeBlack and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-black', $react) {\n      @include primaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-black', $react) {\n      @include secondaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-black', $react) {\n      @include supplementaryThemeBlack;\n    }\n  }\n}","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --size: 24px;\n\n  // icon size relative to the checkbox size (--size)\n  --icon-scale: 1;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background-unselected: transparent;\n  --background-selected: var(--color-bus);\n  --background-hover: var(--color-bus-dark);\n  --background-disabled: var(--color-black-10);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-focus: var(--color-bus);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-focus: var(--color-black-90);\n  --border-color-disabled: var(--color-black-10);\n  --icon-color-unselected: transparent;\n  --icon-color-selected: var(--color-white);\n  --icon-color-disabled: var(--color-white);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n  --icon-size: var(--spacing-m);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n\n  &,\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: border-box;\n  }\n\n  /* stylelint-disable no-descending-specificity */\n  &:not(:first-of-type) {\n    margin-top: var(--spacing-2-xs);\n  }\n}\n\n@mixin input {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n\n  // Normalize.css rules\n  // Change the font styles in all browsers.\n  font-family: inherit; // 1\n  font-size: 100%; // 1\n  height: var(--size);\n  left: 0;\n\n  // Normalize.css rules\n  // 1. Change the font styles in all browsers.\n  // 2. Remove the margin in Firefox and Safari.\n  line-height: 1.15; // 1\n  margin: 0; // 2\n  outline: none;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n\n  &:before {\n    // checkbox icon\n    background-color: var(--icon-color-unselected);\n    content: '';\n    height: var(--size);\n    left: 0;\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E\");\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: calc(var(--size) * var(--icon-scale));\n    position: absolute;\n    top: 0;\n    transform: scale(0.6);\n    width: var(--size);\n    z-index: 1;\n  }\n}\n\n@mixin inputCustom {\n  // CUSTOM CHECKBOX\n\n  // checkbox icon - selected\n  &:checked:before {\n    background-color: var(--icon-color-selected);\n    transform: scale(1);\n  }\n\n  // checkbox icon - indeterminated\n  &:not(:checked):indeterminate:before {\n    background-color: var(--icon-color-selected);\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");\n    transform: scale(1);\n  }\n\n  // background - selected or indeterminated\n  &:checked + label:after,\n  &:indeterminate + label:after {\n    background-color: var(--background-selected);\n    border-color: var(--border-color-selected);\n  }\n\n  // background\n  &:disabled + label:after {\n    background-color: var(--background-disabled);\n    border-color: var(--border-color-disabled);\n  }\n\n  // background - unselected - focus\n  &:not(:disabled):focus + label:after {\n    border-color: var(--border-color-unselected-focus);\n  }\n\n  // background - unselected - hover\n  &:not(:disabled):hover + label:after,\n  &:not(:disabled):hover:focus + label:after {\n    border-color: var(--border-color-unselected-hover);\n  }\n\n  // background - selected - focus\n  &:not(:disabled):checked:focus + label:after,\n  &:not(:disabled):indeterminate:focus + label:after {\n    border-color: var(--border-color-selected-focus);\n  }\n\n  // background - selected - hover\n  &:not(:disabled):checked:hover + label:after,\n  &:not(:disabled):indeterminate:hover + label:after,\n  &:not(:disabled):checked:hover:focus + label:after,\n  &:not(:disabled):indeterminate:hover:focus + label:after {\n    background-color: var(--background-hover);\n    border-color: var(--border-color-selected-hover);\n  }\n}\n\n@mixin inputDisabled {\n  &:disabled + label {\n    color: var(--label-color-disabled);\n  }\n\n  &:checked:disabled:before {\n    background-color: var(--icon-color-disabled);\n  }\n\n  &:disabled,\n  &:disabled + label {\n    cursor: not-allowed;\n  }\n}\n\n@mixin inputTransitions {\n  // checkbox transitions\n  &:hover:before,\n  &:focus:before,\n  &:hover + label:after,\n  &:focus + label:after {\n    transition: 85ms ease-out;\n    transition-property: background-color, border-color, transform;\n  }\n\n  &:focus + label:before {\n    box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n    transform: translate3d(0, 0, 0);\n    transition: 85ms ease-out;\n    transition-property: box-shadow, transform;\n  }\n}\n\n\n@mixin label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n\n  &:before,\n  &:after {\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: 0;\n  }\n\n  // focus outline\n  &:before {\n    height: var(--size);\n    width: var(--size);\n  }\n\n  // background\n  &:after {\n    background-color: var(--background-unselected);\n    border: var(--border-width) solid var(--border-color-unselected);\n    height: var(--size);\n    width: var(--size);\n  }\n}\n\n@mixin noLabel {\n  & {\n    padding-left: var(--size);\n  }\n}\n\n@mixin error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n\n  &:before {\n    background: var(--color-error);\n    content: '';\n    display: inline-block;\n    height: var(--icon-size);\n    margin-right: var(--spacing-2-xs);\n    -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    pointer-events: none;\n    width: var(--icon-size);\n  }\n}\n\n@mixin checkbox(\n  $all: true,\n  $base: false,\n  $input: false,\n  $label: false,\n  $noLabel: false,\n  $error-text: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'checkbox';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $input {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'input', true) {\n        @include input;\n        @include inputDisabled;\n        @include inputTransitions;\n        @include inputCustom;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('input') {\n            @include input;\n            @include inputDisabled;\n            @include inputTransitions;\n            @include inputCustom;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $label {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include label;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('label') {\n            @include label;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $noLabel {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include noLabel;\n      }\n    } @else {\n      @include BemUtil.unscopedElement($className, 'label') {\n        & #{&}--hidden {\n          @include noLabel;\n        }\n      }\n    }\n  }\n\n  @if $all or $error-text {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'error-text', true) {\n        @include error-text;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('error-text') {\n            @include error-text;\n          }\n        }\n      }\n    }\n  }\n\n}\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --status-label-background: var(--color-black-10);\n  --status-label-color: var(--color-black-90);\n  --status-label-height: 32px;\n\n  background-color: var(--status-label-background);\n  border-radius: 20px;\n  color: var(--status-label-color);\n  display: inline-block;\n  font-size: var(--fontsize-body-s);\n  line-height: var(--status-label-height);\n  min-height: var(--status-label-height);\n  padding: 0 var(--spacing-2-xs);\n  vertical-align: middle;\n}\n\n@mixin error {\n  --status-label-background: var(--color-error);\n  --status-label-color: var(--color-white);\n}\n\n@mixin withIcon {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--spacing-3-xs);\n}\n\n@mixin icon {\n  height: var(--spacing-m);\n  margin-right: var(--spacing-3-xs);\n  width: var(--spacing-m);\n}\n\n@mixin info {\n  --status-label-background: var(--color-info);\n  --status-label-color: var(--color-white);\n}\n\n@mixin success {\n  --status-label-background: var(--color-success);\n  --status-label-color: var(--color-white);\n}\n\n@mixin alert {\n  --status-label-background: var(--color-alert);\n}\n\n@mixin status-label(\n  $all: true,\n  $base: false,\n  $icon: false,\n  $withIcon: false,\n  $info: false,\n  $error: false,\n  $alert: false,\n  $success: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'status-label';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $withIcon {\n    @include BemUtil.unscopedModifier($className, 'with-icon', $react) {\n      @include withIcon;\n    }\n  }\n\n  @if $all or $icon {\n    $iconClassName: 'hds-status-label-icon';\n\n    @if $override {\n      $iconClassName: $override;\n    }\n\n    @if $react {\n      @include icon;\n    } @else {\n      // the original, pre-sass css had \"-icon\" which is not bem compliant, so manually created same\n      .#{$iconClassName} {\n        @include icon;\n      }\n    }\n  }\n\n  @if $all or $info {\n    @include BemUtil.unscopedModifier($className, 'info', $react) {\n      @include info;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.unscopedModifier($className, 'success', $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $alert {\n    @include BemUtil.unscopedModifier($className, 'alert', $react) {\n      @include alert;\n    }\n  }\n\n  @if $all or $error {\n    @include BemUtil.unscopedModifier($className, 'error', $react) {\n      @include error;\n    }\n  }\n}\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --content-background-color: var(--color-white);\n\n  border-collapse: collapse;\n  line-height: 1.5;\n  width: 100%;\n\n  &-container {\n    overflow-x: auto;\n  }\n\n  &-container:focus {\n    outline: var(--color-focus-outline) 3px solid;\n  }\n\n  & th {\n    border-bottom: 1px solid var(--color-black-20);\n    font-size: var(--fontsize-body-m);\n    font-weight: 500;\n    line-height: var(--lineheight-l);\n    padding: var(--spacing-xs) var(--spacing-m);\n    text-align: left;\n    white-space: nowrap;\n  }\n\n  &__content tr td {\n    background-color: var(--content-background-color);\n    border-bottom: 1px solid var(--color-black-50);\n    color: var(--color-black-90);\n    font-size: var(--fontsize-body-m);\n    font-weight: 400;\n    line-height: 24px;\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n\n  &__header-row {\n    background-color: var(--header-background-color);\n  }\n}\n\n@mixin mobile {\n  @media (max-width: 767px) {\n    & th {\n      font-size: var(--fontsize-body-s);\n      font-weight: bold;\n      padding: 9px var(--spacing-s);\n    }\n\n    &__content tr td {\n      font-size: var(--fontsize-body-s);\n      padding: 9px var(--spacing-s);\n    }\n\n    &__caption {\n      font-size: var(--fontsize-heading-xxs);\n      letter-spacing: 0.2px;\n      line-height: var(--lineheight-l);\n      margin-bottom: var(--spacing-xs);\n    }\n  }\n}\n\n@mixin textAlignTdRight {\n  &--text-align-td-right td {\n    text-align: right;\n  }\n}\n\n@mixin caption {\n  font-size: var(--fontsize-body-l);\n  font-weight: normal;\n  line-height: var(--lineheight-l);\n  margin-bottom: var(--spacing-s);\n  text-align: left;\n}\n\n\n@mixin dark {\n  &--dark {\n    --header-background-color: var(--color-bus);\n  }\n\n  &#{&}--dark th {\n    color: var(--color-white);\n  }\n}\n\n@mixin light {\n  &--light {\n    --header-background-color: var(--color-silver);\n  }\n\n  &#{&}--light th {\n    color: var(--color-black-90);\n  }\n}\n\n@mixin dense {\n  &--dense#{&} th {\n    font-size: var(--fontsize-body-s);\n    font-weight: bold;\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__content tr td {\n    font-size: var(--fontsize-body-s);\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__caption {\n    font-size: var(--fontsize-body-m);\n    line-height: var(--lineheight-l);\n    margin-bottom: var(--spacing-xs);\n  }\n}\n\n@mixin zebra {\n  &--zebra #{&}__content {\n    & tr td {\n      border-bottom: none;\n    }\n\n    & tr:nth-child(even) td {\n      background-color: var(--color-black-10);\n    }\n  }\n}\n\n@mixin withVerticalLines {\n  &--with-vertical-lines #{&}__content {\n    border-left: 1px solid var(--color-black-50);\n\n    & td {\n      border-right: 1px solid var(--color-black-50);\n    }\n  }\n\n  &--with-vertical-lines #{&}__header-row {\n    border-left: 1px solid var(--header-background-color);\n    border-right: 1px solid var(--header-background-color);\n  }\n}\n\n@mixin withVerticalHeader {\n  &__vertical-header-column {\n    background-color: var(--header-background-color);\n  }\n\n  &--with-vertical-header#{&}--with-vertical-lines #{&}__content {\n    border-left: none;\n  }\n\n  &--with-vertical-lines#{&}--with-vertical-header #{&}__header-row {\n    border-left: none;\n  }\n}\n\n@mixin textAlignRight {\n  text-align: right;\n}\n\n@mixin table(\n  $all: true,\n  $base: false,\n  $textAlignTdRight: false,\n  $caption: false,\n  $dark: false,\n  $light: false,\n  $withVerticalLines: false,\n  $dense: false,\n  $zebra: false,\n  $withVerticalHeader: false,\n  $textAlignRight: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'table';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $textAlignTdRight {\n    @include BemUtil.unscopedElement($className, 'content', $react) {\n      @include textAlignTdRight;\n    }\n  }\n\n  @if $all or $caption {\n    @include BemUtil.unscopedElement($className, 'caption', $react) {\n      @include caption;\n    }\n  }\n\n\n  @if $all or $dark {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dark;\n    }\n  }\n\n  @if $all or $light {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include light;\n    }\n  }\n\n  @if $all or $withVerticalLines {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalLines;\n    }\n  }\n\n  @if $all or $dense {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dense;\n    }\n  }\n\n  @if $all or $zebra {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include zebra;\n    }\n  }\n\n  @if $all or $withVerticalHeader {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalHeader;\n    }\n  }\n\n  @if $all or $textAlignRight {\n    @include BemUtil.unscopedModifier($className, 'text-align-right', $react) {\n      @include textAlignRight;\n    }\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n}\n",".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n",".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n",".hds-icon--check-circle-fill {\n  --mask-image-check-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-start--check-circle-fill {\n  --mask-image-before: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-end--check-circle-fill {\n  --mask-image-after: var(--mask-image-check-circle-fill);\n}\n",".hds-icon--error-fill {\n  --mask-image-error-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-error-fill);\n}\n\n.hds-icon-start--error-fill {\n  --mask-image-before: var(--mask-image-error-fill);\n}\n\n.hds-icon-end--error-fill {\n  --mask-image-after: var(--mask-image-error-fill);\n}\n",".hds-icon--info-circle-fill {\n  --mask-image-info-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-start--info-circle-fill {\n  --mask-image-before: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-end--info-circle-fill {\n  --mask-image-after: var(--mask-image-info-circle-fill);\n}\n","@use '../../utils/bem' as BemUtil;\n@use '../../icons/icon';\n@use '../../icons/alert-circle-fill';\n@use '../../icons/check-circle-fill';\n@use '../../icons/error-fill';\n@use '../../icons/info-circle-fill';\n\n@mixin base {\n  --notification-background-color: var(--color-info-light);\n  --notification-border-color: var(--color-info);\n  --notification-border-width: var(--spacing-2-xs);\n  --notification-icon-color: var(--color-info);\n  --notification-color: var(--color-black-90);\n  --notification-max-width-inline: none;\n  --notification-max-width-toast: 21rem;\n  --notification-z-index-inline: auto;\n  --notification-z-index-toast: 99;\n  --notification-offset: var(--spacing-layout-s);\n  --notification-padding: var(--spacing-s);\n\n  background-color: var(--notification-background-color);\n  border: solid var(--notification-border-color);\n  border-width: 0 0 0 var(--notification-border-width);\n  box-sizing: border-box;\n  color: var(--notification-color);\n  max-width: var(--notification-max-width-inline);\n  padding: var(--notification-padding);\n  position: relative;\n  width: 100%;\n  z-index: var(--notification-z-index-inline);\n\n  &__content {\n    display: grid;\n    gap: var(--spacing-s);\n  }\n\n  &__label {\n    align-items: center;\n    display: flex;\n    font-size: var(--fontsize-heading-xs);\n    font-weight: bold;\n    letter-spacing: 0;\n    line-height: 24px;\n    margin-right: var(--spacing-l);\n  }\n\n  & .hds-icon {\n    --icon-size: var(--spacing-layout-xs);\n  }\n\n  &__label > .hds-icon {\n    color: var(--notification-icon-color);\n    flex: none;\n    margin-right: var(--spacing-2-xs);\n  }\n\n  &__body {\n    font-size: var(--fontsize-body-s);\n    line-height: 24px;\n  }\n\n\n  &__close-button {\n    --notification-close-button-offset: var(--spacing-s);\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    outline: none;\n    padding: 0;\n    position: absolute;\n    right: var(--notification-close-button-offset);\n    top: var(--notification-close-button-offset);\n  }\n\n  &__close-button:focus {\n    box-shadow: 0 0 0 3px var(--color-focus-outline);\n  }\n}\n\n\n@mixin small {\n  &--small {\n    --notification-padding: var(--spacing-2-xs);\n  }\n\n  &--small &__content {\n    display: flex;\n    gap: 0;\n  }\n\n  &--small &__label {\n    margin-right: 0;\n  }\n\n  &--small &__body {\n    margin-right: var(--spacing-l);\n  }\n\n  &--small &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin large {\n  &--large {\n    --notification-padding: var(--spacing-l);\n  }\n\n  &--large &__label {\n    margin-right: 0;\n  }\n\n  &--large &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin toast {\n  &--top-left,\n  &--top-center,\n  &--top-right,\n  &--bottom-left,\n  &--bottom-center,\n  &--bottom-right {\n    border-width: var(--notification-border-width) 0 0;\n    max-width: var(--notification-max-width-toast);\n    position: fixed;\n    width: calc(100% - var(--spacing-l));\n    z-index: var(--notification-z-index-toast);\n  }\n\n  &--top-left {\n    left: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--top-center {\n    left: 50%;\n    top: var(--notification-offset);\n    transform: translateX(-50%);\n  }\n\n  &--top-right {\n    right: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--bottom-left {\n    bottom: var(--notification-offset);\n    left: var(--notification-offset);\n  }\n\n  &--bottom-center {\n    bottom: var(--notification-offset);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &--bottom-right {\n    bottom: var(--notification-offset);\n    right: var(--notification-offset);\n  }\n\n  @media only screen and (max-width: 765.98px) {\n    & {\n      --notification-offset: var(--spacing-s);\n    }\n  }\n}\n\n@mixin success {\n  &--success {\n    --notification-background-color: var(--color-success-light);\n    --notification-border-color: var(--color-success);\n    --notification-icon-color: var(--color-success);\n  }\n}\n\n@mixin alert {\n  &--alert {\n    --notification-background-color: var(--color-alert-light);\n    --notification-border-color: var(--color-alert-dark);\n    --notification-icon-color: var(--color-alert-dark);\n  }\n}\n\n@mixin error {\n  &--error {\n    --notification-background-color: var(--color-error-light);\n    --notification-border-color: var(--color-error);\n    --notification-icon-color: var(--color-error);\n  }\n}\n\n@mixin box-shadow {\n  &--box-shadow {\n    box-shadow: var(--box-shadow-l);\n  }\n}\n\n@mixin notification(\n  $all: true,\n  $base: false,\n  $small: false,\n  $large: false,\n  $toast: false,\n  $success: false,\n  $alert: false,\n  $error: false,\n  $box-shadow: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'notification';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $large {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include large;\n    }\n  }\n\n  @if $all or $toast {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include toast;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $alert {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include alert;\n    }\n  }\n\n  @if $all or $error {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include error;\n    }\n  }\n\n  @if $all or $box-shadow {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include box-shadow;\n    }\n  }\n\n}",".hds-card {\n  --background-color: var(--color-white);\n  --border-color: var(--color-black-90);\n  --color: var(--color-black-90);\n  --border-width: 2px;\n  --padding-horizontal: var(--spacing-l);\n  --padding-vertical: var(--spacing-m);\n\n  background-color: var(--background-color);\n  color: var(--color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n.hds-card--border {\n  border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n.hds-card--box-shadow {\n  box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n.hds-card__body {\n  display: grid;\n  gap: var(--spacing-s);\n  margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n  margin-bottom: 0;\n}\n\n/* BODY TEXT */\n.hds-card__text {\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n",".hds-container {\n  box-sizing: border-box;\n  padding-left: var(--spacing-layout-2-xs);\n  padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n  .hds-container {\n    padding-left: var(--spacing-layout-xs);\n    padding-right: var(--spacing-layout-xs);\n  }\n}\n\n@media (min-width: 1248px) {\n  .hds-container {\n    max-width: var(--container-width-xl);\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n",".hds-error-summary__body {\n  font-size: var(--fontsize-body-s);\n  line-height: 24px;\n}\n\n.hds-error-summary__body ul {\n  margin: 0;\n  padding: 0 0 0 var(--spacing-s);\n}\n\n.hds-error-summary__body li {\n  margin-bottom: 0.125rem;\n}\n\n.hds-error-summary__body a {\n  color: var(--color-bus);\n}\n",".hds-fieldset {\n  --border-style: 0 none;\n  --padding-top: 4px;\n  --padding-sides: 0;\n  --padding-bottom: var(--spacing-s);\n\n  border: var(--border-style);\n  box-sizing: border-box;\n  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n  font-weight: bold;\n\n  /* Normalize.css rule\n  * Remove the padding so developers are not caught out when they zero out\n  * `fieldset` elements in all browsers.\n  */\n  padding: 0;\n}\n\n.hds-fieldset--border {\n  --border-style: 2px inset var(--color-black-90);\n  --padding-top: 2px;\n  --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n  margin-left: calc(var(--padding-sides) / -2);\n  padding: 0 6px;\n}\n",".hds-hero {\n  --arrow-icon-color: var(--color);\n  --arrow-icon-size: 128px;\n  --background-color: var(--color-white);\n  --color: var(--color-black-90);\n  --diagonal-koros-position: 45%;\n  --horizontal-padding-large: var(--spacing-layout-xs);\n  --horizontal-padding-medium: var(--spacing-layout-xs);\n  --horizontal-padding-small: var(--spacing-layout-2-xs);\n  --horizontal-padding-x-large: var(--spacing-layout-xs);\n  --image-position: bottom right;\n  --koros-color: var(--color-white);\n  --bottom-koros-color: var(--koros-color);\n  --koros-height: 85px;\n  --padding-horizontal: var(--horizontal-padding-small);\n  --padding-vertical: var(--spacing-xl);\n  --z-index: 1;\n  --bottom-background-color: transparent;\n  --information-padding-top: 0;\n  --information-color: inherit;\n\n  background-color: var(--background-color);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: var(--z-index);\n}\n\n.hds-hero__bottom-container {\n  background-color: var(--bottom-background-color);\n  width: 100%;\n}\n\n.hds-hero__bottom-content-aligner {\n  display: flex;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n  position: relative;\n  width: 100%;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero__arrow-icon-container {\n  display: flex;\n  position: relative;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero--arrow-icon {\n  --icon-size: var(--arrow-icon-size) !important;\n\n  color: var(--arrow-icon-color);\n\n  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */\n  margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));\n  margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));\n}\n\n.hds-hero__information-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding-top: var(--information-padding-top);\n}\n\n.hds-hero__information-container span {\n  color: var(--information-color);\n  padding: var(--spacing-2-xs) var(--spacing-s);\n}\n\n.hds-hero__title {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: normal;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text {\n  font-size: var(--fontsize-body-l);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text:last-of-type {\n  margin: 0 0 var(--spacing-l) 0;\n}\n\n.hds-hero__container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n  display: flex;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n  align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n  display: none;\n}\n\n.hds-hero__card {\n  display: block;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n  height: var(--koros-height);\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n  position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n  bottom: calc(-1 * var(--koros-height));\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  top: auto;\n}\n\n.hds-hero__koros-container > div {\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-hero__card--centered-content {\n  text-align: center;\n  width: 100%;\n}\n\n.hds-hero__image {\n  display: block;\n  width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n  display: block;\n  position: relative;\n}\n\n.hds-hero__image-below-koros {\n  display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n  position: relative;\n}\n\n.hds-hero--with-background__background {\n  position: relative;\n  width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n  display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n  padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n  bottom: 0;\n  height: var(--koros-height);\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n\n  --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n  box-sizing: border-box;\n  display: block;\n  padding: 0;\n  width: 100%;\n  z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n  height: var(--koros-height);\n  position: absolute;\n  transform: rotate(180deg);\n  width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n  height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-medium);\n    --padding-vertical: var(--spacing-layout-m);\n    --arrow-icon-size: 164px;\n  }\n\n  .hds-hero--with-background__background,\n  .hds-hero__image-below-koros {\n    height: 400px;\n  }\n\n  .hds-hero__information-container span {\n    padding-bottom: var(--spacing-xs);\n    padding-right: var(--spacing-m);\n    padding-top: var(--spacing-xs);\n  }\n}\n\n@media only screen and (min-width: 992px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-large);\n    --padding-vertical: var(--spacing-layout-xl);\n  }\n\n  .hds-hero__text {\n    font-size: var(--fontsize-body-xl);\n  }\n\n  .hds-hero--image-left .hds-hero__image-below-koros,\n  .hds-hero--image-right .hds-hero__image-below-koros {\n    display: none;\n  }\n\n  .hds-hero--image-left .hds-hero__information-container,\n  .hds-hero--image-right .hds-hero__information-container {\n    --information-padding-top: var(--koros-height);\n  }\n\n  .hds-hero__content--two-columns {\n    flex-direction: row;\n  }\n\n  .hds-hero__content--two-columns > * {\n    width: 50%;\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns__image-container {\n    display: block;\n  }\n\n  .hds-hero--background-image .hds-hero--with-background__container {\n    padding: var(--padding-vertical) var(--padding-horizontal);\n  }\n\n  .hds-hero--background-image .hds-hero__content {\n    --padding-vertical: var(--spacing-2-xl);\n\n    display: flex;\n    flex-direction: row;\n    margin: 0 auto;\n    max-width: var(--container-width-xl);\n  }\n\n  .hds-hero--background-image .hds-hero__card {\n    width: 50%;\n  }\n\n  .hds-hero--with-background__background {\n    height: auto;\n    inset: 0;\n    position: absolute;\n    width: auto;\n    z-index: -1;\n  }\n\n  .hds-hero--with-background__empty-column {\n    display: block;\n    width: 45%;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__content {\n    background-color: transparent;\n    padding: var(--padding-vertical) 0;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__card {\n    background: none;\n    padding: 0 var(--padding-horizontal);\n    width: 55%;\n  }\n\n  .hds-hero--diagonal-koros__koros-aligner {\n    bottom: 0;\n    max-width: var(--container-width-xl);\n    position: absolute;\n    right: var(--diagonal-koros-position);\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background {\n    display: block;\n    height: 100%;\n    inset: 0;\n    overflow: visible;\n    position: absolute;\n    transform: rotate(135deg);\n    transform-origin: center;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background:after {\n    background-color: var(--koros-color);\n    content: '';\n    display: block;\n    height: 1500px;\n    left: 0;\n    position: absolute;\n    top: 50px;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--background-image__koros {\n    --koros-color: var(--bottom-koros-color);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xl);\n  }\n}\n\n@media only screen and (min-width: 1248px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-x-large);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xxl);\n    letter-spacing: -1.2px;\n    line-height: var(--lineheight-s);\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__text {\n    padding-right: var(--spacing-l);\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-2-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-2-xl);\n  }\n}\n",".hds-highlight {\n  --accent-line-color: var(--color-bus);\n  --text-color: var(--color-black-90);\n  --size-width-s: 264px;\n  --size-width-m: 536px;\n  --size-width-l: 680px;\n  --width: var(--size-width-m);\n  --margin: var(--spacing-m) 0;\n\n  border-left: 8px solid var(--accent-line-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: var(--margin);\n  max-width: 100%;\n  padding: 0;\n  padding-left: var(--spacing-s);\n  row-gap: var(--spacing-m);\n  width: var(--width);\n}\n\n.hds-blockquote {\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight__text {\n  color: var(--text-color);\n  font-size: var(--fontsize-heading-m);\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight--small {\n  --margin: var(--spacing-s) 0;\n  --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n  --margin: var(--spacing-l) 0;\n  --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n  font-size: var(--fontsize-heading-l);\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n  content: '\"';\n  display: inline;\n}\n\n.hds-highlight__reference {\n  font-size: var(--fontsize-heading-xs);\n  line-height: var(--lineheight-m);\n}\n",".hds-koros {\n  line-height: 0;\n  width: 100%;\n}\n\n.hds-koros--flip-vertical {\n  transform: scaleY(-1);\n}\n\n.hds-koros--45deg {\n  transform: rotate(45deg);\n  will-change: transform; /* The browser should use a new compositing layer when rotating. Otherwise, it will draw an annoying hairline on top of the Koros. */\n}\n\n.hds-koros--90deg {\n  transform: rotate(90deg);\n  will-change: transform;\n}\n\n.hds-koros--135deg {\n  transform: rotate(135deg);\n  will-change: transform;\n}\n\n.hds-koros--180deg {\n  transform: rotate(180deg);\n  will-change: transform;\n}\n\n.hds-koros--225deg {\n  transform: rotate(225deg);\n  will-change: transform;\n}\n\n.hds-koros--270deg {\n  transform: rotate(270deg);\n  will-change: transform;\n}\n\n.hds-koros--315deg {\n  transform: rotate(315deg);\n  will-change: transform;\n}\n","@use '../../icons/icon.css';\n@use '../../icons/link-external.css';\n\n.hds-link {\n  --link-visited-color: #551a8b;\n  --link-color: var(--color-bus);\n\n  border: 3px solid transparent;\n  box-sizing: border-box;\n  color: var(--link-color);\n  text-decoration: underline;\n}\n\n.hds-link:visited {\n  color: var(--link-visited-color);\n}\n\n.hds-link:visited svg g path { /* Fixes external link icon visited color for Safari */\n  fill: var(--link-visited-color);\n}\n\n.hds-link:focus {\n  border: 3px solid var(--color-focus-outline);\n  outline: none;\n}\n\n.hds-link:focus-visible {\n  outline: none;\n}\n\n.hds-link .vertical-align-medium-icon {\n  vertical-align: sub;\n}\n\n.hds-link .vertical-align-big-icon {\n  vertical-align: middle;\n}\n\n.hds-link .vertical-align-small-icon {\n  vertical-align: text-top;\n}\n\n.hds-link--disable-visited-styles:visited {\n  color: var(--color-bus);\n}\n\n.hds-link--small {\n  font-size: 14px;\n}\n\n.hds-link--medium {\n  font-size: 16px;\n}\n\n.hds-link--large {\n  display: block;\n  font-size: 18px;\n  width: fit-content;\n}\n\n/* ICONS */\n\n.hds-link--small .icon {\n  margin-left: 7px;\n}\n\n.hds-link--medium .icon {\n  margin-left: var(--spacing-2-xs);\n  margin-top: -3px; /* Fixes lineheight problem for external inline link */\n}\n\n.hds-link--large .icon {\n  margin-left: var(--spacing-s);\n}\n\n.hds-link--small .hds-icon-start {\n  margin-right: 4px;\n  vertical-align: text-top;\n}\n\n.hds-link--medium .hds-icon-start {\n  margin-right: 8px;\n  vertical-align: sub;\n}\n\n.hds-link--large .hds-icon-start {\n  margin-right: 16px;\n  vertical-align: middle;\n}\n",".hds-loading-spinner {\n  --spinner-size: 4rem;\n  --spinner-color: var(--color-coat-of-arms);\n  --spinner-thickness: 0.5rem;\n  --spinner-rotation-animation-duration: 1.5s;\n  --spinner-color-animation-duration: 4.5s;\n  --spinner-color-stage1: var(--color-coat-of-arms);\n  --spinner-color-stage2: var(--color-copper);\n  --spinner-color-stage3: var(--color-suomenlinna);\n\n  border-top-color: var(--spinner-color);\n  height: var(--spinner-size);\n  position: relative;\n  width: var(--spinner-size);\n}\n\n.hds-loading-spinner--multicolor {\n  animation: spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite;\n  border-top-color: var(--spinner-color-stage1);\n}\n\n.hds-loading-spinner--small {\n  --spinner-size: 1.5rem;\n  --spinner-thickness: 0.1875rem;\n}\n\n.hds-loading-spinner div {\n  animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;\n  border: var(--spinner-thickness) solid transparent;\n  border-radius: 50%;\n  border-top-color: inherit;\n  box-sizing: border-box;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-loading-spinner div:nth-child(2) {\n  animation-delay: -0.15s;\n}\n\n.hds-loading-spinner div:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes spinner-rotation-animation {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n@keyframes spinner-color-animation {\n  0% { /* empty */ }\n  33.3% { border-top-color: var(--spinner-color-stage2) }\n  66.6% { border-top-color: var(--spinner-color-stage3) }\n  100% { /* empty */ }\n}","@use '../../icons/icon.css';\n@use '../../icons/angle-right.css';\n@use '../../icons/angle-left.css';\n\n.hds-pagination-container {\n  text-align: center;\n}\n\n.hds-pagination {\n  display: inline-block; /* Allows centering */\n  font-size: var(--fontsize-body-m);\n  font-weight: bold;\n  line-height: var(--lineheight-l);\n  position: relative; /* Enables position absolute for btn--next */\n  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n  --active-page-background-color: var(--color-black);\n  --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n.hds-pagination:before {\n  content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n  display: block;\n  float: right; /* Floated pseudo-element wraps the inline ul around it */\n  line-height: 56px;\n  padding-left: 100px;\n  speak: never; /* Removes this pseudo-element from screen readers where supported */\n  visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n  float: left;\n  margin-right: 8px;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n  position: absolute;\n  right: 0;\n  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination__pages {\n  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n  flex-wrap: wrap; /* Allow wrapping of the li-elements */\n  gap: var(--spacing-2-xs);\n  justify-content: center; /* Center the li-elements */\n  list-style: none;\n  margin-bottom: 0;\n  margin-top: 8px;\n  padding: 0;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n  align-items: center;\n  border-radius: 21px;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  min-width: 32px;\n  padding-left: var(--spacing-3-xs);\n  padding-right: var(--spacing-3-xs);\n  text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n  text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n  outline: solid var(--color-focus-outline) 3px;\n  outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n  background-color: var(--active-page-background-color);\n  color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n  text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n  align-items: center;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  width: 40px;\n}\n",".hds-radio-button {\n  --size: 24px;\n\n  /* icon (circle) size relative to the radio button size (--size) */\n  --icon-scale: 0.5;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background: var(--color-white);\n  --background-hover: var(--color-white);\n  --background-focus: var(--color-white);\n  --background-unselected-disabled: var(--color-black-10);\n  --background-selected-disabled: var(--color-white);\n  --border-color-focus: var(--color-black-90);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-disabled: var(--color-black-20);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-disabled: var(--color-black-10);\n  --icon-color-selected: var(--color-bus);\n  --icon-color-unselected: transparent;\n  --icon-color-hover: var(--color-bus-dark);\n  --icon-color-disabled: var(--color-black-10);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n  box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n  margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n  border-radius: 50%;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  top: 0;\n}\n\n/* inner circle */\n.hds-radio-button .hds-radio-button__label:after {\n  background-clip: content-box;\n  background-color: var(--icon-color-unselected);\n  border: var(--border-width) solid var(--border-color-unselected);\n  height: var(--size);\n  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n  width: var(--size);\n}\n\n/* inner circle - selected */\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n  background-color: var(--icon-color-selected);\n  border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n  transition: 85ms ease-out;\n  transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n  background-color: var(--icon-color-disabled);\n  border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n.hds-radio-button .hds-radio-button__label:before {\n  background-color: var(--background);\n  height: var(--size);\n  width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  transition: 85ms ease-out;\n  transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n.hds-radio-button .hds-radio-button__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  height: var(--size);\n  left: 0;\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n  background-color: var(--background-hover);\n}\n\n/* background - focus */\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n  background-color: var(--icon-color-hover);\n  border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  color: var(--label-color-disabled);\n}\n\n/* background */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  cursor: not-allowed;\n}\n","@use '../../icons/icon.css';\n@use '../../icons/search.css';\n\n.hds-search-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --input-height: 56px;\n  --helper-color-default: var(--color-black-60);\n  --input-background-default: var(--color-white);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover : var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-color-default: var(--color-black-90);\n  --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n.hds-search-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n.hds-search-input__input-wrapper {\n  display: flex;\n  height: 100%;\n  position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n  box-sizing: border-box;\n  color: var(--input-color-default);\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n  padding: 0 var(--spacing-s);\n  width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n/* FOCUS OUTLINE */\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n\n/* BUTTON */\n.hds-search-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-search-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: inherit;\n  color: var(--dropdown-color-default);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n.hds-search-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-3-xs);\n}\n",".hds-selection-group {\n  --spacing-col: 1.25rem;\n  --spacing-row: var(--spacing-s);\n  --spacing-legend: var(--spacing-xs);\n  --label-color-default: var(--color-black-90);\n  --icon-size: var(--spacing-m);\n\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n}\n\n.hds-selection-group > *:not(.hds-selection-group__items) {\n  float: left;\n}\n\n.hds-selection-group__legend {\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  *    `fieldset` elements in all browsers.\n  */\n  box-sizing: border-box; /* 1 */\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-legend);\n\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 2 */\n  white-space: normal; /* 1 */\n}\n\n.hds-selection-group__required {\n  color: var(--label-color-default);\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n.hds-selection-group__items {\n  clear: left;\n  display: grid;\n  gap: var(--spacing-row) var(--spacing-col);\n  justify-content: start;\n}\n\n.hds-selection-group__items--vertical {\n  grid-auto-flow: row;\n}\n\n.hds-selection-group__items--horizontal {\n  grid-auto-flow: column;\n}\n\n.hds-selection-group__error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-legend);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-selection-group__error-text:before {\n  background: var(--color-error);\n  content: '';\n  display: inline-block;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-selection-group__helper-text-gap {\n  margin-top: var(--spacing-legend);\n}\n",".hds-step-by-step__container {\n  position: relative;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\n.hds-step-by-step__container h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n.hds-step-by-step__steps-container {\n  --title-font-size: var(--fontsize-heading-m);\n  --title-line-height: var(--lineheight-xl);\n\n  counter-reset: item;\n  letter-spacing: -0.2px;\n  margin: 0;\n  padding: 0;\n}\n\nol.hds-step-by-step__steps-container {\n  --circle-size: 48px;\n  --step-left-padding: 96px;\n}\n\n.hds-step-by-step__step-item:before,\n.hds-step-by-step__step-item:after {\n  box-sizing: border-box;\n  content: '';\n  display: block;\n  left: calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);\n  position: absolute;\n  top: calc(var(--spacing-l) + (var(--title-font-size) * var(--title-line-height) / 2) - (var(--circle-size) / 2));\n}\n\n.hds-step-by-step__step-item:after {\n  background-color: #fff;\n  border: 3px solid #000;\n  border-radius: 50%;\n  height: var(--circle-size);\n  transform: translateX(-100%);\n  width: var(--circle-size);\n  z-index: 2;\n}\n\nol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after {\n  --line-height: 1.3;\n\n  align-items: center;\n  content: counter(item);\n  counter-increment: item;\n  display: flex;\n  font-size: 1.25rem;\n  font-weight: 500;\n  justify-content: center;\n  line-height: var(--line-height);\n}\n\n.hds-step-by-step__step-item {\n  background-color: var(--color-coat-of-arms-light);\n  list-style: none;\n  margin: var(--spacing-l) 0;\n  padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding);\n  position: relative;\n}\n\nol.hds-step-by-step__steps-container .hds-step-by-step__step-item {\n  padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding);\n}\n\nul.hds-step-by-step__steps-container {\n  --circle-size: 18px;\n  --step-left-padding: var(--spacing-5-xl);\n}\n\n.hds-step-by-step__step-item-title {\n  font-size: var(--title-font-size);\n  font-weight: 500;\n  line-height: var(--title-line-height);\n  margin: 0 0 16px;\n}\n\n.hds-step-by-step__step-item:before {\n  background-color: #000;\n  height: calc(100% + var(--spacing-l));\n  transform: translateX(-50%) translateX(calc(-0.5 * var(--circle-size)));\n  width: 2px;\n  z-index: 1;\n}\n\n.hds-step-by-step__step-item:last-of-type:before {\n  display: none;\n}\n","@use '../../icons/icon.css';\n@use '../../icons/cross.css';\n\n.hds-tag {\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, var(--color-black-10));\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-color: var(--color, --color-black-90);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-outline-color: var(--outline-color, transparent);\n  --font-size: var(--fontsize-body-s);\n  --gap: var(--spacing-3-xs);\n  --height: 32px;\n  --icon-reposition: -4px;\n  --icon-size: 24px;\n  --outline-width: 2px;\n  --padding-horizontal: 12px;\n  --padding-vertical: 3px;\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border-radius: calc(var(--height) / 2);\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  display: inline-flex;\n  flex-direction: row;\n  font-size: var(--font-size);\n  font-weight: 500;\n  gap: var(--gap);\n  justify-content: center;\n  line-height: var(--lineheight-l);\n  max-width: 100%;\n  min-height: var(--height);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    flex-shrink: 0;\n    margin-right: var(--icon-reposition);\n  }\n  \n  &:before {\n    flex-shrink: 0;\n    margin-left: var(--icon-reposition);\n  }\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.hds-tag--large {\n  --font-size: var(--fontsize-body-m);\n  --gap: var(--spacing-2-xs);\n  --height: 48px;\n  --icon-reposition: -8px;\n  --outline-width: 3px;\n  --padding-horizontal: 20px;\n  --padding-vertical: 10px;\n}\n\n.hds-tag--action {\n  --border-color: var(--color-black-90);\n\n  border: 1px solid var(--computed-border-color);\n  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);\n}\n\n.hds-tag--multiline {\n  > span {\n    hyphens: auto;\n    white-space: initial;\n  }\n}\n\n.hds-tag--link {\n  text-decoration: underline;\n}\n\n.hds-tag--action, .hds-tag--link {\n  --background-color-hover: var(--color-black-20);\n  --outline-color: var(--color-focus-outline);\n\n  cursor: pointer;\n\n  /* focus */\n  &:focus-visible {\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n  }\n\n  /* hover */\n  &:hover {\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  /* active */\n  &:active {\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n  }\n\n  &:focus-visible, &:active:hover {\n    box-shadow: none;\n    outline: var(--outline-width) solid var(--computed-outline-color);\n  }\n}\n\n.hds-tag__icon, .hds-icon.hds-tag__icon {\n  flex-shrink: 0;\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n\n.hds-tag__icon:first-child {\n  margin-left: var(--icon-reposition);\n}\n\n.hds-tag__icon:last-child {\n  margin-right: var(--icon-reposition);\n}","@use '../../utils/animations.css';\n\n.hds-text-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --outline-offset-readonly: 4px;\n  --input-height: 56px;\n  --textarea-height: 149px;\n  --icon-size: var(--spacing-m);\n  --icon-color: var(--color-black);\n  --helper-color-default: var(--color-black-60);\n  --helper-color-invalid: var(--color-black);\n  --helper-background-color-invalid: var(--color-error-light);\n  --helper-icon-color-invalid: var(--color-error);\n  --helper-color-success: var(--color-black);\n  --helper-background-color-success: var(--color-success-light);\n  --helper-icon-color-success: var(--color-success);\n  --helper-color-info: var(--color-black);\n  --helper-background-color-info: var(--color-info-light);\n  --helper-icon-color-info: var(--color-info);\n  --input-background-default: var(--color-white);\n  --input-background-disabled: var(--color-black-10);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover: var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-border-color-invalid: var(--color-error);\n  --input-border-color-disabled: var(--color-black-10);\n  --input-border-color-success: var(--color-success);\n  --input-color-default: var(--color-black-90);\n  --input-color-disabled: var(--color-black-40);\n  --label-color-default: var(--color-black-90);\n  --label-color-invalid: var(--color-black-90);\n  --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n  /* removes the input shadow on iOS */\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n\n  /* removes the border radius on iOS */\n  border-radius: 0;\n  box-sizing: border-box;\n  color: var(--input-color-default);\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  padding: 0 var(--spacing-s);\n  width: 100%;\n  will-change: transform, box-shadow;\n}\n\n.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,\n.hds-text-input__input-clear::-webkit-search-cancel-button {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__button-clear > * {\n  pointer-events: none;\n}\n\n/* text-input transitions */\n.hds-text-input .hds-text-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n  border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n  border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n  color: var(--label-color-invalid);\n  transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  height: var(--textarea-height);\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  min-height: var(--input-height);\n\n  /*\n   * Normalize.css rule\n   * 1. Remove the default vertical scrollbar in IE 10+.\n   */\n  overflow: auto; /* 1 */\n  padding: var(--spacing-s);\n  resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-ms-reveal {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n  color: var(--placeholder-color);\n  opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-3-xs);\n  white-space: pre-line;\n}\n\n/* ERROR TEXT */\n.hds-text-input__error-text {\n  background-color: var(--helper-background-color-invalid);\n  border-left: 8px solid var(--color-error);\n  color: var(--helper-color-invalid);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-invalid);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n  background-color: var(--helper-background-color-success);\n  border-left: 8px solid var(--color-success);\n  color: var(--helper-color-success);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n  white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-success);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* INFO TEXT */\n.hds-text-input__info-text {\n  background-color: var(--helper-background-color-info);\n  border-left: 8px solid var(--color-info);\n  color: var(--helper-color-info);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-info);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n  background-color: var(--input-background-disabled);\n  border-color: var(--input-border-color-disabled);\n  color: var(--input-color-disabled);\n  cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n  background-color: transparent;\n  border: 0;\n  color: var(--input-color-default);\n  outline-offset: var(--outline-offset-readonly);\n  padding: 0;\n\n  /* fixes faded text color on Safari */\n  -webkit-text-fill-color: var(--input-color-default);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: outline, transform;\n}\n\n.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {\n  /* the following calculation and margin is needed to keep the outline not to overlap\n  the other content vertically and make it look nice */\n  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));\n  margin: var(--outline-offset-readonly) 0;\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-text-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: var(--icon-color);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n"]}

package/lib/components/breadcrumb/_breadcrumb-mixin.scss

@@ -0,0 +1,160 @@
+@use '../../utils/bem' as BemUtil;
+
+@mixin base {
+  --horizontal-margin-small: var(--spacing-layout-2-xs);
+  --horizontal-margin-medium: var(--spacing-layout-xs);
+  --horizontal-margin-large: var(--spacing-layout-xs);
+  --horizontal-margin-x-large: var(--spacing-layout-s);
+  --horizontal-margin: var(--horizontal-margin-small);
+
+  display: flex;
+  margin: 0 var(--horizontal-margin);
+  padding: var(--spacing-s) 0;
+
+  &__list {
+    align-items: center;
+    flex-direction: row;
+    word-wrap: break-word;
+
+    &-item {
+      align-items: center;
+      display: flex;
+      line-height: var(--lineheight-l);
+    }
+  }
+
+  &__link#{&}__link {
+    --link-visited-color: none;
+    --link-color: var(--color-black-90);
+  }
+
+  &__link {
+    &:hover,
+    &:focus {
+      -webkit-text-decoration-color: var(--color-black-90);
+      text-decoration-color: var(--color-black-90);
+    }
+  }
+
+  &__back-arrow#{&}__back-arrow {
+    display: inline-flex;
+
+    /* compensate the white space in the icon */
+    margin-left: -5px;
+    margin-right: -3px;
+
+    --icon-size: var(--spacing-m);
+  }
+
+  &__separator#{&}__separator {
+    display: inline-flex;
+    padding-left: var(--spacing-3-xs);
+
+    --icon-size: var(--spacing-s);
+  }
+
+  @media (min-width: 768px) {
+    --horizontal-margin: var(--horizontal-margin-medium);
+  }
+
+  @media (min-width: 992px) {
+    --horizontal-margin: var(--horizontal-margin-large);
+  }
+
+  @media (min-width: 1248px) {
+    --horizontal-margin: var(--horizontal-margin-x-large);
+  }
+}
+
+@mixin active {
+  &__list {
+    &-item {
+      &--active {
+        font-weight: 700;
+
+        /* to match 3px border around links */
+        padding: 3px;
+      }
+    }
+  }
+}
+
+@mixin mobile {
+  &__list {
+    &--mobile {
+      display: flex;
+
+      #{BemUtil.get-block(&)}__link {
+        font-size: var(--fontsize-body-l);
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    &__list {
+      &--mobile {
+        display: none;
+      }
+    }
+  }
+}
+
+@mixin desktop {
+  &__list {
+    &--desktop {
+      display: none;
+    }
+  }
+
+  @media (min-width: 768px) {
+    &__list {
+      &--desktop {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+
+@mixin breadcrumb(
+  $all: true,
+  $base: false,
+  $active: false,
+  $mobile: false,
+  $desktop: false,
+  $override: null,
+  $react: false
+) {
+  $className: 'breadcrumb';
+
+  @if $override {
+    $className: $override;
+  }
+
+  @if $all or $base {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include base;
+    }
+  }
+
+  @if $all or $active {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include active;
+    }
+  }
+
+  @if $all or $mobile {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include mobile;
+    }
+  }
+
+  @if $all or $desktop {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include desktop;
+    }
+  }
+}

package/lib/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,83 @@
+.hds-breadcrumb {
+  --horizontal-margin-small: var(--spacing-layout-2-xs);
+  --horizontal-margin-medium: var(--spacing-layout-xs);
+  --horizontal-margin-large: var(--spacing-layout-xs);
+  --horizontal-margin-x-large: var(--spacing-layout-s);
+  --horizontal-margin: var(--horizontal-margin-small);
+  display: flex;
+  margin: 0 var(--horizontal-margin);
+  padding: var(--spacing-s) 0;
+}
+.hds-breadcrumb__list {
+  align-items: center;
+  flex-direction: row;
+  word-wrap: break-word;
+}
+.hds-breadcrumb__list-item {
+  align-items: center;
+  display: flex;
+  line-height: var(--lineheight-l);
+}
+.hds-breadcrumb__link.hds-breadcrumb__link {
+  --link-visited-color: none;
+  --link-color: var(--color-black-90);
+}
+.hds-breadcrumb__link:hover, .hds-breadcrumb__link:focus {
+  -webkit-text-decoration-color: var(--color-black-90);
+  text-decoration-color: var(--color-black-90);
+}
+.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow {
+  display: inline-flex;
+  /* compensate the white space in the icon */
+  margin-left: -5px;
+  margin-right: -3px;
+  --icon-size: var(--spacing-m);
+}
+.hds-breadcrumb__separator.hds-breadcrumb__separator {
+  display: inline-flex;
+  padding-left: var(--spacing-3-xs);
+  --icon-size: var(--spacing-s);
+}
+@media (min-width: 768px) {
+  .hds-breadcrumb {
+    --horizontal-margin: var(--horizontal-margin-medium);
+  }
+}
+@media (min-width: 992px) {
+  .hds-breadcrumb {
+    --horizontal-margin: var(--horizontal-margin-large);
+  }
+}
+@media (min-width: 1248px) {
+  .hds-breadcrumb {
+    --horizontal-margin: var(--horizontal-margin-x-large);
+  }
+}
+.hds-breadcrumb__list-item--active {
+  font-weight: 700;
+  /* to match 3px border around links */
+  padding: 3px;
+}
+.hds-breadcrumb__list--mobile {
+  display: flex;
+}
+.hds-breadcrumb__list--mobile .hds-breadcrumb__link {
+  font-size: var(--fontsize-body-l);
+}
+@media (min-width: 768px) {
+  .hds-breadcrumb__list--mobile {
+    display: none;
+  }
+}
+.hds-breadcrumb__list--desktop {
+  display: none;
+}
+@media (min-width: 768px) {
+  .hds-breadcrumb__list--desktop {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}

package/lib/components/breadcrumb/breadcrumb.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/breadcrumb/breadcrumb.scss","../../../src/components/breadcrumb/_breadcrumb-mixin.scss"],"names":[],"mappings":"AAoFM;ECnFN,qDCEE;EACA,oDAAA;EACA,mDAAA;EACA,oDAAA;EACA,mDAAA;EAEA,aAAA;EACA,kCAAA;EACA,2BAAA;ADFF;ACIE;EACE,mBAAA;EACA,mBAAA;EACA,qBAAA;ADFJ;ACII;EACE,mBAAA;EACA,aAAA;EACA,gCAAA;ADFN;ACME;EACE,0BAAA;EACA,mCAAA;ADJJ;ACQI;EAEE,oDAAA;EACA,4CAAA;ADPN;ACWE;EACE,oBAAA;EAEA,2CAAA;EACA,iBAAA;EACA,kBAAA;EAEA,6BAAA;ADXJ;ACcE;EACE,oBAAA;EACA,iCAAA;EAEA,6BAAA;ADbJ;ACgBE;EF6BI;IE5BF,oDAAA;EDbF;AACF;ACeE;EFyBI;IExBF,mDAAA;EDZF;AACF;ACcE;EFqBI;IEpBF,qDAAA;EDXF;AACF;ACiBM;EACE,gBAAA;EAEA,qCAAA;EACA,YAAA;ADfR;ACuBI;EACE,aAAA;ADpBN;ACsBM;EACE,iCAAA;ADpBR;ACyBE;EAEI;IACE,aAAA;EDxBN;AACF;AC+BI;EACE,aAAA;AD5BN;ACgCE;EAEI;IACE,aAAA;IACA,eAAA;IACA,gBAAA;IACA,SAAA;IACA,UAAA;ED/BN;AACF","file":"breadcrumb.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './breadcrumb-mixin' as *;\n@include breadcrumb;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --horizontal-margin-small: var(--spacing-layout-2-xs);\n  --horizontal-margin-medium: var(--spacing-layout-xs);\n  --horizontal-margin-large: var(--spacing-layout-xs);\n  --horizontal-margin-x-large: var(--spacing-layout-s);\n  --horizontal-margin: var(--horizontal-margin-small);\n\n  display: flex;\n  margin: 0 var(--horizontal-margin);\n  padding: var(--spacing-s) 0;\n\n  &__list {\n    align-items: center;\n    flex-direction: row;\n    word-wrap: break-word;\n\n    &-item {\n      align-items: center;\n      display: flex;\n      line-height: var(--lineheight-l);\n    }\n  }\n\n  &__link#{&}__link {\n    --link-visited-color: none;\n    --link-color: var(--color-black-90);\n  }\n\n  &__link {\n    &:hover,\n    &:focus {\n      -webkit-text-decoration-color: var(--color-black-90);\n      text-decoration-color: var(--color-black-90);\n    }\n  }\n\n  &__back-arrow#{&}__back-arrow {\n    display: inline-flex;\n\n    /* compensate the white space in the icon */\n    margin-left: -5px;\n    margin-right: -3px;\n\n    --icon-size: var(--spacing-m);\n  }\n\n  &__separator#{&}__separator {\n    display: inline-flex;\n    padding-left: var(--spacing-3-xs);\n\n    --icon-size: var(--spacing-s);\n  }\n\n  @media (min-width: 768px) {\n    --horizontal-margin: var(--horizontal-margin-medium);\n  }\n\n  @media (min-width: 992px) {\n    --horizontal-margin: var(--horizontal-margin-large);\n  }\n\n  @media (min-width: 1248px) {\n    --horizontal-margin: var(--horizontal-margin-x-large);\n  }\n}\n\n@mixin active {\n  &__list {\n    &-item {\n      &--active {\n        font-weight: 700;\n\n        /* to match 3px border around links */\n        padding: 3px;\n      }\n    }\n  }\n}\n\n@mixin mobile {\n  &__list {\n    &--mobile {\n      display: flex;\n\n      #{BemUtil.get-block(&)}__link {\n        font-size: var(--fontsize-body-l);\n      }\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--mobile {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin desktop {\n  &__list {\n    &--desktop {\n      display: none;\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--desktop {\n        display: flex;\n        flex-wrap: wrap;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n    }\n  }\n}\n\n@mixin breadcrumb(\n  $all: true,\n  $base: false,\n  $active: false,\n  $mobile: false,\n  $desktop: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'breadcrumb';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $active {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include active;\n    }\n  }\n\n  @if $all or $mobile {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n  @if $all or $desktop {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include desktop;\n    }\n  }\n}\n"]}

package/lib/components/breadcrumb/breadcrumb.min.css

@@ -0,0 +1 @@
+.hds-breadcrumb{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.hds-breadcrumb__list{align-items:center;flex-direction:row;word-wrap:break-word}.hds-breadcrumb__list-item{align-items:center;display:flex;line-height:var(--lineheight-l)}.hds-breadcrumb__link.hds-breadcrumb__link{--link-visited-color:none;--link-color:var(--color-black-90)}.hds-breadcrumb__link:focus,.hds-breadcrumb__link:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.hds-breadcrumb__separator.hds-breadcrumb__separator{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-medium)}}@media (min-width:992px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.hds-breadcrumb{--horizontal-margin:var(--horizontal-margin-x-large)}}.hds-breadcrumb__list-item--active{font-weight:700;padding:3px}.hds-breadcrumb__list--mobile{display:flex}.hds-breadcrumb__list--mobile .hds-breadcrumb__link{font-size:var(--fontsize-body-l)}@media (min-width:768px){.hds-breadcrumb__list--mobile{display:none}}.hds-breadcrumb__list--desktop{display:none}@media (min-width:768px){.hds-breadcrumb__list--desktop{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}

package/lib/components/breadcrumb/breadcrumb.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/breadcrumb/breadcrumb.scss","../../../src/components/breadcrumb/_breadcrumb-mixin.scss"],"names":[],"mappings":"AAoFM,gBCnFN,oDCEE,CACA,mDAAA,CACA,kDAAA,CACA,mDAAA,CACA,kDAAA,CAEA,YAAA,CACA,iCAAA,CACA,0BDFF,CCIE,sBACE,kBAAA,CACA,kBAAA,CACA,oBDFJ,CCII,2BACE,kBAAA,CACA,YAAA,CACA,+BDFN,CCME,2CACE,yBAAA,CACA,kCDJJ,CCQI,wDAEE,mDAAA,CACA,2CDPN,CCWE,uDACE,mBAAA,CAGA,gBAAA,CACA,iBAAA,CAEA,4BDXJ,CCcE,qDACE,mBAAA,CACA,gCAAA,CAEA,4BDbJ,CCgBE,yBF6BI,gBE5BF,mDDbF,CACF,CCeE,yBFyBI,gBExBF,kDDZF,CACF,CCcE,0BFqBI,gBEpBF,oDDXF,CACF,CCiBM,mCACE,eAAA,CAGA,WDfR,CCuBI,8BACE,YDpBN,CCsBM,oDACE,gCDpBR,CCyBE,yBAEI,8BACE,YDxBN,CACF,CC+BI,+BACE,YD5BN,CCgCE,yBAEI,+BACE,YAAA,CACA,cAAA,CACA,eAAA,CACA,QAAA,CACA,SD/BN,CACF","file":"breadcrumb.min.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './breadcrumb-mixin' as *;\n@include breadcrumb;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --horizontal-margin-small: var(--spacing-layout-2-xs);\n  --horizontal-margin-medium: var(--spacing-layout-xs);\n  --horizontal-margin-large: var(--spacing-layout-xs);\n  --horizontal-margin-x-large: var(--spacing-layout-s);\n  --horizontal-margin: var(--horizontal-margin-small);\n\n  display: flex;\n  margin: 0 var(--horizontal-margin);\n  padding: var(--spacing-s) 0;\n\n  &__list {\n    align-items: center;\n    flex-direction: row;\n    word-wrap: break-word;\n\n    &-item {\n      align-items: center;\n      display: flex;\n      line-height: var(--lineheight-l);\n    }\n  }\n\n  &__link#{&}__link {\n    --link-visited-color: none;\n    --link-color: var(--color-black-90);\n  }\n\n  &__link {\n    &:hover,\n    &:focus {\n      -webkit-text-decoration-color: var(--color-black-90);\n      text-decoration-color: var(--color-black-90);\n    }\n  }\n\n  &__back-arrow#{&}__back-arrow {\n    display: inline-flex;\n\n    /* compensate the white space in the icon */\n    margin-left: -5px;\n    margin-right: -3px;\n\n    --icon-size: var(--spacing-m);\n  }\n\n  &__separator#{&}__separator {\n    display: inline-flex;\n    padding-left: var(--spacing-3-xs);\n\n    --icon-size: var(--spacing-s);\n  }\n\n  @media (min-width: 768px) {\n    --horizontal-margin: var(--horizontal-margin-medium);\n  }\n\n  @media (min-width: 992px) {\n    --horizontal-margin: var(--horizontal-margin-large);\n  }\n\n  @media (min-width: 1248px) {\n    --horizontal-margin: var(--horizontal-margin-x-large);\n  }\n}\n\n@mixin active {\n  &__list {\n    &-item {\n      &--active {\n        font-weight: 700;\n\n        /* to match 3px border around links */\n        padding: 3px;\n      }\n    }\n  }\n}\n\n@mixin mobile {\n  &__list {\n    &--mobile {\n      display: flex;\n\n      #{BemUtil.get-block(&)}__link {\n        font-size: var(--fontsize-body-l);\n      }\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--mobile {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin desktop {\n  &__list {\n    &--desktop {\n      display: none;\n    }\n  }\n\n  @media (min-width: 768px) {\n    &__list {\n      &--desktop {\n        display: flex;\n        flex-wrap: wrap;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n    }\n  }\n}\n\n@mixin breadcrumb(\n  $all: true,\n  $base: false,\n  $active: false,\n  $mobile: false,\n  $desktop: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'breadcrumb';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $active {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include active;\n    }\n  }\n\n  @if $all or $mobile {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n  @if $all or $desktop {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include desktop;\n    }\n  }\n}\n"]}