@import "../../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins";

@mixin dynamic-flex-columns($size: null, $columns: 12) {
  @if ($size == null) {
    @for $i from 1 through $columns {
      &-#{$i} {
        @include grid-col($i);
      }
    }
  }

  @if ($size != null) {
    @for $i from 1 through $columns {
      &-#{$size}-#{$i} {
        @include grid-col($i) {
          padding-left: $grid-space-mobile;
          padding-right: $grid-space-mobile;

          @include breakpoint(768) {
            padding-left: $grid-space-desktop;
            padding-right: $grid-space-desktop;
          }
        }
      }
    }
  }
}


%column-core {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  flex: 1 0 100%;
}

[class|='flex'],
[class*='flex-'] {
  @extend %column-core;
  padding-left: $grid-space-mobile;
  padding-right: $grid-space-mobile;

  @include breakpoint(768) {
    padding-left: $grid-space-desktop;
    padding-right: $grid-space-desktop;
  }
}

.flex {
  @extend %column-core;

  &--auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  @include dynamic-flex-columns();

  @include breakpoint(375) {
    &-xs {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      flex: 1 0 100%;
    }

    @include dynamic-flex-columns('xs');
  }

  @include breakpoint(568) {
    &-sm {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      flex: 1 0 100%;
    }

    @include dynamic-flex-columns('sm');
  }

  @include breakpoint(768) {
    &-md {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      flex: 1 0 100%;
    }

    @include dynamic-flex-columns('md');
  }

  @include breakpoint(1024) {
    &-lg {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      flex: 1 0 100%;
    }

    @include dynamic-flex-columns('lg');
  }

  @include breakpoint(1280) {
    &-xl {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      flex: 1 0 100%;
    }

    @include dynamic-flex-columns('xl');
  }
}