.loader {
  --size: 130px;
  --zoom: 0.6;
  --bg-blend-mode: difference;
  --min-deg: 1deg;
  --max-deg: 2deg;
  --general-gradient: repeating-conic-gradient(
      from 0deg at 0% 0%,
      #fff 0 var(--min-deg),
      magenta var(--min-deg) var(--max-deg)
    ),
    repeating-conic-gradient(
      from 0deg at 100% 0%,
      #fff 0 var(--min-deg),
      magenta var(--min-deg) var(--max-deg)
    ),
    repeating-conic-gradient(
      from 0deg at 100% 100%,
      #fff 0 var(--min-deg),
      magenta var(--min-deg) var(--max-deg)
    ),
    repeating-conic-gradient(
      from 0deg at 0% 100%,
      #fff 0 var(--min-deg),
      magenta var(--min-deg) var(--max-deg)
    );

  width: var(--size);
  height: var(--size);
  zoom: var(--zoom);
  position: relative;
  perspective: 10000px;
  transform-style: preserve-3d;
  animation: rotar 20s linear infinite alternate both;

  &:hover {
    .side,
    .base {
      filter: brightness(200%);
    }
  }

  .side,
  .base {
    transition: filter 0.4s ease;
    /* filter: brightness(500%) invert(1); */
  }

  .base {
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: polygon(
      0% 25%,
      25% 0,
      75% 0,
      100% 25%,
      100% 75%,
      75% 100%,
      25% 100%,
      0% 75%
    );
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    background-image: var(--general-gradient);
    background-blend-mode: var(--bg-blend-mode);

    &.base-top {
      top: 0;
    }

    &.base-bottom {
      top: 180%;
    }
  }

  .side {
    position: absolute;
    width: 50%;
    height: 180%;
    left: 50%;
    top: 0;
    background-image: var(--general-gradient);
    background-blend-mode: var(--bg-blend-mode);

    &.side-1 {
      transform: translateX(-50%) translateZ(-130px);
    }

    &.side-2 {
      width: 35%;
      transform-origin: 100% 0%;
      transform: translateX(-28%) translateZ(-130px) rotateY(135deg);
    }

    &.side-3 {
      width: 35%;
      transform-origin: 0% 0%;
      transform: translateX(-71%) translateZ(-130px) rotateY(-135deg);
    }

    &.side-4 {
      transform: translateX(50%) translateZ(-65px) rotateY(90deg);
    }

    &.side-5 {
      transform: translateX(-150%) translateZ(-65px) rotateY(90deg);
    }

    &.side-6 {
      width: 35%;
      transform-origin: 100% 0%;
      transform: translateX(-28%) rotateY(-135deg);
    }

    &.side-7 {
      width: 35%;
      transform-origin: 0% 0%;
      transform: translateX(-71%) rotateY(135deg);
    }

    &.side-8 {
      transform: translateX(-50%);
    }
  }
}

@keyframes rotar {
  0% {
    transform: rotateX(-360deg) rotateY(-360deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}