@forward "../../shared/shadow-color";

body {
    --polaroid-angle: 2deg;
    --polaroid-img-size: 200px;
    --polaroid-font: "Walter Turncoat", cursive;
}

.callout[data-callout="polaroid"] {
    --callout-color: 255, 255, 255;
    --callout-blend-mode: normal;
    --callout-border-width: 0;
    --image-shadow-offset: 0;
    --p-spacing: 0;

    --callout-padding: var(--size-4-3);
    --callout-title-padding: var(--size-4-3);
    --callout-content-padding: 0;

    --text-normal: black;

    display: flex;
    flex-direction: column-reverse;
    width: fit-content;
    background: rgb(var(--callout-color));
    box-shadow: 5px 7px 4px var(--shadow-color);
    margin-inline: auto;

    .callout-title {
        color: var(--text-normal);
        background: none;
        justify-content: center;
    }

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

    .callout-content {
        position: relative;
    }

    .callout-content::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .callout-icon {
        display: none;
    }

    img {
        width: var(--polaroid-img-size);
        height: var(--polaroid-img-size);
        object-fit: cover;
    }
}

.callout[data-callout="polaroid"]:is([data-callout-metadata~="right"], [data-callout-metadata~="float-right"]) {
    margin-left: var(--size-4-4);
    transform: rotate(calc(-1 * var(--polaroid-angle)));
}

.callout[data-callout="polaroid"]:is([data-callout-metadata~="left"], [data-callout-metadata~="float-left"]) {
    margin-right: var(--size-4-4);
    transform: rotate(var(--polaroid-angle));
}

@media print {
    .callout[data-callout="polaroid"] {
        border: 1px solid lightgray;
    }
}
