.status-light {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35);

    transition:
        opacity 0.9s ease,
        filter 0.9s ease,
        box-shadow 0.9s ease;
}

.status-light::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;

    background: radial-gradient(
        circle at 35% 30%,
        #d8f2c8 0%,
        var(--light-success) 45%,
        #6aa54d 100%
    );

    transition: opacity 0.9s ease;
}

.status-light.light-success,
.status-light.light-warning,
.status-light.light-critical {
    transform: scale(1);
}

.light-success {
    background: radial-gradient(
        circle at 35% 30%,
        #b6dca8 0%,
        var(--state-success) 45%,
        #6f8d66 100%
    );

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35),
        0 0 4px rgba(143, 191, 127, 0.18);
}

.light-active {
    background: radial-gradient(
        circle at 35% 30%,
        #b6dca8 0%,
        var(--state-success) 45%,
        #6f8d66 100%
    );

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.18),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35),
        0 0 6px rgba(154, 224, 130, 0.28);

    animation: activeGreenPulse 4s ease-in-out infinite;
}

.light-active::after {
    opacity: 1;
}

.light-warning {
    background: radial-gradient(
        circle at 35% 30%,
        #f0d7a2 0%,
        var(--light-warning) 45%,
        #9b7240 100%
    );

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35),
        0 0 4px rgba(216, 180, 110, 0.18);
}

.light-critical {
    background: radial-gradient(
        circle at 35% 30%,
        #f3b0b0 0%,
        var(--light-critical) 45%,
        #9f5555 100%
    );

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35),
        0 0 4px rgba(224, 127, 127, 0.2);
}

.light-neutral {
    background: radial-gradient(
        circle at 35% 30%,
        #a9b0b8 0%,
        var(--light-neutral) 45%,
        #59616a 100%
    );

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 1px rgba(0, 0, 0, 0.35),
        0 0 3px rgba(127, 138, 150, 0.12);
}

@keyframes activeGreenPulse {
    0% {
        box-shadow:
            inset 1px 1px 1px rgba(255, 255, 255, 0.18),
            inset -1px -1px 1px rgba(0, 0, 0, 0.35),
            0 0 4px rgba(154, 224, 130, 0.2);
    }

    50% {
        box-shadow:
            inset 1px 1px 1px rgba(255, 255, 255, 0.18),
            inset -1px -1px 1px rgba(0, 0, 0, 0.35),
            0 0 8px rgba(154, 224, 130, 0.4);
    }

    100% {
        box-shadow:
            inset 1px 1px 1px rgba(255, 255, 255, 0.18),
            inset -1px -1px 1px rgba(0, 0, 0, 0.35),
            0 0 4px rgba(154, 224, 130, 0.2);
    }
}