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-icon-rotate-90 {
  transform: rotate(90deg);
}

.spr-icon-rotate-180 {
  transform: rotate(180deg);
}

.spr-icon-rotate-270 {
  transform: rotate(270deg);
}

.spr-btn {
  font-weight: 500 !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: #000c2b;
  transition-property: background-color, border-color, color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  box-sizing: border-box;
  border: 0 solid #53565a;
  border-radius: 0.25rem;
  padding: 0.4375rem 0.9375rem;
  font-family: "BentonSansBook", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  font-weight: 500;
}

.spr-btn .spr-spinner {
  stroke: #000c2b;
}

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

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

.spr-btn-primary {
  border-color: #006fcf;
  background-color: #006fcf;
  color: #fff;
}

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

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

.spr-btn-primary:hover {
  background-color: #0059a6;
}

.spr-btn-primary:focus {
  background-color: #0059a6;
  box-shadow: 0 0 0 0.125rem rgba(0, 111, 207, 0.35);
}

.spr-btn-primary:active {
  background-color: #00437d;
  box-shadow: inset 0 0 0 0 #006fcf;
}

.spr-btn-secondary {
  border-color: #006fcf;
  box-shadow: 0 0 0 0 #006fcf inset;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #006fcf;
  border-radius: 0.25rem;
  color: #006fcf;
}

.spr-btn-secondary .spr-spinner {
  stroke: #006fcf;
}

.spr-btn-secondary:hover {
  background-color: rgba(0, 111, 207, 0.08);
}

.spr-btn-secondary:focus {
  background-color: rgba(0, 111, 207, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(0, 111, 207, 0.35);
}

.spr-btn-secondary:active {
  background-color: rgba(0, 111, 207, 0.16);
}

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

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

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

.spr-btn-error:hover {
  border-color: #8b2201;
  background-color: #8b2201;
}

.spr-btn-error:focus {
  border-color: #8b2201;
  background-color: #8b2201;
  box-shadow: 0 0 0 0.125rem rgba(180, 44, 1, 0.35);
}

.spr-btn-error:active {
  border-color: #631801;
  background-color: #631801;
}

.spr-btn-error.spr-btn-secondary {
  color: #3b2e2c;
  border-color: #b42c01;
  box-shadow: 0 0 0 0 #b42c01 inset;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #b42c01;
  border-radius: 0.25rem;
  color: #b42c01;
}

.spr-btn-error.spr-btn-secondary .spr-spinner {
  stroke: #3b2e2c;
}

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

.spr-btn-error.spr-btn-secondary:hover {
  background-color: rgba(180, 44, 1, 0.08);
}

.spr-btn-error.spr-btn-secondary:focus {
  background-color: rgba(180, 44, 1, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(180, 44, 1, 0.35);
}

.spr-btn-error.spr-btn-secondary:active {
  background-color: rgba(180, 44, 1, 0.16);
}

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

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

.spr-btn-icon:not(.spr-btn-link) {
  border-color: #c8c9c7;
  box-shadow: 0 0 0 0 #c8c9c7 inset;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #c8c9c7;
  border-radius: 0.25rem;
  color: #c8c9c7;
}

.spr-btn-icon:not(.spr-btn-link) .spr-spinner {
  stroke: #c8c9c7;
}

.spr-btn-icon:not(.spr-btn-link):hover {
  background-color: rgba(200, 201, 199, 0.08);
}

.spr-btn-icon:not(.spr-btn-link):focus {
  background-color: rgba(200, 201, 199, 0.08);
  box-shadow: 0 0 0 0.125rem rgba(200, 201, 199, 0.35);
}

.spr-btn-icon:not(.spr-btn-link):active {
  background-color: rgba(200, 201, 199, 0.16);
}

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

.spr-btn-icon:focus {
  background-color: #ebebeb !important;
  box-shadow: 0 0 0 0.125rem rgba(200, 201, 199, 0.35), inset 0 0 0 0.0625rem #c8c9c7;
}

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

.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: #006fcf;
}

.spr-btn-icon-secondary .spr-spinner, .spr-btn-link .spr-spinner {
  stroke: #006fcf;
}

.spr-btn-icon-secondary:hover, .spr-btn-link:hover {
  border-color: rgba(200, 201, 199, 0.2);
  background-color: rgba(200, 201, 199, 0.2);
}

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

.spr-btn-icon-secondary:active, .spr-btn-link:active {
  border-color: rgba(83, 86, 90, 0.2);
  background-color: rgba(83, 86, 90, 0.2);
}

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

.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;
}