@import '../../styles/variables';

$bdl-CountBadge-background: $bdl-watermelon-red;

@keyframes reveal_badge {
    0% {
        color: $bdl-CountBadge-background;
        transform: scale(0);
    }

    20% {
        transform: scale(1.25);
    }

    45% {
        transform: scale(.9);
    }

    65% {
        color: $bdl-CountBadge-background;
        transform: scale(1);
    }

    100% {
        color: $white;
        transform: scale(1);
    }
}

.count-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: $white;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    background-color: $bdl-CountBadge-background;
    border-radius: 16px;
    box-shadow: 0 1px 4px 0 rgba($black, .3);
    transform: scale(0);

    &.is-visible.animate {
        animation-name: reveal_badge;
        animation-duration: 1.2s;
        animation-timing-function: ease-out;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    &.is-visible:not(.animate) {
        transform: scale(1);
    }
}