/**
 * Mark
 * -------------------------------------------------------------------------- */
mark {
  padding: 2px;
  color: var(--vp-mark-text);
  background-color: var(--vp-mark-bg, mark);
  background-image: var(--vp-mark-bg-image);
}

mark:where([class]) {
  --vp-mark-bg: mark;
  --vp-mark-bg-image: none;

  border-radius: 3px;
}

mark:where(:not([class])) {
  --vp-mark-text: currentcolor;

  background-repeat: no-repeat;
  background-position: 0 1em;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  animation: mark-highlight 1.5s 0.5s forwards;
}

mark:where(.note, .tip, .info, .warning, .danger, .caution, .important) {
  --vp-mark-text: marktext;
  --vp-mark-bg-image: none;
}

mark:where(.note) {
  --vp-mark-bg: mark;
}

mark:where(.info) {
  --vp-mark-bg: var(--vp-c-default-1);
}

mark:where(.tip) {
  --vp-mark-bg: #3c3;
}

mark:where(.warning) {
  --vp-mark-bg: #fc0;
}

mark:where(.caution, .danger) {
  --vp-mark-bg: #f99;
}

mark:where(.important) {
  --vp-mark-bg: #ccf;
}

:not(h1,h2,h3,h4,h5,h6) mark:where(:not([class])) {
  font-weight: bold;
}

@keyframes mark-highlight {
  0% {
    background-position: 0 1em;
  }

  100% {
    background-position: 0 0;
  }
}
