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

// (Color Variables)
// @transitionDuration
// @transitionEasing
// @iconWidth
// @borderColor
// @textColor, @invertedTextColor

/*-------------------
       Button
--------------------*/

@verticalMargin: 0em;
@horizontalMargin: 0.25em;
@textTransform: none;

@fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);
@textShadow: none;
@invertedTextShadow: none;

@borderRadius: 0.25em;

@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
@boxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
;

/* transitions */
@transition:
  opacity @transitionDuration @transitionEasing,
  background-color @transitionDuration @transitionEasing,
  color @transitionDuration @transitionEasing,
  background @transitionDuration @transitionEasing,
  box-shadow @transitionDuration @transitionEasing
;

/* Padding */
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;


/* Shadow */
@shadowDistance: 0em;
@shadowOffset: (@shadowDistance / 2);

/* Icon */
@iconMargin: 0.6em;

/* Loader */
@loaderPath: "@{imagePath}/loader-mini.gif";
@hugeLoaderPath: "@{imagePath}/loader-small.gif";
@massiveLoaderPath: "@{imagePath}/loader-medium.gif";

/*-------------------
        Group
--------------------*/

@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;


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

@hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
@hoverBoxShadow: '';
@iconHoverOpacity: 0.85;

@focusBackgroundColor: '';
@focusBackgroundImage: '';
@focusBoxShadow: 0 0 1px rgba(81, 167, 232, 0.8) inset, 0 0 3px 2px rgba(81, 167, 232, 0.8);
@iconFocusOpacity: 0.85;

@downBackgroundColor: #F1F1F1;
@downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;

@activeBackgroundColor: #DDDDDD;
@activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;

@loadingBackgroundColor: #FFFFFF;

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

/* Or */
@orWidth: 0.3em;
@orHeight: 1.1em;

@orVerticalOffset: -0.1em;
@orHorizontalOffset: -0.9em;

@orTextStyle: normal;
@orTextWeight: bold;

@orCircleSize: 1.8em;
@orLineHeight: 1.6;
@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

@orSpacerHeight: 0.5em;
@orSpacerColor: @white;

/* Icon */
@iconButtonOpacity: 0.9;

/* Labeled Icon */
@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
@labeledIconBorder: rgba(0, 0, 0, 0.05);

@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;

/* Basic */
@basicBoxShadow: 0px 0px 0px 1px @borderColor;
@basicIconOffset: 0.05em;
@basicLoadingColor: #FFFFFF;

@basicHoverBackground: none transparent;
@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);

@basicDownBackground: rgba(0, 0, 0, 0.02);
@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);

@basicActiveBackground: @transparentBlack;
@basicActiveColor: @selectedTextColor;

@basicGroupBorder: 1px solid @borderColor;
@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;

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

/* Colors */
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
@coloredBoxShadow: none;

/* Compact */
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);

/* Attached */
@attachedOffset: -1px;
@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@attachedHorizontalPadding: 0.75em;

/* Floated */
@floatedMargin: 0.25em;

/* Animated */
@animationDuration: 0.3s;
@animationEasing: ease;
@fadeScaleHigh: 1.5;
@fadeScaleLow: 0.75;

/* Sizing */
@mini: 0.7rem;
@tiny: 0.8rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@big: 1.25rem;
@huge: 1.375rem;
@massive: 1.5rem;