@import "variables";
@import "base";

.cube_transform_style {
    @include transform-style(preserve-3d);
    @include transform(rotate3d(1, 1, 1, 30deg));
    @include whs(100px);

    .face {
        @include backface-visibility(inherit);
        @include center-flex-column();
        @include position(absolute);
        @include whs(100%);
        font-size: 60px;
        color: $c1;
    }

    .front {
        @include transform(
            translateZ(50px)
        );
        background: rgba(90, 90, 90, 0.7);
    }

    .back {
        @include transform(
            translateZ(-50px)
            rotateY(180deg)
        );
        background: rgba(0, 210, 0, 0.7);
    }

    .right {
        @include transform(
            translateZ(50px)
            rotateY(90deg)
        );
        background: rgba(210, 0, 0, 0.7);
    }

    .left {
        background: rgba(0, 0, 210, 0.7);
        transform: rotateY(-90deg) translateZ(50px);
    }

    .top {
        background: rgba(210, 210, 0, 0.7);
        transform: rotateX(90deg) translateZ(50px);
    }

    .bottom {
        background: rgba(210, 0, 210, 0.7);
        transform: rotateX(-90deg) translateZ(50px);
    }
}