/*******************************
            Dropdown
*******************************/

/*-------------------
       Element
--------------------*/

@transition:
  box-shadow @defaultDuration @defaultEasing,
  width @defaultDuration @defaultEasing
;
@dropdownBorderRadius: @defaultBorderRadius;

@dropdownRaisedShadow: 0px 2px 3px 0px @borderColor;

/*-------------------
       Content
--------------------*/

/* Icon */
@dropdownDropdownIconSize: @relative12px;
@dropdownDropdownIconMargin: 0em 0em 0em 1em;

/* Current Text */
@dropdownTextTransition: none;

/* Menu */
@dropdownMenuBackground: #FFFFFF;
@dropdownMenuMargin: 0em;
@dropdownMenuPadding: 0em 0em;
@dropdownMenuTop: 100%;
@dropdownMenuTextAlign: left;

@dropdownMenuBorderWidth: 1px;
@dropdownMenuBorderColor: @borderColor;
@dropdownMenuBorder: @dropdownMenuBorderWidth solid @dropdownMenuBorderColor;
@dropdownMenuBoxShadow: @dropdownRaisedShadow;
@dropdownMenuBorderRadius: @dropdownBorderRadius;
@dropdownMenuTransition: opacity @defaultDuration @defaultEasing;
@dropdownMenuMinWidth: ~"calc(100% + "(@dropdownMenuBorderWidth * 2)~")";
@dropdownMenuZIndex: 11;

/* Text */
@dropdownTextLineHeight: 1em;
@dropdownTextLineHeightOffset: (@dropdownTextLineHeight - 1em);
@dropdownTextCursorSpacing: 1px;

/* Menu Item */
@dropdownItemFontSize: @medium;
@dropdownItemTextAlign: left;
@dropdownItemBorder: none;
@dropdownItemHeight: auto;
@dropdownItemDivider: none;
@dropdownItemColor: @textColor;
@dropdownItemVerticalPadding: @mini;
@dropdownItemHorizontalPadding: @large;
@dropdownItemPadding: @dropdownItemVerticalPadding @dropdownItemHorizontalPadding;
@dropdownItemFontWeight: @normal;
@dropdownItemLineHeight: 1em;
@dropdownItemLineHeightOffset: (@dropdownItemLineHeight - 1em);
@dropdownItemTextTransform: none;
@dropdownItemBoxShadow: none;

/* Sub Menu */
@dropdownSubMenuTop: 0%;
@dropdownSubMenuLeft: 100%;
@dropdownSubMenuRight: auto;
@dropdownSubMenuDistanceAway: -0.5em;
@dropdownSubMenuMargin: 0em 0em 0em @dropdownSubMenuDistanceAway;
@dropdownSubMenuBorderRadius: @dropdownBorderRadius;
@dropdownSubMenuZIndex: 21;

/* Menu Header */
@dropdownMenuHeaderColor: @darkTextColor;
@dropdownMenuHeaderFontSize: @relative11px;
@dropdownMenuHeaderFontWeight: @bold;
@dropdownMenuHeaderTextTransform: uppercase;
@dropdownMenuHeaderMargin: 1rem 0rem 0.75rem;
@dropdownMenuHeaderPadding: 0em @dropdownItemHorizontalPadding;

/* Menu Divider */
@dropdownMenuDividerMargin: 0.5em 0em;
@dropdownMenuDividerColor: @internalBorderColor;
@dropdownMenuDividerSize: 1px;
@dropdownMenuDividerBorder: @dropdownMenuDividerSize solid @dropdownMenuDividerColor;

/* Menu Input */
@dropdownMenuInputMargin: @large @mini;
@dropdownMenuInputMinWidth: 10rem;
@dropdownMenuInputVerticalPadding: 0.5em;
@dropdownMenuInputHorizontalPadding: @inputHorizontalPadding;
@dropdownMenuInputPadding: @dropdownMenuInputVerticalPadding @dropdownMenuInputHorizontalPadding;

/* Menu Image */
@dropdownMenuImageMaxHeight: 2em;
@dropdownMenuImageVerticalMargin: -(@dropdownMenuImageMaxHeight - 1em) / 2;

/* Item Sub-Element */
@dropdownItemElementFloat: none;
@dropdownItemElementDistance: @mini;

/* Sub-Menu Dropdown Icon */
@dropdownItemDropdownIconDistance: 1em;
@dropdownItemDropdownIconFloat: right;
@dropdownItemDropdownIconMargin: @dropdownItemLineHeightOffset 0em 0em @dropdownItemDropdownIconDistance;

/* Description */
@dropdownItemDescriptionFloat: right;
@dropdownItemDescriptionMargin: 0em 0em 0em 1em;
@dropdownItemDescriptionColor: @lightTextColor;

