/*******************************
             Menu
*******************************/

/*-------------------
      Collection
--------------------*/

/* Menu */
@menuVerticalMargin: @medium;
@menuHorizontalMargin: 0em;
@menuMargin: @menuVerticalMargin @menuHorizontalMargin;
@menuBackground: #FFFFFF;
@menuFontFamily: @pageFont;
@menuItemBackground: none;
@menuFontWeight: @normal;
@menuBorderWidth: 1px;
@menuBorder: @menuBorderWidth solid @borderColor;
@menuBoxShadow: @subtleShadow;
@menuBorderRadius: @defaultBorderRadius;
@menuMinHeight: (@menuItemVerticalPadding * 2) + 1em;

/* Menu Item */
@menuItemVerticalPadding: @relativeSmall;
@menuItemHorizontalPadding: @relativeLarge;
@menuItemTextTransform: none;
@itemTransition:
  background @defaultDuration @defaultEasing,
  box-shadow @defaultDuration @defaultEasing,
  color @defaultDuration @defaultEasing
;
@menuItemFontWeight: @normal;
@menuItemTextColor: @textColor;

/* Divider */
@menuDividerSize: 1px;
@menuDividerBackground: @internalBorderColor;

/* Sub Menu */
@menuSubMenuDistance: 0.5em;
@menuSubMenuMargin: @menuSubMenuDistance -@menuItemHorizontalPadding 0em;
@menuSubMenuFontSize: @relativeTiny;
@menuSubMenuTextColor: rgba(0, 0, 0, 0.5);

@menuSubMenuIndent: 0em;
@menuSubMenuHorizontalPadding: (@menuItemHorizontalPadding / @tinySize) + @menuSubMenuIndent;
@menuSubMenuVerticalPadding: 0.5em;

/* Text Item */
@menuTextLineHeight: 1.3;

/*--------------
    Elements
---------------*/

/* Icon */
@menuIconFloat: none;
@menuIconMargin: 0em @relative5px 0em 0em;
@menuIconOpacity: 0.9;

/* Dropdown Icon */
@menuDropdownIconFloat: right;
@menuDropdownIconDistance: 1em;

/* Header */
@menuHeaderBackground: '';
@menuHeaderWeight: @bold;
@menuHeaderTextTransform: @normal;

/* Vertical Icon */
@menuVerticalIconFloat: right;
@menuVerticalIconMargin: 0em 0em 0em 0.5em;

/* Vertical Header */
@menuVerticalHeaderMargin: 0em 0em 0.5em;
@menuVerticalHeaderFontSize: @relativeMedium;
@menuVerticalHeaderFontWeight: @bold;

/* Pointing Arrow */
@menuArrowSize: @relative8px;
@menuArrowBorderWidth: 1px;
@menuArrowBorder: @menuArrowBorderWidth solid @solidBorderColor;
@menuArrowTransition: background @defaultDuration @defaultEasing;
@menuArrowZIndex: 2;

@menuArrowHoverColor: #F2F2F2;
@menuArrowActiveColor: @menuArrowHoverColor;
@menuArrowActiveHoverColor: @menuArrowActiveColor;

@menuArrowVerticalHoverColor: @menuArrowHoverColor;
@menuArrowVerticalActiveColor: @menuArrowActiveColor;
@menuArrowVerticalSubMenuColor: @white;

/*--------------
    Couplings
---------------*/

/* Button */
@menuButtonSize: @relativeMedium;
@menuButtonOffset: 0em;
@menuButtonMargin: -0.5em 0em;
@menuButtonVerticalPadding: @relativeMini;

/* Input */
@menuInputSize: @relativeMedium;
@menuInputVerticalMargin: -0.5em;
@menuInputOffset: 0em;
@menuInputVerticalPadding: @relative8px;

/* Image */
@menuImageMargin: -0.3em 0em;
@menuImageWidth: 2.5em;
@menuVerticalImageWidth: auto;

/* Label */
@menuLabelOffset: -0.15em;
@menuLabelBackground: #999999;
@menuLabelTextColor: @white;

@menuLabelTextMargin: 1em;
@menuLabelVerticalPadding: 0.3em;
@menuLabelHorizontalPadding: @relativeMini;

@menuLabelAndIconFloat: none;
@menuLabelAndIconMargin: 0em 0.5em 0em 0em;

/* Dropdown in Menu */
@menuDropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);

@menuDropdownBackground: #FFFFFF;
@menuDropdownMenuDistance: 0em;
@menuDropdownMenuBorderRadius: @menuBorderRadius;

