@forward "../../shared/markdown-container";
@forward "../../shared/list-with-float";
@forward "../../shared/file-margins";
@use "../../mixins/wide";

.callout[data-callout-metadata~="gray"] {
    --callout-color: var(--color-gray-rgb);
}
.callout[data-callout-metadata~="brown"] {
    --callout-color: var(--color-brown-rgb);
}
.callout[data-callout-metadata~="red"] {
    --callout-color: var(--color-red-rgb);
}
.callout[data-callout-metadata~="orange"] {
    --callout-color: var(--color-orange-rgb);
}
.callout[data-callout-metadata~="yellow"] {
    --callout-color: var(--color-yellow-rgb);
}
.callout[data-callout-metadata~="green"] {
    --callout-color: var(--color-green-rgb);
}
.callout[data-callout-metadata~="cyan"] {
    --callout-color: var(--color-cyan-rgb);
}
.callout[data-callout-metadata~="blue"] {
    --callout-color: var(--color-blue-rgb);
}
.callout[data-callout-metadata~="purple"] {
    --callout-color: var(--color-purple-rgb);
}
.callout[data-callout-metadata~="pink"] {
    --callout-color: var(--color-pink-rgb);
}
.callout[data-callout-metadata~="black"] {
    --callout-color: 0, 0, 0;
}
.callout[data-callout-metadata~="white"] {
    --callout-color: 255, 255, 255;
}

[data-callout-metadata~="accent"] {
    border-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
    background-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.1);

    > .callout-title {
        color: var(--color-accent);

        .svg-icon {
            color: var(--color-accent);
        }
    }
}

.callout[data-callout-metadata~="no-bg"],
.callout[data-callout-metadata~="no-background"] {
    &,
    > .callout-content,
    > .callout-title {
        background: none;
    }
}

.callout[data-callout-metadata~="black-and-white"] img,
.callout[data-callout-metadata~="b-w"] img {
    filter: grayscale(100);
}

.callout[data-callout-metadata~="no-icon"] > .callout-title > .callout-icon {
    display: none;
}

.callout[data-callout-metadata~="no-title"] > .callout-title {
    display: none;
}
.callout[data-callout-metadata~="no-title"] > .callout-content {
    border: none;
}

.callout[data-callout-metadata~="blank"] {
    margin: 0;
    mix-blend-mode: none;
    border-radius: 0;

    &,
    > .callout-content {
        border: none;
        background: none;
        padding: 0;
    }

    > .callout-title {
        display: none;
    }
}

.markdown-preview-view .callout[data-callout-metadata~="wide"] {
    @include wide.wide(0.95);

    .callout-title {
        justify-content: center;
    }
}

@media (width > 600px) {
    .markdown-preview-view .callout:is([data-callout-metadata~="right"], [data-callout-metadata~="float-right"]) {
        float: right;
        clear: right;
        margin: var(--fas-float-inline-margin, 12px) 0 var(--fas-float-inline-margin, 12px)
            var(--fas-float-inline-margin, 12px);
        max-width: 300px;

        @container not (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
            img {
                max-width: min(100%, 299px - var(--image-shadow-offset));
            }
        }
    }

    .markdown-preview-view .callout:is([data-callout-metadata~="left"], [data-callout-metadata~="float-left"]) {
        float: left;
        clear: left;
        margin: var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px)
            var(--fas-float-inline-margin, 12px) 0;
        max-width: 300px;

        @container not (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
            img {
                max-width: min(100%, 299px - var(--image-shadow-offset));
            }
        }
    }
}

.callout[data-callout-metadata~="clear"] {
    clear: both;
}

.callout[data-callout-metadata~="no-blending"] {
    --callout-blend-mode: normal;
}

.callout[data-callout-metadata~="center-title"] {
    .callout-title-inner {
        flex-grow: 1;
        text-align: center;
    }
}

.callout[data-callout-metadata~="table-fixed"] {
    table {
        table-layout: fixed;
        width: 100%;
    }
}

.callout[data-callout-metadata~="overflow"] {
    &,
    .callout-content {
        overflow: visible;
    }
}

body {
    --callout-handwritten-font: "Lucida Handwriting", "Comic Sans MS", "Brush Script MT", cursive;
    --callout-monospace-font: var(--font-monospace);
    --callout-sans-serif-font: "Noto", "Arial", serif;
}

.callout[data-callout-metadata~="handwritten"] {
    font-family: var(--callout-handwritten-font);
}

.callout[data-callout-metadata~="monospace"] {
    font-family: var(--callout-monospace-font);
}

.callout[data-callout-metadata~="sans-serif"] {
    font-family: var(--callout-sans-serif-font);
}
