Capacity Storage Overflow

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-overflow-title" class="pulsar pulsar-capacity-overflow" data-pulsar="capacity-overflow" role="img" viewBox="0 0 160 96"><title id="capacity-overflow-title">Primary storage pool exceeding maximum capacity and spilling overflow blocks into an adjacent standby buffer</title><g fill="currentColor" font-family="monospace"><text x="24" y="18" font-size="3.5" opacity=".4">primary-pool</text><text id="capacity-overflow-txt-pri" x="78" y="18" font-size="4" font-weight="700" opacity=".9" text-anchor="end">100%</text><text x="96" y="18" font-size="3.5" opacity=".4">standby-buffer</text><text id="capacity-overflow-txt-buf" x="136" y="18" font-size="4" font-weight="700" opacity="0" text-anchor="end">+3 BLK</text></g><rect id="capacity-overflow-frame-pri" width="54" height="48" x="24" y="24" fill="none" stroke="currentColor" stroke-width="1" opacity=".4" rx="2"></rect><g id="capacity-overflow-pri-blocks" fill="currentColor" opacity=".35"><rect width="13" height="8" x="28" y="28" rx="1"></rect><rect width="13" height="8" x="44" y="28" rx="1"></rect><rect width="13" height="8" x="60" y="28" rx="1"></rect><rect width="13" height="8" x="28" y="39" rx="1"></rect><rect width="13" height="8" x="44" y="39" rx="1"></rect><rect width="13" height="8" x="60" y="39" rx="1"></rect><rect width="13" height="8" x="28" y="50" rx="1"></rect><rect width="13" height="8" x="44" y="50" rx="1"></rect><rect width="13" height="8" x="60" y="50" rx="1"></rect><rect width="13" height="8" x="28" y="61" rx="1"></rect><rect width="13" height="8" x="44" y="61" rx="1"></rect><rect width="13" height="8" x="60" y="61" rx="1"></rect></g><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".25"><line x1="78" x2="96" y1="44" y2="44"></line><line x1="78" x2="96" y1="52" y2="52"></line></g><line id="capacity-overflow-spillway" x1="78" x2="96" y1="48" y2="48" fill="none" stroke="currentColor" stroke-dasharray="2 3" stroke-width="1.2" opacity="0"></line><rect id="capacity-overflow-frame-buf" width="40" height="48" x="96" y="24" fill="none" stroke="currentColor" stroke-dasharray="2 2" stroke-width=".8" opacity=".25" rx="2"></rect><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><rect width="14" height="8" x="100" y="28" rx="1"></rect><rect width="14" height="8" x="118" y="28" rx="1"></rect><rect width="14" height="8" x="100" y="39" rx="1"></rect><rect width="14" height="8" x="118" y="39" rx="1"></rect><rect width="14" height="8" x="100" y="50" rx="1"></rect><rect width="14" height="8" x="118" y="50" rx="1"></rect></g><g id="capacity-overflow-buf-blocks" fill="currentColor" opacity="0"><rect width="14" height="8" x="100" y="28" rx="1"></rect><rect width="14" height="8" x="100" y="39" rx="1"></rect><rect width="14" height="8" x="100" y="50" rx="1"></rect></g></svg>

.pulsar-capacity-overflow {
  --pulsar-accent: currentColor;
}

.pulsar-capacity-overflow #capacity-overflow-frame-pri,
.pulsar-capacity-overflow #capacity-overflow-spillway {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-overflow #capacity-overflow-buf-blocks rect,
.pulsar-capacity-overflow #capacity-overflow-txt-pri,
.pulsar-capacity-overflow #capacity-overflow-txt-buf {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-overflow #capacity-overflow-frame-pri {
  animation: capacity-overflow-alert 6400ms ease-in-out infinite;
}

@keyframes capacity-overflow-alert {
  0%,
  20% {
    stroke-width: 1;
    opacity: 0.4;
  }
  30%,
  75% {
    stroke-width: 1.8;
    opacity: 1;
  }
  88%,
  100% {
    stroke-width: 1;
    opacity: 0.4;
  }
}

.pulsar-capacity-overflow #capacity-overflow-pri-blocks {
  animation: capacity-overflow-fill-pri 6400ms ease-in-out infinite;
}

@keyframes capacity-overflow-fill-pri {
  0%,
  15% {
    opacity: 0.25;
  }
  30%,
  75% {
    opacity: 0.85;
  }
  88%,
  100% {
    opacity: 0.25;
  }
}

.pulsar-capacity-overflow #capacity-overflow-spillway {
  animation: capacity-overflow-stream 6400ms linear infinite;
}

@keyframes capacity-overflow-stream {
  0%,
  28% {
    opacity: 0;
    stroke-dashoffset: 20;
  }
  35%,
  72% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  80%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-overflow #capacity-overflow-buf-blocks {
  animation: capacity-overflow-fill-buf 6400ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-overflow-fill-buf {
  0%,
  32% {
    opacity: 0;
    transform: translateX(-12px);
  }
  45%,
  75% {
    opacity: 0.85;
    transform: translateX(0);
  }
  85%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

.pulsar-capacity-overflow #capacity-overflow-txt-buf {
  animation: capacity-overflow-badge 6400ms ease-out infinite;
}

@keyframes capacity-overflow-badge {
  0%,
  32% {
    opacity: 0;
  }
  42%,
  75% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-overflow * {
    animation: none !important;
  }
  .pulsar-capacity-overflow #capacity-overflow-frame-pri {
    stroke-width: 1.6;
    opacity: 1;
  }
  .pulsar-capacity-overflow #capacity-overflow-buf-blocks {
    opacity: 0.85;
    transform: translateX(0);
  }
  .pulsar-capacity-overflow #capacity-overflow-txt-buf {
    opacity: 1;
  }
}