/* =====================================================
 *  TREES SPECIFIC VARIABLES
 * ------------------------------------------------------
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 *
 */
 
$el: 'trees';

$tree-icons-font-family:                                    'dlt-icons';
$tree-icons-font-icon-caret-right:                          "\e961"; // TO-DO Should be changed to references to variables in scss\variables\_dlt-icons.scss
$tree-icons-font-icon-caret-down:                           "\e963";
$tree-icons-font-icon-caret-right-circle:                   "\e969";
$tree-icons-font-icon-caret-down-circle:                    "\e96b";

////// Colors

$tree-decoration-color:                                     var(--dlt-trees-color-icon-muted-secondary, var(--dlt-color-icon-static-subtle, $brand-primary-light-css-var));
// this resolves to $gray-50. Where to override?

$tree-line-color:                                           var(--dlt-trees-color-line, var(--dlt-color-border-interactive-contrast, $gray-70));


////// Typography

$tree-font-family:                                          var(--dlt-font-family-base, $font-family-base);

$tree-font-size-default:                                    var(--dlt-font-size-xs, 0.875rem); // intended: 14px;
$tree-font-size-sm:                                         var(--dlt-font-size-xs, 0.875rem); // intended: 14px;
$tree-font-size-lg:                                         var(--dlt-font-size-xs, 0.875rem); // intended: 14px;

$tree-line-height-default:                                  var(--dlt-font-line-height-text, 1.5); // intended: 16px; // Where to define centrally?
$tree-line-height-sm:                                       var(--dlt-font-line-height-text, 1.5); // intended: 16px; // Where to define centrally?
$tree-line-height-lg:                                       var(--dlt-font-line-height-text, 1.5); // unused


