.uniPattern { background-size: var(--gmPatternSize) var(--gmPatternSize); }

.uniPattern.lines.d45  { --gmPatternDeg:  45deg; }
.uniPattern.lines.d135 { --gmPatternDeg: 135deg; }

.uniPattern.line1 { --gmPatternLineSize: 1px; }
.uniPattern.line2 { --gmPatternLineSize: 2px; }
.uniPattern.line3 { --gmPatternLineSize: 3px; }
.uniPattern.line4 { --gmPatternLineSize: 4px; }
.uniPattern.line5 { --gmPatternLineSize: 5px; }
.uniPattern.line6 { --gmPatternLineSize: 6px; }
.uniPattern.line7 { --gmPatternLineSize: 7px; }
.uniPattern.line8 { --gmPatternLineSize: 8px; }

.uniPattern.size2  { --gmPatternSize:  2px; }
.uniPattern.size3  { --gmPatternSize:  3px; }
.uniPattern.size4  { --gmPatternSize:  4px; }
.uniPattern.size5  { --gmPatternSize:  5px; }
.uniPattern.size6  { --gmPatternSize:  6px; }
.uniPattern.size7  { --gmPatternSize:  7px; }
.uniPattern.size8  { --gmPatternSize:  8px; }
.uniPattern.size10 { --gmPatternSize: 10px; }
.uniPattern.size12 { --gmPatternSize: 12px; }
.uniPattern.size14 { --gmPatternSize: 14px; }
.uniPattern.size16 { --gmPatternSize: 16px; }
.uniPattern.size18 { --gmPatternSize: 18px; }
.uniPattern.size20 { --gmPatternSize: 20px; }
.uniPattern.size22 { --gmPatternSize: 22px; }
.uniPattern.size24 { --gmPatternSize: 24px; }
.uniPattern.size28 { --gmPatternSize: 28px; }
.uniPattern.size30 { --gmPatternSize: 30px; }
.uniPattern.size32 { --gmPatternSize: 32px; }

.uniPattern.lines { background-image: repeating-linear-gradient(var(--gmPatternDeg), currentColor 0, currentColor var(--gmPatternLineSize), transparent 0, transparent 50%); }
.uniPattern.cross { background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor var(--gmPatternLineSize), transparent 0, transparent 50%), repeating-linear-gradient(135deg, currentColor 0, currentColor var(--gmPatternLineSize), transparent 0, transparent 50%); }