/* Deconiq - Pulse
 * Pulsing status dot with an optional label (Breaking, Uživo, ...).
 * Color + dot size come from CSS variables set inline by the element;
 * override anything below via your own CSS on %root% / .dq-pulse. */
.dq-pulse {
    --dq-pulse-color: #e63b2e;
    --dq-pulse-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1;
}
.dq-pulse__dot {
    position: relative;
    flex: 0 0 auto;
    width: var(--dq-pulse-size);
    height: var(--dq-pulse-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--dq-pulse-color);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dq-pulse-color) 45%, transparent);
    animation: dq-pulse 1.5s infinite linear;
}
.dq-pulse__dot::before,
.dq-pulse__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inherit;
    animation: inherit;
    animation-delay: -0.5s;
}
.dq-pulse__dot::after {
    animation-delay: -1s;
}
@keyframes dq-pulse {
    100% { box-shadow: 0 0 0 calc(var(--dq-pulse-size) * 2) transparent; }
}
.dq-pulse__label {
    color: var(--dq-pulse-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
}
/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    .dq-pulse__dot,
    .dq-pulse__dot::before,
    .dq-pulse__dot::after {
        animation: none;
    }
}