@use "sass:color";

// Color definitions for the dark theme - don't use it with the light theme
$btn-primary-dark:                   #007db0; // contrast ratio: 4.6 with #fff text
$link-color-dark:                    #6fbfdb; // contrast ratio: 8.87 on backgrounds like #0F151D
$success-dark:                       #3d854d; // contrast ratio: 4.51 with #fff test
$warning:                            #f0ad4e; // contrast ratio: 4.51 with #fff text
$featured-dark:                      #f0ad4e; // contrast ratio: 9.42 on dark backgrounds (icons,etc.)
$danger-dark:                        #c62a25; // contrast ratio: 5.59 with #fff text
$error-dark:                         $danger-dark; // contrast ratio: 5.59 with #fff text
$info-dark:                          #33383f; // contrast ratio: 8.59 with #fff text

$template-bg-dark:                   #0c1a2b;

// Form select
$form-select-indicator-dark:         url("../images/select-bg-dark.svg");
$form-select-indicator-rtl-dark:     url("../images/select-bg-rtl-dark.svg");
$form-select-bg-dark:                $btn-primary-dark;

$atum-colors-dark: (

  body-bg:                           #0f151d,
  body-color:                        rgba(255,255,255,.85),
  template-bg-dark:                  $template-bg-dark,
  main-bg:                           #171c24,

  admin-background:                  var(--body-bg),

  button-and-icon-color:             $btn-primary-dark,
  template-quickicon-color:          var(--template-bg-dark-5), // fix this
  focus-shadow:                      var(--gray-800),

  media-manager-bg:                  var(--body-bg),
  media-manager-content-bg:          var(--body-bg),
  media-manager-overlay-bg:          var(--template-bg-dark-90),  // fix this
  media-manager-infobar-dt-color:    rgba(255, 255, 255, .54),
  media-manager-content-color:       color.adjust($btn-primary-dark, $lightness: 20%),
  media-manager-overlay-header-bg:   var(--template-bg-dark-80),
  media-manager-disk-name-color:     var(--template-text-light),
  media-manager-border:              1px solid var(--gray-800),
  media-manager-file-icon-color:     $btn-primary-dark,
  media-manager-tree-item-hover-bg:  var(--gray-600),
  media-manager-toolbar-icon-color:  color.adjust($btn-primary-dark, $lightness: 20%),
  media-manager-breadcrumb-item-bg:  var(--gray-700),

  media-tree-item-color:             $btn-primary-dark,
  media-tree-active-icon-color:      color.adjust($btn-primary-dark, $lightness: -10%),

  media-browser-file-bg:             var(--media-manager-bg),
  media-drive-bg:                    var(--media-manager-bg),

  media-toolbar-bg:                  var(--media-manager-bg),
  media-toolbar-icon-bg:             var(--media-manager-bg),
  media-toolbar-icon-color:          color.adjust($btn-primary-dark, $lightness: 10%),
  media-toolbar-icon-bg-hvr:         var(--gray-800),

  image-bg:                          #000,
  image-bg-image:                    (linear-gradient(45deg, var(--body-bg) 25%, transparent 25%, transparent 75%, #111 75%, var(--body-bg) 100%), linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, var(--body-bg) 75%, var(--body-bg) 100%)),

  success-text:                      #418d52,
  success:                           $success-dark,
  successhvr:                        color.adjust($success-dark, $lightness: -15%),

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

  darkdanger:                        #941f1c,
  darkdangerhvr:                     color.adjust(#941f1c, $lightness: -15%),

  error:                             #941f1c,
  errorhvr:                          #be2824,

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

  dark-mode-text-light:              rgba(255,255,255,.85),

  template-link-color:               $link-color-dark,
  link-color-rgb:                    (36,158,200),
  link-color:                        $link-color-dark,
  template-link-hover-color:         color.adjust($link-color-dark, $lightness: 10%),
  link-color-rgb-hvr:                var(--template-link-hover-color),

  template-quickicon-bg:             rgba(255, 255, 255, .1),
  template-quickicon-bg-hvr:         rgba(255, 255, 255, .15),

  // Admin section
  options-form-color:                var(--template-text-light),
  options-form-bg:                   transparent, // #484b51, // #52565b,
  options-form-border:               1px solid rgba(255, 255, 255, .05),
  options-form-legend-color:         var(--template-text-light),
  options-form-legend-bg:            var(--admin-background),
  form-control-bg:                   var(--template-sidebar-bg),
  form-control-bg-disabled:          var(--gray-800),
  form-control-border:               1px solid rgba(255, 255, 255, .2),
  form-control-border-disabled:      1px solid rgba(255, 255, 255, .1),

  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='%23eee' 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:      $btn-primary-dark,
  form-check-input-border:                1px solid rgba(255, 255, 255, .2), // rgba(255, 255, 255, .05),

  form-select-background:                 $form-select-bg-dark $form-select-indicator-dark 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-dark $form-select-indicator-rtl-dark 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(--template-sidebar-bg),
  form-select-danger-bg:                  var(--template-sidebar-bg),
  form-select-disabled-bg:                var(--template-sidebar-bg),
  form-select-option:                     var(--template-text-light),
  form-select-option-disabled-bg:         var(--template-bg-dark-90),
  file-selector-btn-bg:                   $btn-primary-dark,
  file-selector-btn-bg-hvr:               color.adjust($btn-primary-dark, $lightness: -10%),

  // Background styles
  bg-normal:                         var(--template-bg-dark),
  bg-reverted:                       var(--template-bg-dark-20),

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

  // Quickicons styles
  quickicon-bg:                      transparent,
  quickicon-border:                  none,
  quickicon-border-radius:           4px,
  quickicon-link-hvr:                #fff,
  quickicon-linkadd-bg:              rgba(255, 255, 255, .04),
  quickicon-linkadd-bg-hvr:          var(--btn-primary-bg-hvr),
  quickicon-linkadd-color:           #fff,
  quickicon-amount-bg:               #6b6f77,
  quickicon-color-hvr:               var(--quickicon-link-hvr),

  // Modules
  new-modules-color:                   var(--template-quickicon-color),
  new-modules-bg:                      var(--template-bg-dark-65),
  new-modules-bg-hvr:                  var(--btn-primary-bg-hvr),
  new-modules-icon-color:              var(--template-bg-dark-80),
  new-modules-icon-color-hvr:          var(--template-quickicon-color),
  new-module-color:                    var(--dark-mode-text-light),
  new-module-bg:                       var(--template-quickicon-bg),
  new-module-border:                   none,
  new-module-link-bg:                  rgba(255, 255, 255, .05),
  new-module-link-span:                var(--quickicon-linkadd-color),
  new-module-link-hvr:                 var(--new-modules-bg-hvr),
  new-module-link-span-hvr:            var(--icon-color-hvr),

  // Sidebar
  sidebarwrapper-bg:                   var(--template-sidebar-bg),
  sidebar-item-color:                  $white,
  sidebar-item-color-hvr:              var(--template-text-light),
  sidebar-item-bg-hvr:                 $btn-primary-dark,
  sidebar-toggle-bg:                   #20262d,
  sidebar-toggle-link:                 $white,
  main-nav-ul-bg:                      #20262d,
  main-nav-divider-bg:                 #495057,
  main-nav-item-title:                 var(--template-bg-dark-30),
  main-nav-mm-active-bg:               $btn-primary-dark,
  main-nav-mm-active-quicktask-bg:     color.adjust($btn-primary-dark, $lightness: -10%),
  main-nav-badge:                      var(--template-bg-dark-60),
  main-nav-item-title-hvr-bg:          $btn-primary-dark,
  mobile-menu-collapse-bg:             var(--template-bg-dark-50),
  sidebar-bg:                          #0f151d,
  template-sidebar-bg:                 #0f151d,
  sidebar-accent-bg:                   #2667bb,

  // Header content
  header-bg:                           #0a0e13,
  header-item-content-bg:              $btn-primary-dark,
  header-item-content-bg-hvr:          color.adjust($btn-primary-dark, $lightness: -10%),
  header-item-content-border-radius:   22px,
  header-item-content-jversion-color:  var(--dark-mode-text-light),
  header-item-content-jversion-bg:     transparent,
  header-logo-bg:                      var(--header-bg),

  // Alerts
  alert-accent-color:                  #479a59, // ??
  alert-bg-color:                      #f2f8f4,
  alert-link-text-color:               $link-color-dark,

  // Table
  table-color:                         rgba(255,255,255,.9),
  table-border-top-nfc:                1px solid #969696,
  table-link-color:                    $link-color-dark,
  table-link-font-weight:              $normal-weight,
  table-link-font-weight-sorted:       $normal-weight,
  badge-bg-info:                       rgba(255, 255, 255, .2) !important,
  info:                               rgba(255, 255, 255, .2) !important,

  // Card
  card-bg-dark:                        var(--template-sidebar-bg),
  card-header-color:                   var(--dark-mode-text-light),
  card-header-bg:                      var(--template-sidebar-bg),
  card-bg:                             var(--template-sidebar-bg),
  card-body-bg:                        var(--template-sidebar-bg),
  main-card-bg:                        var(--template-sidebar-bg),
  main-card-col-border-left:           1px solid var(--gray-800),

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

  // Lists
  atum-list-group-border-color:        rgba(255, 255, 255, .1),
  border-color:                        rgba(255, 255, 255, .1),

  // Turn off shadow in dark mode
  atum-box-shadow:                     none,
  dropdown-box-shadow:                 none,
  quickicon-box-shadow-success:        none,
  quickicon-box-shadow-danger:         none,
  quickicon-box-shadow-warning:        none,
  login-box-shadow:                    none,
  login-focus-box-shadow:              none,
  modal-btn-box-shadow:                none,
  modal-joomla-dialog-box-shadow:      none,
  form-aria-grabbed-box-shadow:        none,
  choices__button_joomla-focus-box-shadow: none,

  joomla-tab-accordion-box-shadow:     none,
  joomla-tab-btn-hvr:                  var(--template-text-light),
  joomla-tab-btn-aria-exp-bg:          var(--atum-btn-bg),
  joomla-tab-btn-region-border:        var(--atum-btn-bg),

  joomla-tablist-btn-aria-exp:         var(--template-text-light),
  joomla-tablist-btn-aria-exp-bg:      color.adjust($btn-primary-dark, $lightness: -10%),
  joomla-tablist-btn-aria-exp-aft-bg:  $btn-primary-dark,
  joomla-tablist-border-bottom:        1px solid var(--gray-800),

  joomla-tab-tablist-border:           1px solid var(--gray-800),
  joomla-tab-vert-border-bottom:       1px solid var(--gray-800),

  // Details
  details-bg:                          rgba(0,0,0,.4),
  details-border:                      1px solid var(--details-bg),

  // Nav
  nav-header-color:                    var(--body-color),

  // Choices
  choices-input-border-color:          var(--btn-primary-bg),
  choices-input-bg:                    var(--body-bg),
  choices-input-placeholder:           var(--gray-200),
  choices-list-multiple-item-bg:       var(--btn-primary-bg),
  choices-list-multiple-item:          var(--template-text-light),

  // Switches
  switcher-toggle-inside-bg:           var(--body-bg),
  switcher-toggle-outside-off-bg:      var(--gray-700),
  switcher-toggle-outside-on-bg:       var(--success),

  // Input
  input-border-color:                  #495057,

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

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

  // Login
  login-label-color:                   var(--white),

  // Icons
  icon-success:                        #418d52,
  icon-success-border:                 #418d52,
  icon-checkedout-color:               var(--gray-400),

  // Buttons
  btn-primary-color:                   var(--text-normal),
  btn-primary-bg:                      $btn-primary-dark,
  primary:                             $btn-primary-dark,
  btn-primary-border:                  1px solid color.adjust($btn-primary-dark, $lightness: 10%),
  btn-primary-bg-hvr:                  color.adjust($btn-primary-dark, $lightness: -10%),
  btn-primary-border-hvr:              1px solid color.adjust($btn-primary-dark, $lightness: 10%),
  btn-primary-toggle-bg:               var(--template-bg-dark),
  btn-primary-toggle-border:           var(--template-bg-dark),

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

  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:                        $btn-primary-dark,
  btn-light-border:                    1px solid color.adjust($btn-primary-dark, $lightness: 10%),
  btn-light-bg-hvr:                    $btn-primary-bg-hvr,


  btn-outline-secondary-color:         var(--template-text-light),
  btn-outline-secondary-bg:            #64676c,
  btn-outline-secondary-border:        1px solid color.adjust(#64676c, $lightness: 10%),

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

  // Dropdown
  dropdown-header-bg:                  color.adjust($btn-primary-dark, $lightness: -10%),
  dropdown-divider-bg:                 1px solid #fff,
  dropdown-item-bg:                    $btn-primary-dark,
  dropdown-item-bg-hvr:                color.adjust($btn-primary-dark, $lightness: -10%),
  dropdown-item-border-bottom:         1px solid rgba(255, 255, 255, .1),
  atum-dropdown-link-hover-bg:         var(--gray-700),

  // Input Group
  input-group-text-bg:                 var(--btn-primary-bg),
  input-group-text-border:             1px solid var(--btn-primary-border),
  input-group-text-color:              var(--btn-primary-color),

  // Search
  js-stools-btn-clear-bg:              var(--body-bg),
  js-stools-btn-clear-disabled-bg:     var(--body-bg),
  js-stools-btn-clear-disabled-border: var(--form-select-border),

  // Alerts
  states-link-color:                   #fff,
  states-btn-primary-bg:               rgba(0,0,0,.5),
  states-btn-primary-bg-hover:         rgba(0,0,0,.7),
  states-btn-primary-color:            var(--template-text-light),
  states-btn-primary-border:           rgba(0,0,0,.8),


  state-success-text:             var(--text-normal),
  state-success-text-hvr:         var(--text-normal),
  state-success-bg:               $success-dark,
  state-success-bg-hvr:           color.adjust($success-dark, $lightness: -15%),
  state-success-border:           var(--state-success-bg),
  state-success-btn-border:       var(--state-success-bg),
  state-success-icon:             var(--text-normal),
  state-success-icon-hvr:         var(--text-normal),
  state-success-heading-bg:       $success-dark,

  state-info-text:                var(--text-normal),
  state-info-text-hvr:            var(--text-normal),
  state-info-bg:                  color.adjust($btn-primary-dark, $lightness: -15%),
  state-info-bg-hvr:              color.adjust($btn-primary-dark, $lightness: -25%),
  state-info-border:              transparent,
  state-info-icon:                var(--state-info-text),
  state-info-heading-bg:          color.adjust($btn-primary-dark, $lightness: -5%),

  state-warning-text:             #000,
  state-warning-text-hvr:         #000,
  state-warning-bg:               $warning,
  state-warning-bg-hvr:           color.adjust($warning, $lightness: -15%),
  state-warning-border:           color.adjust($warning, $lightness: -15%),
  state-warning-icon:             #000,
  state-warning-heading-bg:       color.adjust($warning, $lightness: -15%),

  state-danger-text:              var(--text-normal),
  state-danger-text-hvr:          var(--text-normal),
  state-danger-bg:                $danger-dark,
  state-danger-bg-hvr:            color.adjust($danger-dark, $lightness: -15%),
  state-danger-border:            var(--dangerhvr),
  state-danger-icon:              var(--text-normal),
  state-danger-heading-bg:        var(--dangerhvr),

  state-error-text:               var(--text-normal),
  state-error-bg:                 var(--error),
  state-error-border:             var(--error),
  state-error-icon:               var(--text-normal),
  state-error-heading-bg:         var(--errorlight),

  alert-info-color:               var(--text-normal),
  alert-info-bg:                  var(--body-bg),
  alert-info-border:              var(--body-bg),

  // Subhead
  atum-subhead-color:             var(--template-text-dark),
  atum-subhead-bg:                var(--body-bg),
  atum-subhead-bg-img:            (linear-gradient(var(--body-bg), var(--dark-bg))),

  // Toolbar Buttons
  atum-btn:                       var(--template-text-light),
  atum-btn-icon:                  var(--template-text-light),
  atum-btn-icon-hvr:              $atum-text-dark,
  atum-btn-bg:                    $btn-primary-dark,
  atum-btn-bg-hvr:                color.adjust($btn-primary-dark, $lightness: -15%),
  atum-btn-border:                1px solid hsl(var(--hue),20%,80%),
  atum-btn-hvr:                   var(--template-text-light),

  atum-btn-success:               var(--atum-btn-success-hvr),
  atum-btn-success-icon:          var(--template-text-light),
  atum-btn-success-icon-hvr:      var(--atum-btn-success-hvr),
  atum-btn-success-bg:            $success-dark,
  atum-btn-success-bg-hvr:        color.adjust($success-dark, $lightness: -15%),
  atum-btn-success-border:        1px solid color.adjust($success-dark, $lightness: 10%),
  atum-btn-success-hvr:           var(--template-text-light),

  atum-btn-danger:                var(--dangerhvr),
  atum-btn-danger-color:          var(--template-text-light),
  atum-btn-danger-icon:           var(--template-text-light),
  atum-btn-danger-icon-hvr:       var(--atum-btn-danger-hvr),
  atum-btn-danger-bg:             $danger,
  atum-btn-danger-bg-hvr:         color.adjust($danger, $lightness: -15%),
  atum-btn-danger-border:         1px solid color.adjust($danger, $lightness: 10%),
  atum-btn-danger-hvr:            var(--template-text-light),

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

  atum-btn-primary:               color.adjust($btn-primary-dark, $lightness: 25%),
  atum-btn-primary-icon:          var(--template-text-light),
  atum-btn-primary-icon-hvr:      var(--template-text-dark),
  atum-btn-primary-bg:            $btn-primary-dark, // var(--template-bg-dark),
  atum-btn-primary-bg-hvr:        color.adjust($btn-primary-dark, $lightness: -15%),
  atum-btn-primary-border:        1px solid color.adjust($btn-primary-dark, $lightness: 10%),
  atum-btn-primary-hvr:           var(--template-text-light),

  atum-btn-secondary:             #f0f4fb,

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

  atum-list-group-bg:             var(--template-sidebar-bg),

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

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

  // Treeselect
  treeselect-line-color:          rgba(255,255,255,.4),
  treeselect-dropdown-toggle:     var(--template-text-light),
  icon-check-square-bg:           $btn-primary-dark,
  icon-square-bg:                 $btn-primary-dark,
  icon-check-square-color:        radial-gradient(white 50%, transparent 50%),
  icon-square-color:              radial-gradient(white 50%, transparent 50%),


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

);