.ds-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--ds-bg-opacity, 0.05);
  color: var(--ds-bg-color, var(--ds-color-text));
}

.ds-bg-dots {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 20px 20px;
}

.ds-bg-grid {
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
}

.ds-bg-diagonal {
  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
}

/* Delegated to components/kinetic-logo.css for specific handling of patterns-icon.svg */
.ds-bg-kinetic {
  pointer-events: none;
}