@use './shared' as *;
@use './design' as *;

.#{$namespace}-grid {
  @include basis {
    position: relative;
    display: grid;
  }

  @include inherit-color;

  &--dense {
    grid-auto-flow: row dense;
  }

  &--start {
    justify-content: start;
  }

  &--end {
    justify-content: end;
  }

  &--center {
    justify-content: center;
  }

  &--space-around {
    justify-content: space-around;
  }

  &--space-between {
    justify-content: space-between;
  }

  &--space-evenly {
    justify-content: space-evenly;
  }

  &--top {
    align-items: start;
  }

  &--middle {
    align-items: center;
  }

  &--bottom {
    align-items: end;
  }
}