@use "sass:color";

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

// Use dark mode conditionally based on data-bs-theme attribute
$color-mode-type: data;

// Enable dark mode in J5.0
$enable-dark-mode: true;

// 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
$dark-blue:                        #001b4c; // is the atum-special-color
$light-blue:                       #2a69b8; // is the template-link-color

// BS Colours
$blue:                             #2a69b7; // Same as 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:                          #ffb514;
$featured:                         #c78800;

$theme-colors: (
  "primary":                       $darkblue,
  "secondary":                     $gray-700,
  "success":                       $success,
  "info":                          $light-blue,
  "warning":                       $warning,
  "danger":                        $danger,
  "light":                         $gray-100,
  "dark":                          $gray-900,
  "action":                        $base-color,
  "error":                         $red-dark
) !default;


$template-background-light: #f0f4fb; // light background color, frontend dashboard background and installer body background

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

$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-bg:                   var(--template-bg-light);
$form-select-bg-size:              calc(max(100%, 116rem));
$form-select-bg-size-sm:           75rem;

// links
$template-link-color:             var(--template-link-color);
$template-link-hover-color:       var(--template-link-hover-color);

//$form-select-background:        $form-select-bg $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-bg $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)

$atum-colors: (
  template-sidebar-bg:             var(--template-bg-dark-80),
  template-sidebar-font-color:     $white,
  template-sidebar-link-color:     $white,
  template-bg-light:               $template-background-light,
  template-link-color:             var(--link-color),
  template-link-hover-color:       var(--link-hover-color),
  template-text-light:             $white,
  template-text-dark:              $atum-text-dark,
  template-special-color:          $dark-blue,
  template-contrast:               $light-blue,
  template-quickicon-color:        hsl(var(--hue), 30%, 40%),
  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%),

  media-manager-overlay-header-bg:  var(--template-bg-dark-5),
  media-manager-infobar-dt-color:   rgba(0, 0, 0, .54),
  media-manager-content-bg:         var(--body-bg),
  media-manager-file-icon-color:    hsl(var(--hue), 20%, 60%),

  media-manager-content-color:      $light-blue,
  media-manager-overlay-bg:         var(--template-bg-dark-3),
  media-manager-disk-name-color:    var(--template-text-dark),
  media-manager-tree-item-hover-bg: #e1e1e1,
  media-manager-toolbar-icon-color: var(--template-bg-dark-60),
  media-manager-border:             1px solid var(--template-bg-dark-7),
  media-browser-file-bg:            hsl(var(--hue), 20%, 97%),
  // media-browser-file-border:       1px solid hsl(var(--hue), 35%, 95%),
  // media-browser-item-preview-border: 1px solid hsl(var(--hue, 35%, 95%)),
  media-drive-bg:                   var(--com-media-manager-content-bg,#fff),
  media-toolbar-bg:                 var(--com-media-manager-content-bg,#fff),
  media-toolbar-icon-bg:            transparent,
  media-toolbar-icon-color:         var(--com-media-manager-toolbar-icon-color, var(--template-bg-dark-60)),
  media-toolbar-icon-bg-hvr:        #f0f0f0,
  media-tree-item-color:            var(--template-bg-dark-60),

  media-manager-breadcrumb-item-bg: var(--com-media-manager-overlay-bg, var(--template-bg-dark-3)),
  media-tree-active-icon-color:     $light-blue,

  image-bg:                        #fff,
  image-bg-image:                  (linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%)),

  template-quickicon-bg:                   hsl(var(--hue), 60%, 97%),
  template-quickicon-bg-hvr:               var(--template-bg-dark),
  form-control-bg:                         var(--template-text-light),
  form-control-bg-disabled:                var(--gray-200),
  form-control-border:                     var(--border-width) solid var(--template-bg-dark-20),

  form-check-input-checked-bg-image:       url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"),
  form-check-input-checked-bg-color:       $blue,
  form-check-input-border:                 var(--border-width) solid var(--template-bg-dark-20),

  form-select-background:                  $form-select-bg $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-bg $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-border:              var(--form-control-border),

  form-select-success-bg:          var(--white-offset),
  form-select-danger-bg:           var(--white-offset),
  form-select-disabled-bg:         var(--gray-200),
  form-select-option:              var(--template-text-dark),
  form-select-option-disabled-bg:  var(--template-bg-dark-5),

  file-selector-btn-bg:            var(--template-bg-dark-70),
  file-selector-btn-bg-hvr:        var(--template-bg-dark-50),

  // background:
  bg-normal:                       var(--template-bg-light),
  bg-reverted:                     var(--template-bg-dark-60),

  // text
  text-normal:                     var(--template-text-dark),
  text-reverted:                   var(--template-text-light),
  text-muted-color:                var(--template-text-dark) !important,
  text-muted-hvr-color:            var(--template-text-light) !important,

  // quickicons
  quickicon-bg:                    var(--white),
  quickicon-color:                 var(--template-quickicon-color),
  quickicon-color-hvr:             var(--template-quickicon-color),
  quickicon-border:                1px solid hsl(var(--hue), 50%, 93%),
  quickicon-border-radius:         4px,
  quickicon-link-hvr:              $white,
  quickicon-linkadd-bg:            hsl(var(--hue), 50%, 93%),
  quickicon-linkadd-bg-hvr:        var(--template-bg-dark),
  quickicon-linkadd-color:         var(--template-quickicon-color),
  quickicon-amount-bg:             hsl(var(--hue), 50%, 93%),

  // modules
  new-modules-color:               var(--template-quickicon-color),
  new-modules-bg:                  hsl(var(--hue), 60%, 97%),
  new-modules-bg-hvr:              var(--template-bg-dark),
  new-modules-icon-color:          var(--template-quickicon-color),
  new-modules-icon-color-hvr:      hsl(var(--hue), 50%, 93%),
  new-module-color:                var(--text-color),
  new-module-bg:                   var(--template-quickicon-bg),
  new-module-border:               1px solid hsl(var(--hue), 50%, 93%),
  new-module-link-bg:              hsl(var(--hue), 50%, 93%),
  new-module-link-span:            var(--quickicon-color),
  new-module-link-hvr:             var(--new-modules-bg-hvr),
  new-module-link-span-hvr:        var(--new-modules-icon-color-hvr),

  // sidebar incl. main-nav
  sidebarwrapper-bg:               var(--template-sidebar-bg),
  sidebar-item-color:              $white,
  sidebar-item-color-hvr:          var(--template-text-light),
  sidebar-item-bg-hvr:             var(--template-bg-dark-65),
  sidebar-toggle-bg:               var(--template-bg-dark-60),
  sidebar-toggle-link:             $white,
  main-nav-ul-bg:                  var(--template-bg-dark-75),
  main-nav-divider-bg:             var(--template-bg-dark-60),
  main-nav-item-title:             var(--template-bg-dark-30),
  main-nav-item-title-hvr-bg:      var(--template-bg-dark-60),
  main-nav-mm-active-bg:           var(--template-bg-dark-70),
  main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60),
  main-nav-badge:                  var(--template-bg-dark-60),
  mobile-menu-collapse-bg:         var(--template-bg-dark-50),

  // header-content
  header-bg:                          var(--template-bg-dark),
  header-item-content-bg:             var(--template-bg-dark-60),
  header-item-content-bg-hvr:         var(--template-bg-dark-50),
  header-item-content-border-radius:  22px,
  header-item-content-jversion-color: var(--bluegray),
  header-item-content-jversion-bg:    transparent,
  header-logo-bg:                     var(--template-bg-dark-70),

  // table
  table-color:                        var(--body-color),
  table-border-top-nfc:               2px solid #dee2e6,
  table-link-color:                   var(--template-link-color),
  table-link-font-weight:             $medium-weight,
  table-link-font-weight-sorted:      $medium-weight,
  badge-bg-info:                      var(--info) !important,

  // card
  card-header-color:               var(--template-bg-dark),
  card-bg:                         hsla(0, 0%, 100%, .7),
  card-header-bg:                  var(--card-bg),
  card-body-bg:                    var(--card-bg),
  main-card-bg:                    var(--body-bg),
  main-card-col-border-left:       1px solid var(--template-bg-dark-10),

  // cpanel
  module-actions-color:            var(--body-color),

  // lists
  atum-list-group-border-color:    var(--template-bg-dark-15),

  // box-shadow:
  atum-box-shadow:                 0 2px 10px -8px var(--template-bg-dark-50),
  dropdown-box-shadow:             0 1px 1px rgba($black, .15),
  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),

  login-box-shadow:                0 4px 20px -10px var(--template-bg-dark-50),
  login-focus-box-shadow:          inset 0 0 1px 1px var(--template-contrast),

  modal-btn-box-shadow:            1px 1px 1px 0 rgba(0, 0, 0, .25),
  modal-joomla-dialog-box-shadow:  0 .5rem 1rem rgba(0, 0, 0, .15),

  form-aria-grabbed-box-shadow:    0 0 2px 1px var(--template-bg-dark),

  choices__button_joomla-focus-box-shadow: 0 0 0 2px #00bcd4,

  joomla-tab-accordion-box-shadow:    (0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04)),
  joomla-tab-btn-hvr:                 var(--template-bg-dark-60),
  joomla-tab-btn-aria-exp-bg:         var(--template-bg-dark-3),
  joomla-tab-btn-region-border:       1px solid var(--template-bg-dark-3),
  joomla-tablist-btn-aria-exp:        var(--template-text-light),
  joomla-tablist-btn-aria-exp-bg:     var(--template-bg-dark-60),
  joomla-tablist-btn-aria-exp-aft-bg: var(--template-bg-dark),
  joomla-tablist-border-bottom:       1px solid var(--template-bg-dark-10),
  joomla-tab-tablist-border:          1px solid $gray-300,
  joomla-tab-vert-border-bottom:      1px solid $gray-300,

  admin-background:                var(--template-bg-light),
  options-form-color:              var(--template-text-dark),
  options-form-bg:                 unset,
  options-form-border:             1px solid var(--template-bg-dark-20),
  options-form-legend-color:       var(--template-text-dark),
  options-form-legend-bg:          inherit,

  // details
  details-bg:                      var(--template-bg-dark-3),
  details-border:                  1px solid var(--template-bg-dark-10),

  // nav
  nav-header-color:                var(--template-bg-dark),

  // choices
  choices-input-border-color:      var(--body-bg), // TODO
  choices-input-bg:                var(--body-bg),
  choices-input-placeholder:       $gray-700,
  choices-list-multiple-item-bg:   var(--template-bg-dark),
  choices-list-multiple-item:      $white,

  // switcher
  switcher-toggle-inside-bg:       #fff,
  switcher-toggle-outside-off-bg:  #d3d3d3,
  switcher-toggle-outside-on-bg:   #2f7d32,

  // input
  input-border-color:               var(--template-bg-dark-20),

  // icons
  featured-icon-color:              $featured,

  // users
  users-method-image:               var(--light),
  users-methods-reset-cont-bg:      var(--light),
  users-method-header-inact-bg:     var(--light),

  // Login
  login-label-color:                $dark-blue,

  // Icons
  icon-success:                     var(--success),
  icon-success-border:              var(--success),
  icon-checkedout-color:            var(--template-text-dark),

  // Buttons
  btn-primary-color:                var(--template-text-light),
  btn-primary-bg:                   var(--template-bg-dark-60),
  btn-primary-border:               1px solid var(--template-bg-dark-60),
  btn-primary-bg-hvr:               var(--template-bg-dark-70),
  btn-primary-border-hvr:           1px solid var(--template-bg-dark-90),
  btn-primary-toggle-bg:            var(--template-bg-dark),
  btn-primary-toggle-border:        var(--template-bg-dark),

  btn-secondary-bg:                 var(--template-bg-dark-60),
  btn-secondary-border:             1px solid var(--template-bg-dark-60),
  btn-secondary-color:              var(--template-text-light),

  btn-info-color:                   var(--template-text-light),
  btn-info-bg:                      $info,
  btn-info-border:                  1px solid $info,
  btn-info-bg-hvr:                  color.adjust($info, $lightness: -10%),
  btn-info-border-hvr:              1px solid color.adjust($info, $lightness: -10%),

  btn-outline-secondary-color:      gray-700,
  btn-outline-secondary-bg:         transparent,
  btn-outline-secondary-border:     var(--btn-secondary-border),

  btn-dark-border:                  1px solid rgba(0,0,0,.85),
  btn-dark-bg:                      rgba(0,0,0,.9),
  btn-dark-bg-hvr:                  #000,
  btn-dark-color:                   #fff,
  btn-dark-color-hvr:               #fff,

  btn-light-bg:                     #f8f9fa,
  btn-light-border:                 1px solid #f8f9fa,
  btn-light-bg-hvr:                 #d3d4d5,

  input-group-text-bg:              var(--template-bg-dark),
  input-group-text-border:          1px solid var(--template-bg-dark),

  // search
  js-stools-btn-clear-bg:              var(--template-bg-dark),
  js-stools-btn-clear-disabled-bg:     var(--btn-disabled-bg),
  js-stools-btn-clear-disabled-border: rgba($gray-300, .8),

  // cpanel
  cpanel-addmodule-hover:           var(--template-bg-dark),

  // Dropdown
  dropdown-header-bg:               var(--template-bg-dark),
  dropdown-item-bg:                 var(--template-bg-dark-70),
  dropdown-item-bg-hvr:             var(--template-bg-dark),
  dropdown-item-border-bottom:      1px solid rgba(0, 0, 0, .1),
  atum-dropdown-link-hover-bg:     var(--tertiary-bg),
  atum-dropdown-link-hover-color:   var(--body-color),

  // Alerts
  // TODO change this color block to better suitable colors in a future PR
  states-link-color:                var(--template-link-color),
  states-btn-primary-bg:            var(--btn-primary-bg),
  states-btn-primary-bg-hover:      var(--btn-primary-bg-hvr),
  states-btn-primary-color:         var(--btn-primary-color),
  states-btn-primary-border:        var(--btn-primary-bg),

  state-success-text:               $success,
  state-success-text-hvr:           color.adjust($success, $lightness: 58%),
  state-success-bg:                 #f2f8f4,
  state-success-bg-hvr:             $success,
  state-success-border:             hsl(var(--hue), 50%, 93%),
  state-success-btn-border:         1px solid $success,
  state-success-icon:               #55a258,
  state-success-icon-hvr:           var(--state-success-icon),
  state-success-heading-bg:         $success,
  state-success-link-color:         $success,

  state-info-text:                  var(--template-bg-dark-70),
  state-info-text-hvr:              var(--body-bg),
  state-info-bg:                    #dbe4f0,
  state-info-bg-hvr:                var(--template-bg-dark-70),
  state-info-border:                var(--template-bg-dark-70),
  state-info-icon:                  var(--template-bg-dark-70),
  state-info-heading-bg:            var(--template-bg-dark-70),
  state-info-link-color:            var(--template-bg-dark-70),


  state-warning-text:               #996901,
  state-warning-text-hvr:           color.adjust($warning, $lightness: 44%),
  state-warning-bg:                 #fffcf4,
  state-warning-bg-hvr:             #996900,
  state-warning-border:             #ffb512,
  state-warning-icon:               $warning,
  state-warning-heading-bg:         #ffb512,
  state-warning-link-color:         var(--warning-text-emphasis),

  state-danger-text:                var(--danger-text-emphasis),
  state-danger-text-hvr:            color.adjust($danger, $lightness: 52%),
  state-danger-bg:                  #f3d4d4,
  state-danger-bg-hvr:              $danger,
  state-danger-border:              var(--danger-border-subtle),
  state-danger-icon:                #ce8484,
  state-danger-heading-bg:          $danger,
  state-danger-link-color:          var(--danger-text-emphasis),

  state-error-text:                 $danger,
  state-error-text-hvr:             $danger,
  state-error-bg:                   color.adjust($danger, $lightness: 52%),
  state-error-bg-hvr:               color.adjust($danger, $lightness: 52%),
  state-error-border:               1px solid $danger,
  state-error-icon:                 color.adjust($danger, $lightness: 20%),
  state-error-heading-bg:           $danger,

  alert-info-color:                 var(--template-bg-dark),
  alert-info-bg:                    var(--template-bg-dark-10),
  alert-info-border:                1px solid var(--template-bg-dark-20),
  alert-link-text-color:            var(--info-text-emphasis),
  alert-accent-color:               #fff,

  // Subhead
  atum-subhead-color:               var(--template-text-dark),
  atum-subhead-bg:                  $white,
  atum-subhead-bg-img:              (linear-gradient(var(--toolbar-bg), var(--template-bg-dark-3))),

  atum-btn:                         $atum-text-dark,
  atum-btn-icon:                    $atum-text-dark,
  atum-btn-icon-hvr:                var(--template-text-light),
  atum-btn-bg:                      var(--body-bg),
  atum-btn-bg-hvr:                  $atum-text-dark,
  atum-btn-border:                  1px solid hsl(var(--hue),20%,80%),
  atum-btn-hvr:                     var(--body-bg),

  /*
  btn-success:                      var(--success),
  btn-success-icon:                 var(--atum-btn-success-bg-hvr),
  btn-success-icon-hvr:             var(--template-text-light),
  btn-success-bg:                   var(--body-bg),
  btn-success-bg-hvr:               var(--success),
  btn-success-border:               1px solid hsl(var(--hue),20%,80%),
  btn-success-hvr:                  var(--body-bg),
  */

  atum-btn-success:                 var(--success),
  atum-btn-success-icon:            var(--atum-btn-success-bg-hvr),
  atum-btn-success-icon-hvr:        var(--template-text-light),
  atum-btn-success-bg:              var(--body-bg),
  atum-btn-success-bg-hvr:          var(--success),
  atum-btn-success-border:          1px solid hsl(var(--hue),20%,80%),
  atum-btn-success-hvr:             var(--body-bg),

  atum-btn-danger:                  $danger,
  atum-btn-danger-icon:             $danger,
  atum-btn-danger-icon-hvr:         var(--template-text-light),
  atum-btn-danger-bg:               var(--body-bg),
  atum-btn-danger-bg-hvr:           $danger,
  atum-btn-danger-border:           1px solid hsl(var(--hue),20%,80%),
  atum-btn-danger-hvr:              var(--body-bg),

  atum-btn-info:                    $atum-text-dark,
  atum-btn-info-color-hvr:          var(--template-text-light),
  atum-btn-info-icon:               $info,
  atum-btn-info-icon-hvr:           var(--atum-btn-hvr),
  atum-btn-info-bg:                 var(--body-bg),
  atum-btn-info-bg-hvr:             $info,
  atum-btn-info-border:             1px solid hsl(var(--hue),20%,80%),
  atum-btn-info-hvr:                var(--body-bg),

  atum-btn-primary:                 var(--template-link-color),
  atum-btn-primary-icon:            var(--template-link-color),
  atum-btn-primary-icon-hvr:        var(--template-text-light),
  atum-btn-primary-bg:              var(--body-bg),
  atum-btn-primary-bg-hvr:          var(--template-link-color),
  atum-btn-primary-border:          1px solid hsl(var(--hue),20%,80%),
  atum-btn-primary-hvr:             var(--body-bg),


  atum-btn-action:                 var(--template-text-light),
  atum-btn-action-icon:            var(--template-bg-dark),
  atum-btn-action-icon-hvr:        var(--template-text-light),
  atum-btn-action-bg:              var(--body-bg),
  atum-btn-action-bg-hvr:          var(--template-bg-dark),
  atum-btn-action-border:          1px solid hsl(var(--hue),20%,80%),
  atum-btn-action-hvr:             var(--body-bg),


  atum-list-group-bg:               var(--body-bg), // rgba(255, 255, 255, .05),

  // Calendar
  atum-calendar-week-bg:            #f4f4f4,
  atum-calendar-bg:                 var(--body-bg),
  atum-calendar-buttons-color:      #495057, // var(--btn-primary-bg);
  atum-calendar-disabled-color:     #999, // #4b4b4b,
  atum-calendar-disabled-bg:        #fff, // rgba(0,0,0,.5),
  atum-calendar-select-bg:          $form-select-bg,
  atum-calendar-select-bg-url:      url("../../images/select-bg.svg"),
  atum-calendar-select-bg-url-rtl:  url("../../images/select-bg-rtl.svg"),

  // Permissions
  permissions-sliders-oddCol-bg:    var(--template-bg-light),
  respTable-border-bottom:          1em solid var(--template-bg-dark-80),

  // Treeselect
  treeselect-line-color:            hsl(var(--hue), 40%, 93%),
  treeselect-dropdown-toggle:       var(--template-text-dark),

  icon-check-square-bg:             rgb(33,37,41),
  icon-square-bg:                   rgb(33,37,41),
  icon-check-square-color:          var(--template-text-light),
  icon-square-color:                var(--template-text-light),

  // Table Row Dragging
  drag-color:                       #151515,
  drag-background-color:            $teal,

  success-text:                      $success,
  success:                           $success,
  successhvr:                        color.adjust($success, $lightness: -15%),

  danger-text:                       $danger,
  danger:                            $danger,
  dangerhvr:                         color.adjust($danger, $lightness: -15%),

  darkdanger:                        $danger,
  darkdangerhvr:                     color.adjust($danger, $lightness: -15%),

  warning-text:                      #000,
  warning:                           $warning,
  warninghvr:                        color.adjust($warning, $lightness: -15%),

);

