@use "sass:math";

// ---- Defaults --------------------------------------------------------------

$base-font-size: 16px !default;

$grids : (default: (column-count: 12,
                    column: 94px,
                    gutter: 24px,
                    padding: 24px),
          mobile: (column-count: 4,
                   column: 60px,
                   gutter: 16px,
                   padding: 16px)) !default;

$spacings: (1: 12px,
            2: 24px,
            4: 40px,
            8: 80px) !default;

// Uncomment to limit full width
// $limit-width: 1600px !default;


// ---- Grid and sizing -------------------------------------------------------

@function grid-value($grid, $name) {
  @return map-get(map-get($grids, $grid), $name);
}

// Inner width: Size of $grid in px, excluding outer padding
@function inner-width($grid: default) {
  @return (grid-value($grid, column-count) * grid-value($grid, column)) +
          ((grid-value($grid, column-count) - 1) * grid-value($grid, gutter));
}

// Full width in px including padding
@function full-width($grid: default) {
  @return inner-width($grid) + (grid-value($grid, padding) * 2);
}

@function px-to-percent($size, $grid: default) {
  @return percentage(math.div($size, full-width($grid)));
}

@function px-to-vw($size, $grid: default) {
  @return (math.div($size, full-width($grid)) * 100) * 1vw;
}

@function relative-size($size-px, $container: 100%, $grid: default) {
  @if unit($container) == '%' {
    $container: (inner-width($grid) * math.div($container, 100%));
  }
  @if (unit($container) != "px") {
    $container: columns-px($container, $grid: $grid);
  }
  @return percentage(math.div($size-px, $container));
}

@function rem-calc($value, $grid: default) {
  @if unit($value) == "rem" {
    @return $value;
  }

  // Assume px for values without units
  @if unit($value) == "" {
    $value: $value * 1px;
  }

  // Convert percentage to px
  @if unit($value) == "%" {
    $value: full-width($grid) * math.div($value, 100%);
  }

  @return math.div($value, $base-font-size) * 1rem;
}

@function spacing($key) {
  @return rem-calc(map-get($spacings, $key));
}

// Width of gutter in px
@function gutter-px($grid: default) {
  @return grid-value($grid, gutter);
}

// Width of $n columns in px
@function columns-px($n: 1, $grid: default) {
  @return grid-value($grid, column) * $n + ((ceil($n) - 1) * gutter-px($grid));
}

// Gutter width, optionally relative to size of $container
@function gutter($container: 100%, $grid: default) {
  @return relative-size(gutter-px($grid: $grid), $container, $grid: $grid);
}

// Width of $n columns as a percentage of $container.
@function columns($n: 1, $container: 100%, $grid: default) {
  @return relative-size(columns-px($n, $grid: $grid), $container, $grid: $grid);
}

// Equal to columns($n) + gutter()
@function columns-and-gutter($n: 1, $container: 100%, $grid: default) {
  @return columns($n, $container, $grid) + gutter($container, $grid);
}

@function grid-adjust($size, $columns: $total-columns, $grid: default) {
  @return math.div($sizem math.div(columns($columns, $grid: $grid), 100%));
}

@function outer-padding($grid: default) {
  @return px-to-percent(grid-value($grid, padding), $grid: $grid);
}

@function limit-width-scale($value) {
  @return $value * math.div($limit-width, full-width());
}


// ---- Styles ----------------------------------------------------------------

@mixin mobile-full {
  @include mobile {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    float: none;
    @content;
  }
}

@mixin mobile-offset {
  @include mobile {
    $offset: px-to-percent(grid-value(mobile, padding), $grid: mobile);

    width: 100% + $offset;
    margin-left: 0 - math.div($offset, 2);
    margin-right: 0 - math.div($offset, 2);
  }
}

@mixin grid-container-inner {
  margin: 0px auto;
  @if variable-exists(limit-width) {
    @include breakpoint($min: rem-calc($limit-width)) {
      max-width: rem-calc(limit-width-scale(inner-width()));
    }
  }
}

@mixin grid-container {
  padding-left: outer-padding();
  padding-right: outer-padding();

  @include mobile {
    padding-left: outer-padding(mobile);
    padding-right: outer-padding(mobile);
  }

  @media print {
    padding-left: 0px;
    padding-right: 0px;
  }

  .inner {
    @include grid-container-inner;
  }
}