// ==========================================================================
// Container styles for the grid
// ==========================================================================


.luci-grid__container--xl {
  margin: 0 auto;
  max-width: $luci-grid-container-xl;
  padding: 0 $luci-space-md;
}

.luci-grid__container--fluid {
  max-width: none;
  width: 100%;
}

//
// Grid row that contains the columns
// ==========================================================================


.luci-grid {
  margin: $luci-space-stack-lg;
}

// ==========================================================================
// Breakpoint styles for 12 and 16 column grid
// ==========================================================================


@media screen and (max-width: $luci-breakpoint-md) {
  .luci-grid__col {
    margin: $luci-space-stack-lg;
  }
}

@media screen and (min-width: $luci-breakpoint-md) {
  .luci-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    @supports (display: grid) {
      @include luci-grid($grid-col-number: 8);
    }
  }

  .luci-grid__col {
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  @for $i from 1 through 12 {
    .luci-grid__col-#{$i} {
      width: luci-col-width($column: $i, $gutter: 40px);
    }
  }

  // 16 grid column flexbox fallback
  .luci-grid__container--fluid {
    @for $i from 1 through 16 {
      .luci-grid__col-#{$i} {
        width: luci-col-width($column: $i, $columns: 16, $gutter: 40px);
      }
    }

    @supports (display: grid) {
      .luci-grid__col {
        margin: 0;
        width: auto;
      }
    }
  }

  @supports (display: grid) {
    .luci-grid__col {
      margin: 0;
      width: auto;
    }

    .luci-grid__col-1 {
      grid-column-end: span 1;
    }

    .luci-grid__col-2 {
      grid-column-end: span 2;
    }

    @for $i from 3 through 9 {
      .luci-grid__col-#{$i} {
        grid-column-end: span 4;
      }
    }

    @for $i from 10 through 12 {
      .luci-grid__col-#{$i} {
        grid-column-end: span 8;
      }
    }

    // 16 grid column breakpoints
    .luci-grid__container--fluid {
      .luci-grid__col-3 {
        grid-column-end: span 2;
      }

      .luci-grid__col-12 {
        grid-column-end: span 4;
      }

      .luci-grid__col-13 {
        grid-column-end: span 6;
      }

      .luci-grid__col-16 {
        grid-column-end: span 8;
      }
    }
  }
}

@media screen and (min-width: $luci-breakpoint-lg) {
  .luci-grid--nested {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    @for $i from 1 through 12 {
      .luci-grid__col-#{$i} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
    }
  }

  @supports (display: grid) {
    .luci-grid {
      @include luci-grid();

      @for $i from 1 through 12 {
        .luci-grid__col-#{$i} {
          grid-column-end: span $i;
        }
      }
    }

    .luci-grid--nested {
      display: grid;
      grid-column-gap: $luci-grid-gap;

      .luci-grid__col {
        margin-bottom: 0;
      }

      @for $i from 2 through 12 {
        .luci-grid__col-#{$i} & {
          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
        }
      }
    }
  }

  // 16 grid column breakpoints
  @supports (display: grid) {
    .luci-grid__container--fluid {
      .luci-grid__col-3 {
        grid-column-end: span 3;
      }

      .luci-grid__col-8 {
        grid-column-end: span 6;
      }

      .luci-grid__col-12 {
        grid-column-end: span 8;
      }

      .luci-grid__col-13 {
        grid-column-end: span 9;
      }

      .luci-grid__col-16 {
        grid-column-end: span 12;
      }
    }
  }
}

@media screen and (min-width: $luci-breakpoint-xl) {
  @supports (display: grid) {
    .luci-grid__container--fluid {
      .luci-grid {
        @include luci-grid($grid-col-number: 16);
      }

      @for $i from 8 through 16 {
        .luci-grid__col-#{$i} {
          grid-column-end: span $i;
        }
      }

      .luci-grid--nested {
        @for $i from 8 through 16 {
          .luci-grid__col-#{$i} {
            grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
          }
        }
      }
    }
  }
}