/* Message */
@dropdownMessagePadding: @dropdownSelectionItemPadding;
@dropdownMessageFontWeight: @normal;
@dropdownMessageColor: @unselectedTextColor;

/* Floated Content */
@dropdownFloatedDistance: 1em;

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

/*------------
   Selection
--------------*/

@dropdownSelectionMinWidth: 14em;
@dropdownSelectionVerticalPadding: @inputVerticalPadding;
@dropdownSelectionHorizontalPadding: @inputHorizontalPadding;
@dropdownSelectionBorderEmWidth:  @relative1px;
@dropdownSelectionMinHeight: @inputLineHeight + (@dropdownSelectionVerticalPadding * 2) - @dropdownSelectionBorderEmWidth;
@dropdownSelectionBackground: @inputBackground;
@dropdownSelectionDisplay: inline-block;
@dropdownSelectionIconDistance: @inputHorizontalPadding + @glyphWidth;
@dropdownSelectionPadding: @dropdownSelectionVerticalPadding @dropdownSelectionIconDistance @dropdownSelectionVerticalPadding @dropdownSelectionHorizontalPadding;
@dropdownSelectionZIndex: 10;

@dropdownSelectionItemDivider: 1px solid @solidInternalBorderColor;
@dropdownSelectionMessagePadding: @dropdownSelectionItemPadding;

/* <select> */
@dropdownSelectBorder: 1px solid @borderColor;
@dropdownSelectPadding: 0.5em;
@dropdownSelectVisibility: visible;
@dropdownSelectHeight: 38px;

@dropdownSelectionTextColor: @textColor;

@dropdownSelectionTextUnderlayIconOpacity: @disabledOpacity;
@dropdownSelectionTextUnderlayColor: @inputPlaceholderFocusColor;

@dropdownSelectionBoxShadow: none;
@dropdownSelectionBorderColor: @borderColor;
@dropdownSelectionBorder: 1px solid @dropdownSelectionBorderColor;
@dropdownSelectionBorderRadius: @dropdownBorderRadius;

@dropdownSelectionIconOpacity: 0.8;
@dropdownSelectionIconZIndex: 3;
@dropdownSelectionIconHitbox: @dropdownSelectionVerticalPadding;
@dropdownSelectionIconMargin: -@dropdownSelectionIconHitbox;
@dropdownSelectionIconPadding: @dropdownSelectionIconHitbox / @dropdownDropdownIconSize;
@dropdownSelectionIconTransition: opacity @defaultDuration @defaultEasing;

@dropdownSelectionMenuBorderRadius: 0em 0em @dropdownBorderRadius @dropdownBorderRadius;
@dropdownSelectionMenuBoxShadow: @dropdownRaisedShadow;
@dropdownSelectionMenuItemBoxShadow: none;

@dropdownSelectionItemHorizontalPadding: @dropdownItemHorizontalPadding;
@dropdownSelectionItemVerticalPadding: @dropdownItemVerticalPadding;
@dropdownSelectionItemPadding: @dropdownSelectionItemVerticalPadding @dropdownSelectionItemHorizontalPadding;

@dropdownSelectionTransition: @transition;
@dropdownSelectionMenuTransition: @dropdownMenuTransition;

/* Responsive */
@dropdownSelectionMobileMaxItems: 3;
@dropdownSelectionTabletMaxItems: 4;
@dropdownSelectionComputerMaxItems: 6;
@dropdownSelectionWidescreenMaxItems: 8;

/* Derived */
@dropdownSelectedBorderEMWidth: 0.1em; /* 1px / em size */
@dropdownSelectionItemHeight: (@dropdownSelectionItemVerticalPadding * 2) + @dropdownItemLineHeight + @dropdownSelectedBorderEMWidth;
@dropdownSelectionMobileMaxMenuHeight: (@dropdownSelectionItemHeight * @dropdownSelectionMobileMaxItems);
@dropdownSelectionTabletMaxMenuHeight: (@dropdownSelectionItemHeight * @dropdownSelectionTabletMaxItems);
@dropdownSelectionComputerMaxMenuHeight: (@dropdownSelectionItemHeight * @dropdownSelectionComputerMaxItems);
@dropdownSelectionWidescreenMaxMenuHeight: (@dropdownSelectionItemHeight * @dropdownSelectionWidescreenMaxItems);

/* Hover */
@dropdownSelectionHoverBorderColor: @selectedBorderColor;
@dropdownSelectionHoverBoxShadow: none;

/* Focus */
@dropdownSelectionFocusBorderColor: @focusedFormMutedBorderColor;
@dropdownSelectionFocusBoxShadow: none;
@dropdownSelectionFocusMenuBoxShadow: @dropdownRaisedShadow;

/* Visible */
@dropdownSelectionVisibleTextFontWeight: @normal;
@dropdownSelectionVisibleTextColor: @hoveredTextColor;

