// @page Pattern Library/Components
// @name Loader
//
// @description
//   Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.
//   `.us-loader--loading` will initiate the animation and `.us-loader--centered` will vertically center the loading SVG.
//
// @markup
//   <div class='us-loader__container'>
//     <div class='us-loader us-loader--loading us-loader--centered'>
//       <div class='us-loader__inner'>
//         <div class='us-loader__spinner'></div>
//         <div class='us-loader__text'>
//           Loading deals
//         </div>
//       </div>
//       <div class='us-loader__overlay'></div>
//     </div>
//     <!-- EXAMPLE CONTENT -->
//     <ul class='us-list'>
//       <li><a href="#">List item 1</a></li>
//       <li><a href="#">List item 2</a></li>
//       <li><a href="#">List item 3</a></li>
//       <li><a href="#">List item 4</a></li>
//     </ul>
//     <!-- END EXAMPLE -->
//   </div>

$loader-overlay-opacity: .8 !default;
$loader-overlay-colour: #fff !default;
$spinner-vertical-margin: 1em !default;
$spinner-animation-time: 500ms !default;
$spinner-file: "icons/spinner.svg" !default;
$spinner-size: 60px !default;
$spinner-file-fallback: ustyle-image-path("icons/spinner_fallback.gif") !default;
$spinner-load-fallback: true !default;

@keyframes loader-intro {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

%snap-to-parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

%spinner-base {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: $spinner-vertical-margin;
  margin-bottom: $spinner-vertical-margin;
  background-repeat: no-repeat;
}

%spinner-icon {
  background: transparent url($spinner-file-fallback) no-repeat center center;
  background-image: -webkit-linear-gradient(transparent, transparent), inline-asset($spinner-file);
  background-image: linear-gradient(transparent, transparent), inline-asset($spinner-file);
  animation: spin $spinner-animation-time infinite linear;
}

@mixin spinner($size: $spinner-size) {
  @extend %spinner-base;
  @extend %spinner-icon;

  @if $size {
    width: $size;
    height: $size;
    background-size: $size;
  }
}

.us-loader {
  @extend %snap-to-parent;
  display: none;
  text-align: center;
}

.us-loader__container {
  position: relative;
}

.us-loader--loading {
  display: block;
  animation: loader-intro $spinner-animation-time forwards;
}

.us-loader--centered {
  @extend %vertical-align-parent;
  transform-style: preserve-3d;
}

.us-loader__inner {
  position: relative;
  z-index: 2;

  .us-loader--centered & {
    @extend %vertical-align-child;
  }
}

.us-loader__spinner {
  .us-loader--loading & {
    @include spinner;
  }

  .us-loader--centered & {
    margin-top: 0;
  }
}

.us-loader__text {
  @extend %heading-3;
  color: $c-navy;
}

.us-loader__overlay {
  @extend %snap-to-parent;
  z-index: 1;
  background-color: $loader-overlay-colour;
  opacity: $loader-overlay-opacity;
}