@import "./../../style-config/colors";
@import "./../../style-config/mixins";

@include keyframes(rotate360) {
  0%    {
    @include transform(rotate(0deg));
  }

  100%  {
    @include transform(rotate(360deg));
  }
}

$std-speed: 0.7s;

.carbon-spinner {
  @include animation(rotate360 $std-speed linear forwards infinite);
  border-radius: 50%;
  box-sizing: content-box;
  display: inline-block;
}

@mixin spinner-theme($type, $color, $border, $background, $color-hover) {
  .carbon-spinner--#{$type} {
    border-style: solid;
    border-top-color: rgba( $color, 1);
    border-bottom-color: rgba( $color, .5);
    border-right-color: rgba( $color, .3 );
    border-left-color: rgba( $color, .7 );
  }
}

@each $set in $colorIconSets {
    @include spinner-theme($set...);
}

.carbon-spinner--extra-small    { width: 8px; height: 8px; border-width: 2px }
.carbon-spinner--small          { width: 12px; height: 12px; border-width: 3px }
.carbon-spinner--medium-small   { width: 20px; height: 20px; border-width: 5px }
.carbon-spinner--medium         { width: 25px; height: 25px; border-width: 6px }
.carbon-spinner--medium-large   { width: 32px; height: 32px; border-width: 8px }
.carbon-spinner--large          { width: 40px; height: 40px; border-width: 10px }
.carbon-spinner--extra-large    { width: 45px; height: 45px; border-width: 11px }