@forward "../../shared/paper-texture";
@forward "../../shared/workleaves";

body {
    --callout-letter-title-font: "Tangerine", "Brush Script MT", cursive;
    --callout-letter-body-font: "Homemade Apple", "Comic Sans MS", cursive;
}

.callout[data-callout="letter"] {
    --callout-color: var(--color-yellow-rgb);
    --callout-title-size: 2em;
    --line-height-normal: 2.5;
    --font-text-size: 1.2em;
    --callout-icon-size: 1.2em;

    line-height: var(--line-height-normal);
    font-size: var(--font-text-size);

    &:not([data-callout-metadata~="default-font"]) {
        .callout-title {
            font-family: var(--callout-letter-title-font);
        }
        .callout-content {
            font-family: var(--callout-letter-body-font);
        }
    }
    .callout-title {
        gap: 1rem;
    }
    .callout-icon {
        align-self: center;
    }
    .callout-icon svg {
        display: none;
    }
    .callout-icon::after {
        content: "";
        width: 1em;
        height: 1em;
        background-color: rgb(var(--callout-color));
        -webkit-mask-position: 50% 50%;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: var(--feather-mask);
    }
    .callout-fold {
        align-items: baseline;
    }
    .callout-fold svg {
        display: none;
    }
    .callout-fold::after {
        content: "";
        width: 1em;
        height: 1em;
        background-color: rgb(var(--callout-color));
        -webkit-mask-position: 50% 50%;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
    }
    &.is-collapsed .callout-fold::after {
        -webkit-mask-image: var(--lucide-mail);
    }
    &:not(.is-collapsed) .callout-fold::after {
        -webkit-mask-image: var(--lucide-mail-open);
    }

    .callout-content {
        box-shadow:
            0 0 20px rgba(0, 0, 0, 0.5) inset,
            0 0 7px rgba(0, 0, 0, 0.5) inset;
    }
    @container style(--fas-bg-textures: enable) {
        .callout-content {
            background-color: color-mix(in srgb, rgb(var(--callout-color)), var(--workleaves-background) 92%);
            background-image: var(--paper-texture);
            background-size: 500px;
            background-blend-mode: multiply;
        }
    }

    p {
        --calc-line-height: calc(1em * var(--line-height-normal));
        --line-start: calc(0.5 * var(--calc-line-height) + 0.5 * var(--font-text-size));
        --line-end: calc(var(--line-start) + 1px);

        background-image: linear-gradient(
            to bottom,
            transparent,
            transparent var(--line-start),
            rgba(var(--callout-color), 0.5) var(--line-start),
            rgba(var(--callout-color), 0.5) var(--line-end),
            transparent var(--line-end),
            transparent
        );
        background-size: 100% var(--calc-line-height);

        mix-blend-mode: var(--callout-blend-mode);
    }
}

