/**
 * @class Ext.LoadMask
 */

/**
 * @var {color} $loading-spinner-color
 * Background-color for the bars in the loading spinner.
 */
$loading-spinner-color: #aaa !default;

// Private
$loading-spinner-size: 1em;
$loading-spinner-bar-width: .1em;
$loading-spinner-bar-height: .25em;

/**
 * Includes default loading spinner styles (for dataviews).
 */
@mixin sencha-loading-spinner {
  .x-loading-spinner {
    font-size: 250%;
    height: $loading-spinner-size;
    width: $loading-spinner-size;
    position: relative;

    -webkit-transform-origin: $loading-spinner-size/2 $loading-spinner-size/2;

    /* Shared Properties for all the bars */
    & > span, & > span:before, & > span:after {
      display: block;
      position: absolute;
      width: $loading-spinner-bar-width;
      height: $loading-spinner-bar-height;
      top: 0;
      -webkit-transform-origin: $loading-spinner-bar-width/2 $loading-spinner-size/2;
      @if $include-border-radius { @include border-radius($loading-spinner-bar-width/2); }
      content: " ";
    }

    & > span {
      &.x-loading-top           {  background-color: rgba($loading-spinner-color,0.99); }
      &.x-loading-top::after    {  background-color: rgba($loading-spinner-color,0.90); }
      &.x-loading-left::before  {  background-color: rgba($loading-spinner-color,0.80); }
      &.x-loading-left          {  background-color: rgba($loading-spinner-color,0.70); }
      &.x-loading-left::after   {  background-color: rgba($loading-spinner-color,0.60); }
      &.x-loading-bottom::before{  background-color: rgba($loading-spinner-color,0.50); }
      &.x-loading-bottom        {  background-color: rgba($loading-spinner-color,0.40); }
      &.x-loading-bottom::after {  background-color: rgba($loading-spinner-color,0.35); }
      &.x-loading-right::before {  background-color: rgba($loading-spinner-color,0.30); }
      &.x-loading-right         {  background-color: rgba($loading-spinner-color,0.25); }
      &.x-loading-right::after  {  background-color: rgba($loading-spinner-color,0.20); }
      &.x-loading-top::before   {  background-color: rgba($loading-spinner-color,0.15); }
    }
  }

  .x-loading-spinner > span {
    left:         50%;
    margin-left:  -0.05em;
  }

  // .x-loading-spinner > span::before, .x-loading-spinner > span::after{  content: " "; }

  /* Rotate each of the 4 Spans */

  .x-loading-spinner > span.x-loading-top{    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);   }
  .x-loading-spinner > span.x-loading-right{  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  }
  .x-loading-spinner > span.x-loading-bottom{ -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); }
  .x-loading-spinner > span.x-loading-left{   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); }

  /* These are the two lines that surround each of the 4 Span lines */

  .x-loading-spinner > span::before{-webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  }
  .x-loading-spinner > span::after{ -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); }

  /* Set Animation */

  .x-loading-spinner {
    -webkit-animation-name: x-loading-spinner-rotate;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }

  @-webkit-keyframes x-loading-spinner-rotate{
    0%{     -webkit-transform: rotate(0deg);   }
    8.32%{  -webkit-transform: rotate(0deg);   }

    8.33%{  -webkit-transform: rotate(30deg);  }
    16.65%{ -webkit-transform: rotate(30deg);  }

    16.66%{ -webkit-transform: rotate(60deg);  }
    24.99%{ -webkit-transform: rotate(60deg);  }

    25%{    -webkit-transform: rotate(90deg);  }
    33.32%{ -webkit-transform: rotate(90deg);  }

    33.33%{ -webkit-transform: rotate(120deg); }
    41.65%{ -webkit-transform: rotate(120deg); }

    41.66%{ -webkit-transform: rotate(150deg); }
    49.99%{ -webkit-transform: rotate(150deg); }

    50%{    -webkit-transform: rotate(180deg); }
    58.32%{ -webkit-transform: rotate(180deg); }

    58.33%{ -webkit-transform: rotate(210deg); }
    66.65%{ -webkit-transform: rotate(210deg); }

    66.66%{ -webkit-transform: rotate(240deg); }
    74.99%{ -webkit-transform: rotate(240deg); }

    75%{    -webkit-transform: rotate(270deg); }
    83.32%{ -webkit-transform: rotate(270deg); }

    83.33%{ -webkit-transform: rotate(300deg); }
    91.65%{ -webkit-transform: rotate(300deg); }

    91.66%{ -webkit-transform: rotate(330deg); }
    100%{   -webkit-transform: rotate(330deg); }
  }
}