:root {
  --md-list-callouts-bg-intensity-light: 0.15;
  --md-list-callouts-bg-intensity-dark: 0.15;
  --md-list-callouts-content-padding-left: 1.2rem;
  --md-list-callouts-symbol-width: 1.25rem;
  --md-list-callouts-border-radius: 0.2rem;
}

.list-callouts {
  padding-left: var(--md-list-callouts-content-padding-left);
  border-radius: var(--md-list-callouts-border-radius);
  position: relative;
  white-space: normal;
  overflow-wrap: break-word;
}

.list-callouts::before {
  font-family: var(--md-code-font);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--md-list-callouts-symbol-width);
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}


/* & */
.list-callouts-highlight {
  background-color: rgba(246, 217, 67, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-highlight::before {
  content: "&";
  color: rgb(246, 217, 67);
}


/* ? */
.list-callouts-question {
  background-color: rgba(240, 151, 48, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-question::before {
  content: "?";
  color: rgb(240, 151, 48);
}


/* ! */
.list-callouts-warning {
  background-color: rgba(235, 56, 72, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-warning::before {
  content: "!";
  color: rgb(235, 56, 72);
}


/* ~ */
.list-callouts-bookmark {
  background-color: rgba(125, 73, 247, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-bookmark::before {
  content: "~";
  color: rgb(125, 73, 247);
}


/* @ */
.list-callouts-tip {
  background-color: rgba(84, 181, 209, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-tip::before {
  content: "@";
  color: rgb(84, 181, 209);
}


/* $ */
.list-callouts-success {
  background-color: rgba(83, 198, 96, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-success::before {
  content: "$";
  color: rgb(83, 198, 96);
}


/* % */
.list-callouts-quote {
  background-color: rgba(158, 158, 158, calc(var(--md-list-callouts-bg-intensity-light) * 100%));
}

.list-callouts-quote::before {
  content: "%";
  color: rgb(158, 158, 158);
}