@import './utils/mixins/container';
@import './utils/mixins/grid';

// Container widths
// Set the container width, and override it for fixed navbars in media queries.
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
  @include make-container;
  &.no-gutter {
    --go-outer-gutter: 0;
  }
}

// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
  .container-#{$breakpoint} {
    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
    @extend .container-fluid;
  }

  @include min-query($breakpoint) {
    %responsive-container-#{$breakpoint} {
      max-width: $container-max-width;
      padding-left: var(--go-outer-gutter, 0.5rem);
      padding-right: var(--go-outer-gutter, 0.5rem);
    }

    // Extend each breakpoint which is smaller or equal to the current breakpoint
    $extend-breakpoint: true;

    @each $name, $width in $breakpoints {
      @if $extend-breakpoint {
        .container,
        .container#{-$name} {
          @extend %responsive-container-#{$breakpoint};
        }

        // Once the current breakpoint is reached, stop extending
        @if $breakpoint == $name {
          $extend-breakpoint: false;
        }
      }
    }
  }
}

// Row
// Rows contain your columns.

.row {
  @include make-row;

  > * {
    @include make-col-ready;
  }
}

// Columns
// Common styles for small and large grid columns

@include make-grid-columns;