@buun_group/brutalist-ui/src/react/alert/AlertStack.module.css

A brutalist-styled component library

.stack {
  display: flex;
  width: 100%;
}

/* Direction variants */
.vertical {
  flex-direction: column;
}

.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Gap variants */
.gap-sm {
  gap: var(--brutal-space-2);
}

.gap-md {
  gap: var(--brutal-space-4);
}

.gap-lg {
  gap: var(--brutal-space-6);
}

/* Stagger animation for children */
.stack > * {
  animation-fill-mode: both;
}

.vertical > *:nth-child(1) {
  animation-delay: 0s;
}

.vertical > *:nth-child(2) {
  animation-delay: 0.1s;
}

.vertical > *:nth-child(3) {
  animation-delay: 0.2s;
}

.vertical > *:nth-child(4) {
  animation-delay: 0.3s;
}

.vertical > *:nth-child(5) {
  animation-delay: 0.4s;
}

.vertical > *:nth-child(n+6) {
  animation-delay: 0.5s;
}

/* Horizontal stagger */
.horizontal > *:nth-child(1) {
  animation-delay: 0s;
}

.horizontal > *:nth-child(2) {
  animation-delay: 0.05s;
}

.horizontal > *:nth-child(3) {
  animation-delay: 0.1s;
}

.horizontal > *:nth-child(4) {
  animation-delay: 0.15s;
}

.horizontal > *:nth-child(n+5) {
  animation-delay: 0.2s;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .stack > * {
    animation-delay: 0s !important;
  }
}