@import 'utilities.visibility';

$grid-widths: (
  5: 5 / 100,
  10: 1 / 10,
  15: 15 / 100,
  20: 1 / 5,
  25: 1 / 4,
  30: 3 / 10,
  33: 1 / 3,
  35: 35 / 100,
  40: 2 / 5,
  45: 45 / 100,
  50: 1 / 2,
  55: 55 / 100,
  60: 3 / 5,
  65: 65 / 100,
  66: 2 / 3,
  70: 7 / 10,
  75: 3 / 4,
  80: 4 / 5,
  85: 85 / 100,
  90: 9 / 10,
  95: 95 / 100,
  100: 1,
) !default;

@mixin grid {
  display: flex;
}

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

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

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

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

@mixin grid__cell {
  flex: 1;
  padding-right: var(--grid-gutter);
  padding-left: var(--grid-gutter);
}

@mixin grid__cell--no-gutter {
  padding-right: 0.001em;
  padding-left: 0.001em;
}

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

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

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

@mixin grid__cell--width-fixed {
  flex: 0 1 auto;
}

@mixin grid__cell--fit {
  flex: 1;
}

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

@mixin grid__cell--full {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}

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

@mixin grid__cell--hidden {
  display: none;
}

@mixin grid__cell--visible {
  display: initial;
}

@mixin grid__cell--width($width) {
  flex: 0 0 $width;
  max-width: $width;
}

@mixin grid__cells {
  @each $width, $fraction in $grid-widths {
    &--width-#{$width} {
      @include grid__cell--width($fraction * 100%);
    }

    &--offset-#{$width} {
      margin-left: $fraction * 100%;
    }
  }
}

@mixin grid__responsive-cells($screen-width) {
  @each $width, $fraction in $grid-widths {
    &--hidden\@#{$screen-width} {
      @include grid__cell--hidden;
    }

    &--visible\@#{$screen-width} {
      @include grid__cell--visible;
    }

    &--width-#{$width}\@#{$screen-width} {
      flex: 0 0 $fraction * 100%;
      max-width: $fraction * 100%;
    }

    &--offset-#{$width}\@#{$screen-width} {
      margin-left: $fraction * 100%;
    }

    &--width-fixed\@#{$screen-width} {
      @include grid__cell--width-fixed;
    }
  }
}