@solid-design-system/styles 1.5.5 → 2.0.0-next.0

package/dist/modules/prose.css

@@ -1,917 +1,75 @@
-/**
- * Prose
- * @name sd-prose
- * @status stable
- * @since 3.6.0
- * @boolean sd-prose--inverted Inverts the content, but not tables.
- * @boolean sd-prose--full-width Overrides the 80ch max-width and makes the prose full width.
- */
-
-/**
- * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-display
- * @status stable
- * @since 1.7
- * @variant { xl | 3xl } sd-display--size-... The display's size.
- * @boolean sd-display--inverted Inverts the display text.
- */
-
-.sd-display {
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-@media (min-width: 1024px) {
-
-  .sd-display {
-    font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
-  }
-}
-
-.sd-display--size-xl {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-display--size-3xl {
-  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-@media (min-width: 1024px) {
-
-  .sd-display--size-3xl {
-    font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  }
-}
-
-.sd-display--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
- * @name sd-headline
- * @status stable
- * @since 1.16
- * @variant { 3xl | xl | lg | base } sd-headline--size-... The headline's size.
- * @boolean sd-headline--inverted Inverts the headline text.
- * @boolean sd-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
- */
-
-.sd-headline,
-.sd-prose :is(h1, h2, h3, h4, h5) {
-  display: flex;
-  font-weight: 700;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-.sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-  flex-shrink: 0;
-  font-size: 3rem;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-    margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  }
-}
-
-.sd-headline.sd-headline,
-  .sd-headline:is(h1):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-  gap: var(--sd-spacing-4, 1rem) /* 16px */;
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline,
-  .sd-headline:is(h1):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-    font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
-  }
-}
-
-.sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
-  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
-    margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  }
-}
-
-.sd-headline.sd-headline--size-3xl,
-  .sd-headline:is(h2):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
-  gap: var(--sd-spacing-4, 1rem) /* 16px */;
-  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline--size-3xl,
-  .sd-headline:is(h2):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
-    font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  }
-}
-
-.sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-    margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  }
-}
-
-.sd-headline.sd-headline--size-xl,
-  .sd-headline.sd-headline--size-lg,
-  .sd-headline.sd-headline--size-base,
-  .sd-headline:is(h3, h4, h5):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl,
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) {
-  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-headline.sd-headline--size-xl sd-icon, .sd-headline.sd-headline--size-lg sd-icon, .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h3, h4, h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) sd-icon {
-  font-size: 2rem;
-}
-
-.sd-headline.sd-headline--size-xl,
-  .sd-headline:is(h3):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-}
-
-.sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
-  margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
-    margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-  }
-}
-
-.sd-headline.sd-headline--size-lg,
-  .sd-headline.sd-headline--size-base,
-  .sd-headline:is(h4, h5):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-headline) {
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-}
-
-.sd-headline.sd-headline--size-lg,
-  .sd-headline:is(h4),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h4) {
-  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
-}
-
-.sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-    margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  }
-}
-
-.sd-headline.sd-headline--size-base,
-  .sd-headline:is(h5):not(.sd-headline),
-  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
-  .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) {
-  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
-}
-
-.sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) sd-icon {
-  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
-}
-
-.sd-headline.sd-headline--size-base mark, .sd-headline:is(h5):not(.sd-headline) mark, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base mark, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) mark {
-  color: inherit;
-}
-
-.sd-headline--inline {
-  display: inline-block;
-}
-
-.sd-headline--inline sd-icon {
-  margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
-  vertical-align: middle;
-}
-
-.sd-headline--inline:is(.sd-headline--size-xl, .sd-headline--size-lg, .sd-headline--size-base) sd-icon {
-  margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-}
-
-.sd-headline--inverted:not(#_),
-.sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for interactive elements.
- * @name sd-interactive
- * @status stable
- * @since 1.11
- * @boolean sd-interactive--disabled Makes an element look disabled.
- * @boolean sd-interactive--inverted Inverts the colors of an element.
- * @boolean sd-interactive--reset Resets the default browser styles of e.g., a button.
- */
-
-.sd-prose a--reset, .sd-interactive--reset {
-    all: unset;
-    outline: revert;
-  }
-
-.sd-prose a,
-.sd-interactive {
-  cursor: pointer;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-  text-decoration-line: underline;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-duration: 150ms;
-  transition-duration: var(--sd-duration-fast, 150ms) /* Component State
-Animation of states like hover or pressed
-Microinteractions
-Smooth transitions eg. for buttons or dropdowns */;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.sd-prose a:hover:not([disabled]),
-.sd-interactive:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
-}
-
-.sd-prose a:active:not([disabled]),
-.sd-interactive:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
-}
-
-.sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
-  text-decoration-line: none;
-}
-
-.sd-prose a:focus-visible, .sd-interactive:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-.sd-prose a--disabled,
-  .sd-prose a[disabled],
-  .sd-prose a[href=''],
-  .sd-interactive--disabled,
-  .sd-interactive[disabled],
-  .sd-interactive[href=''] {
-  cursor: not-allowed;
-  
-  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.sd-prose a--disabled:hover:not([disabled]),
-  .sd-prose a[disabled]:hover:not([disabled]),
-  .sd-prose a[href='']:hover:not([disabled]),
-  .sd-interactive--disabled:hover:not([disabled]),
-  .sd-interactive[disabled]:hover:not([disabled]),
-  .sd-interactive[href='']:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.sd-prose a--disabled:active:not([disabled]),
-  .sd-prose a[disabled]:active:not([disabled]),
-  .sd-prose a[href='']:active:not([disabled]),
-  .sd-interactive--disabled:active:not([disabled]),
-  .sd-interactive[disabled]:active:not([disabled]),
-  .sd-interactive[href='']:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.sd-prose a--disabled.sd-interactive--inverted, .sd-prose a[disabled].sd-interactive--inverted, .sd-prose a[href=''].sd-interactive--inverted, .sd-interactive--disabled.sd-interactive--inverted, .sd-interactive[disabled].sd-interactive--inverted, .sd-interactive[href=''].sd-interactive--inverted {
-  
-  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-prose a--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:hover:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-prose a--disabled.sd-interactive--inverted:active:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:active:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:active:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:active:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:active:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-prose--inverted a,
-.sd-interactive--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-prose--inverted a:hover:not([disabled]),
-.sd-interactive--inverted:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
-}
-
-.sd-prose--inverted a:active:not([disabled]),
-.sd-interactive--inverted:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
-.sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
-}
-
-/**
- * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-leadtext
- * @status stable
- * @since 1.7
- * @variant { lg } sd-leadtext--size-... The leadtext's size.
- * @boolean sd-leadtext--inverted Inverts the leadtext text.
- */
-
-.sd-prose > .sd-leadtext,
-.sd-leadtext {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
-  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-prose--inverted > .sd-leadtext,
-.sd-leadtext--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for list elements.
- * @name sd-list
- * @status stable
- * @since 1.39.0
- * @boolean sd-list--inverted Inverts the list text.
- */
-
-.sd-list:not(.sd-list--icon),
-.sd-prose > :is(ol, ul) {
-  list-style-position: revert;
-  list-style-type: revert;
-  padding: revert;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
-  text-align: left;
-
-  /*
-   * Unordered lists
-   */
-}
-
-.sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
-  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-}
-
-.sd-list:not(.sd-list--icon) ul,
-  .sd-list:not(.sd-list--icon) ol,
-  .sd-prose > :is(ol, ul) ul,
-  .sd-prose > :is(ol, ul) ol {
-    all: revert;
-    padding-left: 1.4em;
-    padding-top: 0.75em;
-  }
-
-@supports not (-webkit-hyphens: none) {
-
-.sd-list:not(.sd-list--icon),
-.sd-prose > :is(ol, ul) {
-    /* Safari automatically adds some spacing. This adds it for other browsers. */
-
-    /*
-     * Ordered lists
-     */
-
-    /* 
-   * Safari currently only partially supports the ::marker pseudo class.
-   * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
-   */
-    /* Level 1 */
-}
-    .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
-    padding-left: 0.3em;
-  }
-    .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
-      counter-reset: item;
-    }
-      .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
-        counter-increment: item;
-      }
-        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
-          content: counters(item, '.', decimal) '. ';
-        }
-        /* Level 2 */
-        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
-    padding-left: 1.9em;
-          counter-reset: subitem;
-  }
-          .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
-            counter-increment: subitem;
-          }
-            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
-              content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
-            }
-            /* Level 3 */
-            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
-    padding-left: 2.7em;
-              counter-reset: subsubitem;
-  }
-              .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
-                counter-increment: subsubitem;
-              }
-                .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
-                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
-                    counters(subsubitem, '.', decimal) '. ';
-                }
-  }
-
-/* Level 1 */
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
-  .sd-prose > :is(ol, ul) ul {
-  padding-left: 0.5em;
-}
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
-  padding-left: 0.75em;
-      list-style-type: '\2022'; /* • */
-}
-
-/* Level 2 */
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
-  padding-left: 0.3em;
-}
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
-          list-style-type: '\002B1D'; /* · */
-        }
-
-/* Level 3 */
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
-  padding-left: 0.4em;
-}
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
-              list-style-type: '\2010'; /* - */
-            }
-
-/*
-  * Icon lists
-  */
-
-.sd-list--icon {
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-  text-align: left;
-}
-
-.sd-list--icon li sd-icon:first-of-type,
-    .sd-list--icon li .sd-list--icon__icon:first-of-type {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-list--icon {
-  list-style-type: '';
-}
-
-/* Safari removes list semantics of lists that don’t look like lists (list-style: none). The only way to remove list
-    styles without affecting semantics is to set list-style-type to an empty string.
-    https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
-
-.sd-list--icon > li:first-of-type {
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-list--icon li {
-  position: relative;
-  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  line-height: 32px;
-}
-
-.sd-list--icon li > sd-icon:first-of-type,
-    .sd-list--icon li > .sd-list--icon__icon:first-of-type {
-  position: absolute;
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-.sd-list--icon.sd-list--horizontal {
-  display: flex;
-}
-
-.sd-list--icon.sd-list--horizontal li {
-  display: flex;
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-list--icon.sd-list--horizontal li:not(:last-child) {
-  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-/*
- * Inverted
- */
-
-.sd-list--inverted,
-.sd-prose--inverted > :is(ol, ul) {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-list--inverted li > sd-icon:first-of-type,
-  .sd-list--inverted li > .sd-list--icon__icon:first-of-type,
-  .sd-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-prose--inverted > :is(ol, ul) li > .sd-list--icon__icon:first-of-type {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
- * @name sd-paragraph
- * @status stable
- * @since 1.7
- * @variant { sm } sd-paragraph--size-... The paragraph's font size.
- * @boolean sd-paragraph--inverted Inverts the paragraph text.
- */
-
-.sd-paragraph,
-.sd-prose p {
-  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-paragraph--size-sm, .sd-prose p--size-sm {
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-paragraph--inverted,
-.sd-prose--inverted p {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for media elements.
- * @name sd-media
- * @status stable
- * @since 2.5.0
- * @boolean sd-media--inverted Inverts the figcaption text.
- */
-
-.sd-prose figure,
-figure.sd-media {
-  margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-prose figure figcaption, figure.sd-media figcaption {
-  
-  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
-}
-
-.sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
-  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-}
-
-.sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
-/**
- * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-table-cell
- * @status stable
- * @since 1.13
- * @boolean sd-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
- * @boolean sd-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-table-cell--shadow-... Applies the selected shadow to the table cell.
- */
-
-.sd-prose td,
-.sd-prose th,
-.sd-table-cell {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-left-width: 0px;
-  border-right-width: 0px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
-  background-color: transparent;
-  padding: var(--sd-spacing-4, 1rem) /* 16px */;
-  text-align: left;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-table-cell--divider {
-  border-right-width: 1px;
-}
-
-.sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after, .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-  pointer-events: none;
-  position: absolute;
-  --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-  --tw-gradient-to: transparent var(--tw-gradient-to-position);
-  opacity: var(--sd-opacity-0, 0);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
-}
-
-/* fix that shows line on top of table-cell */
-
-.sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
-  position: absolute;
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display: block;
-  height: 1px;
-  width: 100%;
-  border-width: 0.5px;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
-}
-
-.sd-table-cell.sd-table-cell--shadow-active:after {
-  opacity: 100%;
-}
-
-.sd-table-cell--shadow-top:after {
-  top: -10px;
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-
-/* fix that shows line on top of table-cell */
-
-.sd-table-cell--shadow-top:before {
-  bottom: -1px;
-}
-
-.sd-table-cell--shadow-bottom:after {
-  bottom: -10px;
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
-/* fix that shows line on top of table-cell */
-
-.sd-table-cell--shadow-bottom:before {
-  top: -1px;
-}
-
-.sd-table-cell--shadow-left:after {
-  left: -10px;
-  background-image: linear-gradient(to left, var(--tw-gradient-stops));
-}
-
-.sd-table-cell--shadow-right:after {
-  right: -10px;
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-
-.sd-table-cell--bg-white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
-.sd-table-cell--bg-primary-100 {
-  
-  background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-}
-
-.sd-table-cell--bg-neutral-100 {
-  
-  background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-}
-
-/**
- * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-table
- * @status stable
- * @since 1.13
- */
-
-/*
-* Remove inherited styles from table before applying our styles.
-*/
-
-.sd-table,
-.sd-prose table {
-  all: unset;
-  display: table;
-  border-collapse: collapse;
-  --tw-border-spacing-x: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  --tw-border-spacing-y: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-}
-
-.sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
-  position: relative;
-}
-
-/* plop:style */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@import url('./display.css');
+@import url('./headline.css');
+@import url('./interactive.css');
+@import url('./leadtext.css');
+@import url('./list.css');
+@import url('./paragraph.css');
+@import url('./media.css');
+@import url('./table-cell.css');
+@import url('./table.css');
+@layer properties;
 .sd-prose {
-  /* Optimize for reading. */
   max-width: 80ch;
   text-align: left;
 }
-
-/* Add default spacings */
-
 .sd-prose > *:not(:first-child) {
-  margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
-/* First element has no margin-top */
-
+    margin-top: var(--sd-spacing-4);
+  }
 .sd-prose > *:first-child {
-  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-/* headings after a heading have a smaller margin-top */
-
+    margin-top: calc(var(--sd-spacing-1) * 0);
+  }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
-    /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
-    margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
+    margin-top: var(--sd-spacing-2);
   }
-
-/* Headlines after other non-headlines have a larger margin-top */
-
 .sd-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
-  margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-/* Images and figures lead to a bigger margin-top for the next element */
-
-.sd-prose > figure + *:not(#_),
-  .sd-prose > img + *:not(#_) {
-  margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
-}
-
-/* Add styles for elements that are not based on existing CSS styles */
-
+    margin-top: var(--sd-spacing-8);
+  }
+.sd-prose > figure + *:not(#_), .sd-prose > img + *:not(#_) {
+    margin-top: var(--sd-spacing-6);
+  }
 .sd-prose hr {
-  height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  border-top-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
-}
-
+    height: calc(var(--sd-spacing-1) * 0);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--sd-color-border-neutral-500, var(--sd-color-neutral-500));
+  }
 .sd-prose pre {
-  overflow: auto;
-}
-
-.sd-prose blockquote,
-    .sd-prose blockquote > * {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-}
-
+    overflow: auto;
+  }
+.sd-prose blockquote, .sd-prose blockquote > * {
+      font-size: var(--sd-text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+    }
 .sd-prose blockquote:has(*) *:first-child::before, .sd-prose blockquote:not(:has(*))::before {
         content: open-quote;
         display: inline;
       }
-
 .sd-prose blockquote:has(*) *:first-child::after, .sd-prose blockquote:not(:has(*))::after {
         content: close-quote;
         display: inline;
       }
-
-/* Fixes for other elements */
-
 .sd-prose > :is(ul, ol):not(#_) {
-    /* ul and ol have padding that has to be reset */
-    padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    padding-block: calc(var(--sd-spacing-1) * 0);
   }
-
-/* Inverted styles */
-
 .sd-prose--inverted hr {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
-}
-
+      border-color: var(--sd-color-border-white, var(--sd-color-white));
+    }
 .sd-prose--inverted pre {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/* Full width styles */
-
+      color: var(--sd-color-text-white, var(--sd-color-white));
+    }
 .sd-prose--full-width {
     max-width: unset;
   }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}