/*
Styling of area highlighting - runs outside of the shadow-root
This file must be thin as it impacts other websites styles
 */

:root {
    --fora-highlight-area-shadow: 49, 130, 206;
}

@keyframes foraHighlightShadowTakeOff {
    from {
        box-shadow: 0 0 1px rgba(var(--fora-highlight-area-shadow), 1);
    }
    90% {
        box-shadow: 0 0 20px 6px rgba(var(--fora-highlight-area-shadow), 0.1);
        /*box-shadow: 0 0 20px 6px rgba(0, 138, 213, 0.1);*/
    }
    to {
        /* https://html-css-js.com/css/generator/box-shadow/ */
        box-shadow: 0 0 24px 10px rgba(var(--fora-highlight-area-shadow), 0);
        /*box-shadow: 0 0 24px 10px rgba(0, 138, 213, 0);*/

    }
}

@keyframes foraHighlightTextTakeOff {
    from {
        text-shadow: rgba(var(--fora-highlight-area-shadow), 1) 1px 0 10px;
        /*background-color: rgba(var(--fora-highlight-area-shadow), 1);*/
        /*text-shadow: #FC0 1px 0 10px;*/
    }
    90% {
        text-shadow: rgba(var(--fora-highlight-area-shadow), 0.4) 1px 0 20px;
        /*background-color: rgba(var(--fora-highlight-area-shadow), 0.4);*/

        /*text-shadow: #FC0  1px 0 20px;*/
    }
    to {
        text-shadow: rgba(var(--fora-highlight-area-shadow), 0) 1px 0 30px;
        /*background-color: rgba(var(--fora-highlight-area-shadow), 0);*/
        /*text-shadow: #FC0  1px 0 24px;*/
    }
}

.fora-sticker-area-highlight {
    animation: foraHighlightShadowTakeOff 1.5s linear !important;
}

.fora-sticker-text-highlight {
    animation: foraHighlightTextTakeOff 1.5s linear !important;
}