// ============================================================
//          Spinner                                  
// ------------------------------------------------------------


@function strip-units($number) 
  @return $number / ($number * 0 + 1)

@mixin ui-spinner($hole-color: $spinner-hole-color, $size: $spinner-size, $bkg-color-light: $spinner-bkg-color-light, $bkg-color-dark: $spinner-bkg-color-dark, $opacity: $spinner-opacity, $duration: $spinner-duration ) 
  .ui-spinner
    width: $size + px
    height: $size + px
    background: $bkg-color-light

    .side .fill 
      background: $bkg-color-dark
      +experimental(animation-duration, $duration)
      opacity: $opacity

    &:after 
      $hole-size: round((strip-units($size)*.6)) + px
      $hole-position: round((strip-units($size)*.2)) + px
      content: ''
      background: $hole-color
      position: absolute
      width: $hole-size
      height: $hole-size
      border-radius: 50%
      top: $hole-position
      left: $hole-position
      display: block

    @if $comp-ie7 == true OR $comp-ie8 == true
      .ie7 &, .ie8 &
        background: image-url('system/spinner.gif') no-repeat center center !important
        min-height: 32px
        max-height: 32px
        .side
          display: none !important
        &:after
          display: none !important

+route(style,base)
  @-webkit-keyframes ui-spinner-rotate-right 
    0%     
      -webkit-transform: rotate(0deg) 
    25%    
      -webkit-transform: rotate(180deg) 
    50%    
      -webkit-transform: rotate(180deg) 
    75%    
      -webkit-transform: rotate(360deg) 
    100%   
      -webkit-transform: rotate(360deg) 


  @-webkit-keyframes ui-spinner-rotate-left 
    0%     
      -webkit-transform: rotate(0deg) 
    25%    
      -webkit-transform: rotate(0deg) 
    50%    
      -webkit-transform: rotate(180deg) 
    75%    
      -webkit-transform: rotate(180deg) 
    100%   
      -webkit-transform: rotate(360deg) 

  @-moz-keyframes ui-spinner-rotate-right 
    0%     
      -moz-transform: rotate(0deg) 
    25%    
      -moz-transform: rotate(180deg) 
    50%    
      -moz-transform: rotate(180deg) 
    75%    
      -moz-transform: rotate(360deg) 
    100%   
      -moz-transform: rotate(360deg) 

  @-moz-keyframes ui-spinner-rotate-left 
    0%     
      -moz-transform: rotate(0deg) 
    25%    
      -moz-transform: rotate(0deg) 
    50%    
      -moz-transform: rotate(180deg) 
    75%    
      -moz-transform: rotate(180deg) 
    100%   
      -moz-transform: rotate(360deg) 

  @keyframes ui-spinner-rotate-right 
    0%     
      transform: rotate(0deg) 
    25%    
      transform: rotate(180deg) 
    50%    
      transform: rotate(180deg) 
    75%    
      transform: rotate(360deg) 
    100%   
      transform: rotate(360deg) 

  @keyframes ui-spinner-rotate-left 
    0%     
      transform: rotate(0deg) 
    25%    
      transform: rotate(0deg) 
    50%    
      transform: rotate(180deg) 
    75%    
      transform: rotate(180deg) 
    100%   
      transform: rotate(360deg) 


  .ui-spinner 
    position: relative
    border-radius: 100%

    .side 
      width: 50%
      height: 100%
      overflow: hidden
      position: absolute

      .fill 
        border-radius: 999px
        position: absolute
        width: 100%
        height: 100%
        +experimental(animation-iteration-count, infinite)
        +experimental(animation-timing-function, linear)

    .side-left 
      left: 0
      .fill 
        left: 100%
        border-top-left-radius: 0
        border-bottom-left-radius: 0
        +experimental(animation-name, ui-spinner-rotate-left)
        +experimental(transform-origin, 0 50%)

    .side-right 
      left: 50%
      .fill 
        left: -100%
        border-top-right-radius: 0
        border-bottom-right-radius: 0
        +experimental(animation-name, ui-spinner-rotate-right)
        +experimental(transform-origin, 100% 50%)