1/**
  2 * Spinners
  3 * --------------------------------------------------
  4 */
  5
  6.spinner {
  7  svg {
  8    width: $spinner-width;
  9    height: $spinner-height;
 10  }
 11
 12  stroke: $spinner-default-stroke;
 13  fill: $spinner-default-fill;
 14
 15  &.spinner-light {
 16    stroke: $spinner-light-stroke;
 17    fill: $spinner-light-fill;
 18  }
 19  &.spinner-stable {
 20    stroke: $spinner-stable-stroke;
 21    fill: $spinner-stable-fill;
 22  }
 23  &.spinner-positive {
 24    stroke: $spinner-positive-stroke;
 25    fill: $spinner-positive-fill;
 26  }
 27  &.spinner-calm {
 28    stroke: $spinner-calm-stroke;
 29    fill: $spinner-calm-fill;
 30  }
 31  &.spinner-balanced {
 32    stroke: $spinner-balanced-stroke;
 33    fill: $spinner-balanced-fill;
 34  }
 35  &.spinner-assertive {
 36    stroke: $spinner-assertive-stroke;
 37    fill: $spinner-assertive-fill;
 38  }
 39  &.spinner-energized {
 40    stroke: $spinner-energized-stroke;
 41    fill: $spinner-energized-fill;
 42  }
 43  &.spinner-royal {
 44    stroke: $spinner-royal-stroke;
 45    fill: $spinner-royal-fill;
 46  }
 47  &.spinner-dark {
 48    stroke: $spinner-dark-stroke;
 49    fill: $spinner-dark-fill;
 50  }
 51}
 52
 53.spinner-android {
 54  stroke: #4b8bf4;
 55}
 56
 57.spinner-ios,
 58.spinner-ios-small {
 59  stroke: #69717d;
 60}
 61
 62.spinner-spiral {
 63  .stop1 {
 64    stop-color: $spinner-light-fill;
 65    stop-opacity: 0;
 66  }
 67
 68  &.spinner-light {
 69    .stop1 {
 70      stop-color: $spinner-default-fill;
 71    }
 72    .stop2 {
 73      stop-color: $spinner-light-fill;
 74    }
 75  }
 76  &.spinner-stable .stop2 {
 77    stop-color: $spinner-stable-fill;
 78  }
 79  &.spinner-positive .stop2 {
 80    stop-color: $spinner-positive-fill;
 81  }
 82  &.spinner-calm .stop2 {
 83    stop-color: $spinner-calm-fill;
 84  }
 85  &.spinner-balanced .stop2 {
 86    stop-color: $spinner-balanced-fill;
 87  }
 88  &.spinner-assertive .stop2 {
 89    stop-color: $spinner-assertive-fill;
 90  }
 91  &.spinner-energized .stop2 {
 92    stop-color: $spinner-energized-fill;
 93  }
 94  &.spinner-royal .stop2 {
 95    stop-color: $spinner-royal-fill;
 96  }
 97  &.spinner-dark .stop2 {
 98    stop-color: $spinner-dark-fill;
 99  }
100}