/*-------------------
    Globals Used
--------------------*/

// @textColor
// @borderColor
// @invertedUnselectedTextColor

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

@margin: 1rem 0rem;
@verticalPadding: 0.83em;
@horizontalPadding: 0.95em;

@background: #FFFFFF;
@itemBackground: none;

@fontWeight: normal;
@boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

@borderSize: 0em;

@transition:
  opacity 0.2s ease,
  background 0.2s ease,
  box-shadow 0.2s ease
;
@borderRadius: 0.1875rem;

@dividerSize: 1px;
@dividerBackground: linear-gradient(
  rgba(0, 0, 0, 0.05) 0%,
  rgba(0, 0, 0, 0.1) 50%,
  rgba(0, 0, 0, 0.05) 100%)
;

@headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold;

@textLineHeight: 1.3;

@transition:
  opacity 0.2s ease,
  background 0.2s ease,
  box-shadow 0.2s ease
;

@menuTextColor: @textColor;

/* Sub Menu */
@subMenuMargin: 0.5em;
@subMenuFontSize: 0.875rem;
@subMenuTextColor: @textColor;

@subMenuHorizontalPadding: 0.5rem;
@subMenuVerticalPadding: 1.5rem;

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

/* Icon */
@iconMargin: 0.5em;
@iconLabelMargin: 0.25em;

/* Header */
@headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold;
@headerTextTransform: normal;
@headerFontSize: 1rem;

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

/* Button */
@buttonOffset: -0.05em;
@buttonVerticalPadding: 0.55em;
@buttonSize: 0.875em;
@actionButtonHorizontalPadding: 0.8em;

@labeledButtonPadding: 0.6em;

/* Input */
@inputSize: 0.875em;
@inputVerticalMargin: -0.8em;
@inputOffset: -0.05em;
@inputVerticalPadding: 0.5em;
@inputIconOffset: -0.3em;

@smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em;

@largeInputOffset: -0.125em;
@largeInputVerticalPadding: 0.6em;

/* Label */
@labelOffset: -0.15em;
@labelBackground: rgba(0, 0, 0, 0.35);
@labelTextColor: #FFFFFF;

@labelTextMargin: 0.5em;
@labelVerticalPadding: 0.3em;
@labelHorizontalPadding: 0.8em;

/* Dropdown */
@dropdownBackground: #FFFFFF;
@dropdownMenuOffset: 1px;
@dropdownPointingDistance: 0.75em;
@dropdownTextColor: @textColor;
@dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor;
@dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;

/* Pointing Arrow */
@arrowSize: 0.6em;
@arrowOffset: -(@arrowSize / 2);
@arrowBorder: 1px solid rgba(0, 0, 0, 0.1);

@arrowHoverColor: #FAFAFA;
@arrowActiveColor: #FCFCFC;

@arrowVerticalHoverColor: #FAFAFA;
@arrowVerticalActiveColor: #FCFCFC;


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

@hoverBackground: @subtleTransparentBlack;
@hoverColor: @textColor;

@downBackground: @subtleTransparentBlack;

@activeBackground: @subtleTransparentBlack;
@activeColor: @darkTextColor;
@activeBorderSize: 0.2em;
@activeFontWeight: normal;

@activeHoverBackground: @hoverBackground;
@subMenuActiveColor: rgba(0, 0, 0, 0.03);

@loadingBackgroundColor: rgba(255, 255, 255, 0.8);
@loadingImage: "@{imagePath}/loader-large.gif";
@loadingPosition: 50% 50%;


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

/* Vertical */
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: linear-gradient(to right,
  rgba(0, 0, 0, 0.03) 0%,
  rgba(0, 0, 0, 0.1) 1.5em,
  rgba(0, 0, 0, 0.03) 100%)
;


/* Secondary */
@secondaryBackground: none;
@secondaryTransition: color 0.2s ease;

@secondaryBorderRadius: 0.3125em;

@secondaryMargin: 0.25em;
@secondaryVerticalMargin: 0.3em;
@secondaryVerticalPadding: 0.5em;
@secondaryHorizontalPadding: 1em;

@secondaryLinkOpacity: 0.8;

@secondaryHeaderBackground: none transparent;
@secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);

@secondaryActiveBackground: @transparentBlack;
@secondaryInvertedActiveBackground: @transparentWhite;


/* Pointing */
@secondaryPointingBorderWidth: 3px;
@secondaryPointingVerticalPadding: 0.6em;
@secondaryPointingHorizontalPadding: 0.95em;

@secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
@secondaryPointingHoverTextColor: @textColor;

@secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
@secondaryPointingActiveTextColor: @selectedTextColor;

@secondaryPointingHeaderColor: @selectedTextColor;

/* Tiered */
@tieredActiveItemBackground: #FCFCFC;
@tieredActiveMenuBackground: #FCFCFC;

@tieredSubMenuTextTransform: normal;
@tieredSubMenuFontWeight: normal;

@tieredSubMenuColor: @lightTextColor;

@tieredSubMenuHoverBackground: none transparent;
@tieredSubMenuHoverColor: @selectedTextColor;

@tieredSubMenuActiveBackground: none transparent;
@tieredSubMenuActiveColor: @selectedTextColor;

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

/* Tabular */
@tabularBorderColor: #DCDDDE;
@tabularBackgroundColor: #FFFFFF;
@tabularBorderWidth: 1px;
@tabularHorizontalPadding: 1.4em;
@tabularMenuTextColor: @menuTextColor;

@tabularActiveColor: @selectedTextColor;

@tabularMenuActiveBackground: #FFFFFF;
@tabularActiveWeight: bold;
@tabularBorderRadius: 5px;

/* Pagination */
@paginationMinWidth: 3em;
@paginationActiveBackground: rgba(0, 0, 0, 0.03);

/* Labeled Icon */
@labeledIconSize: 1.5em;
@labeledIconMinWidth: 6em;
@labeledIconTextMargin: 0.3em;

/* Text */
@textMenuTransition: opacity 0.2s ease;

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

/* Inverted */
@invertedBackground: none #333333;
@invertedBoxShadow: none;

@invertedHeaderBackground: rgba(0, 0, 0, 0.3);
@invertedSubMenuColor: @invertedLightTextColor;

/* Inverted Secondary */
@secondaryInvertedColor: @invertedLightTextColor;
@secondaryInvertedHoverColor: @invertedSelectedTextColor;

/* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
  rgba(255, 255, 255, 0.03) 0%,
  rgba(255, 255, 255, 0.1) 50%,
  rgba(255, 255, 255, 0.03) 100%)
;
@invertedVerticalDividerBackground: linear-gradient(to right,
  rgba(255, 255, 255, 0.03) 0%,
  rgba(255, 255, 255, 0.1) 50%,
  rgba(255, 255, 255, 0.03) 100%)
;

/* Fixed */
@fixedGridMargin: 2.75rem;

/* Attached */
@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;

/* Sizes */
@small: 0.875rem;
@smallSubMenu: 0.875rem;
@smallWidth: 13rem;

@medium: 1rem;
@mediumWidth: 15rem;

@large: 1.125rem;
@largeSubMenu: 0.875rem;
@largeDropdown: 1rem;
@largeWidth: 18rem;