@import "inc/bootstrap";

$foreground: $darkBarTxt;
.pulsable {
    z-index: 1;//create a stacking context to ensure it is display on top of its container
    display: block;
    border-radius: 50%;
    position: absolute;
    background: $foreground;
    width: 1px;
    height: 1px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 0 rgba($foreground, 0.6);
    @include keyframes(pulsable-pulse) {
        0% {box-shadow: 0 0 0 0 rgba($foreground, 0.6)}
        50% {box-shadow: 0 0 0 200px rgba($foreground, 0)}
        100% {box-shadow: 0 0 0 0 rgba($foreground, 0)}
    }
    &.animate{
        @include animation(pulsable-pulse 1s ease-out infinite);
    }
}