body {
	user-select:none;
}

.button {
	
	min-width: $button-width;
	
	&.animate{
    width: $button-width/2.2;
    height: $button-width/2.2;
    min-width: 0;
    border-radius: 50%;
    color: transparent;
    
    &:after{
      position: absolute;
      content: '';
      width: $spinner-width;
      height: $spinner-width;
      border: 4px solid $text-light;
      border-radius: 50%;
      border-left-color: transparent;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      animation: spin ease-in 2.5s forwards;
      animation-name: spin;
      -webkit-animation-name: spin; 
      transition-timing-function:ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      animation-duration: 2.5s;
      -webkit-animation-duration: 2.5s;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }

    &.success:before{
      position: absolute;
      content: '';
      width: $spinner-width;
      height: $spinner-width/2;
      border: 4px solid $text-light;
      border-right: 0;
      border-top: 0;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0);
      transform: translate(-50%, -50%) rotate(0deg) scale(0);
      -webkit-animation: success ease-in 0.15s forwards;
      animation: success ease-in 0.15s forwards;
      animation-delay: 2.5s;
    }
    
    &.error{
      position: relative;
      -webkit-animation: vibrate ease-in 0.5s forwards;
      animation: vibrate ease-in 0.5s forwards;
      -webkit-animation-delay: 2.5s;
      animation-delay: 2.5s;
     
      &:before{
        color: #fff;
        position: absolute;
        content: '!';
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-animation: error ease-in 0.5s forwards;
        animation: error ease-in 0.5s forwards;
        animation-delay: 2.5s;
      }
    }
  }
}