/*
 * Application colors
 */
/*
 * Theme colors
 */
/*
 * Alert colors
 */
/*
 * Tokens for developers
 */
/*
 * Default page background;
 * UI Shell base color
 */
/*
 * Container color on $background;
 * Secondary page background
 */
/*
Container color on $layer-01
 */
/*
Container color on $layer-02
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/**
Primary text;
Body copy;
Headers;
Hover text color for --text-secondary
 */
/**
 * Secondary text;
 * Input labels
 */
/**
 * Placeholder text
 */
/**
Text on interactive colors;
Text on button colors
 */
/**
Tertiary text;
Help text
 */
/**
Error message text
 */
/**
Inverse text color
 */
/*
Default input fields;
Fields on $backgrounds
 */
/*
Secondary input fields;
Fields on $layer-01
 */
/*
Secondary input fields;
Fields on $layer-02
 */
/*
Hover color for $field-01
 */
/*
Hover color for $field-02
 */
/*
Hover color for $field-03
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/*
 * Skeleton color for text and UI elements
 */
/*
 * Skeleton color for containers
 */
/*
Selected UI elements
 */
/**
* Disabled fields;
* Disabled backgrounds;
* Disabled border
*/
/**
* Disabled elements on $disabled-01;
* Disabled label;
* Disabled text on $disabled-01;
* Disabled icons;
* Disabled border
*/
/**
* Disabled text on $disabled-02;
* Disabled icons on $disabled-02
*/
/**
* Primary links;
* Ghost button
*/
/**
Secondary link color for lower contrast backgrounds
 */
/**
* Secondary link color for lower contrast backgrounds
*/
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $layer-01
 */
/*
Subtle borders paired with $layer-02
 */
/*
Subtle borders paired with $layer-03
 */
/*
Medium contrast border;
Border-bottom paired with $field-01;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-02;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-03;
3:1 AA non-text contrast
 */
/*
 * There are two body styles for productive and expressive moments. Productive styles have a suffix of -01 and expressive styles have a suffix of -02
 */
/*
 * Application colors
 */
/*
 * Theme colors
 */
/*
 * Alert colors
 */
/*
 * Tokens for developers
 */
/*
 * Default page background;
 * UI Shell base color
 */
/*
 * Container color on $background;
 * Secondary page background
 */
/*
Container color on $layer-01
 */
/*
Container color on $layer-02
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/**
Primary text;
Body copy;
Headers;
Hover text color for --text-secondary
 */
/**
 * Secondary text;
 * Input labels
 */
/**
 * Placeholder text
 */
/**
Text on interactive colors;
Text on button colors
 */
/**
Tertiary text;
Help text
 */
/**
Error message text
 */
/**
Inverse text color
 */
/*
Default input fields;
Fields on $backgrounds
 */
/*
Secondary input fields;
Fields on $layer-01
 */
/*
Secondary input fields;
Fields on $layer-02
 */
/*
Hover color for $field-01
 */
/*
Hover color for $field-02
 */
/*
Hover color for $field-03
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/*
 * Skeleton color for text and UI elements
 */
/*
 * Skeleton color for containers
 */
/*
Selected UI elements
 */
/**
* Disabled fields;
* Disabled backgrounds;
* Disabled border
*/
/**
* Disabled elements on $disabled-01;
* Disabled label;
* Disabled text on $disabled-01;
* Disabled icons;
* Disabled border
*/
/**
* Disabled text on $disabled-02;
* Disabled icons on $disabled-02
*/
/**
* Primary links;
* Ghost button
*/
/**
Secondary link color for lower contrast backgrounds
 */
/**
* Secondary link color for lower contrast backgrounds
*/
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $layer-01
 */
/*
Subtle borders paired with $layer-02
 */
/*
Subtle borders paired with $layer-03
 */
/*
Medium contrast border;
Border-bottom paired with $field-01;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-02;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-03;
3:1 AA non-text contrast
 */
/*
 * There are two body styles for productive and expressive moments. Productive styles have a suffix of -01 and expressive styles have a suffix of -02
 */
