/* ========================================
   Pulse Effect - Notification Dot Style
   ======================================== */

/* The Notification Dot - hidden by default */
.notification-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    background-color: #ff3b30;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 2;
    display: none;
    /* Hidden by default */
}

/* Show when card has .show-dot class (only one card at a time) */
.causes-card.show-dot .causes-btn-yes .notification-dot {
    display: block;
}

/* The Ripple Effect using ::after */
.notification-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff3b30;
    z-index: -1;

    /* Animation Definition */
    animation: ripple 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }

    100% {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

/* Hide notification dot on button hover, when selected, or when card is answered */
.causes-btn-yes:hover .notification-dot,
.causes-btn-yes.selected .notification-dot,
.causes-card.answered .notification-dot {
    display: none;
}

/* ========================================
   Notification Dot Simple - Reusable Version
   For simple call-to-action buttons
   ======================================== */

.notification-dot-simple {
    position: absolute;
    top: -6px;
    right: -16px;
    width: 14px;
    height: 14px;
    background-color: #ff3b30;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 2;
    display: block;
}

/* The Ripple Effect for simple dot */
.notification-dot-simple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff3b30;
    z-index: -1;
    animation: ripple 2s infinite cubic-bezier(0, 0, 0.2, 1);
}