@menuDropdownItemFontSize: @relativeMedium;
@menuDropdownItemPadding: @relativeMini @relativeLarge;
@menuDropdownItemBackground: transparent;
@menuDropdownItemColor: @textColor;
@menuDropdownItemTextTransform: none;
@menuDropdownItemFontWeight: @normal;
@menuDropdownItemBoxShadow: none;
@menuDropdownItemTransition: none;

@menuDropdownItemIconFloat: none;
@menuDropdownItemIconFontSize: @relativeMedium;
@menuDropdownItemIconMargin: 0em 0.75em 0em 0em;

@menuDropdownHoveredItemBackground: @transparentBlack;
@menuDropdownHoveredItemColor: @selectedTextColor;

/* Dropdown Variations */
@menuDropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
@menuSecondaryDropdownMenuDistance: @relative5px;
@menuPointingDropdownMenuDistance: 0.75em;
@menuInvertedSelectionDropdownColor: @invertedTextColor;

/*--------------
     States
---------------*/

/* Hovered Item */
@menuHoverItemBackground: @subtleTransparentBlack;
@menuHoverItemTextColor: @selectedTextColor;

/* Pressed Item */
@menuPressedItemBackground: @subtleTransparentBlack;
@menuPressedItemTextColor: @menuHoverItemTextColor;


/* Active Item */
@menuActiveItemBackground: @transparentBlack;
@menuActiveItemTextColor: @selectedTextColor;
@menuActiveItemFontWeight: @normal;
@menuActiveIconOpacity: 1;
@menuActiveItemBoxShadow: none;

/* Active Hovered Item */
@menuActiveHoverItemBackground: @transparentBlack;
@menuActiveHoverItemColor: @selectedTextColor;

/* Selected Dropdown */
@menuDropdownSelectedItemBackground: @transparentBlack;
@menuDropdownSelectedItemColor: @selectedTextColor;

/* Active Dropdown */
@menuDropdownActiveItemBackground: @subtleTransparentBlack;
@menuDropdownActiveItemColor: @selectedTextColor;
@menuDropdownActiveItemFontWeight: @bold;

/* Active Sub Menu */
@menuSubMenuActiveBackground: transparent;
@menuSubMenuActiveTextColor: @menuActiveItemTextColor;
@menuSubMenuActiveFontWeight: @bold;


/*--------------
     Types
---------------*/

/* Vertical */
@menuVerticalBoxShadow: @menuBoxShadow;
@menuVerticalPointerWidth: 2px;
@menuVerticalBackground: #FFFFFF;
@menuVerticalItemBackground: none;
@menuVerticalDividerBackground: @menuDividerBackground;

@menuVerticalActiveBoxShadow: none;


/* Secondary */
@menuSecondaryBackground: none;
@menuSecondaryMargin: 0em -@menuSecondaryItemSpacing;
@menuSecondaryItemBackground: none;
@menuSecondaryItemSpacing: @relative5px;
@menuSecondaryItemMargin: 0em @menuSecondaryItemSpacing;
@menuSecondaryItemVerticalPadding: @relativeMini;
@menuSecondaryItemHorizontalPadding: @relativeSmall;
@menuSecondaryItemPadding: @relativeMini @relativeSmall;
@menuSecondaryItemBorderRadius: @defaultBorderRadius;
@menuSecondaryItemTransition: color @defaultDuration @defaultEasing;
@menuSecondaryItemColor: @unselectedTextColor;

@menuSecondaryHoverItemBackground: @transparentBlack;
@menuSecondaryHoverItemColor: @selectedTextColor;

@menuSecondaryActiveItemBackground: @transparentBlack;
@menuSecondaryActiveItemColor: @selectedTextColor;
@menuSecondaryActiveHoverItemBackground: @transparentBlack;
@menuSecondaryActiveHoverItemColor: @selectedTextColor;

@menuSecondaryActiveHoveredItemBackground: @transparentBlack;
@menuSecondaryActiveHoveredItemColor: @selectedTextColor;

@menuSecondaryHeaderBackground: none transparent;
@menuSecondaryHeaderBorder: none;

@menuSecondaryItemVerticalSpacing: @menuSecondaryItemSpacing;
@menuSecondaryVerticalItemMargin: 0em 0em @menuSecondaryItemVerticalSpacing;
@menuSecondaryVerticalItemBorderRadius: @defaultBorderRadius;