$colors: (
  card-bg:                         rgba(255, 255, 255, .7),
  card-color:                      var(--template-bg-dark-60),
  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:                   color.adjust($base-color, $lightness: -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:                           #39f,
  focus-shadow:                    #eaeaea,
  toggle-color:                    $white, // used in sidebar

);

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

// Global
$btn-disabled-opacity:             .4;
$admin-background:                 var(--admin-background);
$bg-normal:                        var(--bg-normal);
$bg-reverted:                      var(--bg-reverted);

// Login
$login-box-shadow:                 var(--login-box-shadow);
$login-focus-box-shadow:           var(--login-focus-box-shadow);

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

// Sidebar
$sidebar-width:                    18rem;
$sidebar-width-login:              28.75rem;
$sidebar-width-closed:             3rem;
$main-brand-height:                3rem;
$sidebarwrapper-bg:                var(--sidebarwrapper-bg);
$sidebar-item-color:               var(--sidebar-item-color);
$sidebar-item-color-hvr:           var(--sidebar-item-color-hvr);
$sidebar-item-bg-hvr:              var(--sidebar-item-bg-hvr);
$sidebar-toggle-bg:                var(--sidebar-toggle-bg);
$sidebar-toggle-link:              var(--sidebar-toggle-link);
$main-nav-ul-bg:                   var(--main-nav-ul-bg);
$main-nav-divider-bg:              var(--main-nav-divider-bg);
$main-nav-item-title:              var(--main-nav-item-title);
$main-nav-mm-active-bg:            var(--main-nav-mm-active-bg);
$main-nav-mm-active-quicktask-bg:  var(--main-nav-mm-active-quicktask-bg);
$main-nav-badge:                   var(--main-nav-badge);
$main-nav-item-title-hvr-bg:       var(--main-nav-item-title-hvr-bg);
$mobile-menu-collapse-bg:          var(--mobile-menu-collapse-bg);

// 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";

// Tables
$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;
$table-border-top-nfc:             var(--table-border-top-nfc);
$table-link-color:                 var(--table-link-color);
$table-link-font-weight:           var(--table-link-font-weight);
$table-link-font-weight-sorted:    var(--table-link-font-weight-sorted);
$badge-bg-info:                    var(--badge-bg-info);

// card
$card-header-color:                var(--card-header-color);
$card-header-bg:                   var(--card-header-bg);
$card-bg:                          var(--card-bg);
$main-card-bg:                     var(--main-card-bg);
$main-card-col-border-left:        var(--main-card-col-border-left);
$card-body-bg:                     var(--card-body-bg);

// cpanel
$module-actions-color:             var(--module-actions-color);

// Dropdowns
$dropdown-padding-y:               0;
$dropdown-box-shadow:              var(--dropdown-box-shadow);
$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;

// Details
$details-bg:                      var(--details-bg);
$details-border:                  var(--details-border);

// nav
$nav-header-color:                var(--nav-header-color);

// users
$users-method-image:              var(--users-method-image);
$users-methods-reset-cont-bg:     var(--users-methods-reset-cont-bg);
$users-method-header-inact-bg:    var(--users-method-header-inact-bg);

// Icons
$icon-success:                     var(--icon-success);
$icon-success-border:              var(--icon-success-border);
$icon-checkedout-color:            var(--icon-checkedout-color);

// Buttons
$btn-primary-color:                var(--btn-primary-color);
$btn-primary-bg:                   var(--btn-primary-bg);
$btn-primary-border:               var(--btn-primary-border);
$btn-primary-bg-hvr:               var(--btn-primary-bg-hvr);
$btn-primary-border-hvr:           var(--btn-primary-border-hvr);
$btn-primary-toggle-bg:            var(--btn-primary-toggle-bg);
$btn-primary-toggle-border:        var(--btn-primary-toggle-border);

$btn-secondary-bg:                 var(--btn-secondary-bg);
$btn-secondary-border:             var(--btn-secondary-border);

$btn-outline-secondary-color:      var(--btn-outline-secondary-color);
$btn-outline-secondary-bg:         var(--btn-outline-secondary-bg);
$btn-outline-secondary-border:     var(--btn-outline-secondary-border);
$input-group-text-bg:              var(--input-group-text-bg);
$input-group-text-border:          var(--input-group-text-border);

// Search
$js-stools-btn-clear-bg:              var(--template-bg-dark);
$js-stools-btn-clear-disabled-bg:     var(--btn-disabled-bg);
$js-stools-btn-clear-disabled-border: var(--js-stools-btn-clear-disabled-border);

// Dropdown
$dropdown-header-bg:               var(--dropdown-header-bg);
$dropdown-item-bg:                 var(--dropdown-item-bg);
$dropdown-item-bg-hvr:             var(--dropdown-item-bg-hvr);

// Alerts
$state-success-text:               $success;
$state-success-text-hvr:           $success;
$state-success-bg:                 color.adjust($success, $lightness: 58%);
$state-success-bg-hvr:             color.adjust($success, $lightness: 58%);
$state-success-border:             var(--state-success-border);
$state-success-btn-border:         var(--state-success-btn-border);
$state-success-icon:               var(--state-success-icon);
$state-success-icon-hvr:           var(--state-success-icon-hvr);
$state-success-heading-bg:         var(--state-success-heading-bg);

$state-info-text:                  var(--state-info-text);
$state-info-text-hvr:              var(--state-info-text);
$state-info-bg:                    color.adjust($info, $lightness: 90%);
$state-info-bg-hvr:                var(--state-info-bg);
$state-info-border:                var(--state-info-border);
$state-info-icon:                  var(--state-info-icon);
$state-info-heading-bg:            var(--state-info-heading-bg);

$state-warning-text:               var(--state-warning-text);
$state-warning-text-hvr:           var(--state-warning-text);
$state-warning-bg:                 var(--state-warning-bg);
$state-warning-bg-hvr:             var(--state-warning-bg);
$state-warning-border:             var(--state-warning-border);
$state-warning-icon:               var(--state-warning-icon);
$state-warning-heading-bg:         var(--state-warning-heading-bg);

$state-danger-text:                var(--state-danger-text);
$state-danger-text-hvr:            var(--state-danger-text);
$state-danger-bg:                  var(--state-danger-bg);
$state-danger-bg-hvr:              var(--state-danger-bg);
$state-danger-border:              var(--state-danger-border);
$state-danger-icon:                var(--state-danger-icon);
$state-danger-heading-bg:          var(--state-danger-heading-bg);

$state-error-text:                 var(--state-error-text);
$state-error-text-hvr:             var(--state-error-text);
$state-error-bg:                   var(--state-error-bg);
$state-error-bg-hvr:               var(--state-error-bg);
$state-error-border:               var(--state-error-border);
$state-error-icon:                 var(--state-error-icon);
$state-error-heading-bg:           var(--state-error-heading-bg);

$alert-border:                     var(--alert-border);

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

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

$warning-bg:                       #996808;
$warning-txt:                      #fff;

$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
$atum-list-group-border-color:     var(--atum-list-group-border-color);
$list-group-item-padding-y:        .75rem;

// Login
$login-label-color:                var(--login-label-color);

// Subhead
$atum-subhead-bg:                  var(--atum-subhead-bg);
$atum-subhead-bg-img:              var(--atum-subhead-bg-img);
$atum-btn-color:                   var(--atum-btn-color);
$atum-btn-bg:                      var(--atum-btn-bg);
$atum-btn-border:                  var(--atum-btn-border);
$atum-btn-hvr:                     var(--atum-btn-hvr);

$atum-btn-success:                 var(--atum-btn-success);
$atum-btn-success-bg:              var(--atum-btn-success-bg);
$atum-btn-success-border:          var(--atum-btn-success-border);
$atum-btn-success-hvr:             var(--atum-btn-success-hvr);

$atum-btn-danger:                  var(--atum-btn-danger);
$atum-btn-danger-bg:               var(--atum-btn-danger-bg);
$atum-btn-danger-border:           var(--atum-btn-danger-border);
$atum-btn-danger-hvr:              var(--atum-btn-danger-hvr);

$atum-btn-info:                    var(--atum-btn-info);
$atum-btn-info-bg:                 var(--atum-btn-info-bg);
$atum-btn-info-border:             var(--atum-btn-info-border);
$atum-btn-info-hvr:                var(--atum-btn-info-hvr);

$atum-btn-primary:                 var(--atum-btn-primary);
$atum-btn-primary-bg:              var(--atum-btn-primary-bg);
$atum-btn-primary-border:          var(--atum-btn-primary-border);
$atum-btn-primary-hvr:             var(--atum-btn-primary-hvr);


$atum-btn-secondary:               var(--atum-btn-secondary);
$atum-btn-action:                  var(--atum-btn-action);
$atum-btn-action-bg:               var(--atum-btn-action-bg);

$atum-list-group-bg:               var(--atum-list-group-bg);

// Calendar
$atum-calendar-week-bg:            var(--atum-calendar-week-bg);
$atum-calendar-bg:                 var(--atum-calendar-bg);
$atum-calendar-buttons-color:      var(--atum-calendar-buttons-color);
$atum-calendar-disabled-color:     var(--atum-calendar-disabled-color);
$atum-calendar-disabled-bg:        var(--atum-calendar-disabled-bg);
$atum-calendar-select-bg:          var(--atum-calendar-select-bg);
$atum-calendar-select-bg-url:      var(--atum-calendar-select-bg-url);
$atum-calendar-select-bg-url-rtl:  var(--atum-calendar-select-bg-url-rtl);

// Permissions
$permissions-sliders-oddCol-bg:    var(--permissions-sliders-oddCol);
$respTable-border-bottom:          var(--respTable-border-bottom);

// Media Manager
$media-manager-overlay-header-bg:  var(--media-manager-overlay-header-bg);
$media-manager-infobar-dt-color:   var(--media-manager-infobar-dt-color);
$media-manager-content-bg:         var(--media-manager-content-bg);
$media-manager-content-color:      var(--media-manager-content-color);
$media-manager-file-icon-color:    var(--media-manager-file-icon-color); //?? inherit

$media-manager-overlay-bg:         var(--media-manager-overlay-bg);
$media-manager-disk-name-color:    var(--media-manager-disk-name-color);
$media-manager-tree-item-hover-bg: var(--media-manager-tree-item-hover-bg);
$media-manager-toolbar-icon-color: var(--media-manager-toolbar-icon-color);

$media-manager-border:             var(--media-manager-border);
$media-browser-file-bg:             var(--media-browser-file-bg);
//$media-browser-item-preview-border: var(--media-browser-item-preview-border);
$media-drive-bg:                    var(--media-drive-bg);
//$media-drive-border:                var(--media-drive-border);
$media-toolbar-bg:                  var(--media-toolbar-bg);
//$media-toolbar-border-bottom:       var(--media-toolbar-border-bottom);
//$media-toolbar-border-inline-start: var(--media-toolbar-border-inline-start);

$media-toolbar-icon-bg:             var(--media-toolbar-icon-bg);
//$media-toolbar-icon-border-start:   var(--media-toolbar-icon-border-start);
$media-toolbar-icon-color:          var(--media-toolbar-icon-color);
$media-toolbar-icon-bg-hvr:         var(--media-toolbar-icon-bg-hvr);
$media-tree-item-color:             var(--media-tree-item-color); // var(--template-bg-dark-60);
$media-manager-breadcrumb-item-bg:  var(--media-manager-breadcrumb-item-bg);
$media-tree-active-icon-color:      var(--media-tree-active-icon-color);

$image-bg:                          var(--image-bg); // #fff;
$image-bg-image:                    var(--image-bg-image); // linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%);


// 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-background:           var(--form-select-background);
$form-select-background-rtl:       var(--form-select-background-rtl);
$form-select-border:               var(--form-select-border);
$form-select-border-radius:        4px;
$form-select-box-shadow:           var(--atum-box-shadow);
$form-select-multiple-padding-y:   .3rem;
$form-select-success-bg:           var(--form-select-success-bg);
$form-select-danger-bg:            var(--form-select-danger-bg);
$form-select-disabled-bg:          var(--form-select-disabled-bg);
$form-select-option:               var(--form-select-option);
$form-select-option-disabled-bg:   var(--form-select-option-disabled-bg);

$form-file-button-color:           var(--white);

$file-selector-btn-bg:             var(--file-selector-btn-bg);
$file-selector-btn-bg-hvr:         var(--file-selector-btn-bg-hvr);

// Forms
$form-aria-grabbed-box-shadow:            var(--form-aria-grabbed-box-shadow);
$options-form-color:                      var(--options-form-color);
$options-form-bg:                         var(--options-form-bg);
$options-form-border:                     var(--options-form-border);
$options-form-legend-color:               var(--options-form-legend-color);
$options-form-legend-bg:                  var(--options-form-legend-bg);
$form-control-bg:                         var(--form-control-bg);
$form-control-bg-disabled:                var(--form-control-bg-disabled);
$form-control-border:                     var(--form-control-border);

$form-check-input-checked-bg-image:       var(--form-check-input-checked-bg-image);
$form-check-input-checked-bg-color:       var(--form-check-input-checked-bg-color);
$form-check-input-border:                 var(--form-check-input-border);

// Input
$input-padding:                    .5rem 1rem;
$input-border-color:               var(--input-border-color);
$input-focus-border-color:         var(--focus);
$input-box-shadow:                 var(--atum-box-shadow);
$input-max-width:                  100%;
$input-btn-focus-width:            .2rem;
$input-btn-focus-color:            var(--focus-shadow);
$input-btn-padding-y:              .5rem;
$input-btn-padding-x:              1rem;

// Modals
$modal-header-height:              2.875rem;
$modal-btn-box-shadow:             var(--modal-btn-box-shadow);
$modal-joomla-dialog-box-shadow:   var(--modal-joomla-dialog-box-shadow);

// Choices
$choices__button_joomla-focus-box-shadow:  var(--choices__button_joomla-focus-box-shadow);
$choices-input-border-color:       var(--choices-input-border-color);
$choices-input-bg:                 var(--choices-input-bg);
$choices-input-placeholder:        var(--choices-input-placeholder);
$choices-list-multiple-item-bg:    var(--choices-list-multiple-item-bg);
$choices-list-multiple-item:       var(--choices-list-multiple-item);

// Switcher
$switcher-toggle-inside-bg:        var(--switcher-toggle-inside-bg);
$switcher-toggle-outside-off-bg:   var(--switcher-toggle-outside-off-bg);
$switcher-toggle-outside-on-bg:    var(--switcher-toggle-outside-on-bg);

// Joomla-Tab
$joomla-tab-accordion-box-shadow:    var(--joomla-tab-accordion-box-shadow);
$joomla-tab-btn-hvr:                 var(--joomla-tab-btn-hvr);
$joomla-tab-btn-aria-exp-bg:         var(--joomla-tab-btn-aria-exp-bg);
$joomla-tab-btn-region-border:       var(--joomla-tab-btn-region-border);
$joomla-tablist-btn-aria-exp:        var(--joomla-tablist-btn-aria-exp);
$joomla-tablist-btn-aria-exp-bg:     var(--joomla-tablist-btn-aria-exp-bg);
$joomla-tablist-btn-aria-exp-aft-bg: var(--joomla-tablist-btn-aria-exp-aft-bg);
$joomla-tablist-border-bottom:       var(--joomla-tablist-border-bottom);
$joomla-tab-tablist-border:          var(--joomla-tab-tablist-border);
$joomla-tab-vert-border-bottom:      var(--joomla-tab-vert-border-bottom);

// Quickicons
$quickicon-bg:                     var(--quickicon-bg);
$quickicon-box-shadow-success:     var(--quickicon-box-shadow-success);
$quickicon-box-shadow-danger:      var(--quickicon-box-shadow-danger);
$quickicon-box-shadow-warning:     var(--quickicon-box-shadow-warning);
$quickicon-icon-size:              2rem;
$quickicon-icon-size-sm:           1.3rem;
$quickicon-border:                var(--quickicon-border);
$quickicon-border-radius:         var(--quickicon-border-radius);
$quickicon-color:                 var(--quickicon-color);
$quickicon-color-hvr:             var(--quickicon-color-hvr);
$quickicon-link-hvr:              var(--quickicon-link-hvr);
$quickicon-linkadd-color:         var(--quickicon-linkadd-color);
$quickicon-linkadd-bg:            var(--quickicon-linkadd-bg);
$quickicon-amount-bg:             var(--quickicon-amount-bg);

// Text
$text-normal:                     var(--text-normal);
$text-reverted:                   var(--text-reverted);
$text-muted-color:                var(--text-muted-color);
$text-muted-hvr-color:            var(--text-muted-hvr-color);

// Modules
$new-modules-color:               var(--new-modules-color);
$new-modules-bg:                  var(--new-modules-bg);
$new-modules-bg-hvr:              var(--new-modules-bg-hvr);
$new-modules-icon-color:          var(--new-modules-icon-color);
$new-modules-icon-color-hvr:      var(--new-modules-icon-color-hvr);
$new-module-color:                var(--new-module-color);
$new-module-bg:                   var(--new-module-bg);
$new-module-border:               var(--new-module-border);
$new-module-link-bg:              var(--new-module-link-bg);
$new-module-link-span:            var(--new-module-link-span);
$new-module-link-hvr:             var(--new-module-link-hvr);
$new-module-link-span-hvr:        var(--new-module-link-span-hvr);

// header-content
$header-bg:                          var(--header-bg);
$header-item-content-bg:             var(--header-item-content-bg);
$header-item-content-bg-hvr:         var(--header-item-content-bg-hvr);
$header-item-content-border-radius:  var(--header-item-content-border-radius);
$header-item-content-jversion-color: var(--header-item-content-jversion-color);
$header-item-content-jversion-bg:    var(--header-item-content-jversion-bg);
$header-logo-bg:                     var(--header-logo-bg);


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

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

// Links
$link-color:                       $light-blue;
$link-hover-color:                 color.adjust($light-blue, $lightness: -20%);
$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;

// scss-docs-start border-radius-variables
$btn-border-radius: .25rem !default;
$border-radius: .25rem !default;
$border-radius-sm: .2rem !default;
$border-radius-lg: .3rem !default;
$border-radius-xl: .3rem !default;
$border-radius-2xl: .3rem !default;
// scss-docs-end border-radius-variables