button,
  a.button {
    
    font-family: inherit;
    font-size: 1rem;
    
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    
    line-height: 1;
    
    padding: calc(0.5rem - var(--default-button-border-width)) calc(1rem - var(--default-button-border-width));
    margin: 0rem;
    
    border-width: var(--default-button-border-width);
    border-style: solid;
    border-color: transparent;
    border-radius: var(--default-button-border-radius);
    
    background: none;
    text-decoration: none;
    cursor: pointer;
  }
  
  button.compact,
  a.button.compact {
    
    padding: calc(0.25rem - var(--default-button-border-width)) calc(0.5rem - var(--default-button-border-width));
  }
  
  button:disabled,
  a.button:disabled {
    
    opacity: 0.8;
    cursor: not-allowed;
  }
  
  button.loading::after {
    
    content: "";
    
    display: block;
    width: 1rem;
    height: 1rem;
    
    border-radius: 50%;
    border-top-color: transparent !important;
    
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0%    { transform:  rotate(0deg);   }
    100%  { transform:  rotate(360deg); }
  }
    
  button.primaryButton,
a.button.primaryButton {
    
    color: #ffffff;
    background-color: #fb6262;
    
    border-color: #fb6262;
  }
  
  button.primaryButton.loading::after,
a.button.primaryButton.loading::after {
    
    border: var(--default-button-border-width) solid #ffffff;
  }
    
  button.secondaryButton,
a.button.secondaryButton {
    
    color: #fb6262;
    background-color: #fff9f9;
    
    border-color: #fb6262;
  }
  
  button.secondaryButton.loading::after,
a.button.secondaryButton.loading::after {
    
    border: var(--default-button-border-width) solid #fb6262;
  }