@import './mixin';

.@{prefix}-loading {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 3em;
  height: 3em;
  margin: auto;
  position: fixed;

  -webkit-animation: rotate .8s linear infinite;
  -moz-animation: rotate .8s linear infinite;
  -o-animation: rotate .8s linear infinite;
  animation: rotate .8s linear infinite;
  .@{prefix}-loading-content{
    .@{prefix}-loading-dot{
      position: absolute;
      margin: auto;
      width: 1em;
      height: 1em;
      border-radius: 100%;

      -webkit-transition: all .8s ease;
      -moz-transition: all .8s ease;
      -o-transition: all .8s ease;
      transition: all .8s ease;

      &.white {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        opacity: 0;

        -webkit-animation: flash .8s linear infinite;
        -moz-animation: flash .8s linear infinite;
        -o-animation: flash .8s linear infinite;
        animation: flash .8s linear infinite;
      }
      &:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 0;
        background: #FF4444;

        -webkit-animation: dotsY .8s linear infinite;
        -moz-animation: dotsY .8s linear infinite;
        -o-animation: dotsY .8s linear infinite;
        animation: dotsY .8s linear infinite;
      }
      &:nth-child(3) {
        left: 0;
        right: 0;
        top: 0;
        background: #FFBB33;

        -webkit-animation: dotsX .8s linear infinite;
        -moz-animation: dotsX .8s linear infinite;
        -o-animation: dotsX .8s linear infinite;
        animation: dotsX .8s linear infinite;
      }
      &:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 0;
        background: #99CC00;

        -webkit-animation: dotsY .8s linear infinite;
        -moz-animation: dotsY .8s linear infinite;
        -o-animation: dotsY .8s linear infinite;
        animation: dotsY .8s linear infinite;
      }
      &:nth-child(5) {
        left: 0;
        right: 0;
        bottom: 0;
        background: #33B5E5;

        -webkit-animation: dotsX .8s linear infinite;
        -moz-animation: dotsX .8s linear infinite;
        -o-animation: dotsX .8s linear infinite;
        animation: dotsX .8s linear infinite;
      }
    }

    @keyframes rotate {
      0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
      }
      10% {
        width: 3em;
        height: 3em;
      }
      66% {
        width: 1em;
        height: 1em;
      }
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        width: 3em;
        height: 3em;
      }
    }

    @keyframes dotsY {
      66% {
        opacity: .1;
        width: 1em;
      }
      77% {
        opacity: 1;
        width: 0;
      }
    }

    @keyframes dotsX {
      66% {
        opacity: .1;
        height: 1em;
      }
      77% {
        opacity: 1;
        height: 0;
      }
    }

    @keyframes flash {
      33% {
        opacity: 0;
        border-radius: 0%;
      }
      55% {
        opacity: .6;
        border-radius: 100%;
      }
      66% {
        opacity: 0;
      }
    }
  }
}
