:root {
  --callout-border-width: 1px;
  --callout-border-opacity: 0.25;
  --callout-padding: 1rem 2rem;
  --callout-radius: 4px;
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-bug: 43, 149, 171;
  --callout-default: 43, 149, 171;
  --callout-error: 43, 149, 171;
  --callout-example: 43, 149, 171;
  --callout-fail: 43, 149, 171;
  --callout-important: 255, 145, 0;
  --callout-info: 43, 149, 171;
  --callout-question: 43, 149, 171;
  --callout-success: 43, 149, 171;
  --callout-summary: 43, 149, 171;
  --callout-tip: 43, 149, 171;
  --callout-todo: 43, 149, 171;
  --callout-warning: 255, 145, 0;
  --callout-quote: 43, 149, 171;
  --callout-see: 86, 86, 86;
}

.callout {
  --callout-color: var(--callout-default);
}

.callout-abstract, .callout-summary, .callout-tldr {
  --callout-color: var(--callout-summary);
}

.callout-info {
  --callout-color: var(--callout-info);
}

.callout-todo {
  --callout-color: var(--callout-todo);
}

.callout-important {
  --callout-color: var(--callout-important);
}

.callout-tip, .callout-hint {
  --callout-color: var(--callout-tip);
}

.callout-success, .callout-check, .callout-done {
  --callout-color: var(--callout-success);
}

.callout-question, .callout-help, .callout-faq {
  --callout-color: var(--callout-question);
}

.callout-warning, .callout-caution, .callout-attention {
  --callout-color: var(--callout-warning);
}

.callout-failure, .callout-fail, .callout-missing {
  --callout-color: var(--callout-fail);
}

.callout-danger, .callout-error {
  --callout-color: var(--callout-error);
}

.callout-bug {
  --callout-color: var(--callout-bug);
}

.callout-example {
  --callout-color: var(--callout-example);
}

.callout-quote, .callout-cite {
  --callout-color: var(--callout-quote);
}

.callout-see {
  --callout-color: var(--callout-see);
}

.callout {
  overflow: hidden;
  font: inherit;
  font-style: normal;
  border-style: solid;
  border-color: rgba(var(--callout-color), var(--callout-border-opacity));
  border-width: var(--callout-border-width);
  border-radius: var(--callout-radius);
  margin: 1em 0;
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-padding); 
  position: relative;
}

.callout a {
  color: rgba(var(--callout-color), 0.9) !important;
  text-decoration: underline !important;
}

.callout p,
.callout ol,
.callout ul {
  margin: 0 !important;
  margin-top: 1em !important;
}

.callout.is-collapsible .callout-title {
  cursor: var(--cursor);
}

.callout-title {
  padding: var(--callout-title-padding);
  display: flex;
  gap: var(--size-4-1);
  font-size: var(--callout-title-size);
  color: rgb(var(--callout-color));
  line-height: var(--line-height-tight);
  align-items: flex-start;
  font-weight: 600;
}

.callout-content {
  overflow-x: auto;
  padding: var(--callout-content-padding);
  background-color: var(--callout-content-background);
}

.callout-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.callout-icon .svg-icon {
  color: rgb(var(--callout-color));
}

.callout-icon::after {
  content: "\200B";
}

.callout-title-inner {
  font-weight: bold;
  color: var(--callout-title-color);
}

.callout-fold {
  display: flex;
  align-items: center;
  padding-right: var(--size-4-2);
}

.callout-fold::after {
  content: "\200B";
}

.callout-fold .svg-icon {
  transition: transform 100ms ease-in-out;
}

.callout-fold.is-collapsed .svg-icon {
  transform: rotate(-90deg);
}