@dropdownSelectionVisibleBorderColor: @focusedFormMutedBorderColor;
@dropdownSelectionVisibleBoxShadow: @dropdownRaisedShadow;
@dropdownSelectionVisibleMenuBoxShadow: @dropdownRaisedShadow;

/* Visible Hover */
@dropdownSelectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
@dropdownSelectionActiveHoverBoxShadow: @dropdownSelectionVisibleBoxShadow;
@dropdownSelectionActiveHoverMenuBoxShadow: @dropdownSelectionVisibleMenuBoxShadow;

@dropdownSelectionVisibleConnectingBorder: 0em;
@dropdownSelectionVisibleIconOpacity: 1;

/*--------------
     Search
--------------*/

@dropdownSearchMinWidth: '';

/* Search Selection */
@dropdownSearchSelectionLineHeight: @inputLineHeight;
@dropdownSearchSelectionLineHeightOffset: ((@dropdownSearchSelectionLineHeight - 1em) / 2);
@dropdownSearchSelectionVerticalPadding: (@dropdownSelectionVerticalPadding - @dropdownSearchSelectionLineHeightOffset);
@dropdownSearchSelectionHorizontalPadding: @dropdownSelectionHorizontalPadding;
@dropdownSearchSelectionInputPadding: @dropdownSearchSelectionVerticalPadding @dropdownSelectionIconDistance @dropdownSearchSelectionVerticalPadding @dropdownSearchSelectionHorizontalPadding;

@dropdownSearchMobileMaxMenuHeight: @dropdownSelectionMobileMaxMenuHeight;
@dropdownSearchTabletMaxMenuHeight: @dropdownSelectionTabletMaxMenuHeight;
@dropdownSearchComputerMaxMenuHeight: @dropdownSelectionComputerMaxMenuHeight;
@dropdownSearchWidescreenMaxMenuHeight: @dropdownSelectionWidescreenMaxMenuHeight;

/* Inline */
@dropdownInlineIconMargin: 0em @relative7px 0em @relative3px;
@dropdownInlineTextColor: inherit;
@dropdownInlineTextFontWeight: @bold;
@dropdownInlineMenuDistance: @relative3px;
@dropdownInlineMenuBorderRadius: @dropdownBorderRadius;


/*--------------
    Multiple
--------------*/

/* Split Actual Padding Between Child and Parent (allows for label spacing) */
@dropdownMultipleSelectionVerticalPadding: (@dropdownSearchSelectionVerticalPadding * (1/3));
@dropdownMultipleSelectionLeftPadding: @relative5px;
@dropdownMultipleSelectionRightPadding: @dropdownSelectionIconDistance;
@dropdownMultipleSelectionPadding: @dropdownMultipleSelectionVerticalPadding @dropdownMultipleSelectionRightPadding @dropdownMultipleSelectionVerticalPadding @dropdownMultipleSelectionLeftPadding;

/* Child Elements */
@dropdownMultipleSelectionChildVerticalMargin: (@dropdownSearchSelectionVerticalPadding * (2/3));
@dropdownMultipleSelectionChildLeftMargin: (@inputHorizontalPadding - @dropdownMultipleSelectionLeftPadding);
@dropdownMultipleSelectionChildMargin: @dropdownMultipleSelectionChildVerticalMargin 0em @dropdownMultipleSelectionChildVerticalMargin @dropdownMultipleSelectionChildLeftMargin;
@dropdownMultipleSelectionChildLineHeight: @relative17px;
@dropdownMultipleSelectionSearchStartWidth: (@glyphWidth * 2);

/* Dropdown Icon */
@dropdownMultipleSelectionDropdownIconMargin: '';
@dropdownMultipleSelectionDropdownIconPadding: '';

@dropdownMultipleSelectionSearchAfterLabelDistance: @relative2px;

/* Selection Label */
@dropdownLabelSize: @relativeMedium;
@dropdownLabelHorizontalMargin: @4px;
@dropdownLabelVerticalMargin: @2px;
@dropdownLabelMargin: @dropdownLabelVerticalMargin @dropdownLabelHorizontalMargin @dropdownLabelVerticalMargin 0em;
@dropdownLabelBorderWidth: 1px;
@dropdownLabelBoxShadow: 0px 0px 0px @dropdownLabelBorderWidth @borderColor inset;

@dropdownLabelVerticalPadding: @relative5px;
@dropdownLabelHorizontalPadding: @relativeMini;
@dropdownLabelPadding: @dropdownLabelVerticalPadding @dropdownLabelHorizontalPadding;

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

/* Hovered */
@dropdownHoveredItemBackground: @transparentBlack;
@dropdownHoveredItemColor: @selectedTextColor;
@dropdownHoveredZIndex: @dropdownMenuZIndex + 2;

