.wrapper {
  form {
    display: flex;
    flex-direction: column;
  }
}

.control {
  display: flex;
  flex-direction: column;
  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;
  }
}