// ********************************************
// container definition
$spinner-container: #{$prefix}-spinner;


// ********************************************
// element definition
$spinner-el: #{$spinner-container}__spinner;
$message-el: #{$spinner-container}__message;

@mixin spinner-container-size($size) {
  width: icon-size($size) * 2;
  height: icon-size($size) * 2;
  margin: space($size) / 2;
  svg {
    display:block;
    float:left;
    @include icon($size);
  }
}

.#{$spinner-container} {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.#{$spinner-el} {
  transform-origin: 50% 50%;
  animation-name: scale;
  animation-duration: 1.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  &--xxs {
    @include spinner-container-size(xxs);
  }
  &--xs {
    @include spinner-container-size(xs);
  }
  &--s {
    @include spinner-container-size(s);
  }
  &--m {
    @include spinner-container-size(m);
  }
  &--l {
    @include spinner-container-size(l);
  }
  &--xl {
    @include spinner-container-size(xl);
  }
  &--xxl {
    @include spinner-container-size(xxl);
  }

  .spinner-tl,.spinner-tr,.spinner-bl,.spinner-br {
    transform-origin: 50% 50%;
    animation-name: spin;
    // todo: add ease from dimsum
    animation-duration: 1.3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}



@keyframes spin {
  0%{
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);

  }
}

@keyframes scale {
  0%{
    transform: scale(1.2,1.2);
  }
  25% {
    transform: scale(1.2,1.2);
  }
  50% {
    transform: scale(1,1);
  }
  75% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(1.2,1.2);
  }
}