@mixin grid {
  display: flex;
}

@mixin grid--wrap {
  flex-wrap: wrap;
}

@mixin grid--no-gutter {
  > .o-grid__col {
    padding-left: $spacing-0;
    padding-right: $spacing-0;
  }
}

@mixin grid--top {
  align-items: flex-start;
}

@mixin grid--center {
  align-items: center;
}

@mixin grid--bottom {
  align-items: flex-end;
}

@mixin grid__col {
  flex: 1;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;

  @each $col, $width in $grid-cols {
    &--#{$col} {
      flex: 0 0 $width;
      max-width: $width;
    }
  }

  @each $col, $margin in $grid-cols {
    &--offset-#{$col} {
      margin-left: $margin;
    }
  }
}

@mixin grid__col--no-gutter {
  padding-left: $spacing-0;
  padding-right: $spacing-0;
}

@mixin grid__col--top {
  align-self: flex-start;
}

@mixin grid__col--center {
  align-self: center;
}

@mixin grid__col--bottom {
  align-self: flex-end;
}

@mixin grid__col--visible {
  display: none;
}

@mixin grid__col--hidden {
  display: initial;
}

@mixin grid__col--auto {
  flex: auto;
}

@mixin grid-col--responsive($screen-width) {
  @each $col, $width in $grid-cols {
    &--#{$col}\@#{$screen-width} {
      flex: 0 0 $width;
      max-width: $width;
    }

    &--offset-#{$col}\@#{$screen-width} {
      flex: 0 0 $width;
      max-width: $width;
    }
  }

  &--hidden\@#{$screen-width} {
    display: none;
  }

  &--visible\@#{$screen-width} {
    display: initial;
  }
}

.o-grid {
  @include grid;

  &--wrap {
    @include grid--wrap;
  }

  &--no-gutter {
    @include grid--no-gutter;
  }

  &--top {
    @include grid--top;
  }

  &--center {
    @include grid--center;
  }

  &--bottom {
    @include grid--bottom;
  }

  &__col {
    @include grid__col;
  }

  &__col--no-gutter {
    @include grid__col--no-gutter;
  }

  &__col--top {
    @include grid__col--top;
  }

  &__col--center {
    @include grid__col--center;
  }

  &__col--bottom {
    @include grid__col--bottom;
  }

  &__col--hidden {
    @include grid__col--hidden;
  }

  &__col--visible {
    @include grid__col--visible;
  }

  &__col--auto {
    @include grid__col--auto;
  }

  @include media-query(sm) {
    &__col {
      @include grid-col--responsive(sm);
    }
  }

  @include media-query(md) {
    &__col {
      @include grid-col--responsive(md);
    }
  }

  @include media-query(lg) {
    &__col {
      @include grid-col--responsive(lg);
    }
  }

  @include media-query(xl) {
    &__col {
      @include grid-col--responsive(xl);
    }
  }
}