body {
    --lucide-mail-open: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-open"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"/><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"/></svg>');
    --lucide-mail: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-open"><g transform="translate(0,2)"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m 22,7 -8.97,5.7 a 1.94,1.94 0 0 1 -2.06,0 L 2,7"/></g></svg>');
    --feather-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(-223.50563,-236.2375)"><path id="ink" stroke="none" d="m 236.20939,254.69996 c -0.99043,0.13678 -1.59263,1.02383 -2.29772,1.63351 -0.74007,0.63992 -1.2726,1.82143 -2.34497,1.8305 -0.86175,0.007 -1.2233,-0.9934 -1.8422,-1.48085 -0.56725,-0.44675 -1.37604,-0.68253 -2.01621,-0.24534 -0.709,0.4842 -1.38266,1.05187 -1.95587,1.65168 -0.4594,0.48072 0.8298,0.16236 1.1445,0.0761 0.70469,-0.19321 1.16457,-1.17024 1.94718,-0.92116 1.08419,0.34505 1.53647,1.78205 2.73634,1.94247 0.8504,0.1137 1.32016,-0.74824 1.91323,-1.19382 0.78913,-0.59287 1.21587,-1.58327 2.09929,-2.03978 0.84814,-0.43828 0.50446,0.89512 0.49452,1.33637 -0.0162,0.7198 0.74608,1.27396 1.3916,0.98183 1.54872,-0.70088 3.00051,-1.65161 4.58752,-2.24152 0.6063,-0.22537 1.25463,0.97429 1.73811,0.30153 0.45251,-0.62967 -0.51458,-1.01186 -1.04123,-1.13976 -0.9172,-0.22276 -1.80202,0.1667 -2.53112,0.68864 -0.87573,0.62691 -1.7853,1.518 -2.90829,1.47196 -1.05698,-0.0433 -0.31461,-1.46378 -0.54757,-2.15045 -0.0883,-0.26022 -0.26361,-0.5438 -0.56711,-0.50189 z"/><path id="feather" stroke="none" d="M 245.3611 237.36641 C 245.3611 237.36641 243.13756 238.50476 241.78883 238.90938 C 240.4401 239.3138 239.54539 239.14488 237.87672 239.89766 C 233.49775 242.69106 229.88737 247.64305 227.68532 252.48945 C 228.84474 250.51315 230.36184 248.63714 231.96266 246.98555 L 231.69313 245.96992 L 232.27321 246.66914 C 232.64037 246.29931 233.01003 245.94094 233.38063 245.59688 L 233.14821 244.2707 L 233.84352 245.175 C 234.15696 244.89343 234.46947 244.62076 234.77907 244.36055 L 234.61305 242.79023 L 235.22243 243.99531 C 235.54765 243.73059 235.8673 243.48093 236.18141 243.24336 L 235.76344 241.55977 L 236.53102 242.98555 C 236.8907 242.72137 237.24473 242.46832 237.57985 242.24531 L 237.5525 242.25508 L 237.08961 240.54023 L 237.96071 241.99727 C 238.31251 241.77312 238.64872 241.57321 238.95875 241.40352 C 239.02063 241.36965 239.07645 241.34014 239.13649 241.30781 L 238.52907 239.73164 L 239.53493 241.09688 C 239.86933 240.9239 240.17958 240.77913 240.48805 240.63789 L 240.16188 239.32734 L 240.88649 240.4543 C 241.50556 240.18512 242.1456 239.93653 242.96657 239.62031 C 242.65561 239.86923 242.3861 240.06441 242.13063 240.23945 L 245.19313 241.0832 L 241.65602 240.57344 L 241.7654 240.47969 C 241.49287 240.65082 241.23104 240.80056 240.96657 240.94063 L 244.76735 242.55 L 240.36696 241.25117 C 240.02893 241.42375 239.66131 241.61577 239.21852 241.8625 L 243.37477 243.13398 L 238.4529 242.31367 C 238.16961 242.48854 237.88033 242.67976 237.5818 242.88594 L 241.93727 243.98945 L 236.93141 243.34883 C 236.62246 243.57722 236.30944 243.8199 235.99196 244.07539 L 236.07008 244.0207 L 240.85524 244.79609 L 235.48219 244.48945 C 235.28536 244.65463 235.0884 244.82908 234.8904 245.00313 L 240.34743 245.71602 L 234.1775 245.64961 C 233.93292 245.87653 233.6901 246.10866 233.44704 246.34688 L 239.07985 246.79805 L 232.84352 246.94453 C 232.5476 247.24811 232.25502 247.55893 231.96657 247.87617 L 236.94118 248.12227 L 231.43532 248.47773 C 231.24448 248.69732 231.05804 248.91938 230.87282 249.14375 L 235.49 249.25313 L 230.33571 249.80391 C 230.17754 250.00599 230.02312 250.21042 229.87086 250.41523 L 234.70094 250.29219 L 229.55055 250.85273 C 229.34361 251.14216 229.14362 251.43274 228.95094 251.72578 L 233.77321 251.71016 L 228.6775 252.14961 C 228.48291 252.459 228.29842 252.77002 228.12282 253.08125 L 228.13844 253.05977 L 233.06618 252.77266 L 227.8904 253.50703 C 227.81991 253.63917 227.74996 253.77136 227.68336 253.90352 C 227.71139 253.95466 227.72731 253.99337 227.71657 254.01484 C 228.14366 253.76757 232.84157 253.20625 232.84157 253.20625 C 232.84157 253.20625 233.37561 252.51052 234.17165 251.57148 C 234.24305 251.48718 232.69646 251.40397 232.55836 251.32734 C 232.83337 251.11878 234.47517 251.2179 234.51735 251.16914 C 235.77369 249.7167 237.50314 247.87846 238.865 247.04609 C 241.29271 245.56269 245.42946 242.72969 245.42946 242.72969 C 245.45296 240.89743 244.853 239.31963 245.3611 237.36641 z M 228.55446 254.35078 C 228.23995 254.34253 227.87309 254.37359 227.40211 254.49141 C 227.3242 254.66133 227.24822 254.82977 227.1775 254.99922 C 228.28567 254.97398 229.13902 254.77594 230.18922 254.40938 C 229.54442 254.49487 229.12598 254.36508 228.55446 254.35078 z"/><path id="axis" stroke-width="0.178118" fill="none" d="m 225.58089,258.35331 1.24337,-2.42154 c 1.84824,-5.49149 8.00184,-11.54083 12.05503,-13.87921 1.83966,-1.06134 2.49753,-1.15972 4.08669,-2.43185 -1.63289,0.62895 -2.55262,0.98618 -4.00747,1.78245 -4.18808,2.29222 -12.6291,9.75422 -13.37762,16.95015 z"/></g></svg>');
}
