/* TODO: Tech Debt: include this in the docs.css of the bundle */

:root {
  
  --color-brand-tip: #94c280;
  --color-brand-note: #209562;
  --color-brand-important: #dd403c;
  --color-brand-warning: #f1ac54;
  --color-brand-caution: #f1ac54;
  --color-brand-gray8: #e5e5e5;
  
    /* Spacing variables */
  --base-space: 1rem; /* ~ 16px */
  --base-small-space: 0.75rem; /* ~ 12px */
  --base-extra-small-space: 0.5rem; /* ~ 8px */
  --base-medium-space: 1.5rem; /* ~ 24px */
  --base-large-space: 2rem; /* ~ 32px */
  --base-extra-large-space: 2.5rem; /* ~ 40px */
  --column-space: 2.5rem; /* ~ 40px */
  --admonition-icon-space: 1rem; /* ~ 16px */
  --admonition-content-space: 1.5rem; /* ~ 16px */
  --admonition-icon-text-space: 0.1rem; /* ~ 1.6px */

}

.doc .admonitionblock {
  margin-top: var(--base-medium-space);
  margin-bottom: var(--base-medium-space);
}

.doc .tableblock .admonitionblock {
  margin-top: calc(var(--base-large-space) / 2);
}

.doc .admonitionblock > table,
.doc .admonitionblock > table > tbody,
.doc .admonitionblock > table > tbody > tr > td {
  display: block;
}

.doc .admonitionblock > table > tbody > tr {
  display: flex;
  border: 1px solid var(--color-brand-gray8);
  border-radius: 3px;
  /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); */
}

.doc .admonitionblock td.icon,
.doc .colist .admonitionblock td.icon {
  padding-top: var(--admonition-icon-space);
  padding-left: var(--admonition-icon-space);
  padding-right: var(--admonition-icon-space);
  padding-bottom: 0;
}

.doc .admonitionblock td.icon i::before {
  /*background: no-repeat 0 / cover;*/
  content: "";
  display: block;
  height: 1.35rem;
  width: 1.35rem;
  background-repeat:   no-repeat;
  background-position: center center;
}

.doc .admonitionblock td.content,
.doc .colist .admonitionblock td.content {
  font-family: "Open Sans", sans-serif;
  flex: 1;
  hyphens: auto;
  line-height: 1.6;
  min-width: 0;
  padding-top: var(--admonition-content-space);
  padding-bottom: var(--base-space);
  padding-left: 0;
  padding-right: var(--base-space);
  border-bottom: 0;
}

.doc .admonitionblock td.content > .title {
  display: inline;
  font-style: italic;
  margin-left: var(--admonition-icon-text-space);
}

.doc .admonitionblock td.content > .title::after {
  content: "";
  display: table;
}

.doc .admonitionblock.caution > table {
  background-color: transparent;
}

.doc .admonitionblock.caution td.icon i::before {
  background-image: url(../img/fire-solid.svg);
  background-size: 14px;
}


.doc .admonitionblock.caution tr {
  border-left: 4px solid var(--color-brand-caution);
}

.doc .admonitionblock.important > table {
  background-color: transparent;
}

.doc .admonitionblock.important td.icon i::before {
  background-image: url(../img/exclamation-circle-solid.svg);
  background-size: 18px;
}

.doc .admonitionblock.important tr {
  border-left: 4px solid var(--color-brand-important);
}

.doc .admonitionblock.note > table {
  background-color: transparent;
}

.doc .admonitionblock.note td.icon i::before {
  background-image: url(../img/info-circle-solid.svg);
  background-size: 18px;
}

.doc .admonitionblock.note tr {
  border-left: 4px solid var(--color-brand-note);
}

.doc .admonitionblock.tip > table {
  background-color: transparent;
}

.doc .admonitionblock.tip td.icon i::before {
  background-image: url(../img/lightbulb-solid.svg);
  background-size: 12px;
}

.doc .admonitionblock.tip tr {
  border-left: 4px solid var(--color-brand-tip);
}

.doc .admonitionblock.warning > table {
  background-color: transparent;
}

.doc .admonitionblock.warning td.icon i::before {
  background-image: url(../img/exclamation-triangle-solid.svg);
  background-size: 18px;
}

.doc .admonitionblock.warning tr {
  border-left: 4px solid var(--color-brand-warning);
}

.doc .admonitionblock td.content > :first-child {
  margin-top: 0;
}


.doc .admonitionblock .listingblock {
  padding: 0;
}

  .doc .admonitionblock td.content {
    padding-left: 0.5rem;
  }