button.primaryButton,
  button.secondaryButton,
  a.button {

    font-family: inherit;
    font-size: 1rem;

    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    justify-self: start;

    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.primaryButton.compact,
  button.secondaryButton.compact,
  a.button.compact {

    padding: calc(0.25rem - var(--default-button-border-width)) calc(0.5rem - var(--default-button-border-width));
  }

  button.primaryButton:disabled,
  button.secondaryButton:disabled,
  a.button:disabled {

    opacity: 0.8;
    cursor: not-allowed;
  }

  button.primaryButton.loading::after,
  button.secondaryButton.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: #1d3b58;

    border-color: #1d3b58;
  }

  button.primaryButton.loading::after {

    border: var(--default-button-border-width) solid #eff4ff;
  }

  button.secondaryButton,
  a.button.secondaryButton {

    color: #1d3b58;
    background-color: #ffffff;

    border-color: #1d3b58;
  }

  button.secondaryButton.loading::after {

    border: var(--default-button-border-width) solid #1d3b58;
  }