@forward "../../shared/list-with-float";
@use "../../shared/full-width-image-aliases";
@use "../../foundations/colors/colors_definitions";
@use "sass:list";
@use "sass:map";

body {
    // custom
    --image-shadow-offset: var(--size-4-2);
    --image-shadow-stripe-thickness: 2px;
    --image-shadow-stripe-gap: 4px;
    --image-shadow-color: var(--background-primary-alt);
}

.image-embed {
    font-size: 0;
}

.markdown-rendered .image-embed:is([alt~="right"], [alt~="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);
}

.markdown-rendered .image-embed:is([alt~="left"], [alt~="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;
}

@each $key, $c in map.get(colors_definitions.$extended-colors, "light") {
    .image-embed[alt~="#{$key}"] {
        --image-shadow-color: rgba(var(--color-#{$key}-rgb), 0.2);
    }
}

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

.image-embed[alt~="no-shadow"] {
    --image-shadow-offset: 0;
}

.image-embed[alt~="blur"] {
    filter: blur(10px);
}

// IMAGE SHADOW

$no_shadow_attributes: full-width-image-aliases.$aliases;
$no_shadow_attributes: list.append($no_shadow_attributes, "no-shadow");
// ITS compatibility https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments
$no_shadow_attributes: list.append($no_shadow_attributes, "banner");
$no_shadow_attributes: list.append($no_shadow_attributes, "banner+small");
$no_shadow_attributes: list.append($no_shadow_attributes, "banner+tall");
$no_shadow_attributes: list.append($no_shadow_attributes, "sban");
$no_shadow_selector: "";
@each $alias in $no_shadow_attributes {
    @if ($no_shadow_selector != "") {
        $no_shadow_selector: $no_shadow_selector + ", ";
    }
    $no_shadow_selector: $no_shadow_selector + "[alt~='#{$alias}']";
}

@container not (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
    .image-embed:not(#{$no_shadow_selector}) {
        z-index: 1;
        width: fit-content;
    }

    .markdown-source-view .image-embed:not(#{$no_shadow_selector}),
    .markdown-source-view.mod-cm6 .cm-line .image-embed:not(#{$no_shadow_selector}),
    .markdown-rendered .image-embed:not(#{$no_shadow_selector}) {
        padding-right: var(--image-shadow-offset, 0px);
        padding-bottom: var(--image-shadow-offset, 0px);
        display: inline-block;
        height: fit-content;
        width: fit-content;
        position: relative;
        font-size: 0;

        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: var(--image-shadow-offset, 0px);
            left: var(--image-shadow-offset, 0px);
            right: 0;
            bottom: 0;
            border-radius: inherit;
            background: repeating-linear-gradient(
                -45deg,
                var(--image-shadow-color),
                var(--image-shadow-color) var(--image-shadow-stripe-thickness),
                transparent var(--image-shadow-stripe-thickness),
                transparent calc(var(--image-shadow-stripe-thickness) + var(--image-shadow-stripe-gap))
            );
        }
    }
}

// IMAGE CENTERED
body {
    --image-centered: disable;
}
@container style(--image-centered: enable) {
    .markdown-rendered .image-embed:only-child {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }
    .markdown-rendered img:not(.image-embed img):not(.emoji):only-child {
        display: block;
        margin-inline: auto;
    }
}
@container style(--image-centered: enable) and (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
    .markdown-source-view .cm-content > .image-embed img {
        display: block;
        margin-inline: auto;
    }
}

.markdown-rendered .image-embed[alt~="center"]:only-child {
    display: block;
    width: fit-content;
    margin-inline: auto;
}
.markdown-rendered img[alt~="center"]:not(.image-embed img):not(.emoji):only-child {
    display: block;
    margin-inline: auto;
}
.markdown-source-view .cm-content > .image-embed[alt~="center"] img {
    display: block;
    margin-inline: auto;
}
