:root {
    --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: absolute;
    right: 0;
    bottom: -100px;
    */
    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;

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

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

    /* hover effects - start */
    /* variation 1: without flash element (cb-badge with class="highlight"), animation works only vertically or horizontally (e.g. to right) */
    /*
    &.highlight {
        background-size: 0% 100%;
        transition: background-color .5s;
        &:hover {
            background-color: var(--cb-badge-bg-color);
            background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
            background-repeat:no-repeat;
            background-size: 200% 100%;
            transition: background-size 1s, background-color 1s;
        }
    }
    */

    /* variation 2:  flash element (extra div with class="highlight"), animation works diagonally (-45deg) */
    .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;
        }
    }
    .content .vanish_animation {
        &.left {
            animation: vanishInOutLeft 10s infinite ease-in-out;
        }
    }
    /* animations - end */

    .content {
        color: var(--cb-badge-content-color);
        display: table-cell;
        vertical-align: middle;
        horiz-align: center;
        cursor: pointer;
        text-align: center;
        line-height: var(--line-height);
    }

    .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));
    }

    svg {
        margin-top: 4%;
    }

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

    /* Layout 1 */
    &.cb-badge-layout-1 {
        .title {
            font-size: var(--cb-badge-font-size-small);
            line-height: var(--line-height);
        }
    }

    /* Layout 2 */
    &.cb-badge-layout-2 {
        .content {
            position: relative;
        }
        .title {
            font-size: var(--cb-badge-font-size-small);
            position: absolute;
            bottom: 5%;
            left: 0;
            width: 100%;
            padding: 5%;
            line-height: var(--line-height);
        }
        border-radius: unset;
        background-color: unset;
    }
}