@import './variables';

// First override some or all individual color variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #ebebeb !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #888 !default;
$gray-700: #444 !default;
$gray-800: #303030 !default;
$gray-900: #222 !default;
$black: #000 !default;

/*
$blue:    #375a7f !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #e74c3c !default;
$orange:  #fd7e14 !default;
$yellow:  #f39c12 !default;
$green:   #00bc8c !default;
$teal:    #20c997 !default;
$cyan:    #3498db !default;

$primary:       $blue !default;
$secondary:     $gray-700 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-500 !default;
$dark:          $gray-800 !default;
*/

$blue: #274aAf;
$indigo: #674eec;
$purple: #790068;
$pink: #ff4169;
$red: #a4182c;
$orange: #CC4400;
$yellow: #f39c12;
$green: #108c1a;
$teal: #008987;
$cyan: #00b8d8;
$white: #fff;
$gray: #868e96;
$gray-dark: #343a40;
$primary: #274aAf;
$primary_transparent: #274aAf33;
$primary-light: #ACF;
$primary-dark: #172a6f;
$primary2: #3498db;
$primary2_transparent: #3498db33;
$primary2-dark: #0468ab;
$secondary: #4A5159;
$success: #108c1a;
$success_transparent: #108c1a33;
$success-dark: #006c00;
$success2: #005c0a;
$success2_transparent: #005c0a33;
$info: #008987;
$info_transparent: #00898733;
$info-dark: #006967;
$info2: #A90088;
$info2_transparent: #A9008833;
$warning: #c37c02;
$warning_transparent: #c37c0233;
$warning2: #CC4400;
$warning2_transparent: #CC440033;
$danger-light: #fdd;
$danger: #a4382c;
$danger_transparent: #a4382c33;
$danger-dark: #84180c;
$danger2: #800000;
$danger2_transparent: #80000033;
$light: #e9ecef;
$dark: #212529;

$shadow: rgba(0, 0, 0, 0.1);


// Then add them to your custom theme-colors map, together with any additional colors you might need
$theme-colors: (primary: $primary,
  primary2: $primary2,
  secondary: $secondary,
  success: $success,
  success2: $success2,
  info: $info,
  info2: $info2,
  warning: $warning,
  warning2: $warning2,
  danger: $danger,
  danger2: $danger2,
  light: $light,
  dark: $dark,
  // add any additional color below
  
  primary_transparent: $primary_transparent,
  primary2_transparent: $primary2_transparent,
  success_transparent: $success_transparent,
  success2_transparent: $success2_transparent,
  info_transparent: $info_transparent,
  info2_transparent: $info2_transparent,
  warning_transparent: $warning_transparent,
  warning2_transparent: $warning2_transparent,
  danger_transparent: $danger_transparent,
  danger2_transparent: $danger2_transparent,

  body-bg: $light,
);

$utilities-border-colors: (
  primary: $primary,
  primary2: $primary2,
  secondary: $secondary,
  success: $success,
  success2: $success2,
  info: $info,
  info2: $info2,
  warning: $warning,
  warning2: $warning2,
  danger: $danger,
  danger2: $danger2,
  light: $light,
  dark: $dark,
  // add any additional color below
  
  primary_transparent: $primary_transparent,
  success_transparent: $success_transparent,
  info_transparent: $info_transparent,
  warning_transparent: $warning_transparent,
  danger_transparent: $danger_transparent,

  body-bg: $dark,
);

$min-contrast-ratio: 1.9 !default;

// Body
$body-bg: $light !default;
$invert-color: $light !default;

$table-color: $dark !default;
$table-striped-color: $dark !default;
$table-active-color: $dark !default;
$table-hover-color: $dark !default;
/*
// Links

$link-color:                $primary-light !default;

// Fonts

// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$h1-font-size:                3rem !default;
$h2-font-size:                2.5rem !default;
$h3-font-size:                2rem !default;
$text-muted:                  $gray-600 !default;

// Tables
*/
$table-border-color: $gray-500 !default;

$table-bg: $light !default;
$table-bg-scale: 0 !default;
/*
// Forms

$input-bg:                          $dark !default;
$input-disabled-bg:                 $gray-700 !default;
$input-color:                       $gray-100 !default;
$input-border-color:                $body-bg !default;
$input-group-addon-color:           $gray-500 !default;
$input-group-addon-bg:              $gray-700 !default;

$form-check-input-bg:                     $dark !default;
$form-check-input-background-color:       $dark !default;
$form-check-input-border:                 none !default;

$form-file-button-color:          $dark !default;

// Dropdowns

$dropdown-bg:                       $gray-900 !default;
$dropdown-border-color:             $gray-700 !default;
$dropdown-divider-bg:               $gray-700 !default;
$dropdown-color:                    $light !default;
$dropdown-link-color:               $white !default;
$dropdown-link-hover-color:         $white !default;
$dropdown-link-hover-bg:            $primary !default;

// Navs
*/
$nav-tabs-link-color: $gray-900 !default;
$nav-link-disabled-color: $gray-700 !default;
$nav-tabs-border-color: $gray-700 !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$nav-tabs-link-active-color: $white !default;
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$nav-tabs-link-hover-bg: $gray-100 !default;

$nav-tabs-link-active-bg: transparent !default;

/*
// Navbar
$navbar-dark-color:                rgba($white, .6) !default;
$navbar-dark-hover-color:          $white !default;
$navbar-light-color:                rgba($gray-900, .7) !default;
$navbar-light-hover-color:          $gray-900 !default;
$navbar-light-active-color:         $gray-900 !default;
$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;

// Pagination

$pagination-color:                  $white !default;
$pagination-bg:                     $success !default;
$pagination-border-width:           0 !default;
$pagination-border-color:           transparent !default;
$pagination-hover-color:            $white !default;
$pagination-hover-bg:               lighten($success, 10%) !default;
$pagination-hover-border-color:     transparent !default;
$pagination-active-bg:              $pagination-hover-bg !default;
$pagination-active-border-color:    transparent !default;
$pagination-disabled-color:         $white !default;
$pagination-disabled-bg:            darken($success, 15%) !default;
$pagination-disabled-border-color:  transparent !default;

// Cards
*/
$card-cap-bg: $gray-200 !default;
$card-bg: $gray-100 !default;
/*
// Popovers

$popover-bg:                        $gray-800 !default;
$popover-header-bg:                 $gray-700 !default;

// Toasts

$toast-background-color:            $gray-700 !default;
$toast-header-background-color:     $gray-800 !default;

// Modals

$modal-content-bg:                  $gray-800 !default;
$modal-content-border-color:        $gray-700 !default;
$modal-header-border-color:         $gray-700 !default;

// Progress bars

$progress-bg:                       $gray-700 !default;

// List group

$list-group-color:                  $body-color !default;
$list-group-bg:                     $gray-800 !default;
$list-group-border-color:           $gray-700 !default;
$list-group-hover-bg:               $gray-700 !default;
$list-group-action-hover-color:     $list-group-color !default;
$list-group-action-active-bg:       $gray-900 !default;

// Breadcrumbs
*/
$breadcrumb-bg: $gray-700 !default;
$breadcrumb-color: $primary !default;
$breadcrumb-hover-color: $primary-light !default;
$breadcrumb-item-color: $gray-900 !default;
$breadcrumb-item-hover-color: $gray-600 !default;
/*
// Close

$btn-close-color:            $white !default;
$btn-close-opacity:          .4 !default;
$btn-close-hover-opacity:    1 !default;

// Code

$pre-color:                         inherit !default;
*/



// Additional styles
$menu-card-link-colour: rgb(52, 73, 94);
$menu-card-link-colour-hover: $primary2;

$sub-menu-icon-colour: $gray-600;
$sub-menu-icon-border-colour: $gray-700;

$top-nav-bg-colour: $white;
$top-nav-bottom-border-colour: $light;
$top-nav-item-colour: $primary;
$top-nav-active-bg-colour: $gray-300;

$debug-colour: $dark;
$debug-bg-colour: $red;

$invalid-feedback: $danger-light;

$phx-modal-bg-colour: #fefefe;
$phx-modal-close-colour: #AAA;
$phx-modal-close-colour-hover: #000;

$button-outline-colour: $gray-800;
$button-outline-colour-hover: $light;
$button-outline-focus-colour: $dark;
$button-outline-active-colour: $light;

$select2-border-colour: $gray-700;


// Select 2 stuff, just for dark mode
.select2-selection {
  border-color: $light !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-results,
.select2-search {
  background-color: $light;
  color: $dark !important;
}

.select2-search__field {
  background-color: $light;
}

.text-invert {
  color: $invert-color;
}
