////
/// @group menu
////

@use 'sass:map';

@import '~@react-md/theme/dist/mixins';
@import '~@react-md/list/dist/functions';
@import '~@react-md/utils/dist/variables';

/// The elevation for menus. This should be a number from 0 to 24 (inclusive) as
/// it gets passed to the `rmd-elevation` mixin.
/// @type Number
$rmd-menu-elevation: 8 !default;

/// The background color for a menu in light themes.
///
/// @type Color
/// @since 2.7.0
$rmd-menu-light-background-color: rmd-theme-var(surface) !default;

/// The background color for a menu in dark themes when the
/// `$rmd-theme-dark-elevation` feature flag is also enabled.
///
/// @see $rmd-theme-dark-elevation
/// @see $rmd-menu-dark-background-color
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-menu-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-menu-elevation
) !default;

/// The background color for a menu in dark themes.
/// @type Color
/// @since 2.7.0
$rmd-menu-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-menu-dark-elevation-background-color,
  $rmd-menu-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;

/// The background color to use for menus
///
/// @require rmd-theme-var
/// @type Color
$rmd-menu-background-color: if(
  $rmd-theme-light,
  $rmd-menu-light-background-color,
  $rmd-menu-dark-background-color
) !default;

/// The text color to use for menus
///
/// @require rmd-theme-var
/// @type Color
$rmd-menu-color: rmd-theme-var(on-surface) !default;

/// The z-index for menus.
///
/// @require $rmd-utils-temporary-element-z-index
/// @type Number
$rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;

/// The min-width to apply to menus.
/// @type Number
$rmd-menu-min-width: 7rem !default;

/// The amount of spacing to use between icons and text within menu items. This
/// really overwrites the additional spacing provided in the base `list` package
/// since menu items are normally more dense and don't need to align with
/// specific "keylines" in your app.
/// @type Number
$rmd-menu-icon-spacing: 1rem !default;

/// A Map of all the "themeable" parts of the menu package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
/// @type Map
$rmd-menu-theme-values: (
  background-color: $rmd-menu-background-color,
  color: $rmd-menu-color,
  min-width: $rmd-menu-min-width,
  icon-spacing: $rmd-menu-icon-spacing,
  z-index: $rmd-menu-z-index,
) !default;