Revert "chore(util): add a utility function to create an interactive 3D effect"

This reverts commit 1f0f1d8.

Author: adrianschmidt

src/style/mixins.scss

@@ -456,98 +456,3 @@ $clickable-normal-state-transitions: (
     clip-path: inset(50%);
     white-space: nowrap;
 }
-
-// This mixin designed to enhance the visual effects,
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// is implemented in a component.
-// This adds styles to a `<div class"limel-3d-hover-effect-glow" />`, needed to create
-// a glow effect on a 3D element when the parent element is hovered.
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// Parts of these styles are controlled by the `titleFollowingTheCursor` function.
-@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) {
-    .limel-3d-hover-effect-glow {
-        transition:
-            background 0.4s ease,
-            opacity 0.4s ease;
-        pointer-events: none;
-
-        position: absolute;
-        inset: 0;
-        border-radius: $border-radius;
-
-        opacity: 0.1;
-        #{$the3dElement}:hover & {
-            opacity: 0.5;
-        }
-
-        background-image: radial-gradient(
-            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
-            rgb(var(--color-white), 0.3),
-            rgb(var(--color-white), 0)
-        );
-
-        mix-blend-mode: plus-lighter;
-    }
-}
-
-// These mixins below are designed to apply the necessary visual effects,
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// is implemented in a component.
-@mixin parent-of-the-3d-element {
-    isolation: isolate;
-    transform-style: preserve-3d;
-    perspective: 1000px;
-}
-
-@mixin the-3d-element {
-    position: relative;
-
-    transition-duration: 0.8s;
-    transition-property: transform, box-shadow, background-color;
-    transition-timing-function: ease-out;
-    transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        will-change: background-color, box-shadow, transform;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:active {
-        transition-duration: 0.2s;
-    }
-
-    &:hover,
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered);
-    }
-
-    &:hover {
-        transform: scale3d(1.01, 1.01, 1.01)
-            rotate3d(var(--limel-3d-hover-effect-rotate3d));
-    }
-    &:focus-visible {
-        transform: scale3d(1.01, 1.01, 1.01);
-    }
-}
-
-@mixin the-3d-element--clickable {
-    cursor: pointer;
-    box-shadow: var(--button-shadow-normal);
-
-    &:active {
-        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-        box-shadow: var(--button-shadow-pressed);
-    }
-
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-8-focused);
-    }
-    &:focus-visible:active {
-        box-shadow: var(--button-shadow-pressed), var(--shadow-depth-8-focused);
-    }
-}