@use "sass:math";

@import "./node_modules/bootstrap/scss/bootstrap";

#gamePyramid {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  place-items: start;
  grid-gap: 4px;
  background-color: #242;
  background-image: linear-gradient(to bottom right, #242, #484);
  border-radius: 5px;

  .game-pyramid-card {
    width: 100%;
    &::before {
      // content: "";
      display: inline-block;
      width: 1px;
      height: 0;
    }
    // first/top row (index 0, row 1)
    @for $i from 0 to 3 {
      &.game-pyramid-card-0-#{$i} {
        grid-row: 1;
        grid-column: #{($i + 1) * 10 + $i * 8} / #{($i + 1) * 10 + $i * 8+6};
      }
    }
    // second row (index 1, row 2)
    @for $i from 0 to 6 {
      &.game-pyramid-card-1-#{$i} {
        grid-row: 2;
        grid-column: #{(($i + 1) * 7)-
          ($i % 2)+
          (math.floor(math.div($i, 2)) * 4)} /
          #{(($i + 2) * 7)-
          ($i % 2)+
          (math.floor(math.div($i, 2)) * 4)-1};
        margin-top: -75%;
      }
    }
    // third row (index 2, row 3)
    @for $i from 0 to 9 {
      &.game-pyramid-card-2-#{$i} {
        grid-row: 3;
        grid-column: #{4+ (6 * $i)} / #{10+ (6 * $i)};
        margin-top: -75%;
      }
    }
    // last/bottom row (index 3, row 4)
    @for $i from 0 to 10 {
      &.game-pyramid-card-3-#{$i} {
        grid-row: 4;
        grid-column: #{1+ (6 * $i)} / #{7+ (6 * $i)};
        margin-top: -75%;
      }
    }
    // stock cards
    @for $i from 0 to 24 {
      &.game-pyramid-card-4-#{$i} {
        grid-column: #{5+ (2 * $i)} / #{11+ (2 * $i)};
        grid-row: 5;
        margin-top: 25%;
      }
    }
  }
}