@cds/core/styles/module.typography.css

Clarity Design System - common components, themes, and utilties

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-text] {
  font-family: var(--cds-global-typography-font-family);
  margin-top: 0;
  margin-bottom: 0;
}
[cds-text][cds-layout~=vertical]::before, [cds-text][cds-layout~=vertical]::after, [cds-text][cds-layout~=horizontal]::before, [cds-text][cds-layout~=horizontal]::after, [cds-text][cds-layout~=grid]::before, [cds-text][cds-layout~=grid]::after {
  display: none;
}

[cds-text*=display],
[cds-text*=heading],
[cds-text*=headline],
[cds-text*=title],
[cds-text*=section],
[cds-text*=subsection] {
  font-family: var(--cds-global-typography-header-font-family);
  color: var(--cds-global-typography-color-400);
}

[cds-text*=body],
[cds-text*=message],
[cds-text*=secondary],
[cds-text*=caption],
[cds-text*=smallcaption] {
  color: var(--cds-global-typography-color-500);
}

[cds-text*=inline] {
  width: auto !important;
  display: inline-block !important;
}

[cds-text*=display] {
  font-size: var(--cds-global-typography-display-font-size);
  font-weight: var(--cds-global-typography-display-font-weight);
  line-height: var(--cds-global-typography-display-line-height);
  letter-spacing: var(--cds-global-typography-display-letter-spacing);
}
[cds-text*=display]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-display-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=display]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-display-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=heading],
[cds-text*=headline] {
  font-size: var(--cds-global-typography-heading-font-size);
  font-weight: var(--cds-global-typography-heading-font-weight);
  line-height: var(--cds-global-typography-heading-line-height);
  letter-spacing: var(--cds-global-typography-heading-letter-spacing);
}
[cds-text*=heading]::before,
[cds-text*=headline]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-heading-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=heading]::after,
[cds-text*=headline]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-heading-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=title] {
  font-size: var(--cds-global-typography-title-font-size);
  font-weight: var(--cds-global-typography-title-font-weight);
  line-height: var(--cds-global-typography-title-line-height);
  letter-spacing: var(--cds-global-typography-title-letter-spacing);
}
[cds-text*=title]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-title-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=title]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-title-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=section] {
  font-size: var(--cds-global-typography-section-font-size);
  font-weight: var(--cds-global-typography-section-font-weight);
  line-height: var(--cds-global-typography-section-line-height);
  letter-spacing: var(--cds-global-typography-section-letter-spacing);
}
[cds-text*=section]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-section-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=section]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-section-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=subsection] {
  font-size: var(--cds-global-typography-subsection-font-size);
  font-weight: var(--cds-global-typography-subsection-font-weight);
  line-height: var(--cds-global-typography-subsection-line-height);
  letter-spacing: var(--cds-global-typography-subsection-letter-spacing);
}
[cds-text*=subsection]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-subsection-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=subsection]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-subsection-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=body] {
  font-weight: var(--cds-global-typography-body-font-weight);
  font-size: var(--cds-global-typography-body-font-size);
  letter-spacing: var(--cds-global-typography-body-letter-spacing);
  line-height: var(--cds-global-typography-body-line-height);
}
[cds-text*=body]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-body-line-height) - 1em) / 2)) * -1) + 0.1em);
}
[cds-text*=body]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-body-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

body[cds-text*=body]::before, body[cds-text*=body]::after {
  content: none;
}

[cds-text*=message] {
  font-size: var(--cds-global-typography-message-font-size);
  font-weight: var(--cds-global-typography-message-font-weight);
  line-height: var(--cds-global-typography-message-line-height);
  letter-spacing: var(--cds-global-typography-message-letter-spacing);
}
[cds-text*=message]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-message-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=message]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-message-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=secondary] {
  font-size: var(--cds-global-typography-secondary-font-size);
  font-weight: var(--cds-global-typography-secondary-font-weight);
  line-height: var(--cds-global-typography-secondary-line-height);
  letter-spacing: var(--cds-global-typography-secondary-letter-spacing);
}
[cds-text*=secondary]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-secondary-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=secondary]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-secondary-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=caption] {
  font-size: var(--cds-global-typography-caption-font-size);
  font-weight: var(--cds-global-typography-caption-font-weight);
  line-height: var(--cds-global-typography-caption-line-height);
  letter-spacing: var(--cds-global-typography-caption-letter-spacing);
}
[cds-text*=caption]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-caption-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=caption]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-caption-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=smallcaption] {
  font-size: var(--cds-global-typography-smallcaption-font-size);
  font-weight: var(--cds-global-typography-smallcaption-font-weight);
  line-height: var(--cds-global-typography-smallcaption-line-height);
  letter-spacing: var(--cds-global-typography-smallcaption-letter-spacing);
}
[cds-text*=smallcaption]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=smallcaption]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text~=link] {
  color: var(--cds-global-typography-link-color) !important;
  text-decoration: underline !important;
  line-height: inherit !important;
  font-size: inherit !important;
}
[cds-text~=link]:focus {
  outline: var(--cds-alias-object-interaction-outline);
  outline-offset: var(--cds-alias-object-interaction-outline-offset);
}
[cds-text~=link]:hover {
  color: var(--cds-global-typography-link-color-hover) !important;
}
[cds-text~=link]:visited:not([cds-text~=static]), [cds-text~=link][cds-text~=visited] {
  color: var(--cds-global-typography-link-color-visited) !important;
}
[cds-text~=link]:visited:not([cds-text~=static]):hover, [cds-text~=link][cds-text~=visited]:hover {
  color: var(--cds-global-typography-link-color-visited-hover) !important;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  [cds-text=link]:focus {
    outline: var(--cds-alias-object-interaction-outline-webkit);
  }
}
[cds-text~=code] {
  color: var(--cds-alias-status-danger);
  font-family: monospace;
}

