// -------------- SET DIAGONAL AND ANGLE -------------
//
//  - width  = diag / sin(angle)
//  - height = diag / sin(90 - angle)

@property --paper-fold-corner-diag {
    syntax: "<length>";
    inherits: true;
    initial-value: 100px;
}

@property --paper-fold-corner-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 30deg;
}

body {
    --paper-fold-corner-diag: 100px;
    --paper-fold-corner-diag-hover: 10px;
    --paper-fold-corner-angle: 30deg;
    --paper-fold-corner-angle-hover: 60deg;
}

.print {
    --paper-fold-corner-diag: 25px;
    --paper-fold-corner-angle: 70deg;
}

.is-mobile {
    --paper-fold-corner-diag: 25px;
    --paper-fold-corner-angle: 70deg;
}

.callout[data-callout="paper-fold"] {
    --corner-width: calc(var(--paper-fold-corner-diag) / sin(var(--paper-fold-corner-angle)));
    --corner-height: calc(var(--paper-fold-corner-diag) / sin(90deg - var(--paper-fold-corner-angle)));
    transition:
        --paper-fold-corner-diag 0.5s ease-in-out,
        --paper-fold-corner-angle 0.5s ease-in-out;
}

@media (hover: hover) {
    .callout[data-callout="paper-fold"]:hover {
        --paper-fold-corner-diag: var(--paper-fold-corner-diag-hover);
        --paper-fold-corner-angle: var(--paper-fold-corner-angle-hover);
    }
}

// -------------- SET WIDTH AND HEIGHT (no unit) -------------
//
//  - diag  = width * height / hypot(width, height)
//  - angle = asin(diag / width)
/*
@property --corner-width-n {
    syntax: "<number>";
    inherits: true;
    initial-value: 70;
}

@property --corner-height-n {
    syntax: "<number>";
    inherits: true;
    initial-value: 700;
}
.callout[data-callout="paper-fold"] {
    --corner-width: calc(1px * var(--corner-width-n));
    --corner-height: calc(1px * var(--corner-height-n));
    --paper-fold-corner-diag: calc(1px * var(--paper-fold-corner-diag-n));
    --paper-fold-corner-diag-n: calc(var(--corner-width-n) * var(--corner-height-n) / hypot(var(--corner-width-n), var(--corner-height-n)));
    --paper-fold-corner-angle: calc(asin(var(--paper-fold-corner-diag-n) / var(--corner-width-n)));
    transition: --corner-width-n 0.5s ease-out, --corner-height-n 0.5s ease-out;
}
@media (hover: hover) {
    .callout[data-callout="paper-fold"]:hover {
        --corner-width-n: 80;
        --corner-height-n: 20;
    }
}*/

.theme-light {
    --paper-fold-color: 255, 247, 64;
}
.theme-dark {
    --paper-fold-color: 255, 255, 153;
}

.callout[data-callout="paper-fold"] {
    --callout-color: var(--paper-fold-color);
    --metadata-property-radius: 0;
    --metadata-padding: 0 0 8px 0;

    --postit-color-transparent: color-mix(in srgb, rgb(var(--callout-color)), transparent 30%);
    --postit-color-opaque: rgb(var(--callout-color));
    --postit-border-color: var(--text-faint);

    color: black;

    background: linear-gradient(
            calc(-1 * var(--paper-fold-corner-angle)),
            transparent calc(var(--paper-fold-corner-diag) + 1px),
            color-mix(in hsl, var(--postit-color-transparent), white 10%) var(--paper-fold-corner-diag),
            var(--postit-color-transparent) calc(var(--paper-fold-corner-diag) * 1.5)
        )
        no-repeat;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--corner-height)),
        calc(100% - var(--corner-width)) 100%,
        0 100%
    );
    overflow: hidden;
}

.callout[data-callout="paper-fold"]:not([data-callout-metadata~="default-font"]) {
    font-family: "Walter Turncoat", "Comic Sans MS", cursive;
}

.callout[data-callout="paper-fold"] :is(.callout-title, svg) {
    color: inherit;
}

.callout[data-callout="paper-fold"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    border-bottom-left-radius: 5px;
    background-repeat: no-repeat;
    height: var(--corner-height);
    width: var(--corner-width);
    transform: matrix(
        cos(-2 * var(--paper-fold-corner-angle)),
        sin(-2 * var(--paper-fold-corner-angle)),
        sin(-2 * var(--paper-fold-corner-angle)),
        calc(-1 * cos(-2 * var(--paper-fold-corner-angle))),
        0,
        0
    );
    background: linear-gradient(
        calc(180deg - var(--paper-fold-corner-angle)),
        color-mix(in hsl, rgb(var(--callout-color)), black 10%) var(--paper-fold-corner-diag),
        color-mix(in hsl, rgb(var(--callout-color)), white 30%)
            calc(var(--paper-fold-corner-diag) + 0.3 * min(var(--corner-height), var(--corner-width))),
        color-mix(in hsl, rgb(var(--callout-color)), black 50%)
    );
    box-shadow: 0 0 calc(min(var(--corner-width), var(--corner-height)) / 5)
        calc(min(var(--corner-width), var(--corner-height)) / 25)
        color-mix(in hsl, var(--postit-color-transparent), black 70%);
}

.callout[data-callout="paper-fold"] .callout-title {
    background-color: color-mix(in hwb, var(--postit-color-transparent), black 5%);
    text-align: center;
}
