/// Background of a steps item
/// @group menu
$stepsItemBg: var(--steps-item-bg);

/// Border of a steps item
/// @group menu
$stepsItemBorder: 1px solid var(--steps-item-border);

/// Text color of a steps item
/// @group menu
$stepsItemTextColor: $textSecondaryColor;

/// Width of a steps itrem number
/// @group menu
$stepsItemNumberWidth: 1.75rem;

/// Height of a steps itrem number
/// @group menu
$stepsItemNumberHeight: 1.75rem;

/// Font size of a steps itrem number
/// @group menu
$stepsItemNumberFontSize: 1rem;

/// Color of a steps itrem number
/// @group menu
$stepsItemNumberColor: $textColor;

/// Border radius of a steps itrem number
/// @group menu
$stepsItemNumberBorderRadius: $borderRadius;

/// Font weight of an active steps itrem number
/// @group menu
$stepsItemActiveFontWeight: 600;

/// Width of a vertical menu such as tieredmenu or context menu
/// @group menu
$menuWidth: 12.5rem;

/// Background of a menu
/// @group menu
$menuBg: var(--menu-bg);

/// Border of a menu
/// @group menu
$menuBorder: 1px solid var(--menu-border);

/// Text color of a menu
/// @group menu
$menuTextColor: $textColor;

/// Padding of a menuitem
/// @group menu
$menuitemPadding: 0.75rem 0.5rem;

/// Border radius of a menuitem
/// @group menu
$menuitemBorderRadius: 6px;

/// Text color of a menuitem
/// @group menu
$menuitemTextColor: $textColor;

/// Icon color of a menuitem
/// @group menu
$menuitemIconColor: $textColor;

/// Text color of a menuitem in hover state
/// @group menu
$menuitemTextHoverColor: $textColor;

/// Icon color of a menuitem in hover state
/// @group menu
$menuitemIconHoverColor: $textColor;

/// Background of a menuitem in hover state
/// @group menu
$menuitemHoverBg: var(--surface-hover);

/// Text color of a menuitem in focus state
/// @group menu
$menuitemTextFocusColor: $textColor;

/// Icon color of a menuitem in focus state
/// @group menu
$menuitemIconFocusColor: $textColor;

/// Background of a menuitem in focus state
/// @group menu
$menuitemFocusBg: var(--surface-hover);

/// Text color of a menuitem in active state
/// @group menu
$menuitemTextActiveColor: $textColor;

/// Icon color of a menuitem in active state
/// @group menu
$menuitemIconActiveColor: $textSecondaryColor;

/// Background of a menuitem in active state
/// @group menu
$menuitemActiveBg: var(--surface-hover);

/// Background of a menuitem in active and focus states
/// @group menu
$menuitemActiveFocusBg: var(--surface-hover);

/// Font size of an icon indicating the item has a submenu
/// @group menu
$menuitemSubmenuIconFontSize: 0.875rem;

/// Margin of a submenu header
/// @group menu
$submenuHeaderMargin: 0;

/// Padding of a submenu header
/// @group menu
$submenuHeaderPadding: 0.5rem;

/// Background of a submenu header
/// @group menu
$submenuHeaderBg: transparent;

/// Text color of a submenu header
/// @group menu
$submenuHeaderTextColor: $textColor;

/// Border radius of a submenu header
/// @group menu
$submenuHeaderBorderRadius: 0;

/// Font weight of a submenu header
/// @group menu
$submenuHeaderFontWeight: var(--submenu-header-font-weight);

/// Background of an overlay menu
/// @group menu
$overlayMenuBg: $menuBg;

/// Border of an overlay menu
/// @group menu
$overlayMenuBorder: 0 none;

/// Box shadow of an overlay menu
/// @group menu
$overlayMenuShadow: var(--overlay-menu-shadow);

/// Padding of a vertical menu e.g. tieredmenu, contextmenu
/// @group menu
$verticalMenuPadding: 0.5rem;

/// Margin of a menuitem separator
/// @group menu
$menuSeparatorMargin: 0.25rem 0;

/// Padding of a breadcrumb
/// @group menu
$breadcrumbPadding: 0.25rem;

/// Background of a breadcrumb
/// @group menu
$breadcrumbBg: none;

/// Border of a breadcrumb
/// @group menu
$breadcrumbBorder: none;

/// Text color of a breadcrumb item
/// @group menu
$breadcrumbItemTextColor: var(--text-color-secondary);

/// Icon color of a breadcrumb item
/// @group menu
$breadcrumbItemIconColor: var(--text-color-secondary);

/// Text color of the breadcrumb item
/// @group menu
$breadcrumbLastItemTextColor: var(--text-color);

/// Icon color of the breadcrumb item
/// @group menu
$breadcrumbLastItemIconColor: var(--text-color);

/// Color of a breadcrumb separator
/// @group menu
$breadcrumbSeparatorColor: var(--text-color-secondary);

/// Padding of a horizontal menu e.g. menubar
/// @group menu
$horizontalMenuPadding: 0.375rem;

/// Background of a horizontal menu e.g. menubar
/// @group menu
$horizontalMenuBg: var(--horizontal-menu-bg);

/// Border of a horizontal menu e.g. menubar
/// @group menu
$horizontalMenuBorder: $menuBorder;

/// Text color of a horizontal menu e.g. menubar
/// @group menu
$horizontalMenuTextColor: $menuTextColor;

/// Padding of a horizontal menu root item e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemPadding: $menuitemPadding;

/// Border radius of a horizontal menu root item e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemBorderRadius: $borderRadius;

/// Text color of a horizontal menu root item e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor;

/// Icon color of a horizontal menu root item e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor;

/// Text color of a horizontal menu root item in hover state e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor;

/// Icon color of a horizontal menu root item in hover state e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor;

/// Background of a horizontal menu root item in hover state e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg;

/// Text color of a horizontal menu root item in hover active e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor;

/// Icon color of a horizontal menu root item in hover active e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor;

/// Background of a horizontal menu root item in active state e.g. menubar
/// @group menu
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg;

/// Width of an action item on dock
/// @group menu
$dockActionWidth: 4rem;

/// Height of an action item on dock
/// @group menu
$dockActionHeight: 4rem;

/// Padding of an action item on dock
/// @group menu
$dockItemPadding: 0.5rem;

/// Border radius of an action item on dock
/// @group menu
$dockItemBorderRadius: $borderRadius;

/// Margin of the current action item on dock
/// @group menu
$dockCurrentItemMargin: 1.5rem;

/// Margin of the previous and next action item on dock
/// @group menu
$dockFirstItemsMargin: 1.3rem;

/// Margin of the second previous and second next action item on dock
/// @group menu
$dockSecondItemsMargin: 0.9rem;

/// Background of the list on dock
/// @group menu
$dockBg: rgba(255, 255, 255, 0.1);

/// Border of the list on dock
/// @group menu
$dockBorder: 1px solid rgba(255, 255, 255, 0.2);

/// Padding of the list on dock
/// @group menu
$dockPadding: 0.5rem 0.5rem;

/// Border Radius of the list on dock
/// @group menu
$dockBorderRadius: 0.5rem;