Button Component

<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-primary">Primary</button>
  <a href="javascript:;" class="spr-btn spr-btn-secondary">Secondary</a>
  <button class="spr-btn spr-btn-error">Error</button>
  <button class="spr-btn spr-btn-secondary spr-btn-error">Secondary Error</button>
  <button class="spr-btn spr-btn-error">Icon Right <i class="spr-icon spr-icon-right spr-icon-info"></i> </button>
  <button class="spr-btn spr-btn-secondary spr-btn-error">Icon Right <i class="spr-icon spr-icon-right spr-icon-info"></i> </button>
  <button class="spr-btn spr-btn-primary"><i class="spr-icon spr-icon-left spr-icon-info"></i> Icon Left</button>
</div>
<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-link">Link</button>
  <button class="spr-btn spr-btn-lg spr-btn-primary">Large Primary</button>
  <button class="spr-btn spr-btn-sm spr-btn-secondary">Small Secondary</button>
  <button class="spr-btn spr-btn-icon spr-btn-sm"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon spr-btn-md"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon spr-btn-lg"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-sm"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-md"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-lg"><i class="spr-icon spr-icon-more"></i></button>
</div>
<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-primary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-secondary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-error spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-error spr-btn-secondary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-link spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
</div>
<div class="spr-inline-container-md">
  <button class="spr-btn spr-btn-primary spr-btn-block">Full Width</button>
</div>

@import 'components/button';

@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-btn {
  font-weight: 600 !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: #11401d;
  transition-property: background-color, border-color, color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  box-sizing: border-box;
  border: 1px solid #6b6f7b;
  border-radius: 0.25rem;
  padding: 0.4375rem 0.9375rem;
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  font-weight: 400;
}

.spr-btn .spr-spinner {
  stroke: #11401d;
}

.spr-btn:focus {
  outline: none;
}

.spr-btn[disabled] {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}

.spr-btn-primary {
  border-color: #2ba148;
  background-color: #67d683;
}

.spr-btn-primary:hover {
  background-color: #47cd69;
  box-shadow: inset 0 0 0 0.0625rem #2ba148;
}

.spr-btn-primary:focus {
  background-color: #47cd69;
  box-shadow: 0 0 0 0.125rem rgba(43, 161, 72, 0.35), inset 0 0 0 0.0625rem #2ba148;
}

.spr-btn-primary:active {
  background-color: #32b954;
  box-shadow: inset 0 0 0 0.0625rem #2ba148;
}

.spr-btn-secondary {
  border-color: #2ba148;
  box-shadow: 0 0 0 0.0625rem #2ba148 inset;
  background-color: #fff;
}

.spr-btn-secondary:hover {
  background-color: rgba(43, 161, 72, 0.08);
}

