@limetech/kompendium 1.1.1

package/dist/collection/components/markdown/markdown.css

@@ -0,0 +1,660 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+}
+
+/* Natural flow and rhythm in articles by default */
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+p,
+a,
+li {
+  font-size: 0.9375rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 2.25rem;
+  margin-top: 1.5rem;
+  letter-spacing: -0.0625rem;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 1.625rem;
+  line-height: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  font-size: 1.375rem;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  margin-top: 1rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+  line-height: 1.125rem;
+  margin-top: 0.75rem;
+}
+
+h6 {
+  font-size: 1rem;
+  font-variant: all-small-caps;
+  letter-spacing: 0.0625rem;
+}
+
+p,
+blockquote {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+p:only-child,
+blockquote:only-child {
+  margin-bottom: 0;
+}
+
+a {
+  transition: color 0.2s ease;
+  color: rgb(var(--kompendium-color-blue-default));
+  text-decoration: none;
+  border-radius: 0.125rem;
+}
+a:hover {
+  color: rgb(var(--kompendium-color-blue-light));
+}
+a:focus {
+  outline: none;
+}
+a:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+
+ul {
+  list-style: none;
+}
+ul li {
+  position: relative;
+  margin-left: 0.75rem;
+}
+ul li:before {
+  content: "";
+  position: absolute;
+  left: -0.5rem;
+  top: 0.625rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: rgb(var(--kompendium-contrast-700));
+  display: block;
+}
+
+ol {
+  list-style: decimal inside;
+}
+
+ol,
+ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 0.9375rem 0 0.9375rem 1.875rem;
+  font-size: 90%;
+}
+
+li {
+  margin-bottom: 0.625rem;
+}
+
+th,
+td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid rgb(var(--kompendium-contrast-600));
+}
+
+th:first-child,
+td:first-child {
+  padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+  padding-right: 0;
+}
+
+hr {
+  margin: 1.75rem 0 2rem 0;
+  border-width: 0;
+  border-top: 1px solid rgb(var(--kompendium-contrast-600));
+}
+
+kbd {
+  font-family: var(--kompendium-font-code);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(var(--kompendium-contrast-1000));
+  background-color: rgb(var(--kompendium-contrast-200));
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: normal;
+  padding: 0.125rem 0.5rem;
+  margin: 0 0.25rem;
+  box-shadow: var(--kompendium-button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--kompendium-contrast-100), 0.5) inset;
+  border-radius: 0.25rem;
+  border-style: solid;
+  border-color: rgba(var(--kompendium-contrast-600), 0.8);
+  border-width: 0 1px 0.125rem 1px;
+}
+@media (prefers-color-scheme: dark) {
+  kbd:not([data-theme=force-light]) {
+    background-color: rgb(var(--kompendium-contrast-200));
+    color: rgb(var(--kompendium-contrast-1100));
+    border-color: rgba(var(--kompendium-contrast-500), 0.8);
+  }
+}
+kbd[data-theme=force-dark] {
+  background-color: rgb(var(--kompendium-contrast-200));
+  color: rgb(var(--kompendium-contrast-1100));
+  border-color: rgba(var(--kompendium-contrast-500), 0.8);
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme=force-light])) kbd {
+    background-color: rgb(var(--kompendium-contrast-200));
+    color: rgb(var(--kompendium-contrast-1100));
+    border-color: rgba(var(--kompendium-contrast-500), 0.8);
+  }
+}
+:host([data-theme=force-dark]) kbd {
+  background-color: rgb(var(--kompendium-contrast-200));
+  color: rgb(var(--kompendium-contrast-1100));
+  border-color: rgba(var(--kompendium-contrast-500), 0.8);
+}
+
+:host {
+  display: block;
+}
+
+pre,
+code {
+  font-family: var(--kompendium-font-code);
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+}
+pre a,
+code a {
+  font-size: 0.6875rem;
+}
+
+code {
+  background: rgba(var(--kompendium-contrast-1100), 0.05);
+  border: 1px solid rgba(var(--kompendium-contrast-1100), 0.1);
+  padding: 0.125rem 0.3125rem;
+  margin: 0 0.125rem;
+  white-space: pre-wrap;
+  color: rgb(var(--kompendium-contrast-1100));
+}
+
+pre > code {
+  display: block;
+  padding: 0.625rem 0.6375rem;
+  white-space: pre-wrap;
+}
+
+.value--false code {
+  color: rgb(var(--kompendium-color-code-magenta));
+  border-color: rgba(var(--kompendium-color-code-magenta), 0.2);
+  background-color: rgba(var(--kompendium-color-code-magenta), 0.1);
+}
+
+.value--true code {
+  color: rgb(var(--kompendium-color-code-green-dark));
+  border-color: rgba(var(--kompendium-color-code-green-dark), 0.2);
+  background-color: rgba(var(--kompendium-color-code-green-dark), 0.1);
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 1fr;
+  margin-bottom: 2rem;
+  border: 1px solid rgb(var(--kompendium-contrast-500));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--kompendium-contrast-300));
+}
+dl dt,
+dl dd {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+dl dt:nth-of-type(even),
+dl dd:nth-of-type(even) {
+  background-color: rgb(var(--kompendium-contrast-400));
+}
+dl dt:first-child {
+  border-top-left-radius: 0.375rem;
+}
+dl dt:last-child {
+  border-bottom-left-radius: 0.375rem;
+}
+dl dd:first-child {
+  border-top-right-radius: 0.375rem;
+}
+dl dd:last-child {
+  border-bottom-right-radius: 0.375rem;
+}
+
+dl,
+dt,
+dd {
+  transition: background-color 0.3s ease 0.05s, border-color 0.3s ease 0.05s;
+}
+
+:root[data-theme=system-default] {
+  color-scheme: dark light;
+}
+
+:root[data-theme=force-light] {
+  color-scheme: light;
+}
+
+:root[data-theme=force-dark] {
+  color-scheme: dark;
+}
+
+:root {
+  --kompendium-color-primary: 33, 150, 243;
+  --kompendium-color-error: 229, 115, 115;
+  --kompendium-color-white: 255, 255, 255;
+  --kompendium-color-black: 0, 0, 0;
+  --kompendium-contrast-100: 255, 255, 255;
+  --kompendium-contrast-200: 250, 250, 251;
+  --kompendium-contrast-300: 246, 246, 247;
+  --kompendium-contrast-400: 241, 241, 243;
+  --kompendium-contrast-500: 237, 237, 238;
+  --kompendium-contrast-600: 232, 232, 234;
+  --kompendium-contrast-700: 209, 209, 213;
+  --kompendium-contrast-800: 186, 186, 192;
+  --kompendium-contrast-900: 140, 140, 150;
+  --kompendium-contrast-1000: 117, 117, 128;
+  --kompendium-contrast-1100: 94, 94, 108;
+  --kompendium-contrast-1200: 71, 71, 86;
+  --kompendium-contrast-1300: 48, 48, 66;
+  --kompendium-contrast-1400: 39, 39, 57;
+  --kompendium-contrast-1500: 35, 35, 53;
+  --kompendium-contrast-1600: 25, 25, 44;
+  --kompendium-contrast-1700: 20, 20, 37;
+  --kompendium-color-red-light: 229, 115, 115;
+  --kompendium-color-red-default: 244, 67, 54;
+  --kompendium-color-blue-light: 100, 181, 246;
+  --kompendium-color-blue-default: 33, 150, 243;
+  --kompendium-color-green-light: 129, 199, 132;
+  --kompendium-color-green-default: 76, 175, 80;
+  --kompendium-color-amber-light: 255, 213, 79;
+  --kompendium-color-amber-default: 255, 193, 7;
+  --kompendium-color-orange-light: 255, 183, 77;
+  --kompendium-color-orange-default: 255, 152, 0;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=force-light]) {
+    --kompendium-color-primary: 30, 136, 229;
+    --kompendium-color-error: 229, 57, 53;
+    --kompendium-contrast-100: 20, 20, 37;
+    --kompendium-contrast-200: 25, 25, 44;
+    --kompendium-contrast-300: 35, 35, 53;
+    --kompendium-contrast-400: 39, 39, 57;
+    --kompendium-contrast-500: 48, 48, 66;
+    --kompendium-contrast-600: 71, 71, 86;
+    --kompendium-contrast-700: 94, 94, 108;
+    --kompendium-contrast-800: 117, 117, 128;
+    --kompendium-contrast-900: 140, 140, 150;
+    --kompendium-contrast-1000: 186, 186, 192;
+    --kompendium-contrast-1100: 209, 209, 213;
+    --kompendium-contrast-1200: 232, 232, 234;
+    --kompendium-contrast-1300: 237, 237, 238;
+    --kompendium-contrast-1400: 241, 241, 243;
+    --kompendium-contrast-1500: 246, 246, 247;
+    --kompendium-contrast-1600: 250, 250, 251;
+    --kompendium-contrast-1700: 255, 255, 255;
+    --kompendium-color-red-light: 240, 87, 80;
+    --kompendium-color-red-default: 229, 57, 53;
+    --kompendium-color-blue-light: 66, 165, 245;
+    --kompendium-color-blue-default: 30, 136, 229;
+    --kompendium-color-green-light: 102, 187, 106;
+    --kompendium-color-green-default: 67, 160, 71;
+    --kompendium-color-amber-light: 255, 207, 61;
+    --kompendium-color-amber-default: 255, 176, 59;
+    --kompendium-color-orange-light: 255, 167, 38;
+    --kompendium-color-orange-default: 251, 140, 0;
+  }
+}
+:root[data-theme=force-dark] {
+  --kompendium-color-primary: 30, 136, 229;
+  --kompendium-color-error: 229, 57, 53;
+  --kompendium-contrast-100: 20, 20, 37;
+  --kompendium-contrast-200: 25, 25, 44;
+  --kompendium-contrast-300: 35, 35, 53;
+  --kompendium-contrast-400: 39, 39, 57;
+  --kompendium-contrast-500: 48, 48, 66;
+  --kompendium-contrast-600: 71, 71, 86;
+  --kompendium-contrast-700: 94, 94, 108;
+  --kompendium-contrast-800: 117, 117, 128;
+  --kompendium-contrast-900: 140, 140, 150;
+  --kompendium-contrast-1000: 186, 186, 192;
+  --kompendium-contrast-1100: 209, 209, 213;
+  --kompendium-contrast-1200: 232, 232, 234;
+  --kompendium-contrast-1300: 237, 237, 238;
+  --kompendium-contrast-1400: 241, 241, 243;
+  --kompendium-contrast-1500: 246, 246, 247;
+  --kompendium-contrast-1600: 250, 250, 251;
+  --kompendium-contrast-1700: 255, 255, 255;
+  --kompendium-color-red-light: 240, 87, 80;
+  --kompendium-color-red-default: 229, 57, 53;
+  --kompendium-color-blue-light: 66, 165, 245;
+  --kompendium-color-blue-default: 30, 136, 229;
+  --kompendium-color-green-light: 102, 187, 106;
+  --kompendium-color-green-default: 67, 160, 71;
+  --kompendium-color-amber-light: 255, 207, 61;
+  --kompendium-color-amber-default: 255, 176, 59;
+  --kompendium-color-orange-light: 255, 167, 38;
+  --kompendium-color-orange-default: 251, 140, 0;
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme=force-light])) :root {
+    --kompendium-color-primary: 30, 136, 229;
+    --kompendium-color-error: 229, 57, 53;
+    --kompendium-contrast-100: 20, 20, 37;
+    --kompendium-contrast-200: 25, 25, 44;
+    --kompendium-contrast-300: 35, 35, 53;
+    --kompendium-contrast-400: 39, 39, 57;
+    --kompendium-contrast-500: 48, 48, 66;
+    --kompendium-contrast-600: 71, 71, 86;
+    --kompendium-contrast-700: 94, 94, 108;
+    --kompendium-contrast-800: 117, 117, 128;
+    --kompendium-contrast-900: 140, 140, 150;
+    --kompendium-contrast-1000: 186, 186, 192;
+    --kompendium-contrast-1100: 209, 209, 213;
+    --kompendium-contrast-1200: 232, 232, 234;
+    --kompendium-contrast-1300: 237, 237, 238;
+    --kompendium-contrast-1400: 241, 241, 243;
+    --kompendium-contrast-1500: 246, 246, 247;
+    --kompendium-contrast-1600: 250, 250, 251;
+    --kompendium-contrast-1700: 255, 255, 255;
+    --kompendium-color-red-light: 240, 87, 80;
+    --kompendium-color-red-default: 229, 57, 53;
+    --kompendium-color-blue-light: 66, 165, 245;
+    --kompendium-color-blue-default: 30, 136, 229;
+    --kompendium-color-green-light: 102, 187, 106;
+    --kompendium-color-green-default: 67, 160, 71;
+    --kompendium-color-amber-light: 255, 207, 61;
+    --kompendium-color-amber-default: 255, 176, 59;
+    --kompendium-color-orange-light: 255, 167, 38;
+    --kompendium-color-orange-default: 251, 140, 0;
+  }
+}
+:host([data-theme=force-dark]) :root {
+  --kompendium-color-primary: 30, 136, 229;
+  --kompendium-color-error: 229, 57, 53;
+  --kompendium-contrast-100: 20, 20, 37;
+  --kompendium-contrast-200: 25, 25, 44;
+  --kompendium-contrast-300: 35, 35, 53;
+  --kompendium-contrast-400: 39, 39, 57;
+  --kompendium-contrast-500: 48, 48, 66;
+  --kompendium-contrast-600: 71, 71, 86;
+  --kompendium-contrast-700: 94, 94, 108;
+  --kompendium-contrast-800: 117, 117, 128;
+  --kompendium-contrast-900: 140, 140, 150;
+  --kompendium-contrast-1000: 186, 186, 192;
+  --kompendium-contrast-1100: 209, 209, 213;
+  --kompendium-contrast-1200: 232, 232, 234;
+  --kompendium-contrast-1300: 237, 237, 238;
+  --kompendium-contrast-1400: 241, 241, 243;
+  --kompendium-contrast-1500: 246, 246, 247;
+  --kompendium-contrast-1600: 250, 250, 251;
+  --kompendium-contrast-1700: 255, 255, 255;
+  --kompendium-color-red-light: 240, 87, 80;
+  --kompendium-color-red-default: 229, 57, 53;
+  --kompendium-color-blue-light: 66, 165, 245;
+  --kompendium-color-blue-default: 30, 136, 229;
+  --kompendium-color-green-light: 102, 187, 106;
+  --kompendium-color-green-default: 67, 160, 71;
+  --kompendium-color-amber-light: 255, 207, 61;
+  --kompendium-color-amber-default: 255, 176, 59;
+  --kompendium-color-orange-light: 255, 167, 38;
+  --kompendium-color-orange-default: 251, 140, 0;
+}
+
+:root {
+  --kompendium-color-code-pink: 216, 27, 96; /* #d81b60 */
+  --kompendium-color-code-magenta: 156, 22, 87; /* #9c1657 */
+  --kompendium-color-code-blue: 33, 150, 243; /* #2196f3 */
+  --kompendium-color-code-orange: 245, 124, 0; /* #f57c00 */
+  --kompendium-color-code-yellow: 255, 87, 34; /* #ff5722 */
+  --kompendium-color-code-purple: 149, 117, 205; /* #9575cd */
+  --kompendium-color-code-green-light: 53, 196, 84;
+  --kompendium-color-code-green-dark: 85, 139, 47; /* #558b2f */
+  --kompendium-color-code-turquoise: 0, 151, 167; /* #0097a7 */
+  --kompendium-color-code-gray-lighter: 71, 71, 86;
+  --kompendium-color-code-gray-light: var(--kompendium-contrast-1100);
+  --kompendium-color-code-gray-dark: var(--kompendium-contrast-1200);
+  --kompendium-color-code-background: var(--kompendium-contrast-200);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=force-light]) {
+    --kompendium-color-code-pink: 226, 119, 122;
+    --kompendium-color-code-magenta: 232, 62, 140;
+    --kompendium-color-code-blue: 97, 150, 204;
+    --kompendium-color-code-orange: 255, 152, 0;
+    --kompendium-color-code-yellow: 255, 213, 79;
+    --kompendium-color-code-purple: 206, 147, 216;
+    --kompendium-color-code-green-light: 174, 213, 129;
+    --kompendium-color-code-green-dark: 53, 196, 84;
+    --kompendium-color-code-turquoise: 103, 205, 204;
+    --kompendium-color-code-gray-lighter: 117, 117, 128;
+  }
+}
+:root[data-theme=force-dark] {
+  --kompendium-color-code-pink: 226, 119, 122;
+  --kompendium-color-code-magenta: 232, 62, 140;
+  --kompendium-color-code-blue: 97, 150, 204;
+  --kompendium-color-code-orange: 255, 152, 0;
+  --kompendium-color-code-yellow: 255, 213, 79;
+  --kompendium-color-code-purple: 206, 147, 216;
+  --kompendium-color-code-green-light: 174, 213, 129;
+  --kompendium-color-code-green-dark: 53, 196, 84;
+  --kompendium-color-code-turquoise: 103, 205, 204;
+  --kompendium-color-code-gray-lighter: 117, 117, 128;
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme=force-light])) :root {
+    --kompendium-color-code-pink: 226, 119, 122;
+    --kompendium-color-code-magenta: 232, 62, 140;
+    --kompendium-color-code-blue: 97, 150, 204;
+    --kompendium-color-code-orange: 255, 152, 0;
+    --kompendium-color-code-yellow: 255, 213, 79;
+    --kompendium-color-code-purple: 206, 147, 216;
+    --kompendium-color-code-green-light: 174, 213, 129;
+    --kompendium-color-code-green-dark: 53, 196, 84;
+    --kompendium-color-code-turquoise: 103, 205, 204;
+    --kompendium-color-code-gray-lighter: 117, 117, 128;
+  }
+}
+:host([data-theme=force-dark]) :root {
+  --kompendium-color-code-pink: 226, 119, 122;
+  --kompendium-color-code-magenta: 232, 62, 140;
+  --kompendium-color-code-blue: 97, 150, 204;
+  --kompendium-color-code-orange: 255, 152, 0;
+  --kompendium-color-code-yellow: 255, 213, 79;
+  --kompendium-color-code-purple: 206, 147, 216;
+  --kompendium-color-code-green-light: 174, 213, 129;
+  --kompendium-color-code-green-dark: 53, 196, 84;
+  --kompendium-color-code-turquoise: 103, 205, 204;
+  --kompendium-color-code-gray-lighter: 117, 117, 128;
+}
+
+.admonition {
+  --size-of-admonition-icon: 2.5rem;
+  --border-radius-of-admonition-icon: 0.5rem;
+  border-radius: var(--border-radius-of-admonition-icon);
+  background-color: rgb(var(--kompendium-contrast-400));
+  margin: 0.75rem 0 1rem 0;
+  padding: 0.5rem 0.5rem 0.75rem 0.5rem;
+  position: relative;
+}
+.admonition:before {
+  content: "";
+  width: var(--size-of-admonition-icon);
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+  border-radius: var(--border-radius-of-admonition-icon) 0 0 var(--border-radius-of-admonition-icon);
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-color: #eaeaea;
+}
+.admonition-tip:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><circle cx="200" cy="200" r="140.5" fill="%23ffd54f" fill-opacity=".2"/><circle cx="200" cy="200" r="119.072" fill="%23ffd54f" fill-opacity=".3"/><circle cx="200" cy="200" r="99.5" fill="%23ffd54f"/><path fill="%23fff" fill-rule="nonzero" d="M265.384 201.1c0-38.426-33.52-69.494-72.764-64.589-28.615 3.27-52.325 26.163-57.231 54.778-3.27 21.257 4.088 41.696 17.17 55.595 9.81 9.811 14.716 22.892 14.716 36.791h65.406c0-13.081 4.906-26.98 13.899-35.973 11.446-13.082 18.804-28.616 18.804-46.602z"/><path fill="none" stroke="%23ffd54f" stroke-width="8" d="M213.2 194.58C224 188 238 196 231.751 204.881c-9.583 13.619-57.987 11.566-63.709-1.805-3.689-8.622 8.958-14.076 19.439-8.496C196.151 199.196 200.5 207 200.5 224v4"/><path fill="%23446c80" fill-rule="nonzero" d="M232.681 283.675h-65.406c0 18.532 14.171 32.703 32.703 32.703 18.532 0 32.703-14.171 32.703-32.703z"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-yellow), 0.2);
+}
+.admonition-note:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><circle cx="200" cy="200" r="119.072" fill="%2381c784" fill-opacity=".3"/><circle cx="200" cy="200" r="99.5" fill="%2381c784"/><path fill="%23fff" d="M200.011 145.221c-5.042 0-9.129 4.136-9.129 9.102v54.834a9.094 9.094 0 009.129 9.103c5.043 0 9.13-4.136 9.13-9.103v-54.834a9.093 9.093 0 00-9.13-9.102zm0 109.558a9.13 9.13 0 009.13-9.13 9.129 9.129 0 00-9.13-9.129 9.129 9.129 0 00-9.129 9.129 9.129 9.129 0 009.129 9.13z"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-green-dark), 0.1);
+}
+.admonition-warning:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><path fill="%23f44336" d="M187.167 113.32c7.091-11.474 18.606-11.446 25.681 0l87.906 142.221c9.467 15.317 2.571 27.734-15.394 27.734H114.655c-17.97 0-24.892-12.367-15.395-27.734l87.907-142.221z"/><path fill="%23fff" d="M200.011 155.052c-5.042 0-9.129 4.136-9.129 9.103v54.833a9.094 9.094 0 009.129 9.103c5.043 0 9.13-4.136 9.13-9.103v-54.833a9.093 9.093 0 00-9.13-9.103zm0 109.558a9.13 9.13 0 009.13-9.13 9.129 9.129 0 00-9.13-9.129 9.129 9.129 0 00-9.129 9.129 9.129 9.129 0 009.129 9.13z"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-pink), 0.2);
+}
+.admonition-danger:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><path fill="%23446c80" d="M100.7 233.141c-5.6-12.935-8.7-27.173-8.7-42.122C92 131.954 140.393 84 200 84s108 47.954 108 107.019c0 14.949-3.1 29.187-8.7 42.122-4.582 26.722-21.33 48.534-43.425 57.687v12.728c0 10.357-8.485 18.764-18.935 18.764-9.066 0-16.653-6.327-18.504-14.765-1.962 8.291-9.477 14.47-18.436 14.47-9.012 0-16.562-6.251-18.47-14.615-1.909 8.364-9.459 14.615-18.47 14.615-10.45 0-18.935-8.407-18.935-18.764v-12.433c-22.096-9.154-38.844-30.967-43.425-57.687z"/><path fill="%23fff" fill-opacity=".2" d="M213.322 264.164c-3.328 3.135-23.317 3.135-26.644 0-3.332-3.136-3.332-4.928 0-11.199 2.328-4.703 9.832-17.022 13.322-17.022 3.489 0 10.993 12.319 13.322 17.022 3.331 6.271 3.331 8.063 0 11.199z"/><path fill="%23fff" d="M150.179 213.14c12.03 0 21.797 9.678 21.797 21.599s-9.767 21.599-21.797 21.599c-12.03 0-21.797-9.678-21.797-21.599s9.767-21.599 21.797-21.599zm100.844 12.114l8.678-8.598c2.635-2.612 6.896-2.624 9.557.014 2.644 2.619 2.618 6.891.015 9.47l-8.678 8.599 8.678 8.599a6.637 6.637 0 01-.015 9.47c-2.643 2.619-6.954 2.594-9.557.014l-8.678-8.598-8.677 8.598c-2.635 2.612-6.896 2.624-9.558-.014-2.643-2.619-2.617-6.89-.014-9.47l8.678-8.599-8.678-8.599a6.638 6.638 0 01.014-9.47c2.644-2.619 6.954-2.594 9.558-.014l8.677 8.598z"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-gray-dark), 0.1);
+}
+.admonition-info:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><path fill="%232196f3" fill-rule="nonzero" d="M229.238 275.304c-.075.025-6.987 2.325-12.987 2.325-3.312 0-4.65-.687-5.075-.987-2.1-1.463-6-4.2.675-17.5l12.5-24.924c7.412-14.8 8.512-29.112 3.062-40.312-4.45-9.162-12.987-15.449-23.999-17.699a59.668 59.668 0 00-11.975-1.213c-23.112 0-38.674 13.5-39.324 14.075a6.262 6.262 0 00-1.275 7.825 6.244 6.244 0 007.438 2.775c.062-.025 6.987-2.338 12.987-2.338 3.287 0 4.612.688 5.025.975 2.112 1.475 6.024 4.25-.638 17.525l-12.499 24.937c-7.425 14.812-8.513 29.124-3.063 40.311 4.45 9.162 12.975 15.449 24.012 17.699 3.925.788 7.95 1.213 11.925 1.213 23.124 0 38.698-13.5 39.348-14.075 2.238-1.962 2.763-5.25 1.275-7.825-1.5-2.562-4.612-3.712-7.412-2.787zm-10.487-175.295c17.247 0 31.249 14.002 31.249 31.249s-14.002 31.249-31.249 31.249-31.249-14.002-31.249-31.249 14.002-31.249 31.249-31.249z"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-turquoise), 0.2);
+}
+.admonition-important:before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><path fill="%23ffd54f" fill-rule="nonzero" d="M254.158 293c-2.499 0-4.941-.558-7.205-1.628a9.33 9.33 0 01-1.16-.569l-45.807-26.132-45.806 26.143c-.39.223-.781.413-1.182.591-5.443 2.543-12.101 1.941-16.964-1.595-5.231-3.792-7.819-10.406-6.536-16.83l10.674-51.773c-4.172-3.793-10.73-9.76-17.868-16.251l-21.135-19.239a8.364 8.364 0 01-.87-.915c-4.183-4.416-5.677-10.818-3.792-16.64 1.929-5.845 6.915-10.172 12.937-11.254.38-.089.748-.156 1.138-.201l52.431-5.811 21.705-48.07a7.66 7.66 0 01.669-1.227A16.72 16.72 0 01199.986 93c6.057 0 11.644 3.324 14.6 8.588.234.402.457.814.669 1.249l21.727 48.093 52.431 5.811c.379.033.759.1 1.16.189 6.012 1.116 10.997 5.421 12.916 11.287 1.896 5.811.39 12.247-3.793 16.663-.267.29-.568.603-.87.87l-39.014 35.512 10.674 51.662c1.26 6.547-1.316 13.139-6.58 16.942a16.602 16.602 0 01-9.748 3.134z"/><circle cx="255.5" cy="127.5" r="14.5" fill="%23ffd54f" fill-opacity=".5"/><circle cx="144.5" cy="127.5" r="14.5" fill="%23ffd54f" fill-opacity=".5"/><circle cx="287.5" cy="229.5" r="14.5" fill="%23ffd54f" fill-opacity=".5"/><circle cx="113.5" cy="229.5" r="14.5" fill="%23ffd54f" fill-opacity=".5"/><circle cx="200" cy="297.5" r="14.5" fill="%23ffd54f" fill-opacity=".5"/></svg>');
+  background-color: rgba(var(--kompendium-color-code-gray-dark), 0.4);
+}
+
+.admonition-heading {
+  margin-bottom: 0.375rem;
+}
+.admonition-heading h5 {
+  color: rgb(var(--kompendium-contrast-1100));
+  margin: 0;
+  font-size: 0.9375rem;
+  padding: 0.125rem 0 0 var(--size-of-admonition-icon);
+}
+.admonition-heading h5::first-letter {
+  text-transform: capitalize;
+}
+
+.admonition-content {
+  padding-left: var(--size-of-admonition-icon);
+}
+.admonition-content p:first-child {
+  margin-top: 0;
+}
+.admonition-content p:only-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 600px) {
+  .admonition {
+    --size-of-admonition-icon: 2rem;
+  }
+}
+blockquote {
+  border-left-color: rgb(var(--kompendium-contrast-700));
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  color: rgb(var(--kompendium-contrast-1100));
+  padding-left: 1rem;
+}