//   ╭─────────────────────────────────────────────────────────────────╮
//   │                                                                 │
//   │   /!\ DO NOT IMPORT OR DEFINE ACTUAL RULES INTO THIS FILE /!\   │
//   │                                                                 │
//   │  Only things that disappear after scss compilation is allowed.  │
//   │                                                                 │
//   ╰─────────────────────────────────────────────────────────────────╯
//
//   This file is magically imported into every components so that scss variables,
//   functions and mixins can be accessed.
//   But if some rules are defined here, they will be copied into the final build as many
//   times as there are components…


//  ╭─────────────────────────────╮
//  │ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
//  │ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
//  │ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵   │
//  ╰─────────────────────────────╯
//
//  Bootstrap and BootstrapVue overrides.
//  Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
//  BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`

// TODO: add a feature so the user can set some css variables to change the global aspects ?
// For exemple, turning rounding of elements off, the bases colors, etc.
// $enable-rounded: false;

$font-size-base: .9rem;
$font-weight-bold: 500;

$white:    var(--white);
$gray-100: var(--gray-100);
$gray-200: var(--gray-200);
$gray-300: var(--gray-300);
$gray-400: var(--gray-400);
$gray-500: var(--gray-500);
$gray-600: var(--gray-600);
$gray-700: var(--gray-700);
$gray-800: var(--gray-800);
$gray-900: var(--gray-900);
$black:    var(--black);

$blue:    var(--blue);
$indigo:  var(--indigo);
$purple:  var(--purple);
$pink:    var(--pink);
$red:     var(--red);
$orange:  var(--orange);
$yellow:  var(--yellow);
$green:   var(--green);
$teal:    var(--teal);
$cyan:    var(--cyan);

$theme-colors: (
  'best': $purple,
);

$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);

$alert-bg-level:     -10;
$alert-border-level: -9;
$alert-color-level:  5;

$list-group-item-bg-level:     -11;
$list-group-item-color-level:  6;

// Replace font-weight 300 with 200
$font-weight-light: 200;
$display1-weight: 200;
$display2-weight: 200;
$display3-weight: 200;
$display4-weight: 200;
$lead-font-weight: 200;

// Set fonts
$font-family-sans-serif: 'FiraGO', 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;

$h2-font-size: $font-size-base * 1.5;
$h3-font-size: $font-size-base * 1.4;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base * 1.1;

$alert-padding-x: 1rem;

$card-spacer-y: .6rem;
$card-spacer-x: 1rem;

$list-group-item-padding-x: 1rem;

// Hard coded for scss compilation to pass
$b-toast-background-opacity: 100%;

// Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/functions.scss';
@import '_functions-override.scss';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins.scss';
@import '~bootstrap-vue/src/variables';


$body-color: $gray-800;

$hr-border-color: $gray-200;

$list-group-action-color: $gray-800;

//  ╭──────────────────────────────────────╮
//  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
//  │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
//  │ ╵  ╰─╯╵ ╰╵ ╵   ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
//  ╰──────────────────────────────────────╯
//
//  Fork-awesome variable overrides.
//  default: `app/node_modules/fork-awesome/scss/_variables.scss`

$fa-font-path: '~fork-awesome/fonts';
$fa-font-size-base: $font-size-base;

@import '~fork-awesome/scss/variables';


//  ╭────────────────────╮
//  │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │
//  │ │  │ │╰─╮ │ │ ││││ │
//  │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │
//  ╰────────────────────╯

$thin-border: $hr-border-width solid $hr-border-color;

$btn-padding-y-xs: .25rem;
$btn-padding-x-xs: .35rem;
$btn-line-height-xs: 1.5;