@use 'functions' as fn;

$col-count: 12;
$row-count: 12;

@mixin grid-base {
  display: grid;
}

.grid {
  @include grid-base;

  // Выравнивание элементов
  &-center {
    @include grid-base;
    place-items: center;
  }

  &-start {
    @include grid-base;
    place-items: start;
  }

  &-end {
    @include grid-base;
    place-items: end;
  }

  // justify-items
  &-ji-start {
    @include grid-base;
    justify-items: start;
  }

  &-ji-end {
    @include grid-base;
    justify-items: end;
  }

  &-ji-center {
    @include grid-base;
    justify-items: center;
  }

  &-ji-stretch {
    @include grid-base;
    justify-items: stretch;
  }

  // align-items
  &-ai-start {
    @include grid-base;
    align-items: start;
  }

  &-ai-end {
    @include grid-base;
    align-items: end;
  }

  &-ai-center {
    @include grid-base;
    align-items: center;
  }

  &-ai-stretch {
    @include grid-base;
    align-items: stretch;
  }

  // justify-content
  &-jc-start {
    @include grid-base;
    justify-content: start;
  }

  &-jc-end {
    @include grid-base;
    justify-content: end;
  }

  &-jc-center {
    @include grid-base;
    justify-content: center;
  }

  &-jc-between {
    @include grid-base;
    justify-content: space-between;
  }

  &-jc-around {
    @include grid-base;
    justify-content: space-around;
  }

  &-jc-evenly {
    @include grid-base;
    justify-content: space-evenly;
  }

  // align-content
  &-ac-start {
    @include grid-base;
    align-content: start;
  }

  &-ac-end {
    @include grid-base;
    align-content: end;
  }

  &-ac-center {
    @include grid-base;
    align-content: center;
  }

  &-ac-between {
    @include grid-base;
    align-content: space-between;
  }

  &-ac-around {
    @include grid-base;
    align-content: space-around;
  }

  &-ac-evenly {
    @include grid-base;
    align-content: space-evenly;
  }

  // auto-flow
  &-flow-row {
    @include grid-base;
    grid-auto-flow: row;
  }

  &-flow-col {
    @include grid-base;
    grid-auto-flow: column;
  }

  &-flow-dense {
    @include grid-base;
    grid-auto-flow: dense;
  }
}

// grid-template-columns: repeat(n, 1fr)
.col {
  @for $i from 1 through $col-count {
    &-#{$i} {
      grid-template-columns: repeat(#{$i}, 1fr);
    }
  }
}

// grid-template-rows: repeat(n, 1fr)
.row {
  @for $i from 1 through $row-count {
    &-#{$i} {
      grid-template-rows: repeat(#{$i}, 1fr);
    }
  }
}

// grid-column: span n
.col-span {
  @for $i from 1 through $col-count {
    &-#{$i} {
      grid-column: span #{$i};
    }
  }

  &-full {
    grid-column: 1 / -1;
  }
}

// grid-row: span n
.row-span {
  @for $i from 1 through $row-count {
    &-#{$i} {
      grid-row: span #{$i};
    }
  }

  &-full {
    grid-row: 1 / -1;
  }
}

// grid-column-start / end
.col-start {
  @for $i from 1 through $col-count {
    &-#{$i} {
      grid-column-start: #{$i};
    }
  }
}

.col-end {
  @for $i from 1 through $col-count {
    &-#{$i} {
      grid-column-end: #{$i};
    }
  }
}

// grid-row-start / end
.row-start {
  @for $i from 1 through $row-count {
    &-#{$i} {
      grid-row-start: #{$i};
    }
  }
}

.row-end {
  @for $i from 1 through $row-count {
    &-#{$i} {
      grid-row-end: #{$i};
    }
  }
}