/* SVG Led Info */
svg.running--on {
    fill: #17CB87;
    stroke: #17CB87;
}

svg.running--off {
    fill: #F84B4B;
    stroke: #F84B4B;
}

svg[class^="running--"] .server-status-indicator__back {
    stroke-width: 30px;
    transform-origin: center center;
    will-change: transform,stroke-dasharray,stroke-dashoffset;
}

.running--on .server-status-indicator__front {
    fill: inherit;
    stroke: inherit;
    transform: scale(1);
    animation: server-status-pulse 3s linear infinite;
}

svg[class^="running--"] .server-status-indicator__front {
    fill: var(--color-server-status-indicator-base--fill);
    stroke: var(--color-server-status-indicator-base--stroke);
    transform: scale(0);
    transform-origin: center center;
    will-change: transform,opacity;
}

svg[class^="running--"] {
    display: flex;
    width: auto;
    height: auto;
    max-width: 10px;
    max-height: 10px;
    overflow: visible;
}

@keyframes server-status-pulse{
    0%{transform:scale(1);opacity:0}
    12%{opacity:.6}
    20%{opacity:.1}
    25%{transform:scale(3);opacity:0}
    to{transform:scale(3);opacity:0}
}

@keyframes server-status-shrink{
    0%{transform:scale(0)}
    to{transform:scale(1.05)}
}

@keyframes server-status-rotate{
    0%{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

@keyframes server-status-dash{
    0%{stroke-dasharray:160;stroke-dashoffset:0}
    50%{stroke-dasharray:146;stroke-dashoffset:-156}
    to{stroke-dasharray:160;stroke-dashoffset:-320}
}