[cds-divider] {
  display: block;
  height: var(--cds-alias-object-border-width-100);
  overflow: hidden;
  box-shadow: var(--cds-alias-object-border-color) 0 0 0 var(--cds-alias-object-border-width-100) inset;
}

[cds-text~=extrabold] {
  font-weight: var(--cds-global-typography-font-weight-extrabold) !important;
}

[cds-text~=bold] {
  font-weight: var(--cds-global-typography-font-weight-bold) !important;
}

[cds-text~=semibold] {
  font-weight: var(--cds-global-typography-font-weight-semibold) !important;
}

[cds-text~=medium] {
  font-weight: var(--cds-global-typography-font-weight-medium) !important;
}

[cds-text~=regular] {
  font-weight: var(--cds-global-typography-font-weight-regular) !important;
}

[cds-text~=light] {
  font-weight: var(--cds-global-typography-font-weight-light) !important;
}

[cds-text~=capitalize] {
  text-transform: capitalize !important;
}

[cds-text~=uppercase] {
  text-transform: uppercase !important;
}

[cds-text~=lowercase] {
  text-transform: lowercase !important;
}

[cds-text~=truncate] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
[cds-text~=truncate]::before, [cds-text~=truncate]::after {
  content: none;
}

[cds-text~=justify] {
  text-align: justify !important;
}

[cds-text~=left] {
  text-align: left !important;
}

[cds-text~=right] {
  text-align: right !important;
}

[cds-text~=center] {
  text-align: center !important;
}

[cds-text~=monospace] {
  font-family: var(--cds-global-typography-monospace-font-family);
}

[cds-text~=lhe] {
  /* stylelint-disable-next-line meowtec/no-px */
  padding: 0.05px 0;
}
[cds-text~=lhe]::before {
  content: "";
  margin-top: -0.124em;
  display: block;
  height: 0;
}
[cds-text~=lhe]::after {
  content: "";
  margin-bottom: -0.221em;
  display: block;
  height: 0;
}

[cds-layout~=disable-lhe]::before, [cds-layout~=disable-lhe]::after,
[cds-text~=disable-lhe]::before,
[cds-text~=disable-lhe]::after {
  content: none;
}

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-text*=h0] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 2rem;
  font-weight: 200;
  color: var(--cds-global-typography-color-400);
  line-height: 1.2em;
  letter-spacing: -0.0125em;
}
[cds-text*=h0]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.2em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h0]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h1] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 1.6rem;
  font-weight: 200;
  color: var(--cds-global-typography-color-400);
  line-height: 1.5em;
  letter-spacing: -0.0156em;
}
[cds-text*=h1]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h1]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h2] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 1.4rem;
  font-weight: 200;
  color: var(--cds-global-typography-color-400);
  line-height: 1.7143em;
  letter-spacing: -0.017857em;
}
[cds-text*=h2]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.7143em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h2]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.7143em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h3] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 1.1rem;
  font-weight: 200;
  color: var(--cds-global-typography-color-400);
  line-height: 1.0909em;
  letter-spacing: -0.013636em;
}
[cds-text*=h3]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.0909em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h3]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.0909em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h4] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 0.9rem;
  font-weight: 200;
  color: var(--cds-global-typography-color-400);
  line-height: 1.333333em;
  letter-spacing: -0.011111em;
}
[cds-text*=h4]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.333333em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h4]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.333333em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h5] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 1.5em;
  letter-spacing: -0.0125em;
}
[cds-text*=h5]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h5]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=h6] {
  font-family: var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cds-global-typography-color-400);
  line-height: 1.5em;
  letter-spacing: -0.03125em;
}
[cds-text*=h6]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=h6]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p0] {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-500);
  line-height: 1.16667em;
  letter-spacing: -0.008333em;
}
[cds-text*=p0]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.16667em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p0]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.16667em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p1] {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 1.71429em;
  letter-spacing: -0.014286em;
}
[cds-text*=p1]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.71429em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p1]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.71429em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p2] {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--cds-global-typography-color-400);
  line-height: 1.84615em;
  letter-spacing: -0.007692em;
}
[cds-text*=p2]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.84615em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p2]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p3] {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 1.84615em;
  letter-spacing: -0.007692em;
}
[cds-text*=p3]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.84615em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p3]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p4] {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--cds-global-typography-color-400);
  line-height: 2em;
  letter-spacing: -0.008333em;
}
[cds-text*=p4]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((2em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p4]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p5] {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 2em;
  letter-spacing: -0.008333em;
}
[cds-text*=p5]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((2em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p5]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p6] {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--cds-global-typography-color-400);
  line-height: 1.090909em;
  letter-spacing: 0.018182em;
}
[cds-text*=p6]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.090909em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p6]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p7] {
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 1.090909em;
  letter-spacing: 0.018182em;
}
[cds-text*=p7]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.090909em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p7]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em
  );
}

[cds-text*=p8] {
  font-size: 0.5rem;
  font-weight: 400;
  color: var(--cds-global-typography-color-400);
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
[cds-text*=p8]::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((1.2em - 1em) / 2)) * -1) + 0.037em);
}
[cds-text*=p8]::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(
    (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em
  );
}