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

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

    .alertBase[data-stb-alert='current'] {
      &[data-variant='info-subtle'] {
        --color-bg: var(--p-color-background-white);
      }
    }
  }

  &[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);
}
:where(.surface[data-stb-surface='current']) {
  background-color: var(--p-color-background);
  color: var(--p-color-text-primary);
  transition: background-color var(--p-transition-duration);
}
:where(.surface[data-stb-surface='current']) {
  &[data-surface-layer='1'],
  &[data-surface-layer='3'],
  &[data-surface-layer='5'] {
    &[data-theme='pretzel-light'],
    &[data-theme='kron-light'],
    &[data-theme='kron'],
    :where(&),
    :where([data-theme='pretzel-light'] &),
    :where([data-theme='kron-light'] &),
    :where([data-theme='kron'] &) {
      /* 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-0: var(--p-color-stroke-subtle-0-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);
    }
  }
}
:where(.surface[data-stb-surface='current']) {
  &[data-surface-layer='0'],
  &[data-surface-layer='2'],
  &[data-surface-layer='4'] {
    &[data-theme='pretzel-light'],
    &[data-theme='kron-light'],
    &[data-theme='kron'],
    :where(&),
    :where([data-theme='pretzel-light'] &),
    :where([data-theme='kron-light'] &),
    :where([data-theme='kron'] &) {
      /* 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);
    }
  }
}
:where(.surface[data-stb-surface='current']) {
  :where([data-theme='kron-dark'] &),
  :where([data-theme='pretzel-dark'] &),
  &[data-theme='kron-dark'],
  &[data-theme='pretzel-dark'] {
    color: var(--p-color-text-primary);

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

    &[data-surface-layer='2'] {
      --p-color-background: var(--p-color-surface-2);
    }
  }
}
.alertBase[data-stb-alert='current'] {
  --alert-color-text: var(--p-color-text-primary);
  --alert-color-icon: var(--p-color-icon-primary);
  --alert-min-width: 18rem;
  --alert-line-height: 1.625rem;
  --alert-icon-size: var(--alert-line-height);
  --alert-border-radius: var(--p-corner-radius-rem-small);
  --icon-gap: var(--p-spacing-rem-12);

  align-items: center;
  background-color: var(--alert-background);
  border: none;
  border-radius: var(--alert-border-radius);
  box-sizing: border-box;
  display: inline-flex;
  max-width: 38.75rem;
  min-width: var(--alert-min-width);
  padding: var(--p-spacing-rem-20) var(--p-spacing-rem-16);
  position: relative;

  @media (min-width: 600px) {
    padding: var(--p-spacing-rem-24) var(--p-spacing-rem-20);
  }

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

  & .icon {
    align-self: flex-start;
    color: var(--alert-color-icon);
    display: flex;
    font-size: calc(var(--alert-icon-size) - 2px);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);
  }

  & .alertContainer {
    align-self: flex-start;
    display: grid;
    gap: var(--icon-gap);
    grid-template-columns: auto 1fr;
    max-width: 100%;
    text-align: left;
  }

  & .alertDescription {
    align-items: center;
    display: flex;
    text-wrap: pretty;
  }

  &[data-size='small'] {
    --alert-line-height: 1.375rem;
    --icon-gap: var(--p-spacing-rem-08);

    padding: var(--p-spacing-rem-16) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20) var(--p-spacing-rem-16);
    }
  }

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

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

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

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

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

  &[data-variant='info-subtle'] {
    --alert-background: var(--p-color-background);
  }

  @media (max-width: 600px) {
    --alert-line-height: 1.375rem;
    --icon-gap: var(--p-spacing-rem-08);

    max-width: 100%;
    min-width: min(85%, var(--alert-min-width));
    padding: var(--p-spacing-rem-20) var(--p-spacing-rem-16);

    &[data-size='small'] {
      --alert-line-height: 1.25rem;
    }
  }
}
.alertFullSpanContainer[data-stb-alert-fullspan='current'] {
  width: 100%;

  & .alertBase[data-stb-alert='current'] {
    --alert-border-radius: none;

    padding: var(--p-spacing-rem-24);
    width: 100%;
  }
}

.alertGridContent {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  width: 100%;
}

.alertContainer {
  align-items: flex-start;
  gap: var(--p-spacing-rem-16);
  grid-column: 1 / -1;
  width: 100%;
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  width: 1rem;

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

  &::before {
    content: attr(data-icon-name);
    white-space: nowrap;
  }

  @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;
  }
}