@import 'xtend-library/src/extensions/loader/_loader.less';

/**
 * loader
 */

// spinner

.spinner {
  width: 25px;
  height: 25px;
  line-height: 0;
  svg {
    filter: drop-shadow(0 .1rem .2rem fade(@black, 10%)) drop-shadow(0 .2rem .4rem fade(@black, 25%));
    circle {
      fill: none;
      stroke-width: 30;
      transform-origin: center center;
    }
    &:nth-child(1) {
      circle {
        stroke: @accent;
        stroke-dashoffset: 628;
        transform: rotateY(0deg) rotateZ(-90deg);
        animation: anim-spinner @time-small * 2 infinite @ease-in;
        // custom
        .card-primary &, .btn-primary & {
          stroke: @white;
        }
      }
    }
    &:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      circle {
        stroke: fade(@accent, 5%);
        stroke-dashoffset: 0;
        // custom
        .card-primary &, .btn-primary & {
          stroke: fade(@white, 5%);
        }
      }
    }
  }
}

.btn .spinner {
  width: 1em;
  height: 1em;
  svg {
    circle {
      stroke-width: 40;
    }
  }
}

@keyframes anim-spinner {
  0% {
    stroke-dashoffset: 628;
    transform: rotateY(0deg) rotateZ(-90deg);
    // fix no support transform-box: border-box;
    transform-origin: 48% 48%;
  }
  50% {
    stroke-dashoffset: 0;
    transform: rotateY(0deg) rotateZ(90deg);
    animation-timing-function: @ease-out;
    // fix no support transform-box: border-box;
    transform-origin: 48% 48%;
  }
  50.0001% {
    stroke-dashoffset: 0;
    transform: rotateY(180deg) rotateZ(90deg);
    // fix no support transform-box: border-box;
    transform-origin: center center;
  }
  100% {
    stroke-dashoffset: 628;
    transform: rotateY(180deg) rotateZ(-90deg);
    // fix no support transform-box: border-box;
    transform-origin: 46% 50%;
  }
}

// direction

.loader-x {
  .filler {
    span:nth-child(1) {
      width: 0;
      background: linear-gradient(90deg, @grad-accent);
      box-shadow: @shadow-accent;
      animation: anim-loader-x @time-small * 2 infinite @ease-in;
      // custom
      .card-primary &, .btn-primary & {
        background: linear-gradient(90deg, @grad-light);
      }
    }
    span:nth-child(2) {
      background: fade(@accent, 5%);
      // custom
      .card-primary &, .btn-primary & {
        background: fade(@white, 5%);
      }
    }
  }
}

.loader-y {
  .filler {
    span:nth-child(1) {
      height: 0;
      background: linear-gradient(0deg, @grad-accent);
      box-shadow: @shadow-accent;
      animation: anim-loader-y @time-small * 2 infinite @ease-in;
      // custom
      .card-primary &, .btn-primary & {
        background: linear-gradient(0deg, @grad-light);
      }
    }
    span:nth-child(2) {
      background: fade(@accent, 5%);
      // custom
      .card-primary &, .btn-primary & {
        background: fade(@white, 5%);
      }
    }
  }
}

@keyframes anim-loader-x {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
    animation-timing-function: @ease-out;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

@keyframes anim-loader-y {
  0% {
    top: 100%;
    height: 0;
  }
  50% {
    top: 0;
    height: 100%;
    animation-timing-function: @ease-out;
  }
  100% {
    top: 0;
    height: 0;
  }
}

// size

.loader-size-x, .loader-size-top, .loader-size-bottom {
  .filler {
    height: 3px;
  }
}

.loader-size-y, .loader-size-left, .loader-size-right {
  .filler {
    width: 3px;
  }
}

.loader-size-x {
  .filler {
    left: 25%;
    right: 25%;
  }
}

.loader-size-y {
  .filler {
    top: 25%;
    bottom: 25%;
  }
}

// background

.loader-background {
  background: fade(@white, 80%);
}

// animation

.loader-animated {
  opacity: 0;
  transition: opacity @time-tiny @ease-out;
  .spinner, .filler {
    opacity: 0;
    transform: scale(.75);
    transition: opacity @time-tiny @ease-out, transform @time-tiny @ease-out;
  }
  &.in {
    opacity: 1;
    transition: opacity @time-tiny @ease-in;
    .spinner, .filler {
      opacity: 1;
      transform: scale(1);
      transition: opacity @time-tiny @ease-in, transform @time-tiny @ease-in;
    }
  }
  &.out {
    opacity: 0;
    transition: opacity @time-tiny @ease-out;
    .spinner, .filler {
      opacity: 0;
      transform: scale(.75);
      transition: opacity @time-tiny @ease-out, transform @time-tiny @ease-out;
    }
  }
}

// js

.loader-js {
  // disable animations
  .spinner {
    circle {
      opacity: 1 !important;
      .trans-anim-none() !important;
    }
  }
  .filler {
    span {
      opacity: 1 !important;
      .animation-none() !important;
    }
  }
}

// loader-mouse

.loader-mouse {
  overflow: visible;
  .filler, .spinner {
    display: block;
    position: relative;
    margin-top: -10px;
    margin-left: 40px;
  }
  // animation
  .loader-animated();
  // disable on touch
  @media (hover: none) {
    .loader-animated.in();
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: -13px;
    padding-left: -13px;
    transform: none;
  }
}

.loader-x.loader-mouse {
  .filler {
    width: 60px;
  }
}