:root {
    --cb-badge-width: 200px;
    --cb-badge-height: 200px;
    --cb-badge-bg-color: var(--hf-color-primary, #fff);
    --cb-badge-bg-hover-color: var(--hf-color-prim-variant, #fff);
    --cb-badge-content-color: lch(from #000 calc((59.44 - l) * infinity) 0 0);
    --cb-badge-font-size: clamp(0.875rem, -1.75rem + 5.4688vw, 1.75rem);
    --cb-badge-font-size-small: clamp(0.75rem, -0.375rem + 2.3438vw, 1.125rem);
    --title-subtitle-width-calc-mod: 36px;
    --line-height: 1.0em;
    --line-height-big: 1.2em;
}

/* flash element (div with class="highlight") for diagonale movement */
@keyframes shine {
    0% {
        top: 100%;
        left: -250%;
    }
    100% {
        top: -200%;
        left: 200%;
    }
}

/* zoom animation */
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* vanish animation */
@keyframes vanishInOutRight {
    0%, 90% {
        opacity: 1;
        transform: translateX(0);
    }
    92% {
        opacity: 0;
        transform: translateX(100px);
    }
    93% {
        opacity: 0;
        transform: translateX(0px) scale(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes vanishInOutLeft {
    0%, 90% {
        opacity: 1;
        transform: translateX(0);
    }
    92% {
        opacity: 0;
        transform: translateX(-100px);
    }
    93% {
        opacity: 0;
        transform: translateX(0px) scale(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.cb-badge {
    position: relative;
    width: var(--cb-badge-width);
    height: var(--cb-badge-height);
    border-radius: 50%;
    z-index: 1;
    text-align: center;

    color: var(--cb-badge-content-color);
    background-color: var(--cb-badge-bg-color);

    display: block;
    overflow: hidden;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    /* Layout 2 */
    &.cb-badge-layout-2 {
        height: auto;
        border-radius: unset;
        background-color: unset;
    }

    /* mobile_variant: banner */
    @media (max-width: 769px) {
        width: calc(var(--cb-badge-width) / 2);
        height: calc(var(--cb-badge-height) / 2);

        &.mobile_banner {
            border-radius: unset;
            width: 100% !important;
            height: auto !important;
            animation: unset !important;

            .content {
                justify-content: space-between;
                text-align: left;
                flex-direction: row !important;
                padding: var(--outer-gutter, 15px);

                .content_text {
                    position: relative !important;
                    inset: unset !important;
                    
                    .title {
                        font-size: var(--cb-badge-font-siz-big) !important;
                        line-height: var(--line-height-big) !important;
                        width: 100% !important;
                    }
                
                    .subtitle {
                        font-size: var(--cb-badge-font-size) !important;
                    }
                }

                [class^="icon-"], [class*=" icon-"] {
                    display: block;
                }

                svg,
                img {
                    display: none;
                }
            }

            &.rotate {
                -webkit-transform: rotate(0);
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0);
                transition: unset;
            }

            &.zoom {
                &:hover {
                    transform: unset;
                }
            }

            &.shadow {
                &:hover {
                    box-shadow: unset;
                }
            }

            &.outline {
                outline: unset;
            }

            &.dropshadow {
                box-shadow: unset;
            }

            &.cb-badge-layout-2 {
                .content {
                    background-color: var(--cb-badge-bg-color);

                    .title {
                        position: unset;
                    }
                }
            }

        }

        &.mobile_disabled {
            display: none;
        }
    }

    &.outline {
        outline: 5px solid white;
    }

    &.dropshadow {
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
    }

    .highlight {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        height: 250%;
        background-image: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none;
        z-index: 1;
        transform: rotate(-45deg);
    }

    /* hover-animation over cb-badge */
    &:hover .highlight {
        animation: shine 1s ease-in-out forwards;
    }

    &.rotate {
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
        transform: rotate(-15deg);
        transition: transform 0.5s ease 0.2s;

        &:hover {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    &.zoom {
        &:hover {
            transform: scale(1.1);
        }
    }

    &.switchcolor {
        &:hover {
            background-color: var(--cb-badge-bg-hover-color);
        }
    }

    &.shadow {
        &:hover {
            box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
        }
    }
    /* hover effects - end */

    /* animations - start */
    &.zoom_animation {
        animation: zoomInOut 2s infinite ease-in-out;
    }

    .content {
        .vanish_animation {
            &.right {
                animation: vanishInOutRight 10s infinite ease-in-out;
            }
            &.left {
                animation: vanishInOutLeft 10s infinite ease-in-out;
            }
        }
    }
    /* animations - end */

    .content {
        position: relative;
        width: 100%;
        height: 100%;
        color: var(--cb-badge-content-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        text-align: center;
        line-height: var(--line-height);

        &.title-pos-reverse {
            flex-direction: column-reverse;
        }
    
        .title {
            color: var(--cb-badge-content-color);
            font-weight: normal;
            font-size: var(--cb-badge-font-size);
            display: inline-block;
            width: -moz-calc(100% - var(--title-subtitle-width-calc-mod));
            width: -webkit-calc(100% - var(--title-subtitle-width-calc-mod));
            width: calc(100% - var(--title-subtitle-width-calc-mod));
        }
    
        .subtitle {
            color: var(--cb-badge-content-color);
            font-weight: 700;
            font-size: var(--cb-badge-font-size-small);
            margin-top: 5%;
            display: inline-block;
            width: -moz-calc(100% - var(--title-subtitle-width-calc-mod));
            width: -webkit-calc(100% - var(--title-subtitle-width-calc-mod));
            width: calc(100% - var(--title-subtitle-width-calc-mod));
        }

        [class^="icon-"], [class*=" icon-"] {
            display: none;
            &::before {
                color: var(--cb-badge-content-color);
            }
        }

        /* Layout 0 */
        .cb-badge-layout-0 & {
            .subtitle,
            .title {
                line-height: var(--line-height-big);
            }
        }

        /* Layout 1 */
        .cb-badge-layout-1 & {
            img,
            svg {
                width: 40%;
            }
            .title {
                font-size: var(--cb-badge-font-size-small);
                line-height: var(--line-height);
            }
        }

        /* Layout 2 */
        .cb-badge-layout-2 & {
            .content_text {
                position: absolute;
                inset: 5%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                .title-pos-reverse & {
                    justify-content: flex-end;
                }
            }
            .title {
                font-size: var(--cb-badge-font-size-small);
                line-height: var(--line-height);
            }
        }

    }

}