/* Default Text */
@dropdownDefaultTextColor: @inputPlaceholderColor;
@dropdownDefaultTextFocusColor: @inputPlaceholderFocusColor;

/* Loading */
@dropdownLoadingZIndex: -1;

/* Active Menu Item */
@dropdownActiveItemZIndex: @dropdownMenuZIndex + 1;
@dropdownActiveItemBackground: transparent;
@dropdownActiveItemBoxShadow: none;
@dropdownActiveItemFontWeight: @bold;
@dropdownActiveItemColor: @selectedTextColor;

/* Selected */
@dropdownSelectedBackground: @subtleTransparentBlack;
@dropdownSelectedColor: @selectedTextColor;

/* Error */
@dropdownErrorLabelBackground: #EACBCB;
@dropdownErrorLabelColor: @errorTextColor;

@dropdownErrorItemTextColor: @errorTextColor;
@dropdownErrorItemHoverBackground: #FFF2F2;
@dropdownErrorItemActiveBackground: #FDCFCF;

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

/* Scrolling */
@dropdownScrollingMenuWidth: 100%;
@dropdownScrollingMenuItemBorder: none;
@dropdownScrollingMenuRightItemPadding: ~"calc("(@dropdownItemHorizontalPadding)~" + "(@scrollbarWidth)~")";

@dropdownScrollingMobileMaxItems: 4;
@dropdownScrollingTabletMaxItems: 6;
@dropdownScrollingComputerMaxItems: 8;
@dropdownScrollingWidescreenMaxItems: 12;

@dropdownScrollingBorderEMWidth: 0em; /* 0px / em size */
@dropdownScrollingItemHeight: (@dropdownItemVerticalPadding * 2) + @dropdownItemLineHeight + @dropdownScrollingBorderEMWidth;
@dropdownScrollingMobileMaxMenuHeight: (@dropdownScrollingItemHeight * @dropdownScrollingMobileMaxItems);
@dropdownScrollingTabletMaxMenuHeight: (@dropdownScrollingItemHeight * @dropdownScrollingTabletMaxItems);
@dropdownScrollingComputerMaxMenuHeight: (@dropdownScrollingItemHeight * @dropdownScrollingComputerMaxItems);
@dropdownScrollingWidescreenMaxMenuHeight: (@dropdownScrollingItemHeight * @dropdownSelectionWidescreenMaxItems);

/* Upward */
@dropdownUpwardSelectionVisibleBorderRadius: @dropdownSelectionVisibleConnectingBorder @dropdownSelectionVisibleConnectingBorder @dropdownBorderRadius @dropdownBorderRadius;
@dropdownUpwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownUpwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownUpwardMenuBorderRadius: @dropdownBorderRadius @dropdownBorderRadius 0em 0em;
@dropdownUpwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
@dropdownUpwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownUpwardSelectionActiveHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
@dropdownUpwardSelectionActiveHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);

/* Flyout Direction */
@dropdownLeftMenuDropdownIconFloat: left;
@dropdownLeftMenuDropdownIconMargin: @dropdownItemLineHeightOffset 0em 0em 0em;

/* Left */
@dropdownLeftSubMenuBorderRadius: @dropdownBorderRadius;
@dropdownLeftSubMenuMargin: 0em @dropdownSubMenuDistanceAway 0em 0em;

/* Simple */
@dropdownSimpleTransitionDuration: @defaultDuration;
@dropdownSimpleTransition: opacity @dropdownSimpleTransitionDuration @defaultEasing;

/* Floating */
@dropdownFloatingMenuDistance: 0.5em;
@dropdownFloatingMenuBoxShadow: @floatingShadow;
@dropdownFloatingMenuBorderRadius: @dropdownBorderRadius;

/* Pointing */
@dropdownPointingArrowOffset: -(@dropdownPointingArrowSize / 2);
@dropdownPointingArrowDistanceFromEdge: 1em;

@dropdownPointingArrowBackground: @white;
@dropdownPointingArrowZIndex: 2;
@dropdownPointingArrowBoxShadow: -@dropdownMenuBorderWidth -@dropdownMenuBorderWidth 0px 0px @dropdownMenuBorderColor;
@dropdownPointingArrowSize: @relative7px;

@dropdownPointingMenuDistance: @mini;
@dropdownPointingMenuBorderRadius: @dropdownBorderRadius;
@dropdownPointingArrowBoxShadow: -@dropdownMenuBorderWidth -@dropdownMenuBorderWidth 0px 0px @dropdownMenuBorderColor;

/* Pointing Upward */
@dropdownPointingUpwardMenuBorderRadius: @dropdownBorderRadius;
@dropdownPointingUpwardArrowBoxShadow: @dropdownMenuBorderWidth @dropdownMenuBorderWidth 0px 0px @dropdownMenuBorderColor;