body .loader-wrapper {
  display: none !important;
}

body.loading:not(.paused) .loader-wrapper {
  display: flex !important;
}

.loader {
  background-color: color-mix(in srgb, var(--color-primary), transparent 50%);
  position: relative;
  display: block;
  border-radius: 0.5rem;
  perspective: 2000px;
}

.loader:before {
  content: '';
  background-color: color-mix(in srgb, var(--color-accent), transparent 50%);
  position: absolute;
  display: block;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
  border-radius: 0.5rem;
  border-bottom-right-radius: 0;
  width: calc(50% - 0.25rem);
  height: calc(50% - 0.25rem);
  transform-origin: 100% 100%;
  animation: flip 2s linear infinite;
}

@keyframes flip {
  0%{ transform: rotateX(0deg) rotateY(0deg)}
  3%{ transform: rotateX(0deg) rotateY(0deg)}

  22%{ transform: rotateX(0deg) rotateY(-180deg)}
  28%{ transform: rotateX(0deg) rotateY(-180deg)}

  47%{ transform: rotateX(-180deg) rotateY(-180deg)}
  53%{ transform: rotateX(-180deg) rotateY(-180deg)}

  73%{ transform: rotateX(-180deg) rotateY(0deg)}
  78%{ transform: rotateX(-180deg) rotateY(0deg)}

  97%{ transform: rotateX(0deg) rotateY(0deg)}
  100%{ transform: rotateX(0deg) rotateY(0deg)}
}