// $Mixin
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacityIE: $opacity * 100;
  filter: alpha(opacity=$opacityIE);
}

@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}


.loader-wdes {
  @include size(50px);
}


.wdes-loading {
  @include g-c(#122d3e, #204056);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999999999;
  display: flex;
  align-items: center;
  justify-content: center;

  // Two Circles
  .loader-double {
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: var(--loader-color);
    border-bottom-color: var(--loader-color);
    @include animation(spin 1.5s linear infinite);

    &:before,
    &:after {
      content: "";
      @include absPosition(5px, 5px, 5px, 5px);
      border-radius: 50px;
      border: 6px solid transparent;
      border-top-color: var(--loader-color);
      border-bottom-color: var(--loader-color);
      @include opacity(0.6);
      @include animation(spinreverse 2s linear infinite);
    }

    &:before {
      top: 13px;
      left: 13px;
      bottom: 13px;
      right: 13px;
      @include animation(spinreverse 3s linear infinite);
    }

    @keyframes grow {
      0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 0;
      }

      50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
      }

      100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 0;
      }
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        tranform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        tranform: rotate(360deg);
      }
    }

    @-webkit-keyframes spinreverse {
      0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(-360deg);
        tranform: rotate(-360deg);
      }
    }

    @keyframes spinreverse {
      0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(-360deg);
        tranform: rotate(-360deg);
      }
    }
  }

  // Classic Spinner
  .spinner {
    -webkit-animation: spinner_animation 2s linear infinite;
    animation: spinner_animation 2s linear infinite;
    z-index: 2;
    position: relative;

    .path {
      opacity: 0.75;
      stroke: var(--loader-color);
      stroke-linecap: round;
      -webkit-animation: spinner_animation_dash 1.5s ease-in-out infinite;
      animation: spinner_animation_dash 1.5s ease-in-out infinite;
    }

    @-webkit-keyframes spinner_animation {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spinner_animation {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-webkit-keyframes spinner_animation_dash {
      0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
      }

      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
      }
    }

    @keyframes spinner_animation_dash {
      0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
      }

      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
      }
    }
  }

  // Double Bounce
  .wdes-double-bounce {
    position: relative;

    .wdes-child {
      width: 100%;
      height: 100%;
      background-color: var(--loader-color);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: wdes-doubleBounce 2s infinite ease-in-out;
      animation: wdes-doubleBounce 2s infinite ease-in-out;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

    .wdes-double-bounce2 {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    @-webkit-keyframes wdes-doubleBounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes wdes-doubleBounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
  }

  // Circle Spinner
  .wdes-circle {
    position: relative;

    .wdes-child {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;

      &::before {
        content: "";
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        background-color: var(--loader-color);
        -webkit-animation: wdes-circleBounceDelay 1.2s infinite ease-in-out both;
        animation: wdes-circleBounceDelay 1.2s infinite ease-in-out both;
        -webkit-border-radius: 50%;
        border-radius: 50%;
      }
    }

    .wdes-circle2 {
      -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);

      &::before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
    }

    .wdes-circle3 {
      -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      transform: rotate(60deg);

      &::before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
    }

    .wdes-circle4 {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);

      &::before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
    }

    .wdes-circle5 {
      -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
      transform: rotate(120deg);

      &::before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
    }

    .wdes-circle6 {
      -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
      transform: rotate(150deg);

      &::before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
      }
    }

    .wdes-circle7 {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);

      &::before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
      }
    }

    .wdes-circle8 {
      -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
      transform: rotate(210deg);

      &::before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
      }
    }

    .wdes-circle9 {
      -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
      transform: rotate(240deg);

      &::before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
      }
    }

    .wdes-circle10 {
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);

      &::before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
      }
    }

    .wdes-circle11 {
      -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
      transform: rotate(300deg);

      &::before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
      }
    }

    .wdes-circle12 {
      -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
      transform: rotate(330deg);

      &::before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
      }
    }

    @-webkit-keyframes wdes-circleBounceDelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes wdes-circleBounceDelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

  }

  // Wave
  .wdes-wave {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;

    .wdes-rect {
      background-color: var(--loader-color);
      height: 100%;
      width: 5px;
      display: inline-block;
      -webkit-animation: wdes-waveStretchDelay 1.2s infinite ease-in-out;
      animation: wdes-waveStretchDelay 1.2s infinite ease-in-out;
    }

    .wdes-rect1 {
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
    }

    .wdes-rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .wdes-rect3 {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .wdes-rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .wdes-rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes wdes-waveStretchDelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
      }

      20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }

    @keyframes wdes-waveStretchDelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
      }

      20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
  }

  // Folding Cube
  .wdes-folding-cube {
    position: relative;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);

    .wdes-cube {
      float: left;
      width: 50%;
      height: 50%;
      position: relative;
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--loader-color);
        -webkit-animation: wdes-foldCubeAngle 2.5s infinite linear both;
        animation: wdes-foldCubeAngle 2.5s infinite linear both;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
      }
    }

    .wdes-cube2 {
      -webkit-transform: scale(1.1) rotateZ(90deg);
      -ms-transform: scale(1.1) rotate(90deg);
      transform: scale(1.1) rotateZ(90deg);

      &::before {
        -webkit-animation-delay: 0.3125s;
        animation-delay: 0.3125s;
      }
    }

    .wdes-cube3 {
      -webkit-transform: scale(1.1) rotateZ(180deg);
      -ms-transform: scale(1.1) rotate(180deg);
      transform: scale(1.1) rotateZ(180deg);

      &::before {
        -webkit-animation-delay: 0.625s;
        animation-delay: 0.625s;
      }
    }

    .wdes-cube4 {
      -webkit-transform: scale(1.1) rotateZ(270deg);
      -ms-transform: scale(1.1) rotate(270deg);
      transform: scale(1.1) rotateZ(270deg);

      &::before {
        -webkit-animation-delay: 0.9375s;
        animation-delay: 0.9375s;
      }
    }

    @-webkit-keyframes wdes-foldCubeAngle {

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

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

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

    @keyframes wdes-foldCubeAngle {

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

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

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

  }

  // Custom
  .custom-preloader {
    max-height: 20vh;
    max-width: 20vw;
  }

  .spinner,
  .wdes-double-bounce,
  .wdes-circle,
  .wdes-folding-cube {
    width: 3.25rem;
    height: 3.25rem;
  }

}