///////////////
// UTILITIES //
///////////////

@import './functions/strip-unit';

////////////
// NAVBAR //
////////////

$navbar-height:                     56px !default;
$navbar-line-height:                56px !default;
$navbar-padding-vertical:           0 !default;
$navbar-padding-horizontal:         0 !default;
$navbar-box-shadow:                 none !default;

// GRID

$grid-gutter-width:                 1.25rem !default;

///////////////
// Bootstrap //
///////////////

@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

///////////////////////////////////
// MATERIAL DESIGN COLOR PALETTE //
///////////////////////////////////

@import 'sass-md-colors/colors/variables';

/////////////
// FOOTER  //
/////////////

$footer-height: 45px !default;

///////////////////////////////
// FIXED WIDTH SIDEBAR SIZES //
///////////////////////////////

$sidebar-size-1:                    56px !default;
$sidebar-size-2:                    200px !default;
$sidebar-size-3:                    250px !default;

$sidebar-sizes: (
    1: $sidebar-size-1,
    2: $sidebar-size-2,
    3: $sidebar-size-3
) !default;

// SIDEBAR MINI
$sidebar-mini-width:                $sidebar-size-1 !default;

//////////////////////////////
// SIDEBAR PERCENTAGE SIZES //
//////////////////////////////

$sidebar-percent-step:              5 !default;
$sidebar-percent-from:              20 !default;
$sidebar-percent-through:           100 !default;

/////////////////////
// SIDEBAR GENERAL //
/////////////////////

$zindex-sidebar:                    999 !default;
$sidebar-font-size:                 15px !default;

// general spacing
$sidebar-spacing:                   $sidebar-font-size * 1.25 !default;
$sidebar-spacing-x:                 $sidebar-spacing !default;
$sidebar-spacing-y:                 $sidebar-spacing !default;

// brand
$sidebar-brand-size:                1.3rem !default;
$sidebar-brand-weight:              500 !default;
$sidebar-brand-height:              $navbar-height !default;

// Heading
$sidebar-heading-font-size:         .9rem !default;
$sidebar-heading-font-weight:       500 !default;
$sidebar-heading-font-family:       $font-family-base !default;
$sidebar-heading-text-transform:    uppercase !default;
$sidebar-heading-letter-spacing:    normal !default;
$sidebar-heading-line-height:       normal !default;

// menu spacing
$sm-spacing-x:                      $sidebar-spacing-x !default;
$sm-spacing-y:                      $sidebar-spacing-y !default;

// horizontal spacing between elements such as 
// .sidebar-menu-label and .sidebar-menu-icon 
// within a menu button
$sm-element-spacing-x:               5px !default;

// menu buttons
$sm-button-font-size:               $sidebar-font-size !default;
$sm-button-font-weight:             400 !default;
$sm-button-height:                  42px !default;

// menu condensed buttons
$sm-condensed-button-height:        $sm-button-height - ($sm-button-height/4) !default;

// menu icons
$sm-icon-font-size:                 24px !default;
$sm-icon-margin:                    $sm-spacing-x * 0.4 !default;
$sm-icon-width:                     $sm-icon-font-size + $sm-icon-margin !default;

// menu icons using .sm-icons-block
$sm-iconsblock-spacing:             $sm-icon-font-size * 0.25 !default;
$sm-iconsblock-width:               $sm-icon-font-size + $sm-iconsblock-spacing !default;

// active buttons
$sm-active-button-font-weight:      $sm-button-font-weight !default;

// submenu buttons
$ssm-button-height:                 $sm-button-height !default;
$ssm-button-font-size:              $sm-button-font-size !default;

// submenu condensed buttons
$ssm-condensed-button-height:       $ssm-button-height - ($ssm-button-height/4) !default;

// submenu icons
$ssm-icon-font-size:                $sm-icon-font-size !default;

// submenu icons using .sm-icons-block
$ssm-iconsblock-spacing:            $ssm-icon-font-size * 0.25 !default;
$ssm-iconsblock-width:              $ssm-icon-font-size + $ssm-iconsblock-spacing !default;

// menu toggle button indicator
$sm-toggle-font-size:               $sm-button-font-size !default;
// $sm-toggle-family:                  "FontAwesome" !default;
// $sm-toggle-icon:                    "\f067" !default; // plus
// $sm-open-toggle-icon:               "\f068" !default; // minus
// $sm-toggle-icon:                    "\f078" !default; // chevron-down
// $sm-open-toggle-icon:               "\f077" !default; // chevron-up

// See Material Icons:
// - https://design.google.com/icons/
// - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
$sm-toggle-family:                  "Material Icons" !default;
$sm-toggle-icon:                    "\e5db" !default;
$sm-open-toggle-icon:               "\e5d8" !default;

// label
$sm-label-spacing-horizontal:       .3rem !default;
$sm-label-spacing-vertical:         .2rem !default;
$sm-label-font-size:                .75rem !default;
$sm-label-width:                    (strip-unit($sm-label-font-size) * $sidebar-font-size) + (strip-unit($sm-label-spacing-horizontal) * $sidebar-font-size);
$sm-label-height:                   (strip-unit($sm-label-font-size) * $sidebar-font-size) + (strip-unit($sm-label-spacing-vertical) * $sidebar-font-size);

// @TODO: replace in bootstrap v4.0.0-alpha.3
// $sm-dropdown-padding-y:          $dropdown-padding-y !default;
$sm-dropdown-padding-y:             5px !default;
// @TODO: replace in bootstrap v4.0.0-alpha.3
// $sm-dropdown-item-padding-x:        $dropdown-item-padding-x !default;
$sm-dropdown-item-padding-x:        20px !default;
$sm-dropdown-box-shadow:            0 2px 3px darken(#fff, 12%) !default;
$sm-dropdown-border-width:          0 !default;
$sm-dropdown-border-color:          $dropdown-border-color !default;
$sm-dropdown-border-radius:         $border-radius !default;

// open dropdown
$sm-dropdown-open-color:            $dropdown-link-hover-color !default;
$sm-dropdown-open-bg:               rgba(0, 0, 0, .05) !default;
$sm-dropdown-hover-color:           $dropdown-link-hover-color !default;
$sm-dropdown-hover-bg:              rgba(0, 0, 0, .05) !default;

// dropdown toggle button indicator
// See Material Icons:
// - https://design.google.com/icons/
// - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
$sm-dropdown-toggle-family:         "Material Icons" !default;
$sm-dropdown-toggle-icon:           "\e313" !default; // keyboard_arrow_down
$sm-dropdown-open-toggle-icon:      "\e315" !default; // keyboard_arrow_right

// collapse toggle button indicator
// See Material Icons:
// - https://design.google.com/icons/
// - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
$sm-collapse-toggle-family:         "Material Icons" !default;
$sm-collapse-toggle-icon:           "\e313" !default; // keyboard_arrow_down
$sm-collapse-open-toggle-icon:      "\e316" !default; // keyboard_arrow_up

//////////////////
// SIDEBAR DARK //
//////////////////

@import 'variables/sidebar-dark';

///////////////////
// SIDEBAR LIGHT //
///////////////////

@import 'variables/sidebar-light';