.dfs-alert,
.dfs-empty-state {
  border: 1px solid var(--dfs-color-border);
  border-radius: var(--dfs-radius-lg);
  background: var(--dfs-color-surface);
}

.dfs-alert {
  display: flex;
  gap: var(--dfs-space-4);
  padding: var(--dfs-space-5);
}

.dfs-alert--success {
  border-color: #bfe8ca;
  background: #f3fbf5;
}

.dfs-alert--error {
  border-color: #f0c4c4;
  background: #fff7f7;
}

.dfs-empty-state {
  display: grid;
  min-height: 260px;
  place-items: center;
  gap: var(--dfs-space-4);
  padding: clamp(var(--dfs-space-7), 6vw, var(--dfs-space-11));
  text-align: center;
}

.dfs-empty-state > * {
  max-width: 640px;
}

.dfs-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--dfs-radius-sm);
  background: #e9edf3;
}

.dfs-skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent);
  content: "";
  animation: dfs-skeleton-shimmer 1.4s infinite;
}

@keyframes dfs-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dfs-skeleton::after {
    animation: none;
  }
}