.sbl-circ {
    height: 18px;
    width: 18px;
    color: #5a5a5a;
    position: relative;
    display: inline-block;
    border: 2px solid;
    border-radius: 50%;
    vertical-align: middle;
    border-top-color: transparent;
    animation: rotate 1s linear infinite; 
}
  
@keyframes rotate {
    0% {
      transform: rotate(0); }
    100% {
      transform: rotate(360deg); } 
}

.spinner-button {
    @apply  px-4 py-2 text-center bg-borderColors text-base rounded-md outline-none border-0;
}

.spinner-button span {
    margin-left: 5px;
}

/* Spinner view only - varient */

.spinner.spinner-bg-default .spinner-view .sbl-circ{
    @apply text-dark ;
}

.spinner.spinner-bg-primary .spinner-view .sbl-circ{
    @apply text-primary ;
}

.spinner.spinner-bg-secondary .spinner-view .sbl-circ{
    @apply text-secondary ;
}

/* Spinner view only - size */
.spinner.spinner-size-default .spinner-view .sbl-circ{
    @apply w-5 h-5 ;
}

.spinner.spinner-size-small .spinner-view .sbl-circ{
    @apply w-4 h-4;
}

.spinner.spinner-size-medium .spinner-view .sbl-circ{
    @apply w-8 h-8 ;
}

.spinner.spinner-size-large .spinner-view .sbl-circ{
    @apply w-10 h-10 ;
}

/* Spinner button view - varient */
.spinner.spinner-bg-default .spinner-button .sbl-circ{
    @apply text-white ;
}

.spinner.spinner-bg-primary .spinner-button .sbl-circ{
    @apply text-white ;
}

.spinner.spinner-bg-secondary .spinner-button .sbl-circ{
    @apply text-white ;
}
.spinner.spinner-bg-default .spinner-button{
    @apply bg-dark text-white ;
}

.spinner.spinner-bg-primary .spinner-button {
    @apply bg-primary text-white;
}

.spinner.spinner-bg-secondary .spinner-button {
    @apply bg-secondary text-white;
}

/* Spinner button view  - size */
.spinner.spinner-size-default .spinner-button{
    @apply px-6 py-3 text-center text-base;
}

.spinner.spinner-size-small .spinner-button{
    @apply px-5 py-2 text-center text-sm;
}

.spinner.spinner-size-medium .spinner-button{
    @apply px-7 py-3 text-center text-lg;
}

.spinner.spinner-size-large .spinner-button{
    @apply px-10 py-5 text-center text-2xl;
}

.spinner.spinner-size-default .spinner-view .sbl-circ{
    @apply w-5 h-5 ;
}

.spinner.spinner-size-small .spinner-button .sbl-circ{
    @apply w-4 h-4;
}

.spinner.spinner-size-medium .spinner-button .sbl-circ{
    @apply w-8 h-8 ;
}

.spinner.spinner-size-large .spinner-button .sbl-circ{
    @apply w-10 h-10 ;
}