kompendium/dist/collection/components/markdown/markdown.css

Documentation generator for Stencil components

/* 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;
}