body {
  --callout-padding: var(--size-4-3) var(--size-4-3);
  --callout-radius: var(--radius-m);

  --callout-blend-mode: unset;

  --callout-title-padding: 0;
  --callout-title-weight: calc(var(--font-weight) + var(--semibold-modifier));
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --embed-block-shadow-hover: 0;

  .callout {
    background-color: color-mix(in srgb, var(--callout-color) 20%, transparent);
    border: 1px solid;
    border-color: color-mix(in srgb, var(--callout-color) 60%, transparent);
    // box-shadow: rgb(from var(--callout-color) r g b / 1) inset 0 2px 24px -16px;

    color: var(--callout-color);
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);

    .callout-title {
      gap: var(--size-2-3);
      letter-spacing: 0.02em;
      color: var(--callout-title-color);
    }

    .callout-content p {
      color: var(--callout-content);
      margin: 0;
      line-height: var(--line-height-tight);
    }
  }
}

body {
  // DEFAULT
  --callout-default: var(--blue-300);
  --callout-title-color: var(--blue-400);
  --callout-content: var(--blue-600);
}

body {
  // DEFAULT
  --callout-default: var(--blue-300);

  .callout[data-callout="default"] {
    --callout-title-color: var(--blue-400);
    --callout-content: var(--blue-600);
  }
}

body {
  // ABSTRACT // TLDR // SUMMARY
  --callout-summary: var(--gray-300);

  .callout[data-callout="summary"],
  .callout[data-callout="tldr"],
  .callout[data-callout="abstract"] {
    --callout-title-color: var(--gray-500);
    --callout-content: var(--gray-700);
  }
}

body {
  // INFO
  --callout-info: var(--gray-400);
  .callout[data-callout="info"] {
    --callout-title-color: var(--gray-900);
    --callout-content: var(--gray-600);
  }
}

body {
  // TODO
  --callout-todo: var(--blue-300);
  .callout[data-callout="todo"] {
    --callout-title-color: var(--blue-500);
    --callout-content: var(--blue-700);
  }
}

body {
  // TIP, HINT
  --callout-tip: var(--sea-green-300);
  .callout[data-callout="tip"],
  .callout[data-callout="hint"] {
    --callout-title-color: var(--sea-green-500);
    --callout-content: var(--sea-green-700);
  }
}

body {
  // IMPORTANT
  --callout-important: var(--orange-300);
  .callout[data-callout="important"] {
    --callout-title-color: var(--orange-400);
    --callout-content: var(--orange-700);
  }
}

body {
  // SUCCESS, CHECK, DONE
  --callout-success: var(--green-300);
  .callout[data-callout="success"],
  .callout[data-callout="check"],
  .callout[data-callout="done"] {
    --callout-title-color: var(--green-500);
    --callout-content: var(--green-700);
  }
}

body {
  // QUESTION, FAQ, HELP
  --callout-question: var(--orange-300);
  .callout[data-callout="question"],
  .callout[data-callout="help"],
  .callout[data-callout="faq"] {
    --callout-title-color: var(--orange-400);
    --callout-content: var(--orange-700);
  }
}

body {
  // WARNING, ATTENTION, CAUTION
  --callout-warning: var(--orange-300);
  .callout[data-callout="warning"],
  .callout[data-callout="attention"],
  .callout[data-callout="caution"] {
    --callout-title-color: var(--orange-500);
    --callout-content: var(--orange-700);
  }
}

body {
  // FAILURE, FAIL, MISSING
  --callout-fail: var(--red-300);

  .callout[data-callout="fail"],
  .callout[data-callout="failure"],
  .callout[data-callout="missing"] {
    --callout-title-color: var(--red-400);
    --callout-content: var(--red-600);
  }
}

body {
  // ERROR, DANGER
  --callout-error: var(--red-300);

  .callout[data-callout="error"],
  .callout[data-callout="danger"] {
    --callout-title-color: var(--red-400);
    --callout-content: var(--red-600);
  }
}
body {
  // BUG
  --callout-bug: var(--red-300);

  .callout[data-callout="bug"] {
    --callout-title-color: var(--red-400);
    --callout-content: var(--red-700);
  }
}

body {
  // EXAMPLE
  --callout-example: var(--yellow-300);

  .callout[data-callout="example"] {
    --callout-title-color: var(--yellow-400);
    --callout-content: var(--yellow-800);
  }
}

body {
  // QUOTE, CITE
  --callout-quote: var(--gray-300);

  .callout[data-callout="quote"],
  .callout[data-callout="cite"] {
    --callout-title-color: var(--gray-500);
    --callout-content: var(--gray-700);
  }
}

// .callout-content p {
//   margin-top: 6px !important;
//   margin-bottom: 2px !important;
// }

// .callout {
//   border-radius: 12px;
// }
// /*
// .list-view-ul:before {
//   content: '';
//   margin-top: -8px !important;
//   background-color: red !important;
// } */

// .empty_small {
//   height: 8px;
// }