@menuSecondaryMenuSubMenuMargin: 0em -@menuSecondaryItemHorizontalPadding;
@menuSecondaryMenuSubMenuItemMargin: 0em;
@menuSecondarySubMenuHorizontalPadding: (@menuItemHorizontalPadding / @tinySize) + @menuSubMenuIndent;
@menuSecondaryMenuSubMenuItemPadding: @relative7px @menuSecondarySubMenuHorizontalPadding;

/* Pointing */
@menuSecondaryPointingBorderWidth: 2px;
@menuSecondaryPointingBorderColor: @borderColor;
@menuSecondaryPointingItemVerticalPadding: @relativeTiny;
@menuSecondaryPointingItemHorizontalPadding: @relativeLarge;

@menuSecondaryPointingHoverTextColor: @textColor;

@menuSecondaryPointingActiveBorderColor: @black;
@menuSecondaryPointingActiveTextColor: @selectedTextColor;
@menuSecondaryPointingActiveFontWeight: @bold;

@menuSecondaryPointingActiveDropdownBorderColor: transparent;

@menuSecondaryPointingActiveHoverBorderColor: @menuSecondaryPointingActiveBorderColor;
@menuSecondaryPointingActiveHoverTextColor: @menuSecondaryPointingActiveTextColor;

@menuSecondaryPointingHeaderColor: @darkTextColor;
@menuSecondaryVerticalPointingItemMargin: 0em -@menuSecondaryPointingBorderWidth 0em 0em;


/* Inverted Secondary */
@menuSecondaryInvertedColor: @invertedLightTextColor;

@menuSecondaryInvertedHoverBackground: @transparentWhite;
@menuSecondaryInvertedHoverColor: @invertedSelectedTextColor;

@menuSecondaryInvertedActiveBackground: @strongTransparentWhite;
@menuSecondaryInvertedActiveColor: @invertedSelectedTextColor;

/* Inverted Pointing */
@menuSecondaryPointingInvertedBorderColor: @whiteBorderColor;
@menuSecondaryPointingInvertedItemTextColor: @invertedTextColor;
@menuSecondaryPointingInvertedItemHeaderColor: @white;
@menuSecondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
@menuSecondaryPointingInvertedActiveBorderColor: @white;
@menuSecondaryPointingInvertedActiveColor: @invertedSelectedTextColor;


/* Tiered */
@menuTieredActiveItemBackground: #FCFCFC;
@menuTieredActiveMenuBackground: #FCFCFC;

@menuTieredSubMenuTextTransform: @normal;
@menuTieredSubMenuFontWeight: @normal;

@menuTieredSubMenuColor: @lightTextColor;

@menuTieredSubMenuHoverBackground: none transparent;
@menuTieredSubMenuHoverColor: @hoveredTextColor;

@menuTieredSubMenuActiveBackground: none transparent;
@menuTieredSubMenuActiveColor: @selectedTextColor;

@menuTieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);


/* Icon */
@menuIconMenuTextAlign: center;
@menuIconMenuItemColor: @black;
@menuIconMenuInvertedItemColor: @white;


/* Tabular */
@menuTabularBorderColor: @solidBorderColor;
@menuTabularBackgroundColor: transparent;
@menuTabularBackground: none @menuTabularBackgroundColor;
@menuTabularBorderWidth: 1px;
@menuTabularOppositeBorderWidth: @menuTabularBorderWidth + 1px;
@menuTabularVerticalPadding: @menuItemVerticalPadding;
@menuTabularHorizontalPadding: @relativeHuge;
@menuTabularBorderRadius: @defaultBorderRadius;
@menuTabularTextColor: @menuItemTextColor;

@menuTabularHoveredTextColor: @hoveredTextColor;

@menuTabularVerticalBackground: none @menuTabularBackgroundColor;

@menuTabularFluidOffset: 1px;
@menuTabularFluidWidth: ~"calc(100% + "(@menuTabularFluidOffset * 2)~")";

@menuTabularActiveBackground: none @white;
@menuTabularActiveColor: @selectedTextColor;
@menuTabularActiveBoxShadow: none;
@menuTabularActiveWeight: @bold;



/* Pagination */
@menuPaginationMinWidth: 3em;
@menuPaginationActiveBackground: @transparentBlack;
@menuPaginationActiveTextColor: @selectedTextColor;

/* Labeled Icon */
@menuLabeledIconItemHorizontalPadding: @relativeMassive;
@menuLabeledIconSize: @relativeMassive;
@menuLabeledIconMinWidth: 6em;
@menuLabeledIconTextMargin: 0.5rem;


