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

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

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

$edgel-shadow: 0 4px 6px -5px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .1);
$edgel-shadow-light: 0 2px 1px -1px rgba(0, 0, 0, .15);

$enable-dark-mode: false;

// 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;
$primary:  $brand-color;

$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,
  "primary":    $dark,
  "secondary":  $light,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

$brand-text-emphasis:     shade-color($brand-color, 60%);
$brand-bg-subtle:         tint-color($brand-color, 80%);
$brand-border-subtle:     tint-color($brand-color, 60%);

// Primary is equivalent to dark settings
$primary-text-emphasis:   $gray-700;
$primary-bg-subtle:       $gray-400;
$primary-border-subtle:   $gray-500;

// Secondary is equivalent to light settings
$secondary-text-emphasis: $gray-700;
$secondary-bg-subtle:     mix($gray-100, $white);
$secondary-border-subtle: $gray-200;

// 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:                  true;

// Prefix for :root CSS variables

$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,
);

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

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

$body-secondary-bg:         $gray-200;
$body-secondary-color:      $gray-600;

$body-tertiary-bg:          $gray-100;
$body-tertiary-color:       $body-color;

$body-emphasis-color:       $body-color;

$focus-ring-blur:           0;
$focus-ring-width:          .25rem;
$focus-ring-opacity:        .72;
$focus-ring-color:          rgba($dark, $focus-ring-opacity);

// Links
//
// Style anchor elements.

$link-color:                 $body-color;
$link-decoration:            null;  // See _unset.scss
$link-shade-percentage:      0;
$link-hover-color:           $link-hover-color;
$link-hover-decoration:      null;  // See _unset.scss
$icon-link-underline-offset: $link-underline-offset;

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   .8rem;

// 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,
  xxl: 1400px
);

$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: 1399px,
  xxl: 1600px
);

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

$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-duration:         .35s;
$transition-collapse:         height $transition-duration ease;
$transition-collapse-width:   width $transition-duration 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;

$font-weight-semibold:        600;

$line-height-base:            1.5;
$line-height-lg:              1.6;
$line-height-sm:              1.2;

$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;

$display-font-sizes: ();

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        inherit;
$headings-font-weight:        300;
$headings-color:              inherit;
$headings-line-height:        $line-height-sm;

$lead-font-size:              $font-size-base * 1.3;
$lead-font-weight:            400;

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

$blockquote-font-size:        $font-size-base * 1.25;

$mark-color:                  $black;
$code-color:                  $black;

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

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

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

$table-caption-color:         $body-color;

$table-bg-scale:              -80%;
$table-variants: (
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
  "brand":      $brand-color,
);


// Forms
$btn-box-shadow:                        0 0;
$btn-link-disabled-color:               $gray-700;

$input-bg:                              $gray-200;
$input-group-addon-bg:                  $input-bg;
$input-disabled-bg:                     $gray-300;
$input-color:                           $gray-800;
$input-border-color:                    $gray-400;
$input-placeholder-color:               $gray-700;
$input-btn-padding-y:                   .275rem;
$input-btn-padding-y-sm:                .175rem;
$input-btn-padding-y-lg:                .3rem;

$form-label-font-weight:                700;
$form-range-track-bg:                   $gray-300;
$form-check-input-border:               var(--#{$prefix}border-width) solid $gray-500;
$form-check-input-disabled-opacity:     .75;
$form-floating-label-opacity:           .75;
$form-range-thumb-disabled-bg:          $gray-500;
$form-feedback-valid-color:             shade-color($success, 5%);
$form-feedback-invalid-color:           shade-color($danger, 5%);

$component-active-bg:                   $dark;

// 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;
$navbar-padding-y:              0;
$navbar-padding-x:              0;
$navbar-nav-link-padding-x:     space(3);
$navbar-nav-link-padding-y:     space(2);
$navbar-light-toggler-icon-bg:  "";
$navbar-dark-toggler-icon-bg:   "";

// Dropdown

$dropdown-bg:                       $white;
$dropdown-link-hover-bg:            var(--#{$prefix}secondary-bg);

// Pagination

$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-bg:                           $white;
$card-spacer-y:                     .75rem;
$card-spacer-x:                     1.25rem;
$card-title-spacer-y:               0;
$card-border-width:                 0;
$card-border-color:                 transparent;
$card-cap-padding-y:                .75rem;
$card-cap-padding-x:                1.25rem;
$card-cap-bg:                       $card-bg;
$card-img-overlay-padding:          1.25rem;
$card-box-shadow:                   $edgel-shadow;

// Figures

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

// Breadcrumbs

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


// Carousel

$carousel-control-color:             $white;
$carousel-control-width:             5rem;

$carousel-caption-width:             100%;
$carousel-caption-color:             null;
$carousel-caption-padding-y:         space(3);
$carousel-caption-spacer:            null;

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

// See _icons.scss
$carousel-control-prev-icon-bg:     $uoe-previous-icon;
$carousel-control-next-icon-bg:     $uoe-next-icon;

// We don't support the dark carousel - all set to null in _unset.scss
$carousel-dark-indicator-active-bg:  null;
$carousel-dark-caption-color:        null;
$carousel-dark-control-icon-filter:  null;


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

// Accordion
$accordion-padding-y:                 space(3);
$accordion-padding-x:                 1.25rem;
$accordion-bg:                        $white;
$accordion-color:                     $body-color;
$accordion-button-bg:                 $brand-color;
$accordion-button-color:              $brand-bg-text;
$accordion-button-active-bg:          $accordion-button-bg;
$accordion-button-active-color:       $accordion-button-color;
$accordion-border-width:              0;
$accordion-border-color:              transparent;
$accordion-border-radius:             0;
$accordion-inner-border-radius:       0;
$accordion-button-padding-x:          $accordion-padding-x;
$accordion-button-padding-y:          .25rem;
$accordion-button-focus-border-color: tint-color($accordion-button-bg, 50%);
$accordion-button-focus-box-shadow:   0 0 $focus-ring-blur $focus-ring-width rgba($accordion-button-bg, $focus-ring-opacity);
$accordion-icon-transform:            null;
$accordion-icon-width:                1.5rem;
$accordion-icon-color:                $brand-bg-text;
$accordion-icon-active-color:         $brand-bg-text;
$accordion-button-icon:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0v16 16' fill='#{$accordion-icon-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z' /></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z' /></svg>");

// Progress bars
$progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

// List groups
$list-group-bg:                     $white;
$list-group-active-color:           $brand-bg-text;
$list-group-active-bg:              $brand-color;

// Toasts
$toast-border-radius:               0;
$toast-background-color:            rgba($white, .85);
$toast-header-background-color:     $gray-100;

// Modals
$modal-content-bg:                  $white;

// Offcanvas
$offcanvas-bg-color:                $white;

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

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

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

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

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

@import "bootstrap/scss/maps";
