.wrapper {
form {
display: flex;
flex-direction: column;
}
.control {
margin-bottom: 1rem;
&.inline {
flex-direction: row;
input[type='checkbox'] {
margin-left: 1rem;
label {
font-weight: 600;
input[type='text'],
input[type='email'],
input[type='password'],
input:not([type]),
textarea {
padding: 8px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
font-weight: 400;
color: var(--form-field-color);
background: var(--form-field-background);
border: 1px solid var(--form-field-border);
box-shadow: inset 0 0 4px var(--form-field-box-shadow);
+ span {
font-size: 0.875rem;
margin-top: 0.25rem;
color: var(--form-field-helper-color);
&:last-child {
margin-bottom: 0;