/* #region Buttons */
button, .button {
    background: var(--theme-primary);
    color: var(--font-inverse);
    text-decoration: none;
    border: 1px solid var(--theme-primary);
    padding: 0 var(--space-m);
    border-radius: var(--space-xs);
    height: var(--space-xl);
    cursor: pointer;
}

button:hover, button:focus,
.button:hover, .button:focus {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
}

button:active, .button:active {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
}

button.transparent, .button.transparent {
    background: var(--theme-primary-lightest);
    border-color: var(--white);
    color: var(--theme-primary);
    text-decoration: underline;
}

button.transparent:hover, button.transparent:focus,
.button.transparent:hover, .button.transparent:focus {
    background-color: var(--white) !important;
    color: var(--theme-secondary);
    border-color: var(--theme-secondary);
    text-decoration: none;
}

button.transparent:active, .button.transparent:active {
    background: var(--theme-secondary) !important;
    color: var(--white);
    border-color: var(--theme-primary);
}

button + button,
.button + .button,
button + .button,
.button + button {
    margin-left: var(--space-m);
}
  /* #endregion */