@forward "../../shared/font-typewriter";

.markdown-source-view .callout[data-callout="pinned"] {
    margin-inline: auto;
}

.callout[data-callout="pinned"] {
    --callout-blend-mode: normal;
    --callout-border-width: 0;
    --callout-content-background: transparent;
    --callout-radius: var(--radius-m);
    --callout-title-weight: var(--h3-weight);
    --callout-title-size: var(--h3-size);
    --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-3);
    --pushpin-size: 40px;
    --pushpin-scale-collapsed: 0.8;
    --pinned-small-width: 200px;
    --pinned-medium-width: 350px;
    --pinned-large-width: 100%;

    position: relative;
    margin-inline: auto;
    background-color: white;
    color: black;

    &[data-callout-metadata~="small"] {
        width: var(--pinned-small-width);
    }
    &[data-callout-metadata~="medium"] {
        width: var(--pinned-medium-width);
    }
    &[data-callout-metadata~="large"] {
        width: var(--pinned-large-width);
    }

    .callout-icon {
        display: none;
    }
    .callout-fold svg {
        display: none;
    }

    .callout-fold {
        position: absolute;
        width: var(--pushpin-size);
        height: var(--pushpin-size);
        top: 1px;
        left: 1px;
        background-image: var(--pushpin-image);
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.2s ease;
        transform: scaleX(-1);
    }
    &.is-collapsed .callout-fold {
        transform: scaleX(-1) scale(var(--pushpin-scale-collapsed));
        filter: saturate(0%) contrast(90%) brightness(150%);
    }

    &:not([data-callout-metadata~="default-font"]) {
        --callout-font-header: var(--font-typewriter);
        --callout-font-body: var(--font-typewriter);
        .callout-title-inner {
            font-family: var(--callout-font-header);
        }
        .callout-content {
            font-family: var(--callout-font-body);
        }
    }

    .callout-title {
        padding-left: calc(var(--pushpin-size) * 0.6);
        justify-content: center;
        background: none;
    }
    .callout-title-inner {
        color: var(--color-accent);
    }

    .callout-content {
        border: none;
    }
    p:last-of-type {
        margin-bottom: 0;
    }
}

.theme-light .callout[data-callout="pinned"]:not([data-callout-metadata~="dark"]) {
    --callout-border-width: 1px;
    --callout-border-opacity: 0.15;
}

.callout[data-callout="pinned"][data-callout-metadata~="dark"] {
    background-color: black;
    color: white;
}

