@forward "../../shared/workleaves";
@use "sass:list";

@supports (color: hsl(from white h s l)) {
    .callout[data-callout="conversation-minimalist"],
    .callout[data-callout="conversation"],
    .callout[data-callout="conversation-outline"] {
        --line-color-odd: hsl(from rgb(var(--conversation-color)) calc(h + 15) s l);
        --line-color-even: hsl(from rgb(var(--conversation-color)) calc(h - 15) s l);
    }
}

@supports not (color: hsl(from white h s l)) {
    $color_order: ("red", "brown", "orange", "yellow", "green", "cyan", "blue", "purple", "pink");

    @for $i from 1 through list.length($color_order) {
        $prev: "blue";
        $next: "blue";
        @if $i == 1 {
            $prev: list.nth($color_order, list.length($color_order));
        } @else {
            $prev: list.nth($color_order, $i - 1);
        }
        @if $i == list.length($color_order) {
            $next: list.nth($color_order, 1);
        } @else {
            $next: list.nth($color_order, $i + 1);
        }

        $curr: list.nth($color_order, $i);

        .callout[data-callout="conversation-minimalist"],
        .callout[data-callout="conversation"],
        .callout[data-callout="conversation-outline"] {
            &[data-callout-metadata~="#{$curr}"] {
                --shift-color-even: var(--color-#{$prev});
                --shift-color-odd: var(--color-#{$next});
            }
        }
    }

    $i: list.index($color_order, "blue");
    $prev: "blue";
    $next: "blue";
    @if $i == 1 {
        $prev: list.nth($color_order, list.length($color_order));
    } @else {
        $prev: list.nth($color_order, $i - 1);
    }
    @if $i == list.length($color_order) {
        $next: list.nth($color_order, 1);
    } @else {
        $next: list.nth($color_order, $i + 1);
    }
    .callout[data-callout="conversation-minimalist"],
    .callout[data-callout="conversation"],
    .callout[data-callout="conversation-outline"] {
        --shift-color-even: var(--color-#{$prev});
        --shift-color-odd: var(--color-#{$next});
    }

    .callout[data-callout="conversation-minimalist"],
    .callout[data-callout="conversation"],
    .callout[data-callout="conversation-outline"] {
        &[data-callout-metadata~="gray"],
        &[data-callout-metadata~="black"],
        &[data-callout-metadata~="white"] {
            --shift-color-even: white;
            --shift-color-odd: black;
        }
    }

    .callout[data-callout="conversation-minimalist"],
    .callout[data-callout="conversation"],
    .callout[data-callout="conversation-outline"] {
        --line-color-odd: color-mix(in srgb, rgb(var(--conversation-color)), var(--shift-color-odd) 25%);
        --line-color-even: color-mix(in srgb, rgb(var(--conversation-color)), var(--shift-color-even) 25%);
    }
}

.callout[data-callout="conversation-minimalist"],
.callout[data-callout="conversation"],
.callout[data-callout="conversation-outline"] {
    --p-spacing: 0;
    --conversation-color: var(--callout-color);
    --callout-icon: lucide-messages-square;
    --callout-content-padding: var(--size-4-3);

    background: none;

    > .callout-content > *:nth-child(odd) {
        margin-right: auto;
        --line-color: var(--line-color-odd);
    }
    > .callout-content > *:nth-child(even) {
        margin-left: auto;
        --line-color: var(--line-color-even);
    }

    > .callout-content > * {
        --bold-color: var(--line-color);
        padding: 12px;
    }
}

.callout[data-callout="conversation"] {
    > .callout-content > * {
        width: fit-content;
        max-width: 80%;
        background: color-mix(in srgb, var(--line-color), transparent 80%);
        border-radius: var(--radius-l);
        margin-block: var(--size-4-3);
    }
}

.callout[data-callout="conversation-outline"] {
    > .callout-content > * {
        position: relative;
        width: 80%;
        margin-bottom: 2px;
        margin-top: -1px;
        background: var(--workleaves-background);
        border-radius: calc(var(--radius-l) - 1px);
    }

    > .callout-content > *::before {
        content: "";
        position: absolute;
        top: -1px;
        bottom: -1px;
        width: calc(75% * 0.5 + 1px);
        z-index: -1;
        background-size:
            100% 50%,
            100% 50%;
        background-position:
            center top,
            center bottom;
        background-repeat: no-repeat;
        opacity: 0.5;
    }

    > .callout-content > *:nth-child(odd)::before {
        right: -1px;
        border-left: 0;
        border-top-right-radius: var(--radius-l);
        border-bottom-right-radius: var(--radius-l);
        background-image:
            linear-gradient(to right, var(--line-color-even), var(--line-color-odd)),
            linear-gradient(to left, var(--line-color-odd), var(--line-color-odd));
    }

    > .callout-content > *:nth-child(even)::before {
        left: -1px;
        border-right: 0;
        border-top-left-radius: var(--radius-l);
        border-bottom-left-radius: var(--radius-l);
        background-image:
            linear-gradient(to left, var(--line-color-odd), var(--line-color-even)),
            linear-gradient(to right, var(--line-color-even), var(--line-color-even));
    }

    > .callout-content > *:first-child,
    > .callout-content > *:first-child::before {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    > .callout-content > *:first-child::before {
        background-position:
            center 1px,
            center bottom;
    }

    > .callout-content > *:last-child,
    > .callout-content > *:last-child::before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    > .callout-content > *:last-child::before {
        background-position:
            center top,
            center calc(100% - 1px);
    }
}

@media print {
    .print .callout[data-callout="conversation-outline"] > .callout-content > *::before {
        width: calc(40% - var(--callout-content-padding));
    }
}

.callout[data-callout="conversation-minimalist"] {
    --callout-border-width: 0;
    --callout-content-padding: 0;

    > .callout-title {
        display: none;
    }

    > .callout-content > * {
        width: fit-content;
        max-width: 50%;
        border-radius: var(--radius-l);
        margin-block: var(--size-4-3);
        padding: 0;
    }
}
