@use 'color-vars' as *;
@use 'layout-vars' as *;

$navbar-height:                                 var(--c8y-navbar-height);
$navbar-margin-bottom:                          var(--c8y-navbar-margin-bottom);

$navbar-background-default:                     var(--c8y-navbar-background-default);
$navbar-color-default:                          var(--c8y-navbar-color-default);
$navbar-border-color:                           var(--c8y-navbar-border-color);

$navbar-padding-horizontal:                     calc($grid-gutter-width * .5);
$navbar-padding-vertical:                       calc($size-16 - 2px);
$navbar-collapse-max-height:                    340px;

// c8y-nav-stacked
$nav-stacked-active-bg:                         $gray-90;
$nav-stacked-color-active:                      $text-color;

/* NAVLINK */
$navlink-background-default:                    var(--c8y-navlink-background-default);
$navlink-background-active:                     var(--c8y-navlink-background-active);
$navlink-background-hover:                      var(--c8y-navlink-background-hover);
$navlink-background-focus:                      var(--c8y-navlink-background-focus);

$navlink-color-default:                         var(--c8y-navbar-color-link);
$navlink-color-active:                          var(--c8y-navbar-color-active);
$navlink-color-hover:                           var(--c8y-navbar-color-link-hover);
$navlink-color-focus:                           var(--c8y-navbar-color-link-hover);

$navlink-padding:                               var(--c8y-navlink-padding-vertical) var(--c8y-navlink-padding-horizontal);


$nav-tabs-background-default:                   var(--c8y-nav-tabs-background-default);
$nav-tabs-background-actions:                   var(--c8y-nav-tabs-background-actions);
$nav-tabs-background-hover:                     var(--c8y-nav-tabs-background-hover);
$nav-tabs-background-active:                    var(--c8y-nav-tabs-background-active);
$nav-tabs-background-focus:                     var(--c8y-nav-tabs-background-focus);

$nav-tabs-color-default:                        var(--c8y-nav-tabs-color-default);
$nav-tabs-color-hover:                          var(--c8y-nav-tabs-color-hover);
$nav-tabs-color-active:                         var(--c8y-nav-tabs-color-active);
$nav-tabs-color-focus:                          var(--c8y-nav-tabs-color-active);

$nav-tabs-border-color-default:                 var(--c8y-nav-tabs-border-color-default);
$nav-tabs-border-color-active:                  var(--c8y-nav-tabs-border-color-active);
$nav-tabs-border-width-default:                 var(--c8y-nav-tabs-border-width-default);
$nav-tabs-border-width-active:                  var(--c8y-nav-tabs-border-width-active);

$nav-tabs-icon-size:                            var(--c8y-nav-tabs-icon-size);
$nav-tabs-icon-color-default:                   var(--c8y-nav-tabs-icon-color-default);
$nav-tabs-icon-color-hover:                     var(--c8y-nav-tabs-icon-color-hover);
$nav-tabs-icon-color-active:                    var(--c8y-nav-tabs-icon-color-active);

$nav-tabs-padding:                              var(--c8y-nav-tabs-padding-vertical) var(--c8y-nav-tabs-padding-horizontal);

//tabs vertical
$nav-tabs-vertical-width:                       var(--c8y-nav-tabs-vertical-width);
$nav-tabs-vertical-padding:                     var(--c8y-nav-tabs-vertical-padding-vertical) var(--c8y-nav-tabs-vertical-padding-horizontal);

/* NAVPILLS */
$nav-pills-padding:                             var(--c8y-nav-pills-padding-vertical) var(--c8y-nav-pills-padding-horizontal);
$nav-pills-border-radius:                       var(--c8y-nav-pills-border-radius);

$nav-pills-background-default:                  var(--c8y-nav-pills-background-default);
$nav-pills-background-active:                   var(--c8y-nav-pills-background-active);
$nav-pills-background-hover:                    var(--c8y-nav-pills-background-hover);
$nav-pills-background-focus:                    var(--c8y-nav-pills-background-focus);

$nav-pills-color-default:                       var(--c8y-nav-pills-color-default);
$nav-pills-color-active:                        var(--c8y-nav-pills-color-active);
$nav-pills-color-hover:                         var(--c8y-nav-pills-color-hover);
$nav-pills-color-focus:                         var(--c8y-nav-pills-color-focus);