[style*='--translate:'],
[style*='--translateX:'],
[style*='--translateY:'],
[style*='--scale:'],
[style*='--scaleX:'],
[style*='--scaleY:'],
[style*='--rotate:'],
[style*='--skew:'],
[style*='--skewX:'],
[style*='--skewY:'] {
  transform: translate(var(--translate, 0)) translateX(var(--translateX, 0)) translateY(var(--translateY, 0)) rotate(var(--rotate, 0)) scale(var(--scale, 1)) scaleX(var(--scaleX, 1)) scaleY(var(--scaleY, 1)) skew(var(--skew, 0))
    skewX(var(--skewX, 0)) skewY(var(--skewY, 0));
}

[style*='--translate-hvr:'],
[style*='--translateX-hvr:'],
[style*='--translateY-hvr:'],
[style*='--scale-hvr:'],
[style*='--scaleX-hvr:'],
[style*='--scaleY-hvr:'],
[style*='--rotate-hvr:'],
[style*='--skew-hvr:'],
[style*='--skewX-hvr:'],
[style*='--skewY-hvr:'] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
  &:hover {
    transition: var(--transition);
    transform: translate(var(--translate-hvr, 0)) translateX(var(--translateX-hvr, 0)) translateY(var(--translateY-hvr, 0)) rotate(var(--rotate-hvr, 0)) scale(var(--scale-hvr, 1)) scaleX(var(--scaleX-hvr, 1)) scaleY(var(--scaleY-hvr, 1))
      skew(var(--skew-hvr, 0)) skewX(var(--skewX-hvr, 0)) skewY(var(--skewY-hvr, 0));
  }
}

[style*='--op-hvr:'] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
  &:hover {
    transition: var(--transition);
    opacity: var(--op-hvr) !important;
  }
}

[style*='--bgc-hvr:'] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
  &:hover {
    transition: var(--transition);
    background-color: var(--bgc-hvr) !important;
  }
}

[style*='--clr-hvr:'] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
  &:hover {
    transition: var(--transition);
    color: var(--clr-hvr) !important;
  }
}

[style*='--t-delay:'] {
  transition-delay: var(--t-delay) !important;
}

[style*='--origin:'] {
  transform-origin: var(--origin) !important;
}

[style*='--t-duration:'] {
  transition-duration: var(--t-duration) !important;
}

[style*='--t-func:'] {
  transition-timing-function: var(--t-func) !important;
}

[style*='--a-delay:'] {
  animation-delay: var(--a-delay) !important;
}

[style*='--a-duration:'] {
  animation-duration: var(--a-duration) !important;
}

[style*='--a-func:'] {
  animation-timing-function: var(--a-func) !important;
}

[style*='--a-dir:'] {
  animation-direction: var(--a-dir) !important;
}

[style*='--a-mode:'] {
  animation-fill-mode: var(--a-mode) !important;
}

[style*='--a-name:'] {
  animation-name: var(--a-name) !important;
}

/* addons :
  https://open-props.style
  https://github.com/argyleink/open-props
  https://animate.style
  https://github.com/animate-css
*/