.spr-btn-secondary:focus {
  background-color: rgba(43, 161, 72, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(43, 161, 72, 0.35), inset 0 0 0 0.0625rem #2ba148;
}

.spr-btn-secondary:active {
  background-color: rgba(43, 161, 72, 0.16);
}

.spr-btn-error {
  border-color: #dd1d33;
  background-color: #dd1d33;
  box-shadow: inset 0 0 0 0.0625rem #dd1d33;
  color: #fff;
}

.spr-btn-error .spr-spinner {
  stroke: #fff;
}

.spr-btn-error .spr-icon {
  background-color: #fff;
}

.spr-btn-error:hover {
  border-color: #b9182b;
  background-color: #b9182b;
  box-shadow: inset 0 0 0 0.0625rem #b9182b;
}

.spr-btn-error:focus {
  border-color: #b9182b;
  background-color: #b9182b;
  box-shadow: 0 0 0 0.125rem rgba(221, 29, 51, 0.35);
}

.spr-btn-error:active {
  border-color: #951422;
  background-color: #951422;
  box-shadow: inset 0 0 0 0.0625rem #951422;
}

.spr-btn-error.spr-btn-secondary {
  color: #710f1a;
  border-color: #dd1d33;
  box-shadow: 0 0 0 0.0625rem #dd1d33 inset;
  background-color: #fff;
}

.spr-btn-error.spr-btn-secondary .spr-spinner {
  stroke: #710f1a;
}

.spr-btn-error.spr-btn-secondary:hover {
  background-color: rgba(221, 29, 51, 0.08);
}

.spr-btn-error.spr-btn-secondary:focus {
  background-color: rgba(221, 29, 51, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(221, 29, 51, 0.35), inset 0 0 0 0.0625rem #dd1d33;
}

.spr-btn-error.spr-btn-secondary:active {
  background-color: rgba(221, 29, 51, 0.16);
}

.spr-btn-error.spr-btn-secondary .spr-icon {
  background-color: #710f1a;
}

.spr-btn-icon {
  border-color: #bbbdc4;
  min-width: 0rem !important;
  padding: 0.4375rem 0.4375rem;
}

.spr-btn-icon:not(.spr-btn-link) {
  border-color: #bbbdc4;
  box-shadow: 0 0 0 0.0625rem #bbbdc4 inset;
  background-color: #fff;
}

.spr-btn-icon:not(.spr-btn-link):hover {
  background-color: rgba(187, 189, 196, 0.08);
}

.spr-btn-icon:not(.spr-btn-link):focus {
  background-color: rgba(187, 189, 196, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(187, 189, 196, 0.35), inset 0 0 0 0.0625rem #bbbdc4;
}

.spr-btn-icon:not(.spr-btn-link):active {
  background-color: rgba(187, 189, 196, 0.16);
}

.spr-btn-icon:hover {
  background-color: #ebebeb !important;
  box-shadow: inset 0 0 0 0.0625rem #bbbdc4;
}

.spr-btn-icon:focus {
  background-color: #ebebeb !important;
  box-shadow: 0 0 0 0.125rem rgba(187, 189, 196, 0.35), inset 0 0 0 0.0625rem #bbbdc4;
}

.spr-btn-icon:active {
  background-color: #cbcbd2 !important;
  box-shadow: inset 0 0 0 0.0625rem #bbbdc4;
}

.spr-btn-icon-secondary {
  min-width: 0rem !important;
  padding: 0.4375rem 0.4375rem;
}

.spr-btn-icon-secondary, .spr-btn-link {
  background-color: transparent;
  border-color: transparent;
  color: #056ad7;
}

.spr-btn-icon-secondary .spr-spinner, .spr-btn-link .spr-spinner {
  stroke: #056ad7;
}

.spr-btn-icon-secondary:hover, .spr-btn-link:hover {
  border-color: #ebebeb;
  box-shadow: inset 0 0 0 0.0625rem #ebebeb;
  background-color: #ebebeb;
}

.spr-btn-icon-secondary:focus, .spr-btn-link:focus {
  border-color: #ebebeb;
  background-color: #ebebeb;
  box-shadow: 0 0 0 0.125rem rgba(187, 189, 196, 0.35), inset 0 0 0 0.0625rem #ebebeb;
}

.spr-btn-icon-secondary:active, .spr-btn-link:active {
  border-color: #d6d6d6;
  box-shadow: inset 0 0 0 0.0625rem #d6d6d6;
  background-color: #d6d6d6;
}

.spr-btn-sm {
  font-weight: 600 !important;
  padding: 0.1875rem 0.1875rem;
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  font-weight: 400;
}

.spr-btn-sm:not(.spr-btn-icon):not(.spr-btn-icon-secondary) {
  padding: 0.1875rem 0.9375rem;
}

.spr-btn-lg {
  padding: 0.6875rem 0.6875rem;
}

.spr-btn-lg:not(.spr-btn-icon):not(.spr-btn-icon-secondary) {
  padding: 0.6875rem 0.9375rem;
}

.spr-btn-block {
  min-width: 100%;
}

.spr-btn-spinner {
  line-height: 1;
  cursor: default;
  pointer-events: none;
}