// Spinners
//
// Spinners are pretty simple. You can change the color by changing `$spinner-color`.
// Also, any of the modifiers below can also carry `.wy-spinner-absolute` to position
// the spinner in the absolute center of your wrapping area.
//
// Markup:
// <div class="wy-spinner {$modifiers}"></div>
// <a href="#random" class="btn"><span class="wy-spinner {$modifiers}"></span> Loading</a>
//
// .wy-spinner-large           - Large spinner.
// .wy-spinner-small           - Small spinner.
//
// Styleguide 7.0


.wy-spinner
  height: 30px
  width: 30px
  margin: 0 auto
  position: relative
  +animation(rotation .6s infinite linear)
  border: 8px solid lighten($spinner-color, 50%)
  border-top: 8px solid $spinner-color
  border-radius: 100%
  display: block

.wy-spinner.wy-spinner-margin
  margin: $base-line-height auto

.btn .wy-spinner
  display: inline-block
  height: 14px
  width: 14px
  border-width: 4px
  border-color: rgba(0,0,0,.1)
  border-top-color: $white
  top: 1px

.wy-logo .wy-spinner
  border-color: rgba(0,0,0,.1)
  border-top-color: $section-background-color
  margin-bottom: $gutter / 2
.wy-spinner.wy-spinner-inline
  display: inline-block
  vertical-align: middle
  margin: none

.wy-spinner.wy-spinner-large
  height: 45px
  width: 45px
  border-width: 12px

.wy-spinner.wy-spinner-small
  height: 16px
  width: 16px
  border-width: 4px

.wy-spinner.wy-spinner-absolute
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto

+keyframes(rotation)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(359deg))
