My Custom Callout

.callout[data-callout="teal"] {
    --callout-color: 0, 121, 107;
    --callout-icon: none;
}
.callout[data-callout="brown"] {
    --callout-color: 121, 85, 72;
    --callout-icon: none;
}
.callout[data-callout="cyan"] {
    --callout-color: 0, 151, 167;
    --callout-icon: none;
}
.callout[data-callout="yellow"] {
    --callout-color: 251, 192, 45;
    --callout-icon: none;
}
.callout[data-callout="pink"] {
    --callout-color: 194, 24, 91;
    --callout-icon: none;
}
.callout[data-callout="grey"] {
    --callout-color: 69, 90, 100;
    --callout-icon: none;
}

.callout[data-callout="meditation"] {
    --callout-color: 0, 151, 167;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="800" width="800" viewBox="0 0 297 297" xmlns:v="https://vecta.io/nano"><path d="M148.5 102.433c26.485 0 48.861-23.244 48.861-50.758 0-26.335-21.463-46.965-48.861-46.965S99.639 25.34 99.639 51.675c0 27.514 22.376 50.758 48.861 50.758zm0-78.561c16.932 0 29.7 11.953 29.7 27.803 0 16.832-13.879 31.597-29.7 31.597s-29.7-14.765-29.7-31.597c0-15.85 12.768-27.803 29.7-27.803zM258.471 292.29c21.245 0 38.529-17.285 38.529-38.53 0-8.813-3.577-16.887-8.459-24.073-8.187-12.05-45.416-78.962-64.361-99.691-16.204-17.729-54.01-25.703-75.68-25.703s-59.476 7.974-75.68 25.703c-18.945 20.729-56.174 87.641-64.361 99.691C3.577 236.872 0 244.946 0 253.759c0 21.246 17.285 38.53 38.529 38.53h219.942zm-48.436-149.369c11.928 13.051 33.381 47.863 47.895 72.316-1.41.02-2.824.114-4.238.29l-25.307 3.163-26.447-47.963a8.15 8.15 0 0 0-9.161-3.954c-3.598.926-6.113 4.171-6.113 7.886v49.246l-18.475 2.309-57.85-4.954v-4.369l84.865-83.546c6.23 2.719 11.502 5.934 14.831 9.576zm.949 77.945l-8.035 1.004v-15.576l8.035 14.572zm-116.934-1l-7.146-.612 7.146-12.96v13.572zm-7.085-76.945c11.024-12.062 43.27-19.468 61.535-19.468 8.626 0 20.37 1.654 31.525 4.668l-69.687 68.604V174.66c0-3.715-2.515-6.96-6.113-7.886a8.15 8.15 0 0 0-9.161 3.954l-25.919 47.005-26.035-2.23a38.63 38.63 0 0 0-4.038-.269c14.511-24.45 35.961-59.258 47.893-72.313zm-63.057 98.434c3.109-3.651 11.279-7.072 15.967-6.872 31.868 1.359 127.124 10.862 127.124 10.862l6.081 27.783H38.529c-10.68 0-19.368-8.689-19.368-19.369 0-3.732 2.419-9.669 4.747-12.404zm249.195.018c2.316 2.726 4.736 8.669 4.736 12.386 0 10.68-8.688 19.369-19.368 19.369h-65.777l-6.532-29.849 69.906-8.738c5.587-.697 13.386 2.538 17.035 6.832z"/></svg>';
}
.callout[data-callout="reading"] {
    --callout-color: 55, 193, 7;
    --callout-icon: book;
}
.callout[data-callout="writing"] {
    --callout-color: 186, 104, 200;
    --callout-icon: pen-tool;
}
.callout[data-callout="gaming"] {
    --callout-color: 251, 192, 45;
    --callout-icon: gamepad-2;
}
.callout[data-callout="watching"] {
    --callout-color: 240, 98, 146;
    --callout-icon: video;
}
.callout[data-callout="dreaming"] {
    --callout-color: 77, 182, 172;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M32 32c17.7 0 32 14.3 32 32V320H288V160c0-17.7 14.3-32 32-32H544c53 0 96 43 96 96V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V416H352 320 64v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V64C0 46.3 14.3 32 32 32zM176 288c-44.2 0-80-35.8-80-80s35.8-80 80-80s80 35.8 80 80s-35.8 80-80 80z"/></svg>';
}
.callout[data-callout="food"] {
    --callout-color: 244, 67, 54;
    --callout-icon: utensils-crossed;
}
.callout[data-callout="goals"] {
    --callout-color: 255, 152, 0;
    --callout-icon: mountain;
}
.callout[data-callout="exercises"] {
    --callout-color: 2, 136, 209;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.5 6.5 11 11"></path><path d="m21 21-1-1"></path><path d="m3 3 1 1"></path><path d="m18 22 4-4"></path><path d="m2 6 4-4"></path><path d="m3 10 7-7"></path><path d="m14 21 7-7"></path></svg>';
}
.callout[data-callout="spends"] {
    --callout-color: 77, 182, 172;
    --callout-icon: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203.86 300"><defs><style>.cls-1{fill:#010202;}</style></defs><title>Rupee</title><g id="Group_21638" data-name="Group 21638"><path id="Path_26915" data-name="Path 26915" class="cls-1" d="M135.76,28.35H185L203.86,0h-185L0,28.35H32.1c32.5,0,62.5,2.5,74.51,29.7H19L.15,86.39h110c0,20.4-16.9,51.65-72.8,51.65h-27v26.5L118.74,300H167L54.85,160c46.15-2.5,89.46-28.31,95.7-73.56H185L203.86,58.1h-53.8a62.85,62.85,0,0,0-14.3-29.75Z"/></g></svg>';
}
.callout[data-callout="podcast"] {
    --callout-color: 124, 179, 66;
    --callout-icon: podcast;
}