@use "../../style/variables" as *;

.#{$prefix}-row {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;

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

    &-center {
      justify-content: center;
    }

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

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

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

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

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

    &-center {
      align-items: center;
    }

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

    &-baseline {
      align-items: baseline;
    }
  }
}

.#{$prefix}-col {
  @mixin grid($size: '') {
    @for $i from 1 through 24 {
      &#{$size}-#{$i} {
        width: calc(100% / (24 / $i));
      }

      &#{$size}-offset-#{$i} {
        margin-left: calc(100% / (24 / $i));
      }

      &#{$size}-order-#{$i} {
        order: $i;
      }
    }
  }

  box-sizing: border-box;
  display: block;

  @include grid;
  @include grid('-xs');

  @media screen and (min-width: $size-sm) {
    @include grid('-sm');
  }

  @media screen and (min-width: $size-md) {
    @include grid('-md');
  }

  @media screen and (min-width: $size-lg) {
    @include grid('-lg');
  }

  @media screen and (min-width: $size-xl) {
    @include grid('-xl');
  }

  @media screen and (min-width: $size-xxl) {
    @include grid('-xxl');
  }
}