//
// GRID
//

//
// Structure
//
// <div class="rf-row">
//   <div class="rf-col--[width]">1st Column</div>
//   ...
//   <div class="rf-col--[width]">Last Column</div>
// </div>
//


//
// ROWS
//

.rf-row {
  align-items: center;
  display: flex;
}

.rf-row--space-between {
  justify-content: space-between;
}


//
// COLUMNS
//

.rf-col {
  float: left;
}

.rf-col--grid {
  padding: 20px;
}

.rf-col--1 {
  width: 8.333333%;
}

.rf-col--2 {
  width: 16.666667%;
}

.rf-col--3 {
  width: 25%;
}

.rf-col--4 {
  width: 33.333333%;
}

.rf-col--5 {
  width: 41.666667%;
}

.rf-col--6 {
  width: 50%;
}

.rf-col--7 {
  width: 58.333333%;
}

.rf-col--8 {
  width: 66.666667%;
}

.rf-col--9 {
  width: 75%;
}

.rf-col--10 {
  width: 83.333333%;
}

.rf-col--11 {
  width: 91.666667%;
}

.rf-col--12 {
  width: 100%;
}


//
// ACTIONS COLUMN
//

//
// Structure
//
// <div class="rf-row rf-col">
//   <div class="rf-col--[width]">Body</div>
//   <div class="rf-col--[width] rf-col--actions">
//     <input class="rf-btn rf-btn--primary" type="delete" value="Delete">
//     <input class="rf-btn rf-btn--secondary" type="submit" value="Submit">
//   </div>
// </div>
//

// TWO OR MORE ACTION BUTTONS

.rf-col--actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;

  .rf-btn {
    float: left;
    min-width: 50px;
    padding-left: 0;
    padding-right: 0;
    width: 48%;

    &:first-child {
      margin-right: 0;
    }
  }

  .rf-btn:first-child {
    margin-right: 0;
  }
}

// SINGLE ACTION BUTTON

.rf-col--action {
  .rf-btn {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}