@use "../mixins/cutout_border";

body {
    --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@supports (color: hsl(from white h s l)) {
    .canvas-node:has(.tag[href="#node-title-arcane"], .node-title-arcane):not(.is-editing) {
        --cutout-border-background-gradient: linear-gradient(
            to top,
            rgba(var(--canvas-color), 0.9),
            hsl(from rgb(var(--canvas-color)) calc(h - 10) calc(s * 0.7) calc(l * 0.9) / 0.9)
        );
        .markdown-preview-view {
            --relief-color: hsl(from rgb(var(--canvas-color)) h calc(s * 0.5) calc(l * 0.5));
        }
        p {
            --p-background-gradient: linear-gradient(
                to top,
                rgba(var(--canvas-color), 0.9),
                hsl(from rgb(var(--canvas-color)) calc(h - 20) calc(s * 0.5) calc(l * 0.7) / 0.6)
            );
        }
    }
}

@supports not (color: hsl(from white h s l)) {
    .canvas-node:has(.tag[href="#node-title-arcane"], .node-title-arcane):not(.is-editing) {
        --cutout-border-background-gradient: color-mix(in hsl, rgba(var(--canvas-color), 0.9), rgba(0, 0, 0, 0.9) 30%);
        .markdown-preview-view {
            --relief-color: color-mix(in hsl, rgb(var(--canvas-color)), black 50%);
        }
        p {
            --p-background-gradient: color-mix(in hsl, rgba(var(--canvas-color), 0.9), rgba(100, 54, 0, 0.6) 40%);
        }
    }
}

.canvas-node:has(.tag[href="#node-title-arcane"], .node-title-arcane):not(.is-editing) {
    --cutout-corner-angle: 1.5em;
    --cutout-outline-inset: 0;
    --cutout-outline-thickness: 5px;
    --cutout-border-background: var(--cutout-border-background-gradient), var(--noise);

    .canvas-node-container {
        border: none;
    }
    .canvas-node-container {
        box-shadow: none;
    }
    .canvas-node-content {
        background: none;
    }
    .markdown-preview-view {
        font-family: "Arcane Nine", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: var(--font-extrabold);
        text-align: center;
        line-height: 1;
    }
    .markdown-preview-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    p {
        background-clip: text;
        background-image: var(--p-background-gradient), var(--noise);
        color: transparent;
    }

    .canvas-node-container {
        @include cutout_border.outline;
    }
}

.canvas-node:not(.is-editing) :is(.tag[href="#node-title-arcane"], .node-title-arcane) {
    display: none;
}
