$SITE_CONFIG: (
  font-size-base: 16,
  modular-scale-ratio: 1,
);

@use "sass:math";
@use "s360-scss-toolkit" with ($config: $SITE_CONFIG);
@use "./mq";

// **************************************************
// SPACING

@function spacer($amount: 0) {
  @return s360-scss-toolkit.to-unit(s360-scss-toolkit.modular-scale($amount), 'px');
}

// **************************************************
// GAPS AND GRIDS

$_grid-columns: 12;
$column-gap: spacer(0);

/// Converts a $count of columns into a fixed value when the container width is unknown.
///
/// @author Steven Keiser
/// @author Brian Milea
///
/// @access public
///
/// @param {number} $count
///   The number of columns.
///
/// @param {number} $content-area-width
///   The width of the content area. Defaults to $site-content-area, but accepts percentages.
///
/// @example
///   column-width(4, 100%);
///
/// @return {number}
///   The given $count converted to a calc().

@function column-width($count: 1, $content-area-width: $site-content-area) {
  // Remove the gutters to get a true column width.
  // Add back gutters for multiple columns.
  $_content-gutters: $column-gap * ($_grid-columns - 1);

  @return calc((#{ $content-area-width } - #{ $_content-gutters }) / #{ $grid-columns} * #{ $count } + #{ $column-gap * ($count - 1) });
}

// **************************************************
// TEXT AND LAYOUT

$site-max-width: 1440px;
$site-side-margin: s360-scss-toolkit.linear-scale(spacer(0), spacer(0));
$site-content-area: calc(#{ $site-max-width } - calc(#{ $site-side-margin } * 2));
$main-menu-mq: 'min-width: #{ mq.$mq-1024 }';
$max-line-length: 80ch;
$text-line-height: 1.3;
$heading-margin-bottom: 0.625em;

// **************************************************
// UI

$chevron-down: '';