* {
  box-sizing: border-box;
}

:host {
  font-family: var(--font-family-base, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
}

::selection {
  color: var(--color-white, white);
  background: var(--color-primary, #0f62fe);
}

/* width */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb :hover {
  background: #555;
}

:host([hidden]) {
  display: none;
}

:host, :host([layer=background]) {
  --field: var(--field-01, #f4f4f4);
  --layer: var(--layer-01, #f4f4f4);
  --layer-hover: var(--layer-hover-01, #e8e8e8);
  --layer-accent: var(--layer-accent-01, #e0e0e0);
  --layer-selected: var(--layer-selected-01, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-01, #d1d1d1);
  --field-hover: var(--field-hover-01, #e8e8e8);
  --border-strong: var(--border-strong-01, #8d8d8d);
  --border-subtle: var(--border-subtle-00, #e0e0e0);
}

:host([layer="01"]) {
  --field: var(--field-02, white);
  --layer: var(--layer-02, white);
  --layer-hover: var(--layer-hover-02, #e8e8e8);
  --layer-accent: var(--layer-accent-02, #e0e0e0);
  --layer-selected: var(--layer-selected-02, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-02, #d1d1d1);
  --field-hover: var(--field-hover-02, #e8e8e8);
  --border-strong: var(--border-strong-02, #8d8d8d);
  --border-subtle: var(--border-subtle-01, #e0e0e0);
}

:host([layer="02"]) {
  --field: var(--field-03, #f4f4f4);
  --layer: var(--layer-03, #f4f4f4);
  --layer-hover: var(--layer-hover-03, #e8e8e8);
  --layer-accent: var(--layer-accent-03, #e0e0e0);
  --layer-selected: var(--layer-selected-03, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-03, #d1d1d1);
  --field-hover: var(--field-hover-03, #e8e8e8);
  --border-strong: var(--border-strong-03, #8d8d8d);
  --border-subtle: var(--border-subtle-02, #e0e0e0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton {
  position: relative;
  padding: 0;
  border: none;
  background: var(--skeleton-background, #e8e8e8);
  box-shadow: none;
  pointer-events: none;
}
.skeleton::before {
  position: absolute;
  animation: 3000ms ease-in-out skeleton infinite;
  background: var(--skeleton-element, #c6c6c6);
  block-size: 100%;
  content: "";
  inline-size: 100%;
  will-change: transform-origin, transform, opacity;
}

@keyframes skeleton {
  0% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
  20% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
  28% {
    transform: scaleX(1);
    transform-origin: right;
  }
  51% {
    transform: scaleX(0);
    transform-origin: right;
  }
  58% {
    transform: scaleX(0);
    transform-origin: right;
  }
  82% {
    transform: scaleX(1);
    transform-origin: right;
  }
  83% {
    transform: scaleX(1);
    transform-origin: left;
  }
  96% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
}
:host {
  display: block;
  margin-bottom: var(--spacing-03, 0.5rem);
}

.native-element {
  margin: 0;
}

:host([inline]), :host([type=code]) {
  display: inline-block;
  margin-bottom: 0;
}
:host([inline]) .text, :host([type=code]) .text {
  display: inline-block;
}

:host([type=code]) {
  background: var(--border-subtle, );
  padding-inline: 0.25rem;
  border-radius: var(--border-radius, 3px);
}

/* *
 * heading styles
 */
:host([type=heading]) {
  margin-bottom: var(--spacing-05, 1rem);
}
:host([type=heading]) .text.heading-size-1 .native-element {
  font-family: var(--text-font-family, var(--heading-01-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-01-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--heading-01-font-weight, 600));
  line-height: var(--text-line-height, var(--heading-01-line-height, 1.25rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-01-letter-spacing, 0.16px));
}
:host([type=heading]) .text.heading-size-2 .native-element {
  font-family: var(--text-font-family, var(--heading-02-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-02-font-size, 1rem));
  font-weight: var(--text-font-weight, var(--heading-02-font-weight, 600));
  line-height: var(--text-line-height, var(--heading-02-line-height, 1.5rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-02-letter-spacing, 0));
}
:host([type=heading]) .text.heading-size-3 .native-element {
  font-family: var(--text-font-family, var(--heading-03-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-03-font-size, 1.25rem));
  font-weight: var(--text-font-weight, var(--heading-03-font-weight, 400));
  line-height: var(--text-line-height, var(--heading-03-line-height, 1.75rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-03-letter-spacing, 0));
}
:host([type=heading]) .text.heading-size-4 .native-element {
  font-family: var(--text-font-family, var(--heading-04-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-04-font-size, 1.75rem));
  font-weight: var(--text-font-weight, var(--heading-04-font-weight, 400));
  line-height: var(--text-line-height, var(--heading-04-line-height, 2.25rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-04-letter-spacing, 0));
}
:host([type=heading]) .text.heading-size-5 .native-element {
  font-family: var(--text-font-family, var(--heading-05-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-05-font-size, 2rem));
  font-weight: var(--text-font-weight, var(--heading-05-font-weight, 400));
  line-height: var(--text-line-height, var(--heading-05-line-height, 2.5rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-05-letter-spacing, 0));
}
:host([type=heading]) .text.heading-size-6 .native-element {
  font-family: var(--text-font-family, var(--heading-06-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-06-font-size, 2.625rem));
  font-weight: var(--text-font-weight, var(--heading-06-font-weight, 300));
  line-height: var(--text-line-height, var(--heading-06-line-height, 3.125rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-06-letter-spacing, 0));
}
:host([type=heading]) .text.heading-size-7 .native-element {
  font-family: var(--text-font-family, var(--heading-07-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--heading-07-font-size, 3.375rem));
  font-weight: var(--text-font-weight, var(--heading-07-font-weight, 300));
  line-height: var(--text-line-height, var(--heading-07-line-height, 4rem));
  letter-spacing: var(--text-letter-spacing, var(--heading-07-letter-spacing, 0));
}

/* *
 * fluid-heading styles
 */
:host([type=fluid-heading]) {
  margin-bottom: var(--spacing-05, 1rem);
}

@media (max-width: 671px) {
  :host([type=fluid-heading]) .text.heading-size-3 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-03-sm-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-03-sm-font-size, 1.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-03-sm-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-03-sm-line-height, 1.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-03-sm-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-4 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-04-sm-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-04-sm-font-size, 1.75rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-04-sm-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-04-sm-line-height, 2.25rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-04-sm-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-5 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-05-sm-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-05-sm-font-size, 2rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-05-sm-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-05-sm-line-height, 2.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-05-sm-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-6 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-06-sm-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-06-sm-font-size, 2rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-06-sm-font-weight, 600));
    line-height: var(--text-line-height, var(--fluid-heading-06-sm-line-height, 2.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-06-sm-letter-spacing, 0));
  }
}
@media (min-width: 672px) {
  :host([type=fluid-heading]) .text.heading-size-3 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-03-md-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-03-md-font-size, 1.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-03-md-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-03-md-line-height, 1.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-03-md-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-4 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-04-md-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-04-md-font-size, 1.75rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-04-md-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-04-md-line-height, 2.25rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-04-md-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-5 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-05-md-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-05-md-font-size, 2.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-05-md-font-weight, 300));
    line-height: var(--text-line-height, var(--fluid-heading-05-md-line-height, 2.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-05-md-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-6 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-06-md-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-06-md-font-size, 2.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-06-md-font-weight, 600));
    line-height: var(--text-line-height, var(--fluid-heading-06-md-line-height, 2.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-06-md-letter-spacing, 0));
  }
}
@media (min-width: 1056px) {
  :host([type=fluid-heading]) .text.heading-size-3 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-03-lg-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-03-lg-font-size, 1.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-03-lg-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-03-lg-line-height, 1.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-03-lg-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-4 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-04-lg-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-04-lg-font-size, 1.75rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-04-lg-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-04-lg-line-height, 2.25rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-04-lg-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-5 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-05-lg-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-05-lg-font-size, 2.625rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-05-lg-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-05-lg-line-height, 3.125rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-05-lg-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-6 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-06-lg-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-06-lg-font-size, 2.625rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-06-lg-font-weight, 600));
    line-height: var(--text-line-height, var(--fluid-heading-06-lg-line-height, 3.125rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-06-lg-letter-spacing, 0));
  }
}
@media (min-width: 1312px) {
  :host([type=fluid-heading]) .text.heading-size-3 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-03-xl-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-03-xl-font-size, 1.25rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-03-xl-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-03-xl-line-height, 1.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-03-xl-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-4 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-04-xl-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-04-xl-font-size, 2rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-04-xl-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-04-xl-line-height, 2.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-04-xl-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-5 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-05-xl-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-05-xl-font-size, 3rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-05-xl-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-05-xl-line-height, 3.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-05-xl-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-6 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-06-xl-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-06-xl-font-size, 3rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-06-xl-font-weight, 600));
    line-height: var(--text-line-height, var(--fluid-heading-06-xl-line-height, 3.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-06-xl-letter-spacing, 0));
  }
}
@media (min-width: 1584px) {
  :host([type=fluid-heading]) .text.heading-size-3 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-03-max-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-03-max-font-size, 1.5rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-03-max-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-03-max-line-height, 1.75rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-03-max-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-4 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-04-max-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-04-max-font-size, 2rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-04-max-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-04-max-line-height, 2.5rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-04-max-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-5 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-05-max-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-05-max-font-size, 3.75rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-05-max-font-weight, 400));
    line-height: var(--text-line-height, var(--fluid-heading-05-max-line-height, 4.375rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-05-max-letter-spacing, 0));
  }
  :host([type=fluid-heading]) .text.heading-size-6 .native-element {
    font-family: var(--text-font-family, var(--fluid-heading-06-max-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
    font-size: var(--text-font-size, var(--fluid-heading-06-max-font-size, 3.75rem));
    font-weight: var(--text-font-weight, var(--fluid-heading-06-max-font-weight, 600));
    line-height: var(--text-line-height, var(--fluid-heading-06-max-line-height, 4.375rem));
    letter-spacing: var(--text-letter-spacing, var(--fluid-heading-06-max-letter-spacing, 0));
  }
}
/* *
 * Other styles
 */
:host([type=body]) .native-element {
  font-family: var(--text-font-family, var(--body-01-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--body-01-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--body-01-font-weight, 400));
  line-height: var(--text-line-height, var(--body-01-line-height, 1.25rem));
  letter-spacing: var(--text-letter-spacing, var(--body-01-letter-spacing, 0.16px));
}
:host([type=body]) .expressive .native-element {
  font-family: var(--text-font-family, var(--body-02-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--body-02-font-size, 1rem));
  font-weight: var(--text-font-weight, var(--body-02-font-weight, 400));
  line-height: var(--text-line-height, var(--body-02-line-height, 1.5rem));
  letter-spacing: var(--text-letter-spacing, var(--body-02-letter-spacing, 0));
}

:host([type=body-compact]) .native-element {
  font-family: var(--text-font-family, var(--body-compact-01-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--body-compact-01-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--body-compact-01-font-weight, 400));
  line-height: var(--text-line-height, var(--body-compact-01-line-height, 1.125rem));
  letter-spacing: var(--text-letter-spacing, var(--body-compact-01-letter-spacing, 0.16px));
}
:host([type=body-compact]) .expressive .native-element {
  font-family: var(--text-font-family, var(--body-compact-02-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--body-compact-02-font-size, 1rem));
  font-weight: var(--text-font-weight, var(--body-compact-02-font-weight, 400));
  line-height: var(--text-line-height, var(--body-compact-02-line-height, 1.375rem));
  letter-spacing: var(--text-letter-spacing, var(--body-compact-02-letter-spacing, 0));
}

:host([type=code]) .native-element {
  font-family: var(--text-font-family, var(--code-01-font-family, IBM Plex Mono, Courier New, monospace));
  font-size: var(--text-font-size, var(--code-01-font-size, 0.75rem));
  font-weight: var(--text-font-weight, var(--code-01-font-weight, 400));
  line-height: var(--text-line-height, var(--code-01-line-height, 1rem));
  letter-spacing: var(--text-letter-spacing, var(--code-01-letter-spacing, 0.32px));
}
:host([type=code]) .expressive .native-element {
  font-family: var(--text-font-family, var(--code-02-font-family, IBM Plex Mono, Courier New, monospace));
  font-size: var(--text-font-size, var(--code-02-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--code-02-font-weight, 400));
  line-height: var(--text-line-height, var(--code-02-line-height, 1.25rem));
  letter-spacing: var(--text-letter-spacing, var(--code-02-letter-spacing, 0.32px));
}

:host([type=helper]) .native-element {
  font-family: var(--text-font-family, var(--helper-01-font-family, ));
  font-size: var(--text-font-size, var(--helper-01-font-size, ));
  font-weight: var(--text-font-weight, var(--helper-01-font-weight, ));
  line-height: var(--text-line-height, var(--helper-01-line-height, ));
  letter-spacing: var(--text-letter-spacing, var(--helper-01-letter-spacing, ));
}
:host([type=helper]) .expressive .native-element {
  font-family: var(--text-font-family, var(--helper-02-font-family, ));
  font-size: var(--text-font-size, var(--helper-02-font-size, ));
  font-weight: var(--text-font-weight, var(--helper-02-font-weight, ));
  line-height: var(--text-line-height, var(--helper-02-line-height, ));
  letter-spacing: var(--text-letter-spacing, var(--helper-02-letter-spacing, ));
}

:host([type=legal]) .native-element {
  font-family: var(--text-font-family, var(--legal-01-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--legal-01-font-size, 0.75rem));
  font-weight: var(--text-font-weight, var(--legal-01-font-weight, 400));
  line-height: var(--text-line-height, var(--legal-01-line-height, 1rem));
  letter-spacing: var(--text-letter-spacing, var(--legal-01-letter-spacing, 0.32px));
}
:host([type=legal]) .expressive .native-element {
  font-family: var(--text-font-family, var(--legal-02-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--legal-02-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--legal-02-font-weight, 400));
  line-height: var(--text-line-height, var(--legal-02-line-height, 1.125rem));
  letter-spacing: var(--text-letter-spacing, var(--legal-02-letter-spacing, 0.16px));
}

:host([type=label]) .native-element {
  font-family: var(--text-font-family, var(--label-01-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--label-01-font-size, 0.75rem));
  font-weight: var(--text-font-weight, var(--label-01-font-weight, 400));
  line-height: var(--text-line-height, var(--label-01-line-height, 1rem));
  letter-spacing: var(--text-letter-spacing, var(--label-01-letter-spacing, 0.32px));
}
:host([type=label]) .expressive .native-element {
  font-family: var(--text-font-family, var(--label-02-font-family, IBM Plex Sans, Helvetica Neue, Arial, sans-serif));
  font-size: var(--text-font-size, var(--label-02-font-size, 0.875rem));
  font-weight: var(--text-font-weight, var(--label-02-font-weight, 400));
  line-height: var(--text-line-height, var(--label-02-line-height, 1.125rem));
  letter-spacing: var(--text-letter-spacing, var(--label-02-letter-spacing, 0.16px));
}

:host([type=code]) .native-element {
  word-break: break-word;
}

:host {
  color: var(--text-color, var(--text-primary));
}
:host:host([color=secondary]) {
  color: var(--text-secondary);
}
:host:host([color=tertiary]), :host:host([color=helper]) {
  color: var(--text-helper);
}
:host:host([color=error]) {
  color: var(--text-error);
}
:host:host([color=inverse]) {
  color: var(--text-inverse);
}

:host(.inherit) {
  color: inherit;
}