// stylelint-disable declaration-no-important

// Grid item alignment options
.grid-item {
  &.align-self-auto     { align-self: auto; }
  &.align-self-start    { align-self: flex-start; }
  &.align-self-end      { align-self: flex-end; }
  &.align-self-center   { align-self: center; }
  &.align-self-baseline { align-self: baseline; }
  &.align-self-stretch  { align-self: stretch; }

  &.justify-self-auto     { justify-self: auto; }
  &.justify-self-start    { justify-self: flex-start; }
  &.justify-self-end      { justify-self: flex-end; }
  &.justify-self-center   { justify-self: center; }
  &.justify-self-baseline { justify-self: baseline; }
  &.justify-self-stretch  { justify-self: stretch; }

  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-down($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
      &.align-self#{$infix}-auto     { align-self: auto; }
      &.align-self#{$infix}-start    { align-self: flex-start; }
      &.align-self#{$infix}-end      { align-self: flex-end; }
      &.align-self#{$infix}-center   { align-self: center; }
      &.align-self#{$infix}-baseline { align-self: baseline; }
      &.align-self#{$infix}-stretch  { align-self: stretch; }

      &.justify-self#{$infix}-auto     { justify-self: auto; }
      &.justify-self#{$infix}-start    { justify-self: flex-start; }
      &.justify-self#{$infix}-end      { justify-self: flex-end; }
      &.justify-self#{$infix}-center   { justify-self: center; }
      &.justify-self#{$infix}-baseline { justify-self: baseline; }
      &.justify-self#{$infix}-stretch  { justify-self: stretch; }
    }
  }
}