@forward "../../shared/workleaves";



.callout[data-callout="caption"] {
    --p-spacing: 0;
    border: none;
    background: none;

    display: flex;
    flex-direction: column-reverse;

    .callout-title {
        font-size: 0.8em;
        width: fit-content;
        margin-inline-end: auto;
        font-style: italic;
        border-bottom: 1px dashed rgb(var(--callout-color));
        background-color: color-mix(in srgb, var(--workleaves-background), rgb(var(--callout-color)) 20%);
        inset-block-start: calc(-1 * var(--image-shadow-offset, 0px));
        padding-inline-start: 0.4em;
        padding-inline-end: 1.5em;
        padding-block: 0.2em;
        margin-top: 0;
        position: relative;
        z-index: 2;
        border-left: 1px solid rgb(var(--callout-color));
    }

    .callout-icon {
        display: none;
    }

    .callout-fold {
        order: -1;
        padding-inline-end: 0;
    }

    .callout-content {
        padding: 0;
        border: none;
        border-left: 1px solid rgb(var(--callout-color));
        overflow: hidden;
    }
}

.callout[data-callout="caption"].is-collapsed {
    .callout-title {
        inset-block-start: unset;
    }
}

.callout[data-callout="caption"][data-callout-metadata~="accent"] {
    .callout-title {
        border-bottom: 1px dashed var(--color-accent);
        background-color: color-mix(in srgb, var(--workleaves-background), var(--color-accent) 20%);
        border-left: 1px solid var(--color-accent);
    }

    .callout-content {
        border-left: 1px solid var(--color-accent);
    }
}