.note,
.tip,
.warning,
.caution {
  border-left: solid 1px;
  border-radius: 0 4px 4px 0;
  padding: 1rem 2rem;
  margin: 1rem 0;
  box-sizing: border-box;
  max-width: 640px;
}
.note::before,
.tip::before,
.warning::before,
.caution::before {
  display: block;
  margin-bottom: 1rem;
  font-weight: 700;
}
.note {
  border-left-color: var(--theme-foreground-fainter);
  background-color: var(--theme-background-alt);
}
.note::before {
  content: "Note";
  color: var(--theme-foreground-muted);
}
.tip {
  border-left-color: var(--theme-green);
  background-color: color-mix(in srgb, var(--theme-green), var(--theme-background) 90%);
}
.tip::before {
  content: "Tip";
  color: var(--theme-green);
}
.warning {
  border-left-color: var(--theme-yellow);
  background-color: color-mix(in srgb, var(--theme-yellow), var(--theme-background) 90%);
}
.warning::before {
  content: "Warning";
  color: var(--theme-yellow);
}
.caution {
  border-left-color: var(--theme-red);
  background-color: color-mix(in srgb, var(--theme-red), var(--theme-background) 90%);
}
.caution::before {
  content: "Caution";
  color: var(--theme-red);
}
.note[label]::before,
.tip[label]::before,
.warning[label]::before,
.caution[label]::before {
  content: attr(label);
}
.note > :first-child,
.tip > :first-child,
.warning > :first-child,
.caution > :first-child {
  margin-top: 0;
}
.note > :last-child,
.tip > :last-child,
.warning > :last-child,
.caution > :last-child {
  margin-bottom: 0;
}