@import "src/assets/variables";

$spinner-color: $disabled-color !default;
.muncher-spinner {
  border: .2rem solid #f3f3f3;
  border-radius: 50%;
  border-top: solid $spinner-color;
  width: 2rem;
  height: 2rem;
  animation: spin 2s linear infinite;

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @media (min-width: $medium-size) {
    width: 4rem;
    height: 4rem;
    border-width: .5rem;
  }
}

.muncher-spinner-tiny {
  width: 1rem;
  height: 1rem;
  border-width: .1rem;
}

.muncher-spinner-small {
  width: 2rem;
  height: 2rem;
  border-width: .2rem;
}

.muncher-spinner-medium {
  width: 3rem;
  height: 3rem;
  border-width: .3rem;
}

.muncher-spinner-large {
  width: 4rem;
  height: 4rem;
  border-width: .5rem;
}