@import 'styles/settings';
@import 'styles/functions';

/**
 *
 *  Preferred markup (for accessibility matter):
 // <div class="c-spinner -start">
 //   <div class="spinner-box">
 //     <div class="icon"></div>
 //   </div>
 // </div>

 **/

$spinner-size: 40px;
$spinner-tiny-size: 20px;

.c-spinner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(palette(white), .75);
  visibility: visible;
  opacity: 1;
  z-index: 1000;

  > .spinner-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    > .icon {
      position: relative;
      width: $spinner-size;
      height: $spinner-size;
      margin: 0 auto;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: $color-primary;
      animation: rotate $animation-time-4 infinite $ease-in-out-sine;
    }
  }

  // position
  &.-fixed {
    position: fixed;
  }

  &.-relative {
    position: relative;
  }

  // sizing
  &.-tiny {
    > .spinner-box {
      > .icon {
        width: $spinner-tiny-size;
        height: $spinner-tiny-size;
      }
    }
  }

  // theme
  &.-transparent {
    background: rgba(#fff, 0);
  }
 }