$tree-text-color:                                           var(--dlt-#{$el}-color-text-default, $component-color-text-default);
// $tree-text-color:                                           var(--dlt-component-color-text-default, $almost-black);

$tree-content-font-weight:                                  var(--dlt-font-weight-regular, $font-weight-regular); // intended: 400
$tree-header-font-weight:                                   var(--dlt-font-weight-medium, $font-weight-medium); // intended: 500

////// States           
$tree-item-disabled-opacity:                                var($component-opacity-disabled, .5); // TO-DO 
$tree-item-disabled-outline: 0 !important;

////// Layouting
$tree-margin:                                               0px;
$tree-padding:                                              0px;

$tree-border-radii:                                         var(--dlt-border-radii-default, 2);
$tree-border-style:                                         var(--dlt-border-style-default, solid);

// $tree-item-margin-left: 12px;
$tree-item-margin-left:                                     4px;
$tree-item-padding-left:                                    12px;

$tree-item-span-width:                                      100%;
$tree-item-span-height:                                     2rem; // To-do: Should be same as text input height
$tree-item-span-line-height:                                2rem;

$tree-item-span-height-sm:                                  1.5rem;
$tree-item-span-line-height-sm:                             1.9rem;

$tree-item-span-height-lg:                                  2.5rem;
$tree-item-span-line-height-lg:                             2.5rem;

$tree-item-span-before-left:                                -24px;
$tree-item-span-before-top:                                 08px;
$tree-item-span-before-width:                               16px;
$tree-item-span-before-height:                              16px;
$tree-item-span-before-line-height:                         14px;
$tree-item-span-before-font-family:                         $tree-icons-font-family;
$tree-item-span-before-font-size:                           24px;
$tree-item-span-before-font-weight:                         var(--dlt-font-weight-regular, $font-weight-regular); // intended: 400
$tree-item-span-before-color:                               var(--dlt-tree-color-interactive-secondary, var(--dlt-color-icon-interactive-secondary, $blue-primary));
$tree-item-span-before-content:                             $tree-icons-font-icon-caret-down;
$tree-item-span-before-leaf-content: " ";
$tree-item-span-before-leaf-padding-left: 16px;
$tree-item-span-before-not-expanded-not-leaf-content:       $tree-icons-font-icon-caret-right;

$tree-item-focus-outline:                                   none;
$tree-item-before-top:                                      -1px;
$tree-item-before-left:                                     -16px;
$tree-item-before-height:                                   2rem;
$tree-item-before-width:                                    calc(100% + 18px);

$tree-item-before-hover-outline:                            none;

// One outline style for focus & selected:
$tree-item-highlight-outline:                               $outline-width solid var(--dlt-component-color-interactive-primary, var(--dlt-color-border-interactive-primary, $blue-primary));
$tree-item-highlight-outline-offset:                        calc($outline-width / -2);

$tree-item-before-focus-outline:                            $tree-item-highlight-outline;
$tree-item-before-focus-outline-offset:                     $tree-item-highlight-outline-offset;
$tree-item-before-hover-outline-offset:                     $tree-item-highlight-outline-offset;
$tree-item-before-selected-outline:                         $tree-item-highlight-outline;
$tree-item-before-selected-outline-offset:                  $tree-item-highlight-outline-offset;
$tree-item-before-selected-left:                            $tree-item-before-left;
$tree-item-before-selected-top:                             $tree-item-before-top;

$tree-item-before-sm-top:                                   2px;
$tree-item-before-sm-height:                                1.5rem;
$tree-item-before-sm-left:                                  -12px;
$tree-item-before-lg-top:                                   -1px;
$tree-item-before-lg-height:                                2.5rem;
$tree-item-before-lg-left:                                  -19px;

$tree-item-span-before-sm-top:                              7px;
$tree-item-span-before-lg-top:                              12px;

$tree-item-icon-color:                                      $tree-decoration-color;
$tree-item-icon-font-size:                                  24px;
$tree-item-icon-line-height:                                18px;
$tree-item-icon-margin-right:                               4px;
$tree-item-icon-margin-left:                                -2px;

$tree-item-icon-sm-color:                                   $tree-decoration-color;
$tree-item-icon-sm-font-size:                               16px;
$tree-item-icon-sm-line-height:                             19px;
$tree-item-icon-sm-margin-left:                             0px;

$tree-item-icon-lg-color:                                    $tree-decoration-color;
$tree-item-icon-lg-font-size:                               24px;
$tree-item-icon-lg-line-height:                             35px;
$tree-item-icon-lg-margin-right:                            4px;
$tree-item-icon-lg-margin-left:                             -2px;

// Data trees
$tree-data-item-border-left:                                1px solid $tree-line-color;
$tree-data-item-margin-left:                                11px;
$tree-data-item-before-left:                                -16px;
$tree-data-item-before-top:                                 0px;
$tree-data-item-sm-margin-left:                             7px;

$tree-data-item-last-child-margin-left:                     12px;
$tree-data-item-last-child-sm-margin-left:                  8px;
$tree-data-item-last-child-border-left:                     none;

$tree-data-item-span-padding-left:                          2px;
$tree-data-item-span-sm-padding-left:                       0px;

$tree-data-item-span-before-font-size:                      16px;
$tree-data-item-span-before-left:                           -20px;
$tree-data-item-span-before-top:                            08px;
$tree-data-item-span-before-width:                          14px;
$tree-data-item-span-before-height:                         14px;
$tree-data-item-span-before-content:                        $tree-icons-font-icon-caret-down-circle;
$tree-data-item-span-before-background-color:               white;

$tree-data-item-leaf-span-before-content:                   "";
$tree-data-item-leaf-span-before-background-color:          inherit;

$tree-data-item-not-expanded-not-leaf-span-before-content:  $tree-icons-font-icon-caret-right-circle;

$tree-data-item-span-after-top:                             -8px;
$tree-data-item-span-after-left:                            -13px;
$tree-data-item-span-after-width:                           18px;
$tree-data-item-span-after-height:                          24px;
$tree-data-item-span-after-border-left:                     1px solid $tree-line-color;
$tree-data-item-span-after-border-bottom:                   1px solid $tree-line-color;

$tree-data-item-before-sm-top:                              3px;
$tree-data-item-before-sm-left:                             -12px;

$tree-data-item-before-lg-top:                              2px;
$tree-data-item-before-lg-height:                           2rem;

$tree-data-item-span-lg-line-height:                        2.0rem;
$tree-data-item-span-lg-height:                             2.0rem;
$tree-data-item-span-before-sm-font-size:                   16px;
$tree-data-item-span-before-sm-top:                         08px;
$tree-data-item-span-before-sm-width:                       12px;
$tree-data-item-span-before-sm-height:                      12px;
$tree-data-item-span-before-lg-top:                         11px;

$tree-data-item-span-after-sm-top:                          -3px;
$tree-data-item-span-after-sm-width:                        16px;
$tree-data-item-span-after-sm-height:                       18px;
$tree-data-item-span-after-lg-top:                          -7px;
$tree-data-item-span-after-lg-height:                       25px;

// Tree root node (role=tree)
$tree-role-tree-data-item-span-after-top:                   -4px;
$tree-role-tree-data-item-span-after-height:                20px;
$tree-role-tree-data-item-span-after-sm-top:                -4px;
$tree-role-tree-data-item-span-after-sm-height:             20px;
$tree-role-tree-data-item-span-after-lg-top:                -4px;
$tree-role-tree-data-item-span-after-lg-height:             23px;

/**
** Tree header (label)
**/
$tree-header-font-weight:                                   $tree-header-font-weight;
$tree-header-line-height:                                   16px;
$tree-header-padding:                                       0 0 8px 0px;
$tree-header-margin:                                        0 0 0px -8px;
$tree-header-sm-margin-bottom:                              -3px;
$tree-data-header-margin-bottom:                            3px;
$tree-data-header-margin-left:                              4px;
$tree-data-header-sm-margin-left:                           0px;
$tree-data-header-sm-margin-bottom:                         0px;
$tree-data-header-lg-margin-bottom:                         1px;

/**
** Item content
**/

$tree-item-span-checkbox-position:                          absolute;
$tree-item-span-checkbox-top:                               8px;
$tree-item-span-checkbox-padding-left:                      2px;
$tree-item-span-checkbox-label-padding:                     1px var(--dlt-spacing-3-x, 1.5rem) 1px 20px;
$tree-item-span-checkbox-label-sm-padding:                  1px var(--dlt-spacing-3-x, 1.5rem) 1px 16px;

$tree-data-item-span-checkbox-sm-top:                       7px;
$tree-data-item-span-checkbox-sm-padding-left:              2px;

$tree-data-item-span-checkbox-lg-top:                       10px;
$tree-data-item-span-checkbox-lg-padding-left:              2px;

// TO-DO: define truncation centrally
$tree-item-truncation-width:                                calc(100% - 24px);
$tree-item-truncation-position:                             absolute;
$tree-item-truncation-text-overflow:                        ellipsis;
$tree-item-truncation-overflow:                             hidden;
$tree-item-truncation-white-space:                          nowrap;


