// Dotted grid backgrounds
// Provides `bg-dots`, `bg-dots-sm`, and `bg-dots-lg` classes

/**
 * @section Dotted Backgrounds
 */

/** @public Dotted grid background - 10px spacing */
.bg-dots {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}

/** @public Small dotted grid - 5px spacing */
.bg-dots-sm {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}

/** @public Large dotted grid - 20px spacing */
.bg-dots-lg {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}