/*------------------------------------------------------------------
[Table of contents]

1. Loader
-------------------------------------------------------------------*/
/**
 * 1. Loader
 */
.struninntwitch-loader-wrap {
  display: flex;
  justify-content: center;
}

.struninntwitch-loader {
  width: 43px;
  height: 43px;
}

.struninntwitch-loader-content {
  width: 30px;
  height: 30px;
  transform: rotateZ(45deg);

  div {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--struninntwitch-global-primary-color);
      animation: struninntwitchFoldAnimation 2.4s infinite linear both;
      transform-origin: 100% 100%;
    }

    &:nth-child(2) {
      transform: scale(1.1) rotateZ(90deg);

      &::before {
        animation-delay: .3s;
      }
    }

    &:nth-child(3) {
      transform: scale(1.1) rotateZ(270deg);

      &::before {
        animation-delay: .9s;
      }
    }

    &:nth-child(4) {
      transform: scale(1.1) rotateZ(180deg);

      &::before {
        animation-delay: .6s;
      }
    }
  }
}

@keyframes struninntwitchFoldAnimation {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}