body {
    /* https://openclipart.org/detail/33601/pushpin-2 */
    --pushpin-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.0' id='svg21' width='24' height='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='linearGradient3228'%3E%3Cstop style='stop-color:%23ffffff' offset='0' /%3E%3Cstop style='stop-color:%23ffffff;stop-opacity:0' offset='1' /%3E%3C/linearGradient%3E%3Cfilter id='filter3372' height='1.3518944' width='1.4032961' color-interpolation-filters='sRGB' y='-0.17594722' x='-0.20164807'%3E%3CfeGaussianBlur stdDeviation='1.2413119' /%3E%3C/filter%3E%3ClinearGradient id='linearGradient3252'%3E%3Cstop style='stop-color:%23000000;stop-opacity:.99107' offset='0' /%3E%3Cstop style='stop-color:%23000000;stop-opacity:.61607' offset='.51389'/%3E%3Cstop style='stop-color:%238d8d8d;stop-opacity:0' offset='1' /%3E%3C/linearGradient%3E%3Cfilter id='filter3722' height='1.3910983' width='1.4482266' color-interpolation-filters='sRGB' y='-0.19554916' x='-0.2241133'%3E%3CfeGaussianBlur stdDeviation='1.3796041'/%3E%3C/filter%3E%3Cfilter id='filter4015' color-interpolation-filters='sRGB' x='-0.045283227' y='-0.045069823' width='1.0905665' height='1.0901396'%3E%3CfeGaussianBlur stdDeviation='0.33662797' /%3E%3C/filter%3E%3CradialGradient id='radialGradient4028' xlink:href='%23linearGradient3252' gradientUnits='userSpaceOnUse' cy='12.798' cx='278.53' gradientTransform='matrix(1.6668,0.25023,-0.43535,1.4424,-180.07,-76.258)' r='7.3867998' /%3E%3CradialGradient id='radialGradient4030' gradientUnits='userSpaceOnUse' cy='4.6950998' cx='305.98001' r='8.9205999' gradientTransform='matrix(0.50453545,0,0,0.50747,-136.24595,4.323384)'%3E%3Cstop style='stop-color:%23f60000' offset='0' /%3E%3Cstop style='stop-color:%23b30000' offset='1' /%3E%3C/radialGradient%3E%3CradialGradient id='radialGradient4034' gradientUnits='userSpaceOnUse' cy='4.6950998' cx='302.82999' r='8.9205999'%3E%3Cstop style='stop-color:%237f0000;stop-opacity:.58407' offset='0' /%3E%3Cstop style='stop-color:%23840000;stop-opacity:.49804' offset='.66667' /%3E%3Cstop style='stop-color:%23000000;stop-opacity:0' offset='1' /%3E%3C/radialGradient%3E%3CradialGradient id='radialGradient4038' gradientUnits='userSpaceOnUse' cy='3.2509999' cx='302.66' gradientTransform='matrix(0.26652133,0.2697306,-0.23932715,0.27829233,-60.3156,-79.691589)' r='8.9205999'%3E%3Cstop style='stop-color:%23d43500' offset='0' /%3E%3Cstop style='stop-color:%23d42400' offset='.48052' /%3E%3Cstop style='stop-color:%23d40000' offset='.73611' /%3E%3Cstop style='stop-color:%23950000' offset='1' /%3E%3C/radialGradient%3E%3CradialGradient id='radialGradient4040' xlink:href='%23linearGradient3228' gradientUnits='userSpaceOnUse' cy='228.64999' cx='537.75' gradientTransform='matrix(0.85943855,-0.53072517,2.6354877,3.240535,-1043.2079,-453.79315)' r='0.74646002' /%3E%3CradialGradient xlink:href='%23linearGradient3252' id='radialGradient21' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1.6668,0.25023,-0.43535,1.4424,-180.07,-76.258)' cx='278.53' cy='12.798' r='7.3867998' /%3E%3C/defs%3E%3Cpath style='opacity:0.62019;fill:url(%23radialGradient21);filter:url(%23filter3722)' d='m 286.18,14.557 a 7.387,8.4660292 0 1 1 -14.774,0 7.387,8.4660292 0 1 1 14.774,0 z' transform='matrix(0.18614459,0.46591447,-0.84983861,0.36652331,-27.524708,-124.65065)' /%3E%3Cpath style='fill:url(%23radialGradient4030);stroke-width:0.506001' d='m 21.042977,6.7060064 a 4.5007589,4.5269369 0 1 1 -9.001417,0 4.5007589,4.5269369 0 1 1 9.001417,0 z' /%3E%3Cpath style='opacity:0.30288;fill:url(%23radialGradient4028);filter:url(%23filter3372)' d='m 286.18,14.557 a 7.387,8.4660292 0 1 1 -14.774,0 7.387,8.4660292 0 1 1 14.774,0 z' transform='matrix(0.20012424,0.33565897,-0.37619699,0.18300359,-35.723741,-89.051213)' /%3E%3Cpath style='fill:url(%23radialGradient4034);filter:url(%23filter4015)' d='m 311.75,4.6951 a 8.9206,8.9206 0 1 1 -17.841,0 8.9206,8.9206 0 1 1 17.841,0 z' transform='matrix(0.31126832,0,0,0.31308213,-77.13623,4.3145362)' /%3E%3Cpath style='fill:url(%23radialGradient4038);stroke-width:0.360002' d='M 22.423821,3.5354521 A 3.3480393,3.0803993 59.351425 1 1 16.119619,3.0567042 3.3480393,3.0803993 59.351425 1 1 22.423821,3.5354521 Z' /%3E%3Cpath style='fill:url(%23radialGradient4040);fill-rule:evenodd;stroke-width:0.147465' d='M 20.000189,0.41704626 C 21.526448,1.4387254 21.964123,2.0195443 21.849101,3.2035377 21.092047,1.6741821 20.070972,0.50419785 20.000189,0.41704626 Z' /%3E%3C/svg%3E%0A");
}
