@mixin spinner---alter($color) {
}

@mixin spinner($color: theme-color(primary)) {
  width: 48px;
  height: 48px;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid lighten($color, 40%);
  border-left-color: darken($color, 10%);
  border-radius: 50%;
  animation: spinner 700ms infinite linear;
  @include spinner---alter($color);
}

@mixin throbber---alter($color: theme-color(primary)) {
}

@mixin throbber($color: theme-color(primary)) {
  animation: throbber 1500ms 300ms infinite ease-out;
  background: lighten($color, 40%);
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.9em;
  height: 1em;
  margin: 0 1.6em;
  &::before,
  &::after {
    background: lighten($color, 40%);
    content: '\x200B';
    display: inline-block;
    width: 0.9em;
    height: 1em;
    position: absolute;
    top: 0;
  }
  &::before {
    animation: throbber 1500ms 150ms infinite ease-out;
    left: -1.6em;
  }
  &::after {
    animation: throbber 1500ms 450ms infinite ease-out;
    right: -1.6em;
  }
  @include throbber---alter($color);
}