// Variables

// Device breakpoints
// Following a mobile first approach, the Quick Menu will be displayed on all
// devices by default. Define the breakpoints for tablets and desktops.
//
$menu-breakpoints: (
    tablet: 768px,
    desktop: 1200px
) !default;

// Quick Menu Themes.
//
// Currently only supporting 'light' and 'dark'.
$themes: (
    light: (
        // Quick Menu Button
        menu-btn-bg:            rgba(0, 0, 0, 0.5),
        menu-btn-color:         #fff,

        // Menu Background
        menu-bg:                #fff,
        menu-color:             #686570,

        // Menu Heading
        menu-head-icon-bg:      #2c9ff7,
        menu-head-icon-color:   #fff,
        menu-head-title-color:  #353644,

        // Horizontal Rule (HR)
        divider-color:          #f0f0f0,

        // Nav Link Colour
        nav-item-bg:            transparent,
        nav-item-border:        2px dashed,
        nav-item-color:         #196ec3,

        // Close Button
        close-button-bg:        #eef0f2,
        close-button-color:     #343541,
    ),
    dark: (
        // Quick Menu Button
        menu-btn-bg:            rgba(0, 0, 0, 0.5),
        menu-btn-color:         #fff,

        // Menu Background
        menu-bg:                #0f0f10,
        menu-color:             #61646b,

        // Menu Heading
        menu-head-icon-bg:      #4d99fb,
        menu-head-icon-color:   #fff,
        menu-head-title-color:  #adadad,

        // Horizontal Rule (HR)
        divider-color:          #2c2c2c,

        // Nav Link Colour
        nav-item-bg:            transparent,
        nav-item-border:        2px dashed,
        nav-item-color:         #61646b,

        // Close Button
        close-button-bg:        #4d99fb,
        close-button-color:     #e9feff,
    ),
) !default;

// Styling options.
//
// z-index values (ensure they're above all other elements).
$z-index-backdrop: 1000 !default;
$z-index-menu: 1002 !default;

// Background colour for the backdrop when the menu is open.
$backdrop-bg: rgba(0, 0, 0, 0.5) !default;

// Button to invoke the Quick Menu.
$menu-btn-padding: 8px 30px !default;

// The Quick Menu.
$menu-border-radius: 15px 15px 0 0 !default;

// The Quick Menu Heading
$menu-head-alignment: center !default; // text-align values.
$menu-head-icon-padding: 10px !default;
$menu-head-icon-border-radius: 15px !default;

// Nav item, i.e. the link.
$nav-item-width: 100px !default; // The min-width for a single nav item. (Use this to ensure equal width of all items.)
$nav-item-max-width: min-content !default; // Max-width for a single nav item.
$nav-item-border-radius: 15px !default;
$nav-item-margin: 15px !default; // Margin right from other items.

// Close button within the quick menu.
$close-button-border-radius: 15px !default;