// Row & column

.row,
.column {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  flex: auto;

  &.single {flex-wrap: nowrap}
}

.row,
.flex-row       {flex-direction: row}
.row-reverse    {flex-direction: row-reverse}
.column,
.flex-column    {flex-direction: column;}
.column-reverse {flex-direction: column-reverse;}


// Cell and tile

.cell,
[class^="cell-"],
[class*=" cell-"] {
  display: flex;
  align-items: stretch;
}

.tile,
.cell:not(.fixed) {
  flex: auto;
  max-width: 100%;
}

.cell.fixed,
[class^="cell-"],
[class*=" cell-"] {flex: none}

.row {
  > .cell-1  {width: percentage((1/12));}
  > .cell-2  {width: percentage((2/12));}
  > .cell-3  {width: percentage((3/12));}
  > .cell-4  {width: percentage((4/12));}
  > .cell-5  {width: percentage((5/12));}
  > .cell-6  {width: percentage((6/12));}
  > .cell-7  {width: percentage((7/12));}
  > .cell-8  {width: percentage((8/12));}
  > .cell-9  {width: percentage((9/12));}
  > .cell-10 {width: percentage((10/12));}
  > .cell-11 {width: percentage((11/12));}
  > .cell-12 {width: percentage((12/12));}
}

.column {
  > .cell-1  {height: percentage((1/12));}
  > .cell-2  {height: percentage((2/12));}
  > .cell-3  {height: percentage((3/12));}
  > .cell-4  {height: percentage((4/12));}
  > .cell-5  {height: percentage((5/12));}
  > .cell-6  {height: percentage((6/12));}
  > .cell-7  {height: percentage((7/12));}
  > .cell-8  {height: percentage((8/12));}
  > .cell-9  {height: percentage((9/12));}
  > .cell-10 {height: percentage((10/12));}
  > .cell-11 {height: percentage((11/12));}
  > .cell-12 {height: percentage((12/12));}
}


// Gutter options

.row,
.column {
  margin: (-(@space/4)) (-(@space/4)) 0;

  &:not(:last-child) {
    margin-bottom: (@space/4);
  }

  .row,
  .column {margin: (-(@space/4))}

  .cell,
  [class^="cell-"],
  [class*=" cell-"] {padding: (@space/4)}

  &.gutter-lg {
    margin: (-(@space/2)) (-(@space/2)) 0;

    &:not(:last-child) {
      margin-bottom: (@space/2);
    }

    .row,
    .column {margin: (-(@space/2))}

    .cell,
    [class^="cell-"],
    [class*=" cell-"] {padding: (@space/2)}
  }

  &.gutter-sm {
    margin: (-@space/8) (-@space/8) 0;

    &:not(:last-child) {
      margin-bottom: (@space/8);
    }

    .row,
    .column {margin: (-@space/8);}

    .cell,
    [class^="cell-"],
    [class*=" cell-"] {padding: (@space/8)}
  }

  &.gutterless {

    &,
    .row,
    .column {margin: 0!important;}

    .cell,
    [class^="cell-"],
    [class*=" cell-"] {padding: 0!important}
  }
}