/* Text */
@menuTextMenuItemSpacing: @relative7px;
@menuTextMenuMargin: @relativeMedium -(@menuTextMenuItemSpacing);
@menuTextMenuItemColor: @mutedTextColor;
@menuTextMenuItemFontWeight: @normal;
@menuTextMenuItemMargin: 0em 0em;
@menuTextMenuItemPadding: @relative5px @menuTextMenuItemSpacing;
@menuTextMenuItemTransition: opacity @defaultDuration @defaultEasing;

@menuTextMenuSubMenuMargin: 0em;
@menuTextMenuSubMenuItemMargin: 0em;
@menuTextMenuSubMenuItemPadding: @relative7px 0em;

@menuTextMenuActiveItemFontWeight: @normal;
@menuTextMenuActiveItemColor: @selectedTextColor;

@menuTextMenuHeaderSize: @relativeSmall;
@menuTextMenuHeaderColor: @darkTextColor;
@menuTextMenuHeaderFontWeight: @bold;
@menuTextMenuHeaderTextTransform: uppercase;

@menuTextVerticalMenuMargin: @relativeMedium 0em;
@menuTextVerticalMenuHeaderMargin: @relative8px 0em @relative10px;
@menuTextVerticalMenuItemMargin: @relative8px 0em;

@menuTextVerticalMenuIconFloat: none;
@menuTextVerticalMenuIconMargin: @menuIconMargin;


/*--------------
   Variations
---------------*/

/* Inverted */
@menuInvertedBackground: @black;
@menuInvertedBoxShadow: none;
@menuInvertedBorder: 0px solid transparent;
@menuInvertedHeaderBackground: transparent;

@menuInvertedItemBackground: transparent;
@menuInvertedItemTextColor: @invertedTextColor;

/* Inverted Sub Menu */
@menuInvertedSubMenuBackground: transparent;
@menuInvertedSubMenuColor: @invertedUnselectedTextColor;

/* Inverted Hover */
@menuInvertedHoverBackground: @transparentWhite;
@menuInvertedHoverColor: @invertedSelectedTextColor;

@menuInvertedSubMenuHoverBackground: transparent;
@menuInvertedSubMenuHoverColor: @invertedSelectedTextColor;

/* Pressed */
@menuInvertedMenuPressedBackground: @transparentWhite;
@menuInvertedMenuPressedColor: @invertedSelectedTextColor;

/* Inverted Active */
@menuInvertedActiveBackground: @strongTransparentWhite;
@menuInvertedActiveColor: @invertedSelectedTextColor;
@menuInvertedArrowActiveColor: #3D3E3F;

/* Inverted Active Hover  */
@menuInvertedActiveHoverBackground: @menuInvertedActiveBackground;
@menuInvertedActiveHoverColor: @white;
@menuInvertedArrowActiveHoverColor: @menuInvertedArrowActiveColor;

@menuInvertedSubMenuActiveBackground: transparent;
@menuInvertedSubMenuActiveColor: @white;

/* Inverted Menu Divider */
@menuInvertedDividerBackground: rgba(255, 255, 255, 0.08);
@menuInvertedVerticalDividerBackground: @menuInvertedDividerBackground;

/* Inverted Colored */
@menuInvertedColoredDividerBackground: @menuDividerBackground;
@menuInvertedColoredActiveBackground: @strongTransparentBlack;

/* Fixed */
@menuFixedPrecedingGridMargin: 2.75rem;

/* Floated */
@menuFloatedDistance: 0.5rem;

/* Attached */
@menuAttachedTopOffset: 0px;
@menuAttachedBottomOffset: 0px;
@menuAttachedHorizontalOffset: -@menuBorderWidth;
@menuAttachedWidth: ~"calc(100% + "-@menuAttachedHorizontalOffset * 2~")";
@menuAttachedBoxShadow: none;
@menuAttachedBorder: @menuBorderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
  @menuBoxShadow,
  @menuAttachedBoxShadow
;

/* Resize large sizes */
@menuMini: @11px;
@menuTiny: @12px;
@menuSmall: @13px;
@menuLarge: @15px;
@menuBig: @16px;
@menuHuge: @17px;
@menuMassive: @18px;

/* Sizes */
@menuMiniWidth: 9rem;
@menuTinyWidth: 11rem;
@menuSmallWidth: 13rem;
@menuMediumWidth: 15rem;
@menuLargeWidth: 18rem;
@menuBigWidth: 20rem;
@menuHugeWidth: 22rem;
@menuMassiveWidth: 25rem;