@import '../variables/sizes.scss';

$cols: (
  "col-1": percentage(1/12),
  "col-2": percentage(2/12),
  "col-3": percentage(3/12),
  "col-4": percentage(4/12),
  "col-5": percentage(5/12),
  "col-6": percentage(6/12),
  "col-7": percentage(7/12),
  "col-8": percentage(8/12),
  "col-9": percentage(9/12),
  "col-10": percentage(10/12),
  "col-11": percentage(11/12),
  "col-12": percentage(12/12),
);

@each $classSize, $size in $sizes {
  .grid-gap-#{$classSize} {
    // NOTE: replace gap
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(#{$size} * -1);
    margin-left: calc(#{$size} / -2);
    margin-right: calc(#{$size} / -2);

    & > * {
      box-sizing: border-box;
      margin-top: $size;
      padding-left: calc(#{$size} / 2);
      padding-right: calc(#{$size} / 2);
    }
  }
}

.flex {
  display: flex;
}

.grid {
  display: flex;
  flex-wrap: wrap;

  &-direction {
    &-column {
      flex-direction: column;
    }

    &-column-reverse {
      flex-direction: column-reverse;
    }

    &-row {
      flex-direction: row;
    }

    &-row-reverse {
      flex-direction: row-reverse;
    }
  }

  &-align {
    &-center {
      align-items: center;
    }

    &-start {
      align-items: flex-start;
    }

    &-end {
      align-items: flex-end;
    }
  }

  &-justify {
    &-center {
      justify-content: center;
      text-align: center;
    }

    &-start {
      justify-content: flex-start;
      text-align: left;
    }

    &-end {
      justify-content: flex-end;
      text-align: right;
    }

    &-space-between {
      justify-content: space-between;
      text-align: center;
    }
  }
}

@each $colName, $colValue in $cols {
  .#{$colName} {
    flex: 0 0 $colValue;
    width: $colValue;
    max-width: 100%;
  }
}

.col {
  flex: 1 1 0;
  max-width: 100%;

  &-auto {
    flex: 0 0 auto;
    width: auto;
  }
}