/*
 *  Loader
 *    Styles for the animated loader.
 *
 *  Dependencies:
 *    styles/settings/animation.scss
 *    styles/tools/_animation.scss
 *    styles/tools/_transform.scss
 *
 *  Version:
 *    1.0.0 - 2018/05/08
 */

@include t-keyframes(o-loader--spin) {
  0% {
    @include t-rotate(0deg);
  }

  100% {
    @include t-rotate(360deg);
  }
}

.o-loader {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 100%;
  max-height: 100%;

  position: absolute;
  left: 50%;
  top: 50%;
  @include t-translate(-50%, -50%);

  &__image {
    @include t-animation-name(o-loader--spin);
    @include t-animation-iteration-count(infinite);
    @include t-animation-timing-function($s-animation--ease-in-out);
    @include t-animation-duration(0.75s);

    width: 100%;
    height: 100%;

    > * {
      stroke: $s-color--loader;
    }
  }

  &__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
  }
}