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

  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: relative;
  background-color: $gray-medium;
  color: white;
  padding: $field-padding-vertical $field-padding-horizontal;
  cursor: pointer;
  transition: all 0.1s;
  border: none;
  border-radius: $corner-radius-small;
  outline: none;
  user-select: none;

  &:active:not(:disabled) {
    transform: translateY(2px);
  }

  .left-icon {
    margin-right: $spacing-xsmall;
  }

  .right-icon {
    margin-left: $spacing-xsmall;
  }

  &.rounded {
    border-radius: 30px;
  }

  &:disabled {
    opacity: 0.4;
    cursor: default;
  }

  &.icon-button-left {
    padding-left: $field-padding-horizontal;
  }

  &.icon-button-right {
    padding-right: $field-padding-horizontal;
  }

  &.shadow {
    @include button-shadow($gray-medium);
  }

  &:before {
    content: '';
    display: inline-block;
    width: 0;
    transition: 0.2s width;
  }

  &.pending {
    &:before {
      height: 10px;
      width: 25px;
    }

    &:after {
      position: absolute;
      left: $field-padding-horizontal;
      content: '';
      height: 15px;
      width: 15px;
      border-bottom: 1px solid white;
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
    }
  }
}