// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:math';

// These Sass maps are used for all the basic row set up.

// Row columns map
$row-columns: (
  '1': 8.333,
  '2': 16.6667,
  '3': 25,
  '4': 33.3333,
  '5': 41.6667,
  '6': 50,
  '7': 58.3333,
  '8': 66.6667,
  '9': 75,
  '10': 83.3333,
  '11': 91.6667,
  '12': 100
);

// Row sizes map.
// These are the max-widths of the row. Feel free to add more
// sizes/key: value pairs that can then be used on the .row container
// like, .row--yournewsize.

$row-widths: (
  'sm': math.div(840, 16) * 1rem,
  'md': math.div(1024, 16) * 1rem,
  'lg': math.div(1140, 16) * 1rem,
  'xl': math.div(1380, 16) * 1rem
);

// Global grid gutter. Set this to half of what you want the final gutter to be.
$gutter: math.div($spacing-md, 2);

// Starting on some mixins to build row classes and to make
// available for those who want to use the Sass source
// source files in their app.

@mixin container($width: 100%) {
  margin-left: auto;
  margin-right: auto;
  max-width: $width;
  padding-left: $gutter * 2;
  padding-right: $gutter * 2;
}

@mixin row {
  display: flex;
  flex-wrap: wrap;

  // Remove list styles for when row is used on list elements (ul, ol, etc.)

  list-style: '';
  margin-right: math.div($gutter, -1);
  margin-left: math.div($gutter, -1);

  // Reset padding for when row is used on list elements (ul, ol, etc.)

  padding-left: 0;
}

/**
 * Container variants
 */

@each $key, $value in $row-widths {
  .#{$prefix}-container-#{$key} {
    @include container($value);
  }
}

/**
 * The main row container. It's width is fluid by default.
 */

// TODO: refactor the other row__cols-* classes into mixins for those
// that want to use the Sass source in their app.

@mixin cols {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  padding-left: $gutter;
  padding-right: $gutter;
  position: relative;
}

.#{$prefix}-row {
  @include row;

  .#{$prefix}-cols {
    @include cols;
  }

  .#{$prefix}-cols--last {
    margin-left: auto;
  }

  &--loose {
    margin-left: $gutter * -2;
    margin-right: $gutter * -2;
  }

  &--loose > [class^='#{$prefix}-cols'] {
    padding-left: $gutter * 2;
    padding-right: $gutter * 2;
  }

  &--tight {
    margin-left: $gutter * -.75;
    margin-right: $gutter * -.75;
  }

  &--tight > [class^='#{$prefix}-cols'] {
    padding-left: $gutter * .75;
    padding-right: $gutter * .75;
  }

  [class^='#{$prefix}-cols'] {
    /**
     * This keeps the row from collapsing when cols inside are too
     * big for their parent .#{$prefix}-row__cols.
     */
    min-width: 0;
    display: block;
  }
}

/**
 * This modifier will right align row__cols(s) that add up to less
 * than 12 columns in total.
 */

.#{$prefix}-cols--right {
  justify-content: flex-end;
}

%auto-row-props {
  padding: 0 $gutter;
  position: relative;
  width: 100%;
}

@each $variable, $size in $breakpoints {
  .#{$prefix}-cols-#{$variable} {
    @extend %auto-row-props;
  }
}

@each $variable, $size in $breakpoints {
  @include mq($size) {
    .#{$prefix}-cols-#{$variable} {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
  }
}

/**
 * Build the base row cols classes. These will make
 * row cols span the same number of columns at ALL
 * screen sizes.
 */

/**
 * We need to extend these properties on to all of the responsive row
 * classes on mobile first so we'll define them here in a silent class
 * and let Sass build the comma-separated list of selectors
 */

%cols-properties {
  padding-left: $gutter;
  padding-right: $gutter;
  position: relative;
  width: 100%;
}

@each $columns, $width in $row-columns {
  .#{$prefix}-cols-#{$columns} {
    flex-basis: $width * 1%;
    max-width: $width * 1%;

    @extend %cols-properties;
  }
}

/**
 * Now loop through all the breakpoints.
 */

/* stylelint-disable */
@each $variable, $size in $breakpoints {
  @each $columns, $width in $row-columns {
    .#{$prefix}-cols-#{$columns}-#{$variable} {
      @extend %cols-properties;
    }
  }
}

@each $variable, $size in $breakpoints {
  @if $variable == 'sm' {
    @each $columns, $width in $row-columns {
      .#{$prefix}-cols-#{$columns}-sm {
        flex-basis: $width * 1%;
        max-width: $width * 1%;
      }
    }
  }

  @else {
    @include mq($size) {
      @each $columns, $width in $row-columns {
        .#{$prefix}-cols-#{$columns}-#{$variable} {
          flex-basis: $width * 1%;
          max-width: $width * 1%;
        }
      }
    }
  }
}

// Push and pull utilities

@each $columns, $width in $row-columns {
  .#{$prefix}-cols-push-#{$columns} {
    left: $width * 1%;
  }
}

@each $columns, $width in $row-columns {
  .#{$prefix}-cols-pull-#{$columns} {
    right: $width * 1%;
  }
}

// NOTE: This is sort of repetitive because you could use the number
// suffix only (see above) to push and pull on small screens,
// but it seems like both should have the same behavior
// as a convenience.

@each $variable, $size in $breakpoints {
  @if $size == 'sm' {
    @each $columns, $width in $row-columns {
      .#{$prefix}-cols-push-#{$columns}-#{$variable} {
        left: $width * 1%;
      }
    }

    @each $columns, $width in $row-columns {
      .#{$prefix}-cols-pull-#{$columns}-#{$variable} {
        right: $width * 1%;
      }
    }
  }

  @else {
    @include mq($size) {
      @each $columns, $width in $row-columns {
        .#{$prefix}-cols-push-#{$columns}-#{$variable} {
          left: $width * 1%;
        }
      }

      @each $columns, $width in $row-columns {
        .#{$prefix}-cols-pull-#{$columns}-#{$variable} {
          right: $width * 1%;
        }
      }
    }
  }
}

/* stylelint-enable */