.button {
  border: 0;
  color: $white;
  background: $primary;
  height: 4rem;
  line-height: 4rem;
  padding: 0 $spacing-lg;
  transition: background .25s;
  vertical-align: middle;
}
.button.is-huge {
  padding: 0 $spacing-xl;
  height: 6rem;
  line-height: 6rem;
  font-size: 2.0rem;
}
.button.is-large {
  padding: 0 $spacing-lg;
  height: 5rem;
  line-height: 5rem;
}
.button.is-small {
  padding: 0 $spacing-md;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.4rem;
}
.button.is-tiny {
  padding: 0 $spacing-sm;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.2rem;
}
.button.is-shy {
  background: transparentize($primary, .25);
}
.button.is-outlined {
  border: .1rem solid $primary;
  color: $primary;
  background: transparent;
}
.button.is-loading {

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

  position: relative;
  color: transparent;

  &:before {
    content: '';
    border: .2rem solid $white;
    border-left-color: transparent;
    border-radius: 100%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    left: calc(50% - .75rem);
    top: calc(50% - .75rem);
    vertical-align: middle;
    position: absolute;
    animation: spin .5s infinite linear;
  }

}
.button.is-transparent {
  background: transparent;
  border: none;
  color: $primary;
}
.button.is-disabled {
  opacity: .5;
  &:hover {
    cursor: default;
  }
}