.custom-button {
    background: var(--color-btn-primary-bg);
    padding: 10px 20px;
    font-size: 15px;
    line-height: 1;
    border-radius: 2px;
    color: var(--color-btn-primary-font);
    border: none;
    cursor: pointer;
    display: inline-block;
	text-align: center;
}
.custom-button:hover {
    background: var(--color-btn-primary-bg-hover);
}

.secondary-button {
    background: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-font);
    font-size: 12px;
}
.secondary-button:hover {
    background: var(--color-btn-secondary-bg-hover);
}

.custom-button._danger {
    background: var(--color-btn-danger-bg);
    color: var(--color-btn-danger-font);
}
.custom-button._danger:hover {
    background: var(--color-btn-danger-bg-hover);
}

.buttonWrapper {
    text-align: center;
    margin: 5px 0;
    padding: 10px 0;
    background: #f9f9f9;
}

.buttonWrapper .custom-button {
    margin: 0 10px;
}

.buttonAsLink {
	background: none;
	border: none;
	cursor: pointer;
	outline: none;
}
.buttonAsLink:hover {
	text-decoration: underline;
}

/** Reset **/
form { margin: 0; }

/** Input */
input.input-100 { width: 100%; }

/** Textarea */
textarea.textarea-3l { width: 100%; min-height: 4.5em; resize: vertical; }
textarea.textarea-4l { width: 100%; min-height: 5.5em; resize: vertical; }
textarea.textarea-5l { width: 100%; min-height: 6.5em; resize: vertical; }

/**  Buttons **/
.btn {
    cursor: pointer;
    display: inline-block;
    line-height: 1.25em;
    text-decoration: none;
    vertical-align: middle;
    padding: .375rem .75rem;
    font-size: 1em;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.btn.btn-block { display: block; width: 100%; border: none; }
.btn.btn-primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-font); }
.btn.btn-primary:hover { background: var(--color-btn-primary-bg-hover); }
.btn.btn-warning { background: var(--color-btn-warning-bg); color: var(--color-btn-warning-font); }
.btn.btn-warning:hover { background: var(--color-btn-warning-bg-hover); }
.btn.btn-danger { background: var(--color-btn-danger-bg); color: var(--color-btn-danger-font); }
.btn.btn-danger:hover { background: var(--color-btn-danger-bg-hover); }
.btn.btn-success { background: var(--color-btn-success-bg); color: var(--color-btn-success-font); }
.btn.btn-success:hover { background: var(--color-btn-success-bg-hover); }
a.btn:hover {text-decoration: none; }

.btn.btn-link { background: none; color: var(--color-link); }
.btn.btn-link:hover { text-decoration: underline;  }

.btn.btn-sm { font-size: .85em; line-height: 1.1em; }
.btn.btn-lg { font-size: 1.4em; }

/** Forms **/
/**
Snippets :

For a horizontal form :
<form class="form">
  <div class="row col-12">
    <label class="col-2">LABEL</label>
    <div class="col-10">
      <input type="text" name="sample" value="" />
      <div class="form-error">Error message</div>
    </div>
  </div>
</form
*/
.form { white-space: initial; padding: calc(var(--spacer) * .5) 0; font-size: .85em; }
.form .row { display: flex; margin: calc(var(--spacer) * .75) 0; }
.form label { display: inline-block; line-height: 1.5; align-items: center; padding: calc(var(--spacer) * .25) calc(var(--spacer) * .75); }
.form.label-right label { text-align: right; }
.form input[type=text],
.form input[type=password],
.form input[type=file],
.form input[type=number],
.form select { width: 100%; line-height: 1.5; padding: calc(var(--spacer) * .25) calc(var(--spacer) * .75); }
.form input[type=file] { margin: 0 calc(var(--spacer) * -.75); }
.form input[type=checkbox] { margin: calc(var(--spacer) * .25) 0; }
.form textarea { min-width: 100%; max-width: 100%; }
.form .error { display: block; }