.surfaceComponent {
  &[data-stb-background='current'] {
    background-color: var(--p-color-background);
  }

  &[data-stb-surface1='current'] {
    background-color: var(--p-color-surface-1);
  }

  &[data-stb-surface2='current'] {
    background-color: var(--p-color-surface-2);
  }
}
[data-surface-background-theme='white'] {
  /* Background */

  --p-color-background: var(--p-color-background-white);
  --p-color-background-hover: var(--p-color-background-hover-white);
  --p-color-background-pressed: var(--p-color-background-pressed-white);
  --p-color-background-active: var(--p-color-background-active-white);
  --p-color-background-disabled: var(--p-color-background-disabled-white);

  /* Text */

  --p-color-text-primary: var(--p-color-text-primary-white);
  --p-color-text-primary-hover: var(--p-color-text-primary-hover-white);
  --p-color-text-primary-active: var(--p-color-text-primary-active-white);
  --p-color-text-interactive: var(--p-color-text-interactive-white);
  --p-color-text-interactive-hover: var(--p-color-text-interactive-hover-white);
  --p-color-text-interactive-pressed: var(
    --p-color-text-interactive-pressed-white
  );
  --p-color-text-interactive-active: var(
    --p-color-text-interactive-active-white
  );
  --p-color-text-secondary: var(--p-color-text-secondary-white);
  --p-color-text-placeholder: var(--p-color-text-placeholder-white);
  --p-color-text-on-color: var(--p-color-text-on-color-white);
  --p-color-text-disabled: var(--p-color-text-disabled-white);
  --p-color-text-info: var(--p-color-text-info-white);
  --p-color-text-success: var(--p-color-text-success-white);
  --p-color-text-warning: var(--p-color-text-warning-white);
  --p-color-text-error: var(--p-color-text-error-white);
  --p-color-text-alert: var(--p-color-text-alert-white);
  --p-color-text-on-brand: var(--p-color-text-on-brand-white);

  /* Icon */

  --p-color-icon-primary: var(--p-color-icon-primary-white);
  --p-color-icon-primary-hover: var(--p-color-icon-primary-hover-white);
  --p-color-icon-primary-active: var(--p-color-icon-primary-active-white);
  --p-color-icon-interactive: var(--p-color-icon-interactive-white);
  --p-color-icon-interactive-hover: var(--p-color-icon-interactive-hover-white);
  --p-color-icon-interactive-pressed: var(
    --p-color-icon-interactive-pressed-white
  );
  --p-color-icon-interactive-active: var(
    --p-color-icon-interactive-active-white
  );
  --p-color-icon-on-color: var(--p-color-icon-on-color-white);
  --p-color-icon-disabled: var(--p-color-icon-disabled-white);
  --p-color-icon-error: var(--p-color-icon-error-white);
  --p-color-icon-success: var(--p-color-icon-success-white);
  --p-color-icon-warning: var(--p-color-icon-warning-white);
  --p-color-icon-info: var(--p-color-icon-info-white);
  --p-color-icon-neutral: var(--p-color-icon-neutral-white);
  --p-color-icon-on-brand: var(--p-color-icon-on-brand-white);

  /* Button */

  --p-color-button-primary: var(--p-color-button-primary-white);
  --p-color-button-primary-hover: var(--p-color-button-primary-hover-white);
  --p-color-button-primary-pressed: var(--p-color-button-primary-pressed-white);
  --p-color-button-brand: var(--p-color-button-brand-white);
  --p-color-button-brand-hover: var(--p-color-button-brand-hover-white);
  --p-color-button-brand-pressed: var(--p-color-button-brand-pressed-white);
  --p-color-button-fill: var(--p-color-button-fill-white);
  --p-color-button-fill-hover: var(--p-color-button-fill-hover-white);
  --p-color-button-fill-pressed: var(--p-color-button-fill-pressed-white);
  --p-color-button-disabled: var(--p-color-button-disabled-white);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(
    --p-color-graphics-illustration-primary-white
  );
  --p-color-graphics-illustration-detail: var(
    --p-color-graphics-illustration-detail-white
  );
  --p-color-graphics-illustration-base: var(
    --p-color-graphics-illustration-base-white
  );
  --p-color-graphics-storebrand-icon-detail: var(
    --p-color-graphics-storebrand-icon-detail-white
  );
  --p-color-graphics-storebrand-icon-outline: var(
    --p-color-graphics-storebrand-icon-outline-white
  );

  /* Static Background & Static Foreground */

  --p-color-static-orange-foreground: var(
    --p-color-static-orange-foreground-white
  );
  --p-color-static-orange-background: var(
    --p-color-static-orange-background-white
  );
  --p-color-static-purple-foreground: var(
    --p-color-static-purple-foreground-white
  );
  --p-color-static-purple-background: var(
    --p-color-static-purple-background-white
  );
  --p-color-static-red-foreground: var(--p-color-static-red-foreground-white);
  --p-color-static-red-background: var(--p-color-static-red-background-white);
  --p-color-static-grey-foreground: var(--p-color-static-grey-foreground-white);
  --p-color-static-grey-background: var(--p-color-static-grey-background-white);
  --p-color-static-risk-filled: var(--p-color-static-risk-filled-white);
  --p-color-static-risk-unfilled: var(--p-color-static-risk-unfilled-white);
  --p-color-static-sustainability-filled: var(
    --p-color-static-sustainability-filled-white
  );
  --p-color-static-sustainability-unfilled: var(
    --p-color-static-sustainability-unfilled-white
  );

  /* States */

  --p-color-states-focus: var(--p-color-states-focus-white);
  --p-color-states-scrim: var(--p-color-states-scrim-white);
  --p-color-states-toggle-off: var(--p-color-states-toggle-off-white);
  --p-color-states-toggle-off-hover: var(
    --p-color-states-toggle-off-hover-white
  );

  /* Surface */

  --p-color-surface-1: var(--p-color-surface-1-white);
  --p-color-surface-2: var(--p-color-surface-2-white);
  --p-color-surface-1-hover: var(--p-color-surface-1-hover-white);
  --p-color-surface-2-hover: var(--p-color-surface-2-hover-white);
  --p-color-surface-inverse: var(--p-color-surface-inverse-white);
  --p-color-surface-inverse-hover: var(--p-color-surface-inverse-hover-white);
  --p-color-surface-inverse-pressed: var(
    --p-color-surface-inverse-pressed-white
  );
  --p-color-surface-selected: var(--p-color-surface-selected-white);
  --p-color-surface-selected-hover: var(--p-color-surface-selected-hover-white);
  --p-color-surface-selected-pressed: var(
    --p-color-surface-selected-pressed-white
  );
  --p-color-surface-selected-active: var(
    --p-color-surface-selected-active-white
  );
  --p-color-surface-error: var(--p-color-surface-error-white);
  --p-color-surface-success: var(--p-color-surface-success-white);
  --p-color-surface-warning: var(--p-color-surface-warning-white);
  --p-color-surface-info: var(--p-color-surface-info-white);
  --p-color-surface-neutral: var(--p-color-surface-neutral-white);
  --p-color-surface-static: var(--p-color-surface-static-white);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-stroke-strong-white);
  --p-color-stroke-strong-hover: var(--p-color-stroke-strong-hover-white);
  --p-color-stroke-strong-pressed: var(--p-color-stroke-strong-pressed-white);
  --p-color-stroke-0: var(--p-color-stroke-0-white);
  --p-color-stroke-1: var(--p-color-stroke-1-white);
  --p-color-stroke-2: var(--p-color-stroke-2-white);
  --p-color-stroke-on-white: var(--p-color-stroke-on-white-white);
  --p-color-stroke-subtle-1: var(--p-color-stroke-subtle-1-white);
  --p-color-stroke-subtle-2: var(--p-color-stroke-subtle-2-white);
  --p-color-stroke-selected: var(--p-color-stroke-selected-white);
  --p-color-stroke-selected-hover: var(--p-color-stroke-selected-hover-white);
  --p-color-stroke-selected-pressed: var(
    --p-color-stroke-selected-pressed-white
  );

  --p-color-stroke-disabled: var(--p-color-stroke-disabled-white);
  --p-color-stroke-error: var(--p-color-stroke-error-white);
  --p-color-stroke-success: var(--p-color-stroke-success-white);
  --p-color-stroke-warning: var(--p-color-stroke-warning-white);

  /* Special inversions */

  --card-background: var(--p-color-surface-1-grey);
}
[data-surface-background-theme='grey'] {
  /* Background */

  --p-color-background: var(--p-color-background-grey);
  --p-color-background-hover: var(--p-color-background-hover-grey);
  --p-color-background-pressed: var(--p-color-background-pressed-grey);
  --p-color-background-active: var(--p-color-background-active-grey);
  --p-color-background-disabled: var(--p-color-background-disabled-grey);

  /* Text */

  --p-color-text-primary: var(--p-color-text-primary-grey);
  --p-color-text-primary-hover: var(--p-color-text-primary-hover-grey);
  --p-color-text-primary-active: var(--p-color-text-primary-active-grey);
  --p-color-text-interactive: var(--p-color-text-interactive-grey);
  --p-color-text-interactive-hover: var(--p-color-text-interactive-hover-grey);
  --p-color-text-interactive-pressed: var(
    --p-color-text-interactive-pressed-grey
  );
  --p-color-text-interactive-active: var(
    --p-color-text-interactive-active-grey
  );
  --p-color-text-secondary: var(--p-color-text-secondary-grey);
  --p-color-text-placeholder: var(--p-color-text-placeholder-grey);
  --p-color-text-on-color: var(--p-color-text-on-color-grey);
  --p-color-text-disabled: var(--p-color-text-disabled-grey);
  --p-color-text-info: var(--p-color-text-info-grey);
  --p-color-text-success: var(--p-color-text-success-grey);
  --p-color-text-warning: var(--p-color-text-warning-grey);
  --p-color-text-error: var(--p-color-text-error-grey);
  --p-color-text-alert: var(--p-color-text-alert-grey);
  --p-color-text-on-brand: var(--p-color-text-on-brand-grey);

  /* Icon */

  --p-color-icon-primary: var(--p-color-icon-primary-grey);
  --p-color-icon-primary-hover: var(--p-color-icon-primary-hover-grey);
  --p-color-icon-primary-active: var(--p-color-icon-primary-active-grey);
  --p-color-icon-interactive: var(--p-color-icon-interactive-grey);
  --p-color-icon-interactive-hover: var(--p-color-icon-interactive-hover-grey);
  --p-color-icon-interactive-pressed: var(
    --p-color-icon-interactive-pressed-grey
  );
  --p-color-icon-interactive-active: var(
    --p-color-icon-interactive-active-grey
  );
  --p-color-icon-on-color: var(--p-color-icon-on-color-grey);
  --p-color-icon-disabled: var(--p-color-icon-disabled-grey);
  --p-color-icon-error: var(--p-color-icon-error-grey);
  --p-color-icon-success: var(--p-color-icon-success-grey);
  --p-color-icon-warning: var(--p-color-icon-warning-grey);
  --p-color-icon-info: var(--p-color-icon-info-grey);
  --p-color-icon-neutral: var(--p-color-icon-neutral-grey);
  --p-color-icon-on-brand: var(--p-color-icon-on-brand-grey);

  /* Button */

  --p-color-button-primary: var(--p-color-button-primary-grey);
  --p-color-button-primary-hover: var(--p-color-button-primary-hover-grey);
  --p-color-button-primary-pressed: var(--p-color-button-primary-pressed-grey);
  --p-color-button-brand: var(--p-color-button-brand-grey);
  --p-color-button-brand-hover: var(--p-color-button-brand-hover-grey);
  --p-color-button-brand-pressed: var(--p-color-button-brand-pressed-grey);
  --p-color-button-fill: var(--p-color-button-fill-grey);
  --p-color-button-fill-hover: var(--p-color-button-fill-hover-grey);
  --p-color-button-fill-pressed: var(--p-color-button-fill-pressed-grey);
  --p-color-button-disabled: var(--p-color-button-disabled-grey);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(
    --p-color-graphics-illustration-primary-grey
  );
  --p-color-graphics-illustration-detail: var(
    --p-color-graphics-illustration-detail-grey
  );
  --p-color-graphics-illustration-base: var(
    --p-color-graphics-illustration-base-grey
  );
  --p-color-graphics-storebrand-icon-detail: var(
    --p-color-graphics-storebrand-icon-detail-grey
  );
  --p-color-graphics-storebrand-icon-outline: var(
    --p-color-graphics-storebrand-icon-outline-grey
  );

  /* Static Background & Static Foreground */

  --p-color-static-orange-foreground: var(
    --p-color-static-orange-foreground-grey
  );
  --p-color-static-orange-background: var(
    --p-color-static-orange-background-grey
  );
  --p-color-static-purple-foreground: var(
    --p-color-static-purple-foreground-grey
  );
  --p-color-static-purple-background: var(
    --p-color-static-purple-background-grey
  );
  --p-color-static-red-foreground: var(--p-color-static-red-foreground-grey);
  --p-color-static-red-background: var(--p-color-static-red-background-grey);
  --p-color-static-grey-foreground: var(--p-color-static-grey-foreground-grey);
  --p-color-static-grey-background: var(--p-color-static-grey-background-grey);
  --p-color-static-risk-filled: var(--p-color-static-risk-filled-grey);
  --p-color-static-risk-unfilled: var(--p-color-static-risk-unfilled-grey);
  --p-color-static-sustainability-filled: var(
    --p-color-static-sustainability-filled-grey
  );
  --p-color-static-sustainability-unfilled: var(
    --p-color-static-sustainability-unfilled-grey
  );

  /* States */

  --p-color-states-focus: var(--p-color-states-focus-grey);
  --p-color-states-scrim: var(--p-color-states-scrim-grey);
  --p-color-states-toggle-off: var(--p-color-states-toggle-off-grey);
  --p-color-states-toggle-off-hover: var(
    --p-color-states-toggle-off-hover-grey
  );

  /* Surface */

  --p-color-surface-1: var(--p-color-surface-1-grey);
  --p-color-surface-2: var(--p-color-surface-2-grey);
  --p-color-surface-1-hover: var(--p-color-surface-1-hover-grey);
  --p-color-surface-2-hover: var(--p-color-surface-2-hover-grey);
  --p-color-surface-inverse: var(--p-color-surface-inverse-grey);
  --p-color-surface-inverse-hover: var(--p-color-surface-inverse-hover-grey);
  --p-color-surface-inverse-pressed: var(
    --p-color-surface-inverse-pressed-grey
  );
  --p-color-surface-selected: var(--p-color-surface-selected-grey);
  --p-color-surface-selected-hover: var(--p-color-surface-selected-hover-grey);
  --p-color-surface-selected-pressed: var(
    --p-color-surface-selected-pressed-grey
  );
  --p-color-surface-selected-active: var(
    --p-color-surface-selected-active-grey
  );
  --p-color-surface-error: var(--p-color-surface-error-grey);
  --p-color-surface-success: var(--p-color-surface-success-grey);
  --p-color-surface-warning: var(--p-color-surface-warning-grey);
  --p-color-surface-info: var(--p-color-surface-info-grey);
  --p-color-surface-neutral: var(--p-color-surface-neutral-grey);
  --p-color-surface-static: var(--p-color-surface-static-grey);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-stroke-strong-grey);
  --p-color-stroke-strong-hover: var(--p-color-stroke-strong-hover-grey);
  --p-color-stroke-strong-pressed: var(--p-color-stroke-strong-pressed-grey);
  --p-color-stroke-0: var(--p-color-stroke-0-grey);
  --p-color-stroke-1: var(--p-color-stroke-1-grey);
  --p-color-stroke-2: var(--p-color-stroke-2-grey);
  --p-color-stroke-on-white: var(--p-color-stroke-on-white-grey);
  --p-color-stroke-subtle-1: var(--p-color-stroke-subtle-1-grey);
  --p-color-stroke-subtle-2: var(--p-color-stroke-subtle-2-grey);
  --p-color-stroke-selected: var(--p-color-stroke-selected-grey);
  --p-color-stroke-selected-hover: var(--p-color-stroke-selected-hover-grey);
  --p-color-stroke-selected-pressed: var(
    --p-color-stroke-selected-pressed-grey
  );
  --p-color-stroke-disabled: var(--p-color-stroke-disabled-grey);
  --p-color-stroke-error: var(--p-color-stroke-error-grey);
  --p-color-stroke-success: var(--p-color-stroke-success-grey);
  --p-color-stroke-warning: var(--p-color-stroke-warning-grey);

  /* Special inversions */

  --card-background: var(--p-color-surface-1-white);
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
._headerContainer_1i3kw_1 {
  padding: var(--p-spacing-rem-32) var(--p-spacing-rem-16);
  border-bottom: 1px solid var(--p-color-stroke-subtle-0, #e9e2e2);

  & ._contentContainer_1i3kw_5 {
    width: 100%;
    max-width: 1124px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

._logoMobile_1i3kw_15 {
  width: 3.3rem;
}

._logoDesktop_1i3kw_19 {
  width: 11.7rem;
  display: none;
}

@media (min-width: 991px) {
  ._logoMobile_1i3kw_15 {
    display: none;
  }

  ._logoDesktop_1i3kw_19 {
    display: block;
  }
}
.breadcrumbs[data-stb-breadcrumbs='current'] {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;

  & > button {
    cursor: pointer;
  }

  /* bold + equal padding for last item */
  & a:last-child,
  & button:last-child {
    pointer-events: none;

    > span {
      text-decoration: none;
    }

    /* hide icon in last item */
    & i {
      display: none;
    }
  }

  & > a,
  & > button {
    align-items: center;
    background: transparent;
    border: none;
    box-sizing: border-box;
    color: var(--p-color-text-primary);
    display: flex;
    height: 3rem;
    margin-right: var(--p-spacing-rem-12);
    padding: var(--p-spacing-rem-08) 0;
    position: relative;
    text-decoration: none;
    transition: background-color 0.1s ease;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      > span {
        color: var(--p-color-text-interactive);
        text-decoration: none;
      }
    }

    &:focus-visible {
      outline: var(--p-outline);
    }

    > span {
      text-decoration: underline;
      text-decoration-thickness: 0.0625rem;
      text-underline-offset: var(--p-spacing-rem-04);
    }
  }

  & i {
    margin-left: var(--p-spacing-rem-08);
  }

  /* Hide all links and display only the back NavLink on small screens */
  &:has([data-stb-navlink]) {
    & > a {
      display: none;
    }

    & [data-stb-navlink] {
      & a {
        display: flex;
        outline-offset: var(--p-outline-offset);
        pointer-events: auto;
      }

      & i.navlinkIcon {
        display: inline;
      }
    }

    @media (min-width: 600px) {
      & > a {
        display: flex;
      }

      & [data-stb-navlink] {
        display: none;
      }
    }
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.navlinkComponentContainer[data-stb-navlink='current'] {
  display: inline;
  width: fit-content;

  & .navlinkComponent {
    color: var(--p-color-text-primary);
    margin-right: auto;
    text-decoration: none;
    width: fit-content;

    & .navlinkWrapper {
      align-items: center;
      display: inline-flex;

      & .navlinkIcon {
        padding-left: var(--p-spacing-rem-08);

        &.left {
          padding-left: 0;
          padding-right: var(--p-spacing-rem-08);
        }
      }
    }

    &:hover {
      color: var(--p-color-text-primary-hover);
    }

    &:active {
      color: var(--p-color-text-primary-pressed);
    }
  }

  &[aria-disabled='true'] {
    cursor: not-allowed;

    & .navlinkComponent {
      border-bottom: none;
      color: var(--p-color-text-disabled);
      pointer-events: none;
    }
  }
}
.alertBase[data-stb-alert='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);
  --color-bg: var(--p-color-surface-1);
  --alert-min-width: 18rem;

  align-items: center;
  background: var(--color-bg);
  border: none;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  max-width: 35rem;
  min-width: var(--alert-min-width);
  padding: var(--p-spacing-rem-24);
  position: relative;

  & p,
  .alertTitle,
  .alertContainer,
  .font-body {
    color: var(--color-text);
  }

  & .icon {
    align-self: flex-start;
    color: var(--color-icon);
    margin-right: var(--p-spacing-rem-16);
  }

  &:has(.alertTitle) {
    & .icon {
      margin-top: 0.28rem;
    }
  }

  & .alertDescription {
    text-wrap: pretty;
  }

  & .alertContainer {
    align-self: flex-start;
    display: grid;
    gap: var(--p-spacing-rem-04);
    max-width: 100%;
  }

  @media (max-width: 600px) {
    max-width: 33.9375rem;
    min-width: min(85%, var(--alert-min-width));
    padding: var(--p-spacing-rem-20);

    & .icon {
      margin-right: var(--p-spacing-rem-12);
      margin-top: 0.19rem;
    }
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-bg: var(--p-color-surface-error);
    --color-text: var(--p-color-text-on-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-bg: var(--p-color-surface-warning);
    --color-text: var(--p-color-text-on-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-bg: var(--p-color-surface-success);
    --color-text: var(--p-color-text-on-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-text-on-info);
    --color-bg: var(--p-color-surface-info);
    --color-text: var(--p-color-text-on-info);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.emptystateContainer[data-stb-empty-state='current'] {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;

  & .innerContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--p-spacing-rem-24);
    justify-content: center;
    width: 100%;
  }

  & .illustrationContainer {
    display: flex;
    justify-content: center;
    max-width: 32.875rem;
    min-width: 32.875rem;
    padding: 0.625rem;
  }

  & .textContainer {
    display: flex;
    flex-direction: column;
    gap: var(--p-spacing-rem-08);
    text-align: center;
  }

  & .buttonContainer {
    display: flex;
    gap: var(--p-spacing-rem-08);
  }

  /**
    * Mobile
    */
  @media screen and (max-width: 599px) {
    max-width: 37.4375rem;

    & .innerContainer {
      max-width: 23.8125rem;
      min-width: 18rem;
    }

    & .buttonContainer {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /**
    * Tablet
    */
  @media screen and (min-width: 600px) {
    max-width: 37.5rem;

    & .innerContainer {
      max-width: 23.875rem;
      min-width: 23.875rem;
    }
  }

  /**
    * Desktop
    */
  @media screen and (min-width: 840px) {
    max-width: 70.5rem;

    & .innerContainer {
      max-width: 46.875rem;
      min-width: 32.875rem;
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.modalFloatingOverlay[data-stb-modal='current'] {
  background: rgb(0 0 0 / 25%);
  display: grid;
  place-items: center;
  z-index: var(--p-z-index-modal);

  @media (prefers-reduced-motion) {
    animation: none !important;
    transition: none !important;
  }

  &.withBorder {
    --modal-border-color: #19191929;
    --modal-border: 1px solid var(--modal-border-color);

    & .modalHeadingWrapper {
      border-bottom: var(--modal-border);
    }

    & .modalFooter {
      border-top: var(--modal-border);
    }

    & .modalContentWrapper {
      margin: var(--p-spacing-rem-24) 0;
      margin-left: var(--content-offset);
    }
  }
}

.modalBase[data-stb-modal-base='current'] {
  /*
    we use content-offset to make sure focus-outlines do not get clipped:
    we move the content children 6px right, then account for the shift with decreased padding-left on parent
  */
  --content-offset: 6px;

  background: var(--p-color-background);
  border-radius: var(--p-corner-radius-rem-medium);
  box-shadow: 0 0 0.9375rem 0 rgb(0 0 0 / 25%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5rem);
  max-width: 42rem;
  padding: var(--p-spacing-rem-32);
  padding-left: calc(var(--p-spacing-rem-32) - var(--content-offset));
  width: 100%;
  z-index: var(--p-z-index-modal);

  & > div {
    margin-left: var(--content-offset);
  }

  /* make sure select has room for focus-outline on the right */
  & .selectBase.select {
    max-width: calc(100% - var(--content-offset));
  }

  @media only screen and (max-width: 672px) {
    max-height: calc(100vh - 2rem);
  }

  & .modalContentWrapper {
    box-sizing: border-box;
    overflow: auto;
    position: relative;

    &.usingKeyboard {
      &:focus {
        outline: var(--p-outline);
      }
    }

    & .modalScrollShadow {
      box-shadow: 0 0 0.3125rem 0.0625rem rgb(0 0 0 / 40%);
      display: flex;
      height: auto;
      justify-content: center;
      position: sticky;
      top: 0;
      width: 100%;
      z-index: var(--p-z-index-modal);

      &::before,
      &::after {
        background-color: transparent;
        content: '';
        height: 0.125rem;
        position: absolute;
        top: -0.125rem;
      }

      &::before {
        box-shadow: 0 -0.5rem 0.9375rem rgb(0 0 0 / 70%);
        width: 60%;
      }

      &::after {
        box-shadow: 0 -2.1875rem 2.1875rem 1.25rem rgb(0 0 0 / 70%);
        width: 30%;
      }

      &.bottom {
        bottom: -1.7rem;
        top: unset;

        &::before,
        &::after {
          bottom: 0;
        }

        &::before {
          box-shadow: 0 0.5rem 0.9375rem rgb(0 0 0 / 70%);
        }

        &::after {
          box-shadow: 0 2.1875rem 2.1875rem 1.25rem rgb(0 0 0 / 70%);
        }
      }
    }
  }

  & .modalHeadingWrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--p-spacing-rem-24);

    & > h1 {
      flex: 1;
    }
  }

  & .modalFooter {
    padding-top: var(--p-spacing-rem-24);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.loading-indicator[data-stb-loading-indicator='current'] {
  display: inline-flex;
}

/* stylelint-disable-next-line storeblocks/no-color-primitive */
.loading-indicator-circle[data-stb-loading-indicator-circle='current'] {
  animation: loading-indicator-expand 1.4s ease-in-out both infinite;
  background-color: var(--p-color-red-800);
  border-radius: 50%;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;

  :nth-child(n + 2) {
    margin-left: 2px;
  }

  &:nth-child(2) {
    animation-delay: 0.2s;
  }

  &:nth-child(3) {
    animation-delay: 0.4s;
  }

  &[data-size='small'] {
    height: 1rem;
    width: 1rem;
  }

  &[data-size='large'] {
    height: 2rem;
    width: 2rem;
  }

  /* stylelint-disable-next-line storeblocks/no-color-primitive */
  &[data-color-variant='darkRed'] {
    background-color: var(--p-color-red-800);
  }

  /* stylelint-disable-next-line storeblocks/no-color-primitive */
  &[data-color-variant='darkPurple'] {
    background-color: var(--p-color-purple-800);
  }
}

@keyframes loading-indicator-expand {
  0%,
  100% {
    -webkit-transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
  }
}
.cardActionBase[data-stb-action-card='current'] {
  background: var(--p-color-surface-1);
  border: var(--p-border-rem-xsmall) solid transparent;
  border-radius: var(--p-corner-radius-rem-medium);
  box-sizing: border-box;
  color: var(--foreground-color);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--p-spacing-rem-24);
  width: 100%;

  @media (min-width: 840px) {
    flex-direction: row;
    gap: var(--p-spacing-rem-24);
  }

  & .cardActionGraphic {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--p-spacing-rem-16);

    @media (min-width: 840px) {
      margin-bottom: 0;
    }

    & .cardActionIcon {
      border-radius: var(--p-corner-radius-rem-small);
      height: 6rem;
      width: 6rem;
    }

    & .cardActionImage {
      border-radius: var(--p-corner-radius-rem-small);
      height: 12.25rem;
      object-fit: cover;
      width: 100%;

      @media (min-width: 840px) {
        height: 100%;
        max-width: 528px;
      }
    }
  }

  & .cardActionContents {
    & .cardOverline {
      margin-bottom: var(--p-spacing-rem-04);
    }

    & .cardCaption {
      margin-top: var(--p-spacing-rem-04);
    }
  }

  & .cardParagraph {
    margin-top: var(--p-spacing-rem-16);
  }

  & .cardActionActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-spacing-rem-08);
    margin-top: var(--p-spacing-rem-24);

    & > a > i {
      transition: transform 0.1s ease-in;
    }

    @media (hover: hover) and (pointer: fine) {
      & > a:hover {
        & > i {
          transform: translateX(4px);
        }
      }
    }
  }
}
.cardInfoBase[data-stb-info-card='current'] {
  background: var(--card-background, var(--p-color-background));
  border: var(--p-border-rem-xsmall) solid transparent;
  border-radius: var(--p-corner-radius-rem-medium);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--p-spacing-rem-24);
  width: 100%;

  & .cardInfoHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & .cardOverline,
    .cardTitle {
      margin-bottom: var(--p-spacing-rem-04);
    }

    & button[variant='icon'].cardInfoCloseButton {
      margin-right: 0.5rem;
      margin-top: 0.3rem;
    }
  }

  & .cardParagraph {
    margin-top: var(--p-spacing-rem-16);
  }

  & .cardInfoGraphic {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--p-spacing-rem-16);

    & .cardInfoIcon {
      border-radius: var(--p-corner-radius-rem-small);
      height: 6rem;
      width: 6rem;
    }

    & > img {
      border-radius: var(--p-corner-radius-rem-small);
      height: 12.25rem;
      object-fit: cover;
      width: 100%;
    }
  }

  &[data-variant='horizontal'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-24);
    justify-content: space-between;

    & .cardInfoGraphic {
      width: 50%;
    }

    & .cardInfoText {
      width: 50%;
    }
  }
}
.cardNavigationBase[data-stb-navigation-card='current'] {
  --navigation-card-background-color: var(
    --card-background,
    var(--p-color-background)
  );
  --navigation-card-flex-direction: column;
  --navigation-card-padding: var(--p-spacing-rem-24);
  --navigation-card-outline: none;

  background: var(--navigation-card-background-color);
  border: var(--p-border-rem-xsmall) solid transparent;
  border-radius: var(--p-corner-radius-rem-medium);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: var(--navigation-card-flex-direction);
  outline: var(--navigation-card-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--navigation-card-padding);
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: background-color;
  width: 100%;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --navigation-card-background-color: var(--card-hover-background);
    }
  }

  /* stylelint-disable-next-line storeblocks/no-color-primitive */
  &:active {
    /* stylelint-disable-next-line storeblocks/no-color-primitive */
    --navigation-card-background-color: var(--p-color-grey-300);
  }

  &.usingKeyboard {
    &:focus-within {
      --navigation-card-outline: var(--p-outline);
    }
  }

  &[data-size='large'] {
    --navigation-card-flex-direction: column;

    & .navigationCardGraphic {
      flex-shrink: 0;
      height: 6rem;
      width: 6rem;
    }

    & .cardTitle {
      margin-bottom: var(--p-spacing-rem-04);
      margin-top: var(--p-spacing-rem-16);

      &.noIcon {
        margin-top: 0;
      }
    }

    & .navigationCardWrapper {
      align-items: flex-start;
    }

    & .cardDescription {
      margin-top: var(--p-spacing-rem-16);
    }
  }

  &[data-size='medium'],
  &[data-size='small'] {
    --navigation-card-flex-direction: row;
    --navigation-card-padding: var(--p-spacing-rem-16);

    align-items: center;
    justify-content: space-between;

    & .navigationCardHeader {
      align-items: center;
      display: flex;
      flex-direction: row;
    }

    & .navigationCardGraphic {
      flex-shrink: 0;
      height: 4rem;
      width: 4rem;
    }

    & .cardTitle {
      margin-bottom: var(--p-spacing-rem-04);
      margin-left: var(--p-spacing-rem-24);

      &.noIcon {
        margin-left: 0;
      }
    }

    & .cardCaption {
      margin-left: var(--p-spacing-rem-24);

      &.noIcon {
        margin-left: 0;
      }
    }
  }

  &[data-size='small'] {
    & .navigationCardGraphic {
      flex-shrink: 0;
      height: 3rem;
      width: 3rem;
    }

    & .cardTitle {
      margin-bottom: 0;
    }
  }

  & .navigationCardWrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  & .navigationCardTitleWrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  & .cardTitle {
    margin-bottom: var(--p-spacing-rem-04);
  }

  .navigationCardGraphicIcon {
    height: 100%;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    color: var(--color-text);
    text-wrap: pretty;

    @media (max-width: 600px) {
      padding-top: 1px;
    }
  }

  & .alertIcon {
    color: var(--color-icon);
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-24);
    width: 100%;
    z-index: var(--p-z-index-popover);

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.legend[data-stb-legend='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  margin-inline: 0;
  min-inline-size: none;
  padding-block: 0;
  padding-inline: 0;
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-24);
    width: 100%;
    z-index: var(--p-z-index-popover);

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.radioButtonAtom[data-stb-radio-button-atom='current'] {
  --radio-size: 1.5rem;
  --radio-inner-size: 0.8rem;
  --outline: transparent;

  --border-color: var(--p-color-stroke-subtle-0);
  --border-color-checked: var(--p-color-stroke-selected);
  --border-radius: 0.75rem;
  --border-thickness: 0.0625rem;

  --radio-color: var(--p-color-stroke-strong);
  --radio-background: var(--p-color-surface-static);
  --radio-color-checked: var(--p-color-surface-selected);
  --radio-background-checked: var(--p-color-surface-static);

  align-items: center;
  box-sizing: border-box;
  display: grid;
  outline: none;
  row-gap: var(--p-spacing-rem-08);
  width: fit-content;

  &:focus-visible {
    --outline: var(--p-outline);
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-border='true'] {
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
    padding: var(--p-spacing-rem-24) var(--p-spacing-rem-20);
  }

  /* Screen reader only */
  .radioInput {
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  & .radioButtonLabel {
    column-gap: var(--p-spacing-rem-12);
    cursor: pointer;
    display: grid;
    font-weight: 400;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
  }

  & .radioButtonLabel::before {
    --color: var(--radio-color);
    --outer-border-width: var(--p-border-rem-small);
    --height: calc(var(--radio-size) - (var(--outer-border-width) * 2));

    aspect-ratio: 1;

    /* The circle */
    background: var(--radio-background);

    /* Between border and circle */
    border: calc(
        (
            var(--radio-size) - var(--radio-inner-size) -
              var(--outer-border-width)
          ) /
          2
      )
      solid var(--radio-background);
    border-radius: 50%;

    /* Border */
    box-shadow: 0 0 0 var(--outer-border-width) var(--color);
    box-sizing: border-box;
    content: '';
    display: block;
    grid-area: 1 / 1 / span 1 / span 1;
    height: var(--height);
    margin: var(--outer-border-width);
    outline: var(--outline);
    outline-offset: calc(var(--p-outline-offset) + var(--outer-border-width));
    place-self: center;
  }

  & .radioInput:checked + .radioButtonLabel::before {
    --color: var(--radio-color-checked);

    background: var(--color);
  }

  &:has(.radioInput:focus-visible) {
    --outline: var(--p-outline);
  }

  &:has(.radioInput:checked) {
    border-color: var(--border-color-checked);
  }

  .radioHint {
    color: var(--p-color-text-secondary);
    column-gap: var(--p-spacing-rem-12);
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .radioHint::before {
    aspect-ratio: 1;
    content: '';
  }

  &:has(.radioHint:not(:empty)) .radioButtonLabel {
    font-weight: 600;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --radio-color: var(--p-color-surface-selected-hover);
      --radio-background: var(--p-color-background-hover);
      --radio-color-checked: var(--p-color-surface-selected-hover);
      --radio-background-checked: var(--p-color-background-hover);

      --border-color: var(--p-color-stroke-strong-hover);
      --border-color-checked: var(--p-color-stroke-selected-hover);
    }
  }

  &:has(.radioInput:active) {
    --radio-color: var(--p-color-stroke-selected-pressed);
    --radio-background: var(--p-color-background-pressed);
    --radio-color-checked: var(--p-color-surface-selected-pressed);
    --radio-background-checked: var(--p-color-background-pressed);

    --border-color: var(--p-color-stroke-selected);
    --border-color-checked: var(--p-color-stroke-selected-pressed);
  }

  &[data-message-type='warning'] {
    --radio-color: var(--p-color-stroke-warning);
    --radio-background: var(--p-color-surface-warning);
    --radio-color-checked: var(--p-color-stroke-warning);
    --radio-background-checked: var(--p-color-surface-warning);

    --border-color: var(--p-color-stroke-warning);
    --border-color-checked: var(--p-color-stroke-warning);
  }

  &[data-message-type='error'] {
    --radio-color: var(--p-color-stroke-error);
    --radio-background: var(--p-color-surface-error);
    --radio-color-checked: var(--p-color-stroke-error);
    --radio-background-checked: var(--p-color-surface-error);

    --border-color: var(--p-color-stroke-error);
    --border-color-checked: var(--p-color-stroke-error);
  }

  &:has(.radioInput[aria-disabled='true']) {
    --radio-color: var(--p-color-stroke-disabled);
    --radio-background: var(--p-color-surface-static);
    --radio-color-checked: var(--p-color-stroke-disabled);
    --radio-background-checked: var(--p-color-surface-static);

    --border-color: var(--p-color-stroke-disabled);
    --border-color-checked: var(--p-color-stroke-disabled);

    pointer-events: none;
  }
}
.radioButtonsBase[data-stb-radio-buttons='current'] {
  border: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  & .radioButtonsItems {
    display: flex;
    flex-direction: column;
    gap: var(--p-spacing-rem-08);

    &.row {
      flex-direction: row;
    }
  }

  & .radioButtonsLegend {
    margin-bottom: var(--p-spacing-rem-16);
  }

  & .radioButtonsAlert {
    margin-top: var(--p-spacing-rem-16);
  }
}
.inputFieldContainer[data-stb-input-field='current'] {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  max-width: 18rem;
  width: 100%;

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    color: var(--color-text);
    text-wrap: pretty;

    @media (max-width: 600px) {
      padding-top: 1px;
    }
  }

  & .alertIcon {
    color: var(--color-icon);
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.inputContainer[data-stb-input-atom='current'] {
  --text-color: var(--p-color-text-primary);
  --background-color: var(--p-color-surface-static);
  --border-color: var(--p-color-stroke-0);
  --suffix-color: var(--p-color-text-secondary);
  --icon-color: var(--p-color-text-primary);
  --input-max-height: 3rem;

  --border-normal: var(--p-border-rem-xsmall);
  --border-fat: 0.0938rem;
  --border-thickness: var(--border-normal);

  align-items: center;
  align-self: flex-start;
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  color: var(--text-color);
  cursor: text;
  display: flex;
  display: inline-flex;
  max-height: var(--input-max-height);
  max-width: 18rem;
  min-height: var(--input-max-height);
  outline: var(--input-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  width: 100%;

  &.textarea {
    height: auto;
    max-height: 100%;
  }

  & .inputElement {
    background-color: var(--background-color);
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    color: var(--text-color);
    height: 100%;
    outline: none;
    padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);
    width: 100%;

    &::placeholder {
      color: var(--p-color-text-placeholder);
      font-family: 'Storebrand Text', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.375rem;

      @media (min-width: 600px) {
        font-size: 1.125rem;
        line-height: 1.625rem;
      }
    }

    &.textarea {
      height: auto;
      padding: var(--p-spacing-rem-08);
      resize: none;
    }

    /* Hide arrows on input type number start.
     * Chrome, Safari */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    /* Firefox */
    &[type='number'] {
      -moz-appearance: textfield; /* Firefox */
    }
  }

  & .inputAdditions {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    padding-right: var(--p-spacing-rem-12);
    z-index: var(--p-z-index-input);
  }

  & .iconButton {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 24px;
    }
  }

  & .icon {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 24px;
    }

    @media (max-width: 600px) {
      padding-right: 0.125rem;
    }
  }

  & .inputSuffix {
    color: var(--suffix-color);
  }

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;

    & > select {
      width: 100%;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --border-color: var(--p-color-stroke-0);
      --background-color: var(--p-color-background-hover);
    }
  }

  &:active,
  &:focus-within {
    --border-color: var(--p-color-stroke-strong);
    --background-color: var(--p-color-background);
    --border-thickness: var(--border-fat);

    outline: none;
  }

  &:focus-visible {
    --input-outline: var(--p-outline);
    --border-color: var(--p-color-stroke-0);
  }

  &[data-message-type='success'] {
    --border-color: var(--p-color-stroke-success);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-success);
  }

  &[data-message-type='warning'] {
    --border-color: var(--p-color-stroke-warning);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-warning);
  }

  &[data-message-type='error'] {
    --border-color: var(--p-color-stroke-error);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-error);
  }

  &[data-read-only='true'] {
    --border-color: var(--p-color-stroke-0);
    --background-color: var(--p-color-surface-neutral);
  }

  &[aria-disabled='true'] {
    --background-color: var(--p-color-background-disabled);
    --border-color: var(--p-color-stroke-disabled);
    --suffix-color: var(--p-color-text-disabled);
    --text-color: var(--p-color-text-disabled);
    --icon-color: var(--p-color-text-disabled);

    &:active {
      --border-color: var(--p-color-stroke-disabled);
    }

    cursor: default;

    & .inputElement {
      pointer-events: none;
    }

    & .inputAdditions .inputSuffix {
      pointer-events: none;
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-24);
    width: 100%;
    z-index: var(--p-z-index-popover);

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-24);
    width: 100%;
    z-index: var(--p-z-index-popover);

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.checkboxAtom[data-stb-checkbox-atom='current'] {
  --checkbox-border-color: var(--p-color-stroke-strong);
  --checkbox-border-color-checked: var(--p-color-surface-selected);
  --checkbox-background: var(--p-color-surface-static);
  --checkbox-background-checked: var(--p-color-surface-selected);
  --checkbox-icon-color: var(--p-color-surface-static);

  --checkbox-border-radius: 0.25rem;
  --checkbox-input-size: 1.5rem;

  --outline: transparent;

  --border-color: var(--p-color-stroke-subtle-0);
  --border-color-checked: var(--p-color-stroke-selected);

  --border-radius: 0.75rem;
  --border-thickness: 0.0625rem;

  align-items: center;
  box-sizing: border-box;
  display: grid;
  outline: none;
  row-gap: var(--p-spacing-rem-08);
  width: fit-content;

  &:focus-visible {
    --outline: var(--p-outline);
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-border='true'] {
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
    padding: var(--p-spacing-rem-24) var(--p-spacing-rem-20);
  }

  /* Screen reader only */
  .checkboxInput {
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  & .checkboxLabel {
    column-gap: var(--p-spacing-rem-12);
    cursor: pointer;
    display: grid;
    font-weight: 400;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
  }

  & .checkboxLabel::after,
  .checkboxLabel::before {
    aspect-ratio: 1;
    border-radius: var(--checkbox-border-radius);
    box-sizing: border-box;
    content: '';
    display: block;
    grid-area: 1 / 1 / span 1 / span 1;
    height: var(--checkbox-input-size);
    place-self: center;
  }

  & .checkboxLabel::before {
    background: var(--checkbox-background);
    border: var(--p-border-rem-small) solid var(--checkbox-border-color);
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
  }

  & .checkboxLabel::after {
    background: var(--checkbox-icon-color);
    clip-path: view-box
      path(
        'M12.2311 1.29248C12.6079 1.72314 12.5861 2.39812 12.1823 2.80007L4.68232 10.2667C4.28837 10.6589 3.67393 10.6476 3.29289 10.2412L0.792893 7.57452C0.402369 7.15797 0.402369 6.48259 0.792893 6.06603C1.18342 5.64947 1.81658 5.64947 2.20711 6.06603L4.02396 8.00401L10.8177 1.24049C11.2214 0.838536 11.8542 0.86181 12.2311 1.29248Z'
      );
    height: 11px;
    opacity: 0;
    width: 13px;
  }

  & .checkboxInput:checked + .checkboxLabel {
    &::before {
      background: var(--checkbox-background-checked);
      border-color: var(--checkbox-border-color-checked);
    }

    &::after {
      opacity: 1;
    }
  }

  & .checkboxInput:not(:checked) + .checkboxLabel[data-checked='mixed'] {
    &::before {
      background: var(--checkbox-background-checked);
      border-color: var(--checkbox-border-color-checked);
    }

    &::after {
      border-radius: 0.125rem;
      clip-path: unset;
      height: 0.125rem;
      opacity: 1;
      width: 0.75rem;
    }
  }

  &:has(.checkboxInput:focus-visible) {
    --outline: var(--p-outline);
  }

  &:has(.checkboxInput:checked) {
    border-color: var(--border-color-checked);
  }

  .checkboxHint {
    color: var(--p-color-text-secondary);
    column-gap: var(--p-spacing-rem-12);
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .checkboxHint::before {
    aspect-ratio: 1;
    content: '';
  }

  &:has(.checkboxHint:not(:empty)) .checkboxLabel {
    font-weight: 600;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --checkbox-border-color: var(--p-color-stroke-selected-hover);
      --checkbox-border-color-checked: var(--p-color-stroke-selected-hover);
      --checkbox-background: var(--p-color-background-hover);
      --checkbox-background-checked: var(--p-color-surface-selected-hover);
      --checkbox-icon-color: var(--p-color-surface-static);

      --border-color: var(--p-color-stroke-strong-hover);
      --border-color-checked: var(--p-color-stroke-selected-hover);
    }
  }

  &:has(.checkboxInput:active) {
    --checkbox-border-color: var(--p-color-stroke-selected-pressed);
    --checkbox-border-color-checked: var(--p-color-stroke-selected-pressed);
    --checkbox-background: var(--p-color-background-pressed);
    --checkbox-background-checked: var(--p-color-surface-selected-pressed);
    --checkbox-icon-color: var(--p-color-icon-on-color);

    --border-color: var(--p-color-stroke-selected);
    --border-color-checked: var(--p-color-stroke-selected-pressed);
  }

  &[data-message-type='warning'] {
    --checkbox-border-color: var(--p-color-stroke-warning);
    --checkbox-border-color-checked: var(--p-color-stroke-warning);
    --checkbox-background: var(--p-color-surface-warning);
    --checkbox-background-checked: var(--p-color-stroke-warning);
    --checkbox-icon-color: var(--p-color-surface-warning);

    --border-color: var(--p-color-stroke-warning);
    --border-color-checked: var(--p-color-stroke-warning);
  }

  &[data-message-type='error'] {
    --checkbox-border-color: var(--p-color-stroke-error);
    --checkbox-border-color-checked: var(--p-color-stroke-error);
    --checkbox-background: var(--p-color-surface-error);
    --checkbox-background-checked: var(--p-color-stroke-error);
    --checkbox-icon-color: var(--p-color-surface-error);

    --border-color: var(--p-color-stroke-error);
    --border-color-checked: var(--p-color-stroke-error);
  }

  &:has(.checkboxInput[aria-disabled='true']) {
    --checkbox-border-color: var(--p-color-stroke-disabled);
    --checkbox-border-color-checked: var(--p-color-background-disabled);
    --checkbox-background: var(--p-color-surface-static);
    --checkbox-background-checked: var(--p-color-background-disabled);
    --checkbox-icon-color: var(--p-color-stroke-disabled);

    --border-color: var(--p-color-stroke-disabled);
    --border-color-checked: var(--p-color-stroke-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    color: var(--color-text);
    text-wrap: pretty;

    @media (max-width: 600px) {
      padding-top: 1px;
    }
  }

  & .alertIcon {
    color: var(--color-icon);
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-24);
    width: 100%;
    z-index: var(--p-z-index-popover);

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.button[data-stb-button='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  gap: var(--p-spacing-rem-08);
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-height: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonBrand[data-stb-button-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-height);
  justify-content: center;
  max-height: var(--button-height);
  min-height: var(--button-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--p-spacing-rem-08) var(--p-spacing-rem-24);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  & .iconLeft {
    margin-right: var(--p-spacing-rem-08);
  }

  & .iconRight {
    margin-left: var(--p-spacing-rem-08);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-height: var(--p-spacing-rem-48);
  }
}
.buttonCircle[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-size);

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-size='large'] {
    --button-size: var(--p-spacing-rem-40);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-48);
    }
  }

  &[data-size='medium'] {
    --button-size: var(--p-spacing-rem-32);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-40);
    }
  }

  &[data-size='small'] {
    --button-size: var(--p-spacing-rem-28);

    @media (min-width: 600px) {
      --button-size: var(--p-spacing-rem-32);
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }

    &.underlined {
      & > span {
        position: relative;

        &::after {
          background-color: var(--button-color);
          bottom: 2px;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover:not([disabled]) {
          & > span::after {
            background-color: var(--button-color);
          }
        }
      }

      &[disabled] {
        & > span::after {
          background-color: var(--button-color);
        }
      }
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
.buttonCircleBrand[data-stb-button-circle-brand='current'] {
  --button-background-color: var(--p-color-button-brand-fill);
  --button-color: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-brand-fill);
  --button-outline: none;
  --button-size: var(--p-spacing-rem-40);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--button-size);
  justify-content: center;
  max-height: var(--button-size);
  max-width: var(--button-size);
  min-height: var(--button-size);
  min-width: var(--button-size);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-background-color: var(--p-color-button-brand-fill-hover);
      --button-border-color: var(--p-color-button-brand-fill-hover);
    }
  }

  &:active {
    --button-background-color: var(--p-color-button-brand-fill-active);
    --button-border-color: var(--p-color-button-brand-fill-active);
  }

  &[data-loading='true'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-border-color: var(--p-color-button-brand-fill);
  }

  &[disabled] {
    --button-color: var(--p-color-text-disabled);
    --button-background-color: var(--p-color-button-disabled);
    --button-border-color: var(--p-color-button-disabled);

    pointer-events: none;
  }

  @media (min-width: 600px) {
    --button-size: var(--p-spacing-rem-48);
  }
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.legend[data-stb-legend='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  margin-inline: 0;
  min-inline-size: none;
  padding-block: 0;
  padding-inline: 0;
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.checkboxesBase[data-stb-checkboxes='current'] {
  border: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  & .checkboxesItems {
    display: flex;
    flex-direction: column;
    gap: var(--p-spacing-rem-08);
  }

  & .checkboxesLegend {
    margin-bottom: var(--p-spacing-rem-16);
  }

  & .checkboxesAlert {
    margin-top: var(--p-spacing-rem-16);
  }
}