// Variables

$white:                            #fff;
$whiteoffset:                      #fefefe;
$gray-100:                         #f8f9fa;
$gray-200:                         #e8e8e8;
$gray-300:                         #dee2e6; //used for toolbar and badges
$gray-400:                         #cdcdcd; //used for border-bottom sidebar-nav and toolbar normal border
$gray-500:                         #adb5bd; //used in toolbar and buttons for border
$gray-600:                         #666e76; //used for atum-text-dark and $secondary
$gray-700:                         #495057; //used for atum-text-dark, secondary
$gray-800:                         #343a40;
$gray-900:                         #212529; //used for tree header
$bluegray:                         #b2bfcd; // used for borders
$black:                            #000;    //used for shadows
$focuscolor:                       #39f;    //used for focus color
$dark-blue:                        #001b4c; //is the atum-special-color
$light-blue:                       #2a69b8; //is the template-link-color
$focusshadow:                      0 0 0 .2rem #eaeaea;

// BS Colours
$blue:                             hsl(213, 63%, 44%); // base color for calculation, Primary-color
$indigo:                           #0377be; //used in bootstrap
$purple:                           #6f42c1; //used in bootstrap
$pink:                             #971250; //used in bootstrap
$red:                              #c52827; //used in bootstrap
$red-dark:                         #3b0d0c; //used for alerts error
$yellow:                           #ffb514; //used in bootstrap
$green:                            #457d54; //used in bootstrap
$green-dark:                       #0f2f21; //used for alert success
$teal:                             #20c997; //used in bootstrap
$cyan:                             #107d8e; //used in bootstrap
$darkblue:                         #132f53;
$base-color:                       $darkblue;

// Atum colours defined as scss variables for use in scss functions
$atum-text-dark:                   $gray-700;
$success:                          $green;
$danger:                           $red;
$info:                             $light-blue;
$warning:                          $yellow;

$theme-colors: ();
$theme-colors: map-merge((
  primary:                         $base-color, //used only in bootstrap, please use $atum-bg-dark
  secondary:                       $gray-700, //used for btn-secondary
  success:                         $success,
  info:                            $light-blue,
  warning:                         $yellow,
  danger:                          $danger,
  light:                           $gray-100, //used in bootstrap
  dark:                            $gray-900,  //used in bootstrap and for table-border
  action:                          $base-color,
  error:                           $red-dark,
  alert-success:                   $green-dark
), $theme-colors);

$atum-colors: (
  template-sidebar-bg:             var(--template-bg-dark-80),
  template-sidebar-font-color:     $white,
  template-sidebar-link-color:     $white,
  template-bg-light:               #f0f4fb, //light background color, frontend dashboard background
  template-text-light:             $white,
  template-special-color:          $dark-blue,
  template-link-color:             $light-blue,
  template-link-hover-color:       darken($light-blue, 20%),
  template-contrast:               $light-blue,
  template-bg-dark:                hsl(var(--hue), 40%, 20%),
  template-bg-dark-3:              hsl(var(--hue), 40%, 97%),
  template-bg-dark-5:              hsl(var(--hue), 40%, 95%),
  template-bg-dark-7:              hsl(var(--hue), 40%, 93%),
  template-bg-dark-10:             hsl(var(--hue), 40%, 90%),
  template-bg-dark-15:             hsl(var(--hue), 40%, 85%),
  template-bg-dark-20:             hsl(var(--hue), 40%, 80%),
  template-bg-dark-30:             hsl(var(--hue), 40%, 70%),
  template-bg-dark-40:             hsl(var(--hue), 40%, 60%),
  template-bg-dark-50:             hsl(var(--hue), 40%, 50%),
  template-bg-dark-60:             hsl(var(--hue), 40%, 40%),
  template-bg-dark-65:             hsl(var(--hue), 40%, 35%),
  template-bg-dark-70:             hsl(var(--hue), 40%, 30%),
  template-bg-dark-75:             hsl(var(--hue), 40%, 25%),
  template-bg-dark-80:             hsl(var(--hue), 40%, 20%),
  template-bg-dark-90:             hsl(var(--hue), 40%, 10%)
);

$colors: (
  card-bg:                         rgba(255, 255, 255, .7),
  bluegray:                        $bluegray,
  lightbluegray:                   #f6f9fc,
  toolbar-bg:                      $white,
  success-border:                  var(--success),
  info-border:                     var(--info),
  warning-border:                  var(--warning),
  danger-border:                   var(--danger),
  login-main-bg:                   darken($base-color, 8%), //used on login
  border:                          $gray-400,
  "white":                         $white, // the key here must be in quotes to avoid scss compilation warnings.
  white-offset:                    $whiteoffset,
  focus:                           $focuscolor,
  focus-shadow:                    $focusshadow,
  toggle-color:                    $white, //used in sidebar
);

// Alerts
$alert-border-level:               0;
$alert-color-level:                0;

// Global
$atum-box-shadow:                  0 2px 10px -8px var(--template-bg-dark-50);
$enable-rounded:                   true;
$input-box-shadow:                 inset 0 0 0 .1rem #e9e9e9;
$input-btn-padding-y:              .5rem;
$input-btn-padding-x:              1rem;
$input-max-width:                  100%;
$btn-disabled-opacity:             .4;

// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
$variable-prefix:                  "";

// Toolbar
$atum-toolbar-line-height:         2.45rem;

// Sidebar
$sidebar-width:                    18rem;
$sidebar-width-login:              28.75rem;
$sidebar-width-closed:             3rem;
$main-brand-height:                3rem;

// Fonts
$font-family-sans-serif:           "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$h1-font-size:                     1.65rem;
$h2-font-size:                     1.5rem;
$h3-font-size:                     1.25rem;
$h4-font-size:                     1rem;
$h5-font-size:                     .9286rem;
$h6-font-size:                     .8571rem;
$headings-color:                   var(--template-bg-dark);
$font-size-sm:                     .8rem;
$font-size-vsm:                    .6rem;
$display1-size:                    1rem;
$display2-size:                    .875rem;
$content-font-size:                .875rem;
$label-font-size:                  1rem;
$danger-bg:                        #900;
$badge-font-size:                  .75rem;
$jicon-css-prefix:                 icon !default;
$fa-css-prefix:                    fa !default;
$fa-font-path:                     "../../../../media/vendor/fontawesome-free/webfonts";
$roboto-font-path:                 "../../../../../media/vendor/roboto-fontface/fonts";

// Font weights
$thin-weight:                      100;
$extralight-weight:                200;
$light-weight:                     300;
$normal-weight:                    400;
$medium-weight:                    500;
$semibold-weight:                  600;
$bold-weight:                      700;
$extrabold-weight:                 800;
$black-weight:                     900;

// Tables
$table-bg:                         var(--white);
$table-cell-padding-y:             .75rem;
$table-cell-padding-x:             1rem;
$table-cell-padding-y-sm:          .3rem;
$table-cell-padding-x-sm:          .3rem;
$table-group-separator-color:      $gray-300;

// Dropdowns
$dropdown-padding-y:               0;
$dropdown-box-shadow:              0 1px 1px rgba($black, .15);
$dropdown-link-hover-color:        var(--template-text-dark);
$dropdown-border-width:            1px;
$dropdown-item-padding-y:          .5rem;
$dropdown-item-padding-x:          .75rem;
$dropdown-spacer:                  0;

// Cards
$card-border-width:                0;
$card-border-color:                transparent;

// Alerts
$state-success-text:               $success;
$state-success-bg:                 lighten($success, 58%);
$state-success-border:             hsl(var(--hue),50%,93%);

$state-info-text:                  var(--template-bg-dark-70);
$state-info-bg:                    var(--white);
$state-info-border:                var(--template-bg-dark-70);

$state-warning-text:               darken($warning, 24%);
$state-warning-bg:                 lighten($warning, 44%);
$state-warning-border:             $warning;

$state-danger-text:                $danger;
$state-danger-bg:                  lighten($danger, 52%);
$state-danger-border:              $danger;

$state-error-text:                 $danger;
$state-error-bg:                   lighten($danger, 52%);
$state-error-border:               $danger;

// Badges
$badge-padding-x:                  .2rem;
$badge-padding-y:                  .3rem;
$badge-border-radius:              .2rem;

$success-bg:                       $green;
$success-txt:                      $white;

$warning-bg:                       #f9d71c;
$warning-txt:                      #000;

$danger-bg:                        #900;
$danger-txt:                       #fff;

$info-bg:                          $gray-300;
$info-txt:                         $white;

// Input Group
$input-group-addon-color:          var(--white);
$input-group-addon-bg:             $base-color;
$input-group-addon-border-color:   var(--template-bg-dark);

// Treeselect
$treeselect-line-height:           2.2rem;
$treeselect-indent:                40px;

// List
$list-group-bg:                    var(--white-offset);
$list-group-border-color:          hsl(var(--hue),40%,85%);
$list-group-item-padding-y:        .75rem;

// Buttons
$input-btn-padding-y-sm-submenu:    0;
$input-btn-padding-x-sm-submenu:    1.625rem;
$input-btn-submenu-icon-distance:   1rem;

// Custom form
$form-select-indicator-padding:    3rem;
$form-select-bg:                   var(--template-bg-light);
$form-select-bg-size:              116rem;
$form-select-indicator:            url("../images/select-bg.svg");
$form-select-indicator-rtl:        url("../images/select-bg-rtl.svg");
$form-select-indicator-active:     url("../../../images/select-bg.svg");
$form-select-indicator-active-rtl: url("../../../images/select-bg-rtl.svg");
$form-select-background:           $form-select-indicator no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$form-select-background-rtl:       $form-select-indicator-rtl no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$form-select-box-shadow:           $atum-box-shadow;
$form-select-bg-size-sm:           75rem;
$form-select-multiple-padding-y:   .3rem;
$form-file-button-color:           var(--white);

//input
$input-padding:                    .5rem 1rem;
$input-border:                     solid 1px var(--template-bg-dark-20);

// Modals
$modal-header-height:              2.875rem;

// Quickicons
$quickicon-bg:                     var(--white);
$quickicon-box-shadow-success:     0 0 3px 0 var(--success);
$quickicon-box-shadow-danger:      0 0 3px 0 var(--danger);
$quickicon-box-shadow-warning:     0 0 3px 0 var(--warning);
$quickicon-icon-size:              2rem;
$quickicon-icon-size-sm:           1.3rem;

// Gutter
$grid-gutter-width:                2rem;
$grid-gutter-width-s:              15px;

// Breadcrumbs
$breadcrumb-bg:                    var(--white);

// Links
$link-color:                       var(--template-link-color);
$link-hover-color:                 var(--template-link-hover-color);
$link-decoration:                  none;

// Z-Index list
$zindex-negative:                  -1;
$zindex-actions:                   auto;
$zindex-toolbar:                   1000;
$zindex-sidebar:                   1010;
$zindex-header:                    1020;
$zindex-alerts:                    1030;
$zindex-modal-backdrop:            1040;
$zindex-modal:                     1050;
$zindex-popover:                   1060;
$zindex-tooltip:                   1070;
$zindex-mobile-bottom:             8000;
$zindex-mobile-toggle:             9999;
$zindex-mobile-menu:               9000;