.pattern-checks-sm {
  background-image: repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.pattern-checks-md {
  background-image: repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}

.pattern-checks-lg {
  background-image: repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor);
  background-position: 0 0, 50px 50px;
  background-size: 100px 100px;
}

.pattern-checks-xl {
  background-image: repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, #0000 25% 75%, currentColor 75%, currentColor);
  background-position: 0 0, 100px 100px;
  background-size: 200px 200px;
}

.pattern-grid-sm {
  background-image: linear-gradient(currentColor 1px, #0000 1px), linear-gradient(to right, currentColor 1px, #0000 1px);
  background-size: 10px 10px;
}

.pattern-grid-md {
  background-image: linear-gradient(currentColor 1px, #0000 1px), linear-gradient(to right, currentColor 1px, #0000 1px);
  background-size: 25px 25px;
}

.pattern-grid-lg {
  background-image: linear-gradient(currentColor 1px, #0000 1px), linear-gradient(to right, currentColor 1px, #0000 1px);
  background-size: 50px 50px;
}

.pattern-grid-xl {
  background-image: linear-gradient(currentColor 1px, #0000 1px), linear-gradient(to right, currentColor 1px, #0000 1px);
  background-size: 100px 100px;
}

.pattern-dots-sm {
  background-image: radial-gradient(currentColor .5px, #0000 .5px);
  background-size: 5px 5px;
}

.pattern-dots-md {
  background-image: radial-gradient(currentColor 1px, #0000 1px);
  background-size: 10px 10px;
}

.pattern-dots-lg {
  background-image: radial-gradient(currentColor 1.5px, #0000 1.5px);
  background-size: 15px 15px;
}

.pattern-dots-xl {
  background-image: radial-gradient(currentColor 2px, #0000 2px);
  background-size: 20px 20px;
}

.pattern-cross-dots-sm {
  background-image: radial-gradient(currentColor .5px, #0000 .5px), radial-gradient(currentColor .5px, #0000 .5px);
  background-position: 0 0, 5px 5px;
  background-size: 10px 10px;
}

.pattern-cross-dots-md {
  background-image: radial-gradient(currentColor 1px, #0000 1px), radial-gradient(currentColor 1px, #0000 1px);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.pattern-cross-dots-lg {
  background-image: radial-gradient(currentColor 1.5px, #0000 1.5px), radial-gradient(currentColor 1.5px, #0000 1.5px);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

.pattern-cross-dots-xl {
  background-image: radial-gradient(currentColor 2px, #0000 2px), radial-gradient(currentColor 2px, #0000 2px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

.pattern-vertical-lines-sm {
  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 10px 10px;
}

.pattern-horizontal-lines-sm {
  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 10px 10px;
}

.pattern-diagonal-lines-sm {
  background-image: repeating-linear-gradient(45deg, currentColor 0 1px, #0000 0 50%);
  background-size: 10px 10px;
}

.pattern-vertical-lines-md {
  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 25px 25px;
}

.pattern-horizontal-lines-md {
  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 25px 25px;
}

.pattern-diagonal-lines-md {
  background-image: repeating-linear-gradient(45deg, currentColor 0 1px, #0000 0 50%);
  background-size: 25px 25px;
}

.pattern-vertical-lines-lg {
  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 50px 50px;
}

.pattern-horizontal-lines-lg {
  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 50px 50px;
}

.pattern-diagonal-lines-lg {
  background-image: repeating-linear-gradient(45deg, currentColor 0 1px, #0000 0 50%);
  background-size: 50px 50px;
}

.pattern-vertical-lines-xl {
  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 100px 100px;
}

.pattern-horizontal-lines-xl {
  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, #0000 1px, #0000);
  background-size: 100px 100px;
}

.pattern-diagonal-lines-xl {
  background-image: repeating-linear-gradient(45deg, currentColor 0 1px, #0000 0 50%);
  background-size: 100px 100px;
}

.pattern-vertical-stripes-sm {
  background-image: linear-gradient(90deg, #0000 50%, currentColor 50%);
  background-size: 10px 10px;
}

.pattern-horizontal-stripes-sm {
  background-image: linear-gradient(0deg, #0000 50%, currentColor 50%);
  background-size: 10px 10px;
}

.pattern-diagonal-stripes-sm {
  background: repeating-linear-gradient(45deg, #0000, #0000 10px, currentColor 10px 20px);
}

.pattern-vertical-stripes-md {
  background-image: linear-gradient(90deg, #0000 50%, currentColor 50%);
  background-size: 25px 25px;
}

.pattern-horizontal-stripes-md {
  background-image: linear-gradient(0deg, #0000 50%, currentColor 50%);
  background-size: 25px 25px;
}

.pattern-diagonal-stripes-md {
  background: repeating-linear-gradient(45deg, #0000, #0000 25px, currentColor 25px 50px);
}

.pattern-vertical-stripes-lg {
  background-image: linear-gradient(90deg, #0000 50%, currentColor 50%);
  background-size: 50px 50px;
}

.pattern-horizontal-stripes-lg {
  background-image: linear-gradient(0deg, #0000 50%, currentColor 50%);
  background-size: 50px 50px;
}

.pattern-diagonal-stripes-lg {
  background: repeating-linear-gradient(45deg, #0000, #0000 50px, currentColor 50px 100px);
}

.pattern-vertical-stripes-xl {
  background-image: linear-gradient(90deg, #0000 50%, currentColor 50%);
  background-size: 100px 100px;
}

.pattern-horizontal-stripes-xl {
  background-image: linear-gradient(0deg, #0000 50%, currentColor 50%);
  background-size: 100px 100px;
}

.pattern-diagonal-stripes-xl {
  background: repeating-linear-gradient(45deg, #0000, #0000 100px, currentColor 100px 200px);
}

.pattern-zigzag-sm {
  background-color: #0000;
  background-image: linear-gradient(135deg, currentColor 25%, #0000 25%), linear-gradient(225deg, currentColor 25%, #0000 25%), linear-gradient(315deg, currentColor 25%, #0000 25%), linear-gradient(45deg, currentColor 25%, #0000 25%);
  background-position: -10px 0, -10px 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 20px 20px;
  background-attachment: scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
}

.pattern-zigzag-md {
  background-color: #0000;
  background-image: linear-gradient(135deg, currentColor 25%, #0000 25%), linear-gradient(225deg, currentColor 25%, #0000 25%), linear-gradient(315deg, currentColor 25%, #0000 25%), linear-gradient(45deg, currentColor 25%, #0000 25%);
  background-position: -25px 0, -25px 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 50px 50px;
  background-attachment: scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
}

.pattern-zigzag-lg {
  background-color: #0000;
  background-image: linear-gradient(135deg, currentColor 25%, #0000 25%), linear-gradient(225deg, currentColor 25%, #0000 25%), linear-gradient(315deg, currentColor 25%, #0000 25%), linear-gradient(45deg, currentColor 25%, #0000 25%);
  background-position: -50px 0, -50px 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 100px 100px;
  background-attachment: scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
}

.pattern-zigzag-xl {
  background-color: #0000;
  background-image: linear-gradient(135deg, currentColor 25%, #0000 25%), linear-gradient(225deg, currentColor 25%, #0000 25%), linear-gradient(315deg, currentColor 25%, #0000 25%), linear-gradient(45deg, currentColor 25%, #0000 25%);
  background-position: -100px 0, -100px 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 200px 200px;
  background-attachment: scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
}

.pattern-triangles-sm {
  background-image: linear-gradient(45deg, currentColor 50%, #0000 50%);
  background-size: 10px 10px;
}

.pattern-triangles-md {
  background-image: linear-gradient(45deg, currentColor 50%, #0000 50%);
  background-size: 25px 25px;
}

.pattern-triangles-lg {
  background-image: linear-gradient(45deg, currentColor 50%, #0000 50%);
  background-size: 50px 50px;
}

.pattern-triangles-xl {
  background-image: linear-gradient(45deg, currentColor 50%, #0000 50%);
  background-size: 100px 100px;
}

.text-pattern {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.pattern-w-sm {
  width: 10px;
}

.pattern-h-sm {
  height: 10px;
}

.pattern-w-md {
  width: 25px;
}

.pattern-h-md {
  height: 25px;
}

.pattern-w-lg {
  width: 50px;
}

.pattern-h-lg {
  height: 50px;
}

.pattern-w-xl {
  width: 100px;
}

.pattern-h-xl {
  height: 100px;
}