@use 'sass:math';
@use './vars' as *;
@use './sizing-vars' as *;

/* ==========================================================================
   Design System
   Grid mixins
   ========================================================================== */

//
// Wrapper
//

/* stylelint-disable selector-class-pattern */
@mixin u-grid-wrapper($grid-wrapper-width: $grid-wrapper-width) {
  /* stylelint-enable */
  max-width: ($grid-wrapper-width - $grid-gutter-width);
  padding-right: math.div($grid-gutter-width, 2);
  padding-left: math.div($grid-gutter-width, 2);
  margin: 0 auto;
  clear: both;
}

//
// Columns
//

/* stylelint-disable selector-class-pattern */
@mixin u-grid-column($columns: 1, $total: $grid-total-columns) {
  /* stylelint-enable */
  display: inline-block;
  box-sizing: border-box;

  // To calculate the percentage width of the base element, we take the number of
  // columns it'll span and divide by the total number of columns. As columns are
  // specified as inline-block elements, standard columns require no further math.
  //
  //                      num cols used
  //  column width in % = -------------
  //                       total cols

  width: math.percentage(math.div($columns, $total));

  border: solid transparent;
  border-width: 0 math.div($grid-gutter-width, 2);

  // Remove whitespace caused by setting display to inline-block
  margin-right: -0.25em;
  vertical-align: top;
}

//
// Push and Pull mixins for source ordering
//

/* stylelint-disable selector-class-pattern */
@mixin u-grid-push($offset: 1, $grid-total-columns: $grid-total-columns) {
  /* stylelint-enable */
  $push: math.percentage(math.div($offset, $grid-total-columns));

  position: relative;
  left: $push;
}

/* stylelint-disable selector-class-pattern */
@mixin u-grid-pull($offset: 1, $grid-total-columns: $grid-total-columns) {
  /* stylelint-enable */
  $pull: math.percentage(math.div($offset, $grid-total-columns));

  position: relative;
  right: $pull;
}

//
// Nested columns
//

@mixin u-grid-nested-col-group() {
  display: block;
  position: relative;
  margin-left: math.div($grid-gutter-width, 2) * -1;
  margin-right: math.div($grid-gutter-width, 2) * -1;
}