@use 'sass:map';
@use '../base/colors' as colors;

$spinner-border-default: 4px;
$spinner-border-sm: 2px;
$spinner-size-default: 36px;
$spinner-size-sm: 14px;

.progress-spinner {
  animation: spinnerAnimation 0.85s ease-in-out infinite;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;

  &--default {
    border-width: $spinner-border-default;
    width: $spinner-size-default;
    height: $spinner-size-default;
  }
  &--sm {
    border-width: $spinner-border-sm;
    width: $spinner-size-sm;
    height: $spinner-size-sm;
  }
}

@mixin spinner-border-color($color) {
  border-color: transparent $color $color;
}

@keyframes spinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}