/**
 * <ajax-button>
 *
 * App-wide styles for our ajax buttons.
 */

 [parasails-component='ajax-button'] {
  .loading-spinner {
      width: 16px;
      height: 16px;
      border: 3px solid #EEE;
      border-bottom-color: transparent;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
   }
   .button-loader, .button-loading {
     display: none;
     margin: auto;

     .loading-dot {
       opacity: 0;
       display: inline;
       .fade-in();
       .animation-duration(1s);
       .animation-iteration-count(infinite);
       .animation-direction(linear);
       &.dot1 {
         .animation-delay(0.25s);
       }
       &.dot2 {
         .animation-delay(0.5s);
       }
       &.dot3 {
         .animation-delay(0.75s);
       }
       &.dot4 {
         .animation-delay(1s);
       }
     }
   }
   &.syncing {
     .button-loader, .button-loading {
       display: inline-block;
     }
     .button-text {
       display: none;
     }


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