@use "../core/instances" as *;

@include keyframes(cube_spin) {
    0% {
        @include transform(
            rotateX(-24deg)
            rotateY(36deg)
        );
    }

    25% {
        @include transform(
            rotateX(-24deg)
            rotateY(126deg)
        );
    }

    50% {
        @include transform(
            rotateX(24deg)
            rotateY(216deg)
        );
    }

    75% {
        @include transform(
            rotateX(-18deg)
            rotateY(306deg)
        );
    }

    100% {
        @include transform(
            rotateX(-24deg)
            rotateY(396deg)
        );
    }
};

.documentationpage {
    .cube_transform_style_scene {
        @include center-flex-column;
        @include wh(220px);
        perspective: 720px;
    }

    .cube_transform_style {
        @include animation(cube_spin 8s linear infinite);
        @include transform-style(preserve-3d);
        @include position;
        @include transform(
            rotateX(-24deg)
            rotateY(36deg)
        );
        @include whs(120px);

        .face {
            @include backface-visibility(hidden);
            @include center-flex-column;
            @include position(absolute);
            @include whs(100%);
            box-sizing: border-box;
            border: 1px solid rgba($c1, 0.28);
            box-shadow: inset 0 0 0 1px rgba($c1, 0.08);
            font-size: 38px;
            font-weight: bold;
            color: $c1;
        }

        .front {
            @include transform(translateZ(60px));
            background: rgba(245, 243, 243, 0.92);
        }

        .back {
            @include transform(
                rotateY(180deg)
                translateZ(60px)
            );
            background: rgba(58, 64, 90, 0.92);
        }

        .right {
            @include transform(
                rotateY(90deg)
                translateZ(60px)
            );
            background: rgba(160, 19, 3, 0.88);
        }

        .left {
            @include transform(
                rotateY(-90deg)
                translateZ(60px)
            );
            background: rgba(45, 57, 108, 0.9);
        }

        .top {
            @include transform(
                rotateX(90deg)
                translateZ(60px)
            );
            background: rgba(251, 176, 59, 0.9);
        }

        .bottom {
            @include transform(
                rotateX(-90deg)
                translateZ(60px)
            );
            background: rgba(190, 70, 210, 0.86);
        }
    }
}