.note {
  --color: var(--color-note);
  --label: var(--label-note);
}

.warning {
  --color: var(--color-warning);
  --label: var(--label-warning);
}

.caution {
  --color: var(--color-caution);
  --label: var(--label-caution);
}

:is(.note, .warning, .caution) {
  > h1 {
    background-color: var(--color);
    color: var(--color-bg);
    &:empty::before { content: var(--label); }
  }
}