body {
    --callout-screen-font: "ProFont", "Chakra Petch", "Courier New", Courier, monospace;
    --callout-screen-color-light-rgb: 33, 162, 58;
    --callout-screen-color-dark-rgb: 68, 207, 110;
}

.theme-light .callout[data-callout="screen"] {
    --callout-color: var(--callout-screen-color-light-rgb);
}
.theme-dark .callout[data-callout="screen"] {
    --callout-color: var(--callout-screen-color-dark-rgb);
}

.callout[data-callout="screen"] {
    --callout-icon: lucide-monitor;
    --callout-title-size: 1.3em;
    --callout-border-width: 1px;

    --list-marker-color: rgb(var(--callout-color));
    --list-marker-color-collapsed: color-mix(in srgb, rgb(var(--callout-color)), rgb(var(--mono-rgb-0)) 40%);
    --collapse-icon-color: rgb(var(--callout-color));
    --collapse-icon-color-collapsed: var(--list-marker-color-collapsed);
    --background-modifier-active-hover: color-mix(in srgb, var(--list-marker-color-collapsed), transparent 95%);
    --indentation-guide-color: rgba(var(--callout-color), 0.2);
    --image-shadow-offset: 0;

    color: rgb(var(--callout-color));

    &:not([data-callout-metadata~="default-font"]) {
        font-family: var(--callout-screen-font);
    }

    &,
    .callout-title {
        background: none;
    }
    .callout-fold {
        padding-inline-end: 0;
    }

    .callout-title {
        display: grid;
        width: 100%;
        grid-template-columns: var(--icon-size) 1fr var(--icon-size);
        text-align: center;
    }

    &:not(.is-collapsed) {
        text-shadow: 0 0 3px rgba(var(--callout-color), 0.5);
    }

    .image-embed {
        display: inline-block;
        border: var(--callout-border-width) solid rgb(var(--callout-color));
    }
}
