@solid-design-system/styles 1.0.0-next.1

package/dist/modules/prose.css

@@ -0,0 +1,852 @@
+/**
+ * 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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.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-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted 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-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted 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-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) {
+  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  text-align: left;
+}
+
+.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) ol,
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul) ol,
+  .sd-prose > :is(ol, ul) ul {
+  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
+}
+
+/* Counter handling for ordered lists. */
+
+.sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
+      counter-increment: item;
+    }
+
+.sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
+        content: counters(item, '.') '. ';
+      }
+
+/* Add second level */
+
+.sd-list:not(.sd-list--icon):is(ol),
+  .sd-list:not(.sd-list--icon):is(ol) > li > ol,
+  .sd-list:not(.sd-list--icon) ol > li > ol,
+  .sd-prose > :is(ol, ul):is(ol),
+  .sd-prose > :is(ol, ul):is(ol) > li > ol,
+  .sd-prose > :is(ol, ul) ol > li > ol {
+    counter-reset: item;
+  }
+
+/* Ordered lists inside unordered lists. */
+
+.sd-list:not(.sd-list--icon):is(ul) > li > ol,
+  .sd-list:not(.sd-list--icon) ul > li > ol,
+  .sd-prose > :is(ol, ul):is(ul) > li > ol,
+  .sd-prose > :is(ol, ul) ul > li > ol {
+    counter-set: item 0;
+  }
+
+/* Styling */
+
+.sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
+  display: table;
+}
+
+.sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
+  display: table-cell;
+  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+}
+
+.sd-list:not(.sd-list--icon):is(ul),
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul):is(ul),
+  .sd-prose > :is(ol, ul) ul {
+    list-style-type: '';
+  }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
+      content: '\2022';
+    }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
+        content: '\002B1D';
+      }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
+          content: '\2010';
+        }
+
+.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 */;
+}
+
+.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 */
+
+.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 */
+
+.sd-prose > *:first-child {
+  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+}
+
+/* headings after a heading have a smaller margin-top */
+
+.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 */;
+  }
+
+/* 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 */
+
+.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 */;
+}
+
+.sd-prose pre {
+  overflow: auto;
+}
+
+.sd-prose blockquote,
+    .sd-prose blockquote > * {
+  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
+}
+
+.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) */;
+  }
+
+/* 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 */;
+}
+
+.sd-prose--inverted pre {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+/* Full width styles */
+
+.sd-prose--full-width {
+    max-width: unset;
+  }