/**
 * Bootstrap variables
 *
 * This sets our defaults for the Bootstrap variables.
 */

@use "brand" as *;
@use "colours" as *;

// Legacy import for Bootstrap variable functions
@import "functions";

// Colours
$white:    $white;
$gray-100: $gray-100;
$gray-200: $gray-200;
$gray-300: $gray-300;
$gray-400: $gray-400;
$gray-500: $gray-500;
$gray-600: $gray-600;
$gray-700: $gray-700;
$gray-800: $gray-800;
$gray-900: $gray-900;
$black:    $black;

$colors: (
  "brand-link":          $brand-link-color,
  "brand-hover":         $brand-hover,
  "brand-bg-text":       $brand-bg-text,
  "brand-as-link":       $brand-as-link,
  "brand-as-link-hover": $brand-as-link-hover,
  "white":               $white,
  "gray":                $gray-600,
  "gray-dark":           $gray-800
);

$color-contrast-light: $color-contrast-light;
$color-contrast-dark:  $color-contrast-dark;
$min-contrast-ratio:   $min-contrast-ratio;

$theme-colors: (
  "brand":      $brand-color,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

// Options
//
// EdGEL's settings should not be overridden.

$enable-caret:                                true;
$enable-rounded:                              true;
$enable-shadows:                              true;
$enable-gradients:                            false;
$enable-transitions:                          true;
$enable-reduced-motion:                       true;
$enable-smooth-scroll:                        true;
$enable-grid-classes:                         true;
$enable-button-pointers:                      true;
$enable-rfs:                                  true;
$enable-validation-icons:                     true;
$enable-negative-margins:                     false;
$enable-deprecation-messages:                 true;
$enable-important-utilities:                  false;

// Prefix for :root CSS variables

$variable-prefix:           "edgel-";

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer:                    1rem;
$spacers: (
  0: 0,
  1: $spacer * .375,
  2: $spacer * .625,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 4,
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
);

// Body
//
// Settings for the `<body>` element.

$body-bg:                   #e8e8e8;
$body-color:                $gray-800;

// Links
//
// Style anchor elements.

$link-color:                $link-color;
$link-decoration:           none;
$link-hover-decoration:     underline;

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   .7rem;

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change;
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$grid-gutter-width: space(5);

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 767px,
  md: 991px,
  lg: 1199px,
  xl: 1600px
);

// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:              1.428571429;
$line-height-sm:              1.428571429;

$border-width:                1px;
$border-color:                $gray-300;

$border-radius:               .25rem;
$border-radius-lg:            .3rem;
$border-radius-sm:            .2rem;

$caret-width:                 .3em;

$transition-base:             all .2s ease-in-out;
$transition-fade:             opacity .15s linear;
$transition-collapse:         height .35s ease;


// Typography
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif:      "Source Sans Pro", sans-serif;
$font-family-serif:           "Crimson Text", serif;
$font-family-base:            $font-family-sans-serif;
// stylelint-enable value-keyword-case

$font-size-base:              1.15rem;  // 18.4px for very wide viewports.  RFS reduces this.
$font-size-lg:                $font-size-base * 1.25;
$font-size-sm:                $font-size-base * .875;

$line-height-base:            1.428571429;

$h6-font-size:                $font-size-base;
$h5-font-size:                $h6-font-size * 1.2;
$h4-font-size:                $h5-font-size * 1.2;
$h3-font-size:                $h4-font-size * 1.2;
$h2-font-size:                $h3-font-size * 1.2;
$h1-font-size:                $h2-font-size * 1.2;

$headings-margin-bottom:      $spacer / 2;
$headings-font-family:        inherit;
$headings-font-weight:        300;
$headings-line-height:        1.1;
$headings-color:              inherit;

$lead-font-size:              1.3em;
$lead-font-weight:            400;

$small-font-size:             $font-size-base * .85;

$text-muted:                  $gray-600;

$blockquote-small-color:      $gray-500;
$blockquote-font-size:        $font-size-base * 1.25;


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding:          8px;
$table-cell-padding-sm:       5px;

$table-bg:                    transparent;
$table-accent-bg:             $gray-100;
$table-hover-bg:              $gray-200;
$table-active-bg:             $gray-300;

$table-border-color:          $gray-300;

$table-head-bg:               $gray-200;
$table-head-color:            $gray-700;


// Forms

$input-bg:                              $gray-200;
$input-disabled-bg:                     $gray-300;
$input-color:                           $gray-700;
$input-border-color:                    $gray-400;
$input-placeholder-color:               $gray-600;
$input-btn-focus-width:                 .25rem;
$input-btn-focus-color-opacity:         .25;

$form-label-font-weight:                700;

// Navbar

$navbar-dark-color: $white;
$navbar-dark-hover-color: $dark;
$navbar-dark-active-color: $dark;
$navbar-dark-brand-color: $white;
$navbar-dark-brand-hover-color: $white;

// Pagination

//TODO: Re-work EdGEL sizing on rems, not pixels.
//$pagination-padding-y:              .5rem;
//$pagination-padding-x:              .75rem;
//$pagination-padding-y-sm:           .25rem;
//$pagination-padding-x-sm:           .5rem;
//$pagination-padding-y-lg:           .75rem;
//$pagination-padding-x-lg:           1.5rem;
//$pagination-line-height:            1.25;

$pagination-border-radius:          0;
$pagination-border-radius-sm:       0;
$pagination-border-radius-lg:       0;

$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-color:           transparent;

$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     transparent;

$pagination-active-color:           $brand-bg-text;
$pagination-active-bg:              $brand-color;
$pagination-active-border-color:    $brand-color;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  transparent;


// Cards
$card-spacer-y:                     .75rem;
$card-spacer-x:                     1.25rem;
$card-title-spacer-y:               0;
$card-border-width:                 0;
//$card-border-radius:                0;
$card-border-color:                 transparent;
//$card-inner-border-radius:          0;
$card-cap-padding-y:                .75rem;
$card-cap-padding-x:                1.25rem;
$card-cap-bg:                       $white;
//$card-height:                       null;
//$card-color:                        null;
//$card-bg:                           $white;
$card-img-overlay-padding:          1.25rem;
//$card-group-margin:                 $grid-gutter-width / 2;
//$card-deck-margin:                  $card-group-margin;
$card-height:                       100%;

// Alerts

$alert-color-scale:    50%;

// Figures

$figure-caption-color:              $gray-600;

// Breadcrumbs

$breadcrumb-font-size:              1rem;
$breadcrumb-padding-y:              space(1);
$breadcrumb-padding-x:              space(2);
$breadcrumb-item-padding:           .5rem;
$breadcrumb-margin-bottom:          1.25rem;
$breadcrumb-bg:                     $gray-200;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $black;
$breadcrumb-divider:                quote(">");
$breadcrumb-border-radius:          .25rem;


// Carousel

//$carousel-control-color:            $white;
$carousel-control-width:            0;
$carousel-control-opacity:          .4;

//$carousel-indicator-width:          30px;
//$carousel-indicator-height:         3px;
//$carousel-indicator-spacer:         3px;
//$carousel-indicator-active-bg:      $white;

$carousel-caption-width:            auto;
$carousel-caption-color:            $black;

$carousel-control-icon-width:       1.25rem;

// See _icons.scss
//$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
//$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;

// Responsive Font Sizing
$rfs-rem-value:                     16;
$rfs-breakpoint:                    1600;
$rfs-breakpoint-unit:               px;
$rfs-base-value:                    11;
$rfs-unit:                          px;

// Accordion
$accordion-padding-y:                 space(3);
$accordion-padding-x:                 1.25rem;
$accordion-button-color:              $brand-bg-text;
$accordion-button-bg:                 $brand-color;
//$accordion-border-width
$accordion-border-color:              transparent;
$accordion-border-radius:             0;
$accordion-button-active-color:       $accordion-button-color;
$accordion-button-active-bg:          $accordion-button-bg;
$accordion-button-padding-x:          $accordion-padding-x;
$accordion-button-padding-y:          space(1);
$accordion-button-focus-border-color: tint-color($accordion-button-bg, 50%);
$accordion-button-focus-box-shadow:   0 0 0 $input-btn-focus-width rgba($accordion-button-bg, $input-btn-focus-color-opacity);
$accordion-icon-transform:            null;
$accordion-icon-width:                1.5rem;
//$accordion-icon-color:                $accordion-button-color;
$accordion-icon-color:                $brand-color;
//$accordion-icon-active-color:         $accordion-button-active-color;
$accordion-icon-active-color:         $brand-color;
//$accordion-body-padding-x
//$accordion-body-padding-y
$accordion-button-icon:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='#{$accordion-icon-color}'><path d='M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z' /></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='#{$accordion-icon-active-color}'><path d='M0 0v2h8v-2h-8z' transform='translate(0 3)' /></svg>");

/* eslint-enable scss/dollar-variable-default */

// Legacy import of variables since needs to access functions in same scope
@import "bootstrap/scss/variables";
