/* =====================================================
   NAVIGATION SPECIFIC VARIABLES
   ------------------------------------------------------
  */
//## Define common padding and border and more.

$nav-item-spacing-xs:                     var(--dlt-spacing-half-x, .25rem); 
$nav-item-spacing-s:                      var(--dlt-spacing-1-x, .5rem);             
$nav-item-spacing-m:                      var(--dlt-spacing-1-x-half, .75rem); 
$nav-item-spacing-l:                      var(--dlt-spacing-2-x, 1rem); 
$nav-item-spacing-xl:                     1.25rem;
$nav-item-spacing-xxl:                    var(--dlt-spacing-3-x, 1.5rem); 

$nav-product-logo-font-size:              var(--dlt-font-size-sm, 1rem);

$nav-item-indent-level1:                  40px; 
$nav-item-indent-level2:                  56px; 
$nav-item-indent-level3:                  72px; 

$nav-collapse-icon-size:                  40px;

$nav-wrapper-bottom-padding:              72px;
$nav-wrapper-bottom-border-color:         var(--dlt-color-overlay, rgba(19, 65, 88, 0.32));

$nav-item-height:                         var(--dlt-sizing-xl, 48px);

$nav-icon-size-xxl:                        var(--dlt-font-size-xxl, 1.5rem);


$nav-item-text-decoration:                none !default;

$nav-item-border-hover-color:             var(--dlt-color-background-static-contrast, #058192);
$nav-item-active-color:                   var(--dlt-color-background-interactive-navigation-menu-item-secondary-active, #c5edea); 


$nav-item-selected-font-weight:           var(--dlt-font-weight-medium, $font-weight-medium);
$nav-item-selected-left-border-with:      var(--dlt-spacing-half-x, .25rem);
$nav-item-border-color:                   var(--dlt-color-background-static-contrast, #058192);

$nav-item-font-size-xs:                   var(--dlt-font-size-xs, 0.875rem);
$nav-item-font-size-sm:                   var(--dlt-font-size-sm, 1rem);
$nav-item-line-height:                    1.25;

$nav-item-outline-offset:                 -2px;
$nav-item-border-style:                   var(--dlt-border-style-hover, solid);
$nav-border-width-default:                var(--dlt-border-width-default,  1px);
$nav-item-border-width-hover:             var(--dlt-border-width-hover, 2px);

$nav-expand-button-border-color:          var(--dlt-color-border-interactive-primary, #058192);

$nav-list-border-color:                   var(--dlt-color-palette-gray-900, #e1e5ea);
$nav-list-drop-shadow-color:              var(--dlt-color-palette-gray-120, #011f3d);
$nav-list-elevation:                      var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);

$nav-icon-button-color:                   var(--dlt-color-icon-interactive-secondary, #011f3d);

$nav-elevation:                           var(--dlt-elevation-md, $shadow-depth-12);

//vertical nav specific variables
$nav-vertical-collapsed-width:            72px; 
$nav-vertical-wo-icons-collapsed-width:   40px; 

//vertical nav backgrounds
$nav-vertical-background: var(--dlt-color-background-static-navigation-secondary, #f9fafb);
$nav-vertical-item-background-default: var(--dlt-color-background-interactive-navigation-menu-item-secondary-default, #f9fafb);
$nav-vertical-item-background-active: var(--dlt-color-background-interactive-navigation-menu-item-secondary-active, #c5edea);
$nav-vertical-item-background-selected: var(--dlt-color-background-interactive-navigation-menu-item-secondary-selected, #e7ebee);
$nav-vertical-item-background-hover: var(--dlt-color-background-interactive-navigation-menu-item-secondary-hover, #f0f2f4);
$nav-vertical-item-text-color: var(--dlt-color-text-interactive-navigation-secondary, #011f3d);
$nav-vertical-item-text-hover-color: var(--dlt-color-text-interactive-navigation-secondary-hover, #1c5569);
$nav-vertical-seperator-background: var(--dlt-color-background-navigation-vertical-separator);

//vertical nav specific variables
$nav-vertical-height: 64px;

//horizontal nav backgrounds
$nav-horizontal-background: var(--dlt-color-background-static-navigation-primary, #ffffff);
$nav-horizontal-item-background-default: var(--dlt-color-background-interactive-navigation-menu-item-primary-default, #ffffff);
$nav-horizontal-item-background-active: var(--dlt-color-background-interactive-navigation-menu-item-primary-active, #c5edea);
$nav-horizontal-item-background-selected: var(--dlt-color-background-interactive-navigation-menu-item-primary-selected, #f0f2f4);
$nav-horizontal-item-background-hover: var(--dlt-color-background-interactive-navigation-menu-item-primary-hover, #f9fafb);
$nav-horizontal-item-text-color: var(--dlt-color-text-interactive-navigation-primary, #011f3d);
$nav-horizontal-item-text-hover-color: var(--dlt-color-text-interactive-navigation-primary-hover, #1c5569);
$nav-horizontal-box-shadow: var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);










/* =====================================================
    COMPONENT SHARED STYLES
   ------------------------------------------------------
*/
//** Colors

$el: 'nav';

$nav-color-text:                               var(--dlt-#{$el}-color-text-default, $component-color-text-default);