.space-unit-rem { --space-unit: 1rem; }
.space-unit-em { --space-unit: 1em; }
.space-unit-px { --space-unit: 16px; }

.align-baseline { vertical-align: baseline; }
.align-sub { vertical-align: sub; }
.align-super { vertical-align: super; }
.align-text-top { vertical-align: text-top; }
.align-text-bottom { vertical-align: text-bottom; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

.pointer-events-auto { pointer-events: auto; }
.pointer-events-none { pointer-events: none; }

.user-select-none { user-select: none; }
.user-select-all { user-select: all; }

[class^="color-gradient"],
[class*=" color-gradient"] {
  color: transparent !important;
  background-clip: text;
}

.backdrop-blur-10 { backdrop-filter: blur(10px); }
.backdrop-blur-20 { backdrop-filter: blur(20px); }

.isolate { isolation: isolate; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-difference { mix-blend-mode: difference; }

.perspective-xs { perspective: 250px; }
.perspective-sm { perspective: 500px; }
.perspective-md { perspective: 1000px; }
.perspective-lg { perspective: 1500px; }
.perspective-xl { perspective: 3000px; }

[class^="flip"],
[class*=" flip"],
[class^="-rotate"],
[class*=" -rotate"],
[class^="rotate"],
[class*=" rotate"],
[class^="-translate"],
[class*=" -translate"],
[class^="translate"],
[class*=" translate"],
[class^="-scale"],
[class*=" -scale"],
[class^="scale"],
[class*=" scale"],
[class^="-skew"],
[class*=" -skew"],
[class^="skew"],
[class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;
  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0))
    rotateX(var(--rotate-x, 0))
    rotateY(var(--rotate-y, 0))
    rotateZ(var(--rotate-z, var(--rotate)))
    skewX(var(--skew-x, var(--skew)))
    skewY(var(--skew-y, 0))
    scaleX(var(--scale-x, var(--scale)))
    scaleY(var(--scale-y, var(--scale)));
}

.flip { --scale: -1; }
.flip-x { --scale-x: -1; }
.flip-y { --scale-y: -1; }
.rotate-90 { --rotate: 90deg; }
.rotate-180 { --rotate: 180deg; }
.rotate-270 { --rotate: 270deg; }

.-translate-50\% { --translate: -50%; }
.-translate-x-50\% { --translate-x: -50%; }
.-translate-y-50\% { --translate-y: -50%; }
.translate-50\% { --translate: 50%; }
.translate-x-50\% { --translate-x: 50%; }
.translate-y-50\% { --translate-y: 50%; }

.origin-center { transform-origin: center; }
.origin-top { transform-origin: center top; }
.origin-right { transform-origin: right center; }
.origin-bottom { transform-origin: center bottom; }
.origin-left { transform-origin: left center; }
.origin-top-left { transform-origin: left top; }
.origin-top-right { transform-origin: right top; }
.origin-bottom-left { transform-origin: left bottom; }
.origin-bottom-right { transform-origin: right bottom; }

.fill-current { fill: currentColor; }
.stroke-current { stroke: currentColor; }
.stroke-1 { stroke-width: 1px; }
.stroke-2 { stroke-width: 2px; }
.stroke-3 { stroke-width: 3px; }
.stroke-4 { stroke-width: 4px; }