/* See: https://loading.io/button */

button.btn-loading {
  position: relative;
  transition: all 0.3s;

  .btn-loading-animation {
    position: absolute;
    width: 1em;
    height: 1em;
    top: 50%;
    margin: -0.5em;
    right: auto;
    left: 1.25em;
    animation: btn-loading-spin 1s infinite linear;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    /* box-sizing: content-box; */
    /* display: inline-block; */
    opacity: 0;
    animation-play-state: paused;
    transition: all 0.3s;

    &::after {
      content: "";
      border-radius: 50%;
      border: .3em solid currentColor;
      border-left-color: transparent;
      display: block;
      width: 2em;
      height: 2em;
      /* box-sizing: border-box; */
      transform-origin: 0 0;
      transform: translateZ(0) scale(0.5);
    }
  }

  &.btn-loading-visible {
    padding-left: 2.5em;
    cursor: wait;

    .btn-loading-animation {
      opacity: 1;
      animation-play-state: running;
    }
  }
}

@keyframes btn-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}