@use "sass:math";

/* grid */
$outer-grid-column-width: 75px;
$inner-grid-column-width: 50px;
$grid-gutter-width: 25px;
$outer-grid-column-count: 12;
$inner-grid-column-count: 12;
$sidebar-column-count: 3;

/*
    These are settings for the grid overlay.

    Note we do a little display trickery for inner grid. The inner grid
    doesn't have outside gutters of its own, so we reduce the number of columns
    by one and flip-flop the gutter and column widths.
*/
$guide-opts: (
    outer_column_width: $outer_grid_column_width,
    outer_gutter_width: $grid_gutter_width,
    outer_column_count: $outer_grid_column_count,

    inner_column_start: $sidebar_column_count,
    inner_column_width: $grid_gutter_width,
    inner_gutter_width: $inner_grid_column_width,
    inner_column_count: $inner_grid_column_count - 1,

    outer_gutter_color: rgb(255 165 0 / 10%),
    outer_column_color: rgb(255 0 0 / 10%),
    inner_gutter_color: rgb(75 0 130 / 10%),
    inner_column_color: rgb(186 85 211 / 10%)
);

/* Total grid is twelve outer columns plus thirteen gutters */
$outer-grid-width: ($outer-grid-column-width * $outer-grid-column-count) + ($grid_gutter_width * ($outer_grid_column_count + 1));

/* Sidebar takes up three major columns plus an extra gutter */
$sidebar-width: ($outer_grid_column_width * $sidebar_column_count) + ($grid_gutter_width * $sidebar_column_count);

/* Content area with sidebar takes up nine major columns plus surrounding gutters. */
$content-width: ($outer_grid_column_width * ($outer_grid_column_count - $sidebar_column_count)) + ($grid_gutter_width * ($outer_grid_column_count - $sidebar_column_count + 1));
$content-inner-width: ($content_width - ( $grid_gutter_width * 2 ));

/* Half-size inner area takes up six inner columns and 5 gutters */
$half-inner-width: ($inner-grid-column-width * math.div($inner-grid-column-count, 2) ) + ($grid-gutter-width * (math.div($inner-grid-column-count, 2) - 1));
$quarter-inner-width: ($inner-grid-column-width * math.div($inner-grid-column-count, 4)) + ($grid-gutter-width * (math.div($inner-grid-column-count, 4) - 1));
$sixth-inner-width: ($inner-grid-column-width * math.div($inner-grid-column-count, 6)) + ($grid-gutter-width * (math.div($inner-grid-column-count, 6) - 1));

/* Global Search vars */
$global-search-dropdown-or-button-width: 150px;
$global-search-input-padding: 20px;
$global-search-input-max-width: $content-inner-width - $global-search-dropdown-or-button-width - $global-search-input-padding - 60px;
$global-search-max-width-input: $global-search-input-max-width - 120px;