@use "sass:string";
@use "./config";
@use "./mixins";
@use "../../../styles/tools/layout";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/generate";

@layer components {
  .grid {
    @include mixins.grid-base;

    @include mixins.grid-column-gap("default");

    > [class*="grid__col"] {
      @include mixins.grid-col-column-gap("default");
    }

    &--justify-height {
      @include mixins.grid-with-equal-height-content;
    }

    &-row-gap {
      @each $name in config.$grid-row-gap-sizes {
        @include breakpoint.each using ($breakpoint) {
          &-#{generate.variant-name($breakpoint, "-")}-#{string.unquote($name)} {
            @include mixins.grid-row-gap($name);
          }
        }
      }
    }

    &-column-gap {
      @each $name in config.$grid-column-gap-sizes {
        @include breakpoint.each using ($breakpoint) {
          &-#{generate.variant-name($breakpoint, "-")}-#{string.unquote($name)} {
            @include mixins.grid-column-gap-responsive($name);

            > [class*="grid__col"] {
              @include mixins.grid-col-column-gap-responsive($name);
            }
          }
        }
      }
    }

    &[class*="grid--row-gap"] > *[class*="grid__col"] {
      @include layout.reset-last-child-margin-bottom;
    }
  }

  @include mixins.column-classes;
}