.loader {
  --size: 120px;
  width: var(--size);
  height: var(--size);
  zoom: 0.6;
  position: relative;
  animation: girar 8s linear infinite alternate both;

  &,
  .cube,
  .side {
    transform-style: preserve-3d;
    perspective: 10000px;
  }

  .cube {
    width: 120px;
    height: 120px;
    position: absolute;

    .side {
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #000;
      overflow: hidden;
      top: 0;
      left: 0;

      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, #60efff, #00ff87, #e81cff);
        filter: blur(50px);
      }

      &.front {
        transform: none;
      }

      &.behind {
        transform: translateZ(-120px);
      }

      &.right {
        transform-origin: 100% 0%;
        transform: rotateY(-90deg);
      }

      &.left {
        transform-origin: 0% 0%;
        transform: rotateY(90deg);
      }

      &.top {
        transform-origin: 50% 0%;
        transform: rotateX(-90deg);
      }
      &.bottom {
        transform-origin: 50% 100%;
        transform: rotateX(90deg);
      }
    }
  }

  .triangle {
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 118px;
    transform-style: preserve-3d;
    perspective: 10000px;

    &.triangle-top {
      bottom: -118px;
      transform: scale3d(-1, -1, -1) translateZ(118px);
    }

    &.triangle-right {
      left: 118px;
      bottom: 0;
      transform: rotate(-90deg) scaleY(-1) scaleX(-1);
    }

    &.triangle-left {
      left: -118px;
      bottom: 0;
      transform: rotate(-90deg) scaleX(-1);
    }

    &.triangle-frontend {
      bottom: -1px;
      transform: rotate(90deg) rotateX(-90deg) translate(0px, -61px)
        translateZ(-116px);
      left: -175px;
    }

    &.triangle-backend {
      bottom: -36px;
      transform: rotate(90deg) rotateX(-90deg) scaleY(-1)
        translate(-36px, -178px) translateZ(253px);
      left: 194px;
    }

    .side {
      transform-style: preserve-3d;
      perspective: 10000px;
      width: 100%;
      height: 100%;
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      position: absolute;

      &.front,
      &.behind {
        transform-origin: 50% 100%;
      }

      &.front {
        background-color: #fff8;
        transform: rotateX(30deg);
      }

      &.behind {
        background-color: #00f8;
        transform: translateZ(-120px) rotateX(-30deg);
      }

      &.right {
        transform-origin: 100% 100%;
        transform: rotateY(-90deg) rotateX(-30deg);
        background-color: #f0f8;
      }
      &.left {
        transform-origin: 0% 100%;
        transform: rotateY(90deg) rotateX(-30deg);
        background-color: #0f08;
      }
    }
  }
}

@keyframes girar {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}