@oiz/stzh-components 4.3.0 → 4.3.2

package/dist/components/{p-ae438bdc.js.map → p-46b3c290.js.map}

@@ -1 +1 @@
-{"file":"p-ae438bdc.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space('small');\n    padding: space('medium');\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize('milli');\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space('xxlarge');\n\n    @include mq($from: small) {\n      padding-right: space('xxxlarge');\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n  \n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\"\n  }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\"\n  }\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll(\n      'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n    );\n\n    buttons.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-46b3c290.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space('small');\n    padding: space('medium');\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize('milli');\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space('xxlarge');\n\n    @include mq($from: small) {\n      padding-right: space('xxxlarge');\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n  \n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\"\n  }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\"\n  }\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle['margin-top']),\n          marginBottom: parseInt(computedStyle['margin-bottom']),\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll(\n      'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n    );\n\n    buttons.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-7733b8ca.js → p-54e44cdb.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { C as Cookie } from './p-979121a0.js';
-import { d as defineCustomElement$4 } from './p-fb02e9f7.js';
-import { d as defineCustomElement$3 } from './p-55350e52.js';
+import { d as defineCustomElement$4 } from './p-652ae542.js';
+import { d as defineCustomElement$3 } from './p-bd503085.js';
 import { d as defineCustomElement$2 } from './p-4d57271c.js';
-import { d as defineCustomElement$1 } from './p-ae438bdc.js';
+import { d as defineCustomElement$1 } from './p-46b3c290.js';
 
 const stzhToastbarCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}";
 const StzhToastbarStyle0 = stzhToastbarCss;
@@ -187,4 +187,4 @@ function defineCustomElement() {
 
 export { StzhToastbar as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-7733b8ca.js.map
+//# sourceMappingURL=p-54e44cdb.js.map

package/dist/components/{p-7733b8ca.js.map → p-54e44cdb.js.map}

@@ -1 +1 @@
-{"file":"p-7733b8ca.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('bottom', 'regular');\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space('small');\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastbarInitialToast,\n  StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType, link?: HTMLStzhButtonElement } = { type: \"info\" }\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute('data-stzh-toastbar-managed')) {\n      return;\n    }\n\n    toast.setAttribute('data-stzh-toastbar-managed', '');\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  }\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async (data) => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement\n      })\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n            expires: cookieExpires\n          });\n        });\n      }\n    })\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-54e44cdb.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('bottom', 'regular');\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space('small');\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastbarInitialToast,\n  StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType, link?: HTMLStzhButtonElement } = { type: \"info\" }\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute('data-stzh-toastbar-managed')) {\n      return;\n    }\n\n    toast.setAttribute('data-stzh-toastbar-managed', '');\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  }\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async (data) => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement\n      })\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n            expires: cookieExpires\n          });\n        });\n      }\n    })\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ec047685.js → p-5d6829ef.js}

@@ -3,13 +3,13 @@ import { h as hasSlot } from './p-1c261255.js';
 import { m as media } from './p-f4adb3cd.js';
 import { t as tabbable, c as createFocusTrap } from './p-f48422c4.js';
 import { c as createBaseFocusTrapOptions } from './p-a62948ad.js';
-import { d as defineCustomElement$8 } from './p-aa78661e.js';
-import { d as defineCustomElement$7 } from './p-fb02e9f7.js';
-import { d as defineCustomElement$6 } from './p-55350e52.js';
+import { d as defineCustomElement$8 } from './p-dd7410cb.js';
+import { d as defineCustomElement$7 } from './p-652ae542.js';
+import { d as defineCustomElement$6 } from './p-bd503085.js';
 import { d as defineCustomElement$5 } from './p-4d57271c.js';
-import { d as defineCustomElement$4 } from './p-61e8a4c8.js';
+import { d as defineCustomElement$4 } from './p-26475e68.js';
 import { d as defineCustomElement$3 } from './p-bc4d67fa.js';
-import { d as defineCustomElement$2 } from './p-fc1aafb5.js';
+import { d as defineCustomElement$2 } from './p-3c92a168.js';
 import { d as defineCustomElement$1 } from './p-7c23f23e.js';
 
 const stzhHeaderCss = ".sc-stzh-header-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-header-h,[stzh-hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}.sc-stzh-header-h{--logo-width:var(--stzh-header-logo-width, auto);--logo-height:100%;--logobar-background-color:var(--stzh-header-logobar-background-color);--metabar-background-color:var(--stzh-header-metabar-background-color, var(--stzh-color-coolgrey10));--menu-background-color:var(--stzh-header-menu-background-color, var(--stzh-color-secondary30));--menu-list-item-background-hover:var(--stzh-header-menu-list-item-background-hover, var(--stzh-color-secondary40));--menu-list-item-background-level2:var(--stzh-header-menu-list-item-background-level2, var(--stzh-color-secondary20));--menu-list-item-background-level2-hover:var(--stzh-header-menu-list-item-background-level2-hover, var(--stzh-color-secondary10));--menu-item-color:var(--stzh-header-menu-item-color, var(--stzh-color-primary70));--metanav-item-color:var(--stzh-header-metanav-item-color, var(--stzh-color-grey90))}@media print{.sc-stzh-header-h{display:none}}[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:1.9375rem}@media screen and (min-width: 900px){[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:2.1875rem}}@media screen and (min-width: 1600px){[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:3.3125rem}}[logo-type=vbz].sc-stzh-header-h{--logo-height:1.8125rem}@media screen and (min-width: 900px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.3125rem}}@media screen and (min-width: 1600px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.75rem}}.sc-stzh-header-h[logo-type=vbz].sc-stzh-header-s>[slot=logo],.sc-stzh-header-h[logo-type=vbz] .sc-stzh-header-s>[slot=logo]{align-self:center}.sc-stzh-header-h.sc-stzh-header-s>[slot=logo],.sc-stzh-header-h .sc-stzh-header-s>[slot=logo]{width:var(--logo-width);height:var(--logo-height)}.stzh-header.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey90)}.stzh-header__inner.sc-stzh-header,.stzh-header__main.sc-stzh-header{max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-header__inner.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__main.sc-stzh-header{display:flex;flex-direction:column;background-color:var(--stzh-color-white)}@media screen and (max-width: 599px){.stzh-header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__metabar.sc-stzh-header{background-color:var(--metabar-background-color)}.stzh-header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;display:flex;align-items:center;height:4rem}@media screen and (min-width: 600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{height:4rem}}.stzh-header__burger.sc-stzh-header,.stzh-header__search.sc-stzh-header,.stzh-header__metanav-item.sc-stzh-header{color:var(--metanav-item-color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__burger.sc-stzh-header:hover,.stzh-header__search.sc-stzh-header:hover,.stzh-header__metanav-item.sc-stzh-header:hover{color:var(--stzh-color-black)}.stzh-header__burger.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;appearance:none;background-color:transparent;border:none;padding:0;margin-right:var(--stzh-space-medium);gap:var(--stzh-space-medium);color:var(--menu-item-color)}@media screen and (min-width: 600px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__burger-icon.is-open.sc-stzh-header{display:none}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-close.sc-stzh-header{display:none}@media screen and (max-width: 599px){.stzh-header__burger-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-search.sc-stzh-header{overflow:hidden;margin-right:var(--stzh-space-medium);transition-property:width;transition-duration:var(--stzh-base-transition-animation-speed);width:2.5rem;max-width:21.5625rem}.stzh-header__metabar-search.sc-stzh-header:focus-within{width:100%}@media screen and (min-width: 600px){.stzh-header__metabar-search.sc-stzh-header{width:6rem;margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-search.sc-stzh-header{width:10rem;margin-left:0;margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__search.sc-stzh-header{position:relative;display:block;width:100%}.stzh-header__search-input.sc-stzh-header{width:100%;max-width:100%;background-color:transparent;color:transparent;font-family:inherit;font-size:inherit;border:none;padding:var(--stzh-space-xsmall);padding-left:0;padding-right:0;height:var(--stzh-form-input-small-height);transition-property:padding-left, padding-right, background-color, color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__search-input.sc-stzh-header{color:var(--stzh-color-secondary60);padding-left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}}.stzh-header__search-input.sc-stzh-header:focus{color:var(--stzh-color-secondary60);background-color:var(--stzh-color-white);padding-left:calc(var(--stzh-space-medium) + var(--stzh-icon-size) + var(--stzh-space-medium));padding-right:var(--stzh-space-xlarge)}.stzh-header__search-input.sc-stzh-header:-webkit-autofill{background-clip:text}.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-decoration,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-cancel-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-icon.sc-stzh-header,.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{transform:translate(var(--stzh-space-medium), -50%)}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{color:var(--stzh-color-grey70)}.stzh-header__search-text.sc-stzh-header,.stzh-header__search-icon.sc-stzh-header{position:absolute;top:50%;transform:translate(0, -50%);transition:transform var(--stzh-base-transition-animation-speed)}.stzh-header__search-icon.sc-stzh-header{left:0px}@media screen and (max-width: 599px){.stzh-header__search-icon.sc-stzh-header{transform:translate(0.5rem, -50%)}}.stzh-header__search-text.sc-stzh-header{pointer-events:none;left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}@media screen and (max-width: 599px){.stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-nav.sc-stzh-header{display:flex;align-items:center;margin-left:auto;gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xxlarge)}}.stzh-header__metanav-popover.sc-stzh-header{--width:auto;--min-width:15.875rem;--background-color:var(--stzh-color-coolgrey10)}.stzh-header__metanav-popover.is-langnav.sc-stzh-header{--min-width:8.75rem}.stzh-header__metanav-item.sc-stzh-header{display:none;gap:var(--stzh-space-small);align-items:center;justify-content:center;appearance:none;background-color:transparent;padding:0;border:none;text-decoration:none;font-size:100%;font-family:inherit;white-space:nowrap;min-width:2.5rem}@media screen and (min-width: 900px){.stzh-header__metanav-item.sc-stzh-header{display:flex}}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header{color:var(--stzh-color-primary70)}.stzh-header__metanav-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-item.is-stay.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-mobile.sc-stzh-header{display:none}}.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:flex}}.stzh-header__metanav-menu-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-menu-item--extra.sc-stzh-header{margin-top:var(--stzh-space-medium)}.stzh-header__metanav-item-text.sc-stzh-header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-header__metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}@media screen and (max-width: 899px){.stzh-header__metanav-item-text.has-no-short-label.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 899px){.stzh-header__metanav-item-text-label-long.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:none}}.stzh-header__metanav-icon-wrapper.sc-stzh-header{position:relative;display:flex;align-items:center;justify-content:center}.stzh-header__metanav-icon-badge.sc-stzh-header{position:absolute;top:-0.25rem;right:-0.25rem}.stzh-header__metanav-icon.is-open.sc-stzh-header{display:none}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-close.sc-stzh-header{display:none}.stzh-header__logobar.sc-stzh-header{display:flex}@media screen and (min-width: 1600px){.stzh-header__logobar.sc-stzh-header{margin-left:auto;margin-right:auto;width:84.25rem}}.stzh-header__logobar-logo.sc-stzh-header{box-sizing:content-box;display:flex;overflow:hidden;flex-shrink:0}.stzh-header__logobar-decoration.sc-stzh-header{background-color:var(--logobar-background-color);flex-grow:1}@media screen and (min-width: 1600px){.stzh-header__logobar-decoration.sc-stzh-header{width:calc(100% - 34.5625rem + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-top:0.875rem;padding-bottom:0.6875rem;padding-left:1.25rem;display:inline-flex;width:18rem;height:4.125rem;transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{width:18.75rem;padding-left:2rem}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{width:24.9375rem;height:5.5rem;padding-top:1.125rem;padding-bottom:1.125rem;padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{width:38.5625rem;height:8.4375rem;padding-top:1.75rem;padding-bottom:1.5rem;padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__logo-link.sc-stzh-header{width:34.5625rem;padding-left:0}}.stzh-header__flyout.sc-stzh-header,.stzh-header__flyout-search.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);z-index:calc(var(--stzh-z-index-header) - 1);position:fixed;visibility:hidden;top:0;left:0;right:0;bottom:0;width:100dvw;height:100dvh;overflow:auto;transition:visibility var(--stzh-base-transition-animation-speed)}@media (min-height: 580px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}@media screen and (min-width: 900px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}.stzh-header__flyout-backdrop.sc-stzh-header{position:absolute;width:100%;height:100%;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-header__menu.sc-stzh-header{position:absolute;width:100%;height:auto;background-color:var(--menu-background-color);display:grid;grid-template-rows:auto auto;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(-100%);opacity:0}@media (min-height: 580px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{width:20.9375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:23.375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:27.4375rem}}@media screen and (min-width: 1600px){.stzh-header__menu.sc-stzh-header{width:calc((27.4375rem - 4rem) + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.stzh-header__menu-nav.sc-stzh-header{position:relative;overflow-x:hidden;overflow-y:auto}@media screen and (min-width: 900px){.stzh-header__menu-nav.sc-stzh-header{position:static}}.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-large);background-color:var(--stzh-color-secondary20)}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{display:none}}.stzh-header__menu-metanav-nav.sc-stzh-header{max-width:23.4375rem}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.sc-stzh-header{display:block;list-style:none;padding:0;margin:0}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-xxxlarge));padding-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-huge))}}.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{overflow:auto;background-color:var(--menu-list-item-background-level2);visibility:hidden;opacity:0;transform:translateX(100%);position:absolute;z-index:200;top:0;left:0;width:100%;height:100%;transition-property:opacity, visibility, transform;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{z-index:initial;width:19.6875rem;transform:none;left:100%;transition-property:opacity, visibility}}@media screen and (min-width: 1260px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:20.875rem}}@media screen and (min-width: 1600px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:21.5625rem}}.stzh-header__menu-list.is-level-2.sc-stzh-header{height:max-content}@media (min-height: 580px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{background-color:var(--stzh-color-secondary30);transform:none;transition-property:opacity, visibility}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-list).sc-stzh-header>.stzh-header__menu-list-item.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header,.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header>.stzh-header__menu-list-item.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header{transition-delay:var(--stzh-base-transition-animation-speed)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-list.sc-stzh-header{z-index:200;transition-delay:0ms;visibility:visible;opacity:1}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.sc-stzh-header{background-color:var(--menu-list-item-background-hover)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.is-level-2.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.is-level-2.sc-stzh-header{background-color:var(--menu-list-item-background-level2-hover)}}@media screen and (max-width: 899px){.stzh-header__menu-nav.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open) .stzh-header__menu-nav.sc-stzh-header,.stzh-header__menu-list.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu-metanav-list.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open){transition-property:visibility;transition-duration:0ms;transition-delay:var(--stzh-base-transition-animation-speed);visibility:hidden}}@media screen and (max-width: 899px){.stzh-header__menu-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-list),.stzh-header__menu-metanav-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-metanav-list){transform:translateX(0);opacity:1;visibility:visible}}.stzh-header__menu-list-item.sc-stzh-header,.stzh-header__menu-metanav-list-item.sc-stzh-header{display:grid}.stzh-header__menu-list-item.is-backlink.sc-stzh-header{display:block}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;display:flex;align-items:center;gap:var(--stzh-space-xsmall);appearance:none;border:none;text-decoration:none;background-color:transparent;color:var(--menu-item-color);padding-left:var(--stzh-space-xxxlarge);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small);padding-right:var(--stzh-space-large);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);min-height:3.5rem}@media screen and (min-width: 900px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-1.sc-stzh-header{padding-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}@media screen and (min-width: 900px){.stzh-header__menu-item.has-items.sc-stzh-header{cursor:default}}.stzh-header__menu-item.is-level-2.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);min-height:3rem}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xsmall);min-height:none;padding-left:1.25rem;padding-right:1.25rem;gap:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{display:none}}.stzh-header__menu-item.is-level-2.is-main.sc-stzh-header{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-bottom:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header{min-height:2.75rem;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item.is-level-2.sc-stzh-header{min-height:3.5rem;gap:var(--stzh-space-medium);padding-right:var(--stzh-space-xxlarge)}.stzh-header__menu-metanav-item.is-title.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);justify-content:space-between;padding-top:0;padding-bottom:0;padding-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge);cursor:default}.stzh-header__menu-metanav-item.is-language.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);justify-content:space-between}.stzh-header__menu-metanav-item.is-action.sc-stzh-header{display:grid;padding-right:var(--stzh-space-xxxlarge);margin-top:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-action--extra.sc-stzh-header{margin-top:var(--stzh-space-xxsmall)}.stzh-header__menu-metanav-item.is-hidden.sc-stzh-header{display:none}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header .stzh-header__menu-metanav-item-icon.sc-stzh-header{--size:var(--stzh-icon-size-small)}.stzh-header__menu-metanav-item-text.sc-stzh-header{display:flex;gap:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__menu-metanav-item-counter.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-header__app-nav.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__app-nav.sc-stzh-header{display:block}}.stzh-header__app-nav-bottom.sc-stzh-header{position:fixed;bottom:0;left:0;width:calc(100vw - var(--stzh-scrollbar-width));z-index:calc(var(--stzh-z-index-header) - 1)}@media screen and (min-width: 900px){.stzh-header__app-nav-bottom.sc-stzh-header{display:none}}.stzh-header--is-search-filled.sc-stzh-header .stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header--hide-logo.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:0}@media screen and (min-width: 600px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (min-width: 600px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__logobar.sc-stzh-header{transition-property:opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform, margin-top;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(0)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(0)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__metabar.sc-stzh-header{visibility:hidden}}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__metabar.sc-stzh-header{visibility:hidden}.stzh-header--is-sticky.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:hidden;opacity:0}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__main.sc-stzh-header{margin-top:0px}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:visible;opacity:1}.stzh-header__flyout-search-main.sc-stzh-header{position:absolute;width:100%;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateY(-6.25rem);opacity:0;margin-top:var(--stzh-header-main-height);overflow:auto}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:none;z-index:999;position:absolute;top:0;right:0;bottom:0;width:var(--stzh-scrollbar-width);background-color:var(--stzh-color-grey10);border-left:calc(0.5px * var(--stzh-scrollbar-active)) solid var(--stzh-color-grey30)}@media (min-height: 580px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}@media screen and (min-width: 900px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__menu.sc-stzh-header{opacity:1;transform:translateX(0)}.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search-main.sc-stzh-header{opacity:1;transform:translateX(0)}@media screen and (min-width: 600px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__inner.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}@media screen and (max-width: 599px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__main.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__main.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:1;transition:none}.stzh-header__search-button--is-hidden.sc-stzh-header{display:none}";
@@ -806,4 +806,4 @@ function defineCustomElement() {
 
 export { StzhHeader as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-ec047685.js.map
+//# sourceMappingURL=p-5d6829ef.js.map