/*******************************
            Button
*******************************/

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

/* Button */
@buttonVerticalMargin: 0em;
@buttonHorizontalMargin: 0.25em;
@buttonBackgroundColor: #E0E1E2;
@buttonBackgroundImage: none;
@buttonBackground: @buttonBackgroundColor @buttonBackgroundImage;
@buttonLineHeight: 1em;

/* Button defaults to using same height as input globally */
@buttonVerticalPadding: @inputVerticalPadding;
@buttonHorizontalPadding: 1.5em;

/* Text */
@buttonTextTransform: none;
@buttonTapColor: transparent;
@buttonFontFamily: @pageFont;
@buttonFontWeight: @bold;
@buttonTextColor: rgba(0, 0, 0, 0.6);
@buttonTextShadow: none;
@buttonInvertedTextShadow: @buttonTextShadow;
@buttonBorderRadius: @defaultBorderRadius;
@buttonVerticalAlign: baseline;

/* Internal Shadow */
@buttonShadowDistance: 0em;
@buttonShadowOffset: (@buttonShadowDistance / 2);
@buttonShadowBoxShadow: 0px -@buttonShadowDistance 0px 0px @borderColor inset;

/* Box Shadow */
@buttonBorderBoxShadowColor: transparent;
@buttonBorderBoxShadowWidth: 1px;
@buttonBorderBoxShadow: 0px 0px 0px @buttonBorderBoxShadowWidth @buttonBorderBoxShadowColor inset;
@boxShadow:
  @buttonBorderBoxShadow,
  @buttonShadowBoxShadow
;

/* Icon */
@buttonIconHeight: @relativeTiny;
@buttonIconOpacity: 0.8;
@buttonIconDistance: @relative6px;
@buttonIconColor: '';
@buttonIconTransition: opacity @defaultDuration @defaultEasing;
@buttonIconVerticalAlign: '';

@buttonIconMargin: 0em @buttonIconDistance 0em -(@buttonIconDistance / 2);
@buttonRightIconMargin: 0em -(@buttonIconDistance / 2) 0em @buttonIconDistance;

/* Loader */
@buttonInvertedLoaderFillColor: rgba(0, 0, 0, 0.15);

@transition:
  opacity @defaultDuration @defaultEasing,
  background-color @defaultDuration @defaultEasing,
  color @defaultDuration @defaultEasing,
  box-shadow @defaultDuration @defaultEasing,
  background @defaultDuration @defaultEasing
;
/*
@buttonWillChange: box-shadow, transform, opacity, color, background;
*/
@buttonWillChange: '';

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

@buttonGroupBoxShadow: none;
@buttonGroupButtonBoxShadow: @boxShadow;
@buttonVerticalBoxShadow: none;
@buttonGroupButtonOffset: 0px 0px 0px 0px;
@buttonVerticalGroupOffset: 0px 0px 0px 0px;

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

/* Hovered */
@buttonHoverBackgroundColor: #CACBCD;
@buttonHoverBackgroundImage: @buttonBackgroundImage;
@buttonHoverBoxShadow: @boxShadow;
@buttonHoverColor: @hoveredTextColor;
@buttonIconHoverOpacity: 0.85;

/* Focused */
@buttonFocusBackgroundColor: @buttonHoverBackgroundColor;
@buttonFocusBackgroundImage: '';
@buttonFocusBoxShadow: '';
@buttonFocusColor: @hoveredTextColor;
@buttonIconFocusOpacity: 0.85;

/* Disabled */
@buttonDisabledBackgroundImage: none;
@buttonDisabledBoxShadow: none;

/* Pressed Down */
@buttonDownBackgroundColor: #BABBBC;
@buttonDownBackgroundImage: '';
@buttonDownPressedShadow: none;
@downBoxShadow:
  @buttonBorderBoxShadow,
  @buttonDownPressedShadow
;
@buttonDownColor: @pressedTextColor;

/* Active */
@buttonActiveBackgroundColor: #C0C1C2;
@buttonActiveBackgroundImage: none;
@buttonActiveColor: @selectedTextColor;
@buttonActiveBoxShadow: @buttonBorderBoxShadow;

/* Active + Hovered */
@buttonActiveHoverBackgroundColor: @buttonActiveBackgroundColor;
@buttonActiveHoverBackgroundImage: none;
@buttonActiveHoverColor: @buttonActiveColor;
@buttonActiveHoverBoxShadow: @buttonActiveBoxShadow;

/* Loading */
@buttonLoadingOpacity: 1;
@buttonLoadingPointerEvents: auto;
@loadingTransition:
  all 0s linear,
  opacity @defaultDuration @defaultEasing
;

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

/* Or */
@buttonOrText: 'or';

@buttonOrGap: 0.3em;
@buttonOrHeight: (@buttonVerticalPadding * 2) + 1em;
@buttonOrZIndex: 3;

@buttonOrCircleDistanceToEdge: (@buttonVerticalPadding);
@buttonOrCircleSize: @buttonOrHeight - @buttonOrCircleDistanceToEdge;
@buttonOrLineHeight: (@buttonOrCircleSize);
@buttonOrBoxShadow: @buttonBorderBoxShadow;

@buttonOrVerticalOffset: -(@buttonOrCircleSize / 2);
@buttonOrHorizontalOffset: -(@buttonOrCircleSize / 2);

@buttonOrBackgroundColor: @white;
@buttonOrTextShadow: @buttonInvertedTextShadow;
@buttonOrTextStyle: @normal;
@buttonOrTextWeight: @bold;
@buttonOrTextColor: @lightTextColor;


@buttonOrSpacerHeight: @buttonVerticalPadding;
@buttonOrSpacerColor: transparent;

/* Icon */
@buttonIconButtonOpacity: 0.9;

/* Labeled */
@buttonLabeledLabelFontSize: @medium;
@buttonLabeledLabelAlign: center;
@buttonLabeledLabelPadding: '';
@buttonLabeledLabelFontSize: @relativeMedium;
@buttonLabeledLabelBorderColor: @borderColor;
@buttonLabeledLabelBorderOffset: -@buttonBorderBoxShadowWidth;
@buttonLabeledTagLabelSize: 1.85em; /* hypotenuse of triangle */
@buttonLabeledIconMargin: 0em;

/* Labeled Icon */
@buttonLabeledIconWidth: 1em + (@buttonVerticalPadding * 2);
@buttonLabeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@buttonLabeledIconPadding: (@buttonHorizontalPadding + @buttonLabeledIconWidth);
@buttonLabeledIconBorder: transparent;
@buttonLabeledIconColor: '';

@buttonLabeledIconLeftShadow: -1px 0px 0px 0px @buttonLabeledIconBorder inset;
@buttonLabeledIconRightShadow: 1px 0px 0px 0px @buttonLabeledIconBorder inset;


/* Inverted */
@buttonInvertedBorderSize: 2px;
@buttonInvertedTextColor: @white;
@buttonInvertedTextHoverColor: @buttonHoverColor;
@buttonInvertedGroupButtonOffset: 0px 0px 0px -(@buttonInvertedBorderSize);
@buttonInvertedVerticalGroupButtonOffset: 0px 0px -(@buttonInvertedBorderSize) 0px;

/* Basic */
@buttonBasicBorderRadius: @buttonBorderRadius;
@buttonBasicBorderSize: 1px;
@buttonBasicTextColor: @buttonTextColor;
@buttonBasicColoredBorderSize: 1px;

@buttonBasicBackground: transparent none;
@buttonBasicFontWeight: @normal;
@buttonBasicBorder: 1px solid @borderColor;
@buttonBasicBoxShadow: 0px 0px 0px @buttonBasicBorderSize @borderColor inset;
@buttonBasicLoadingColor: @offWhite;
@buttonBasicTextTransform: none;

/* Basic Hover */
@buttonBasicHoverBackground: #FFFFFF;
@buttonBasicHoverTextColor: @hoveredTextColor;
@basicHoverBoxShadow:
  0px 0px 0px @buttonBasicBorderSize @selectedBorderColor inset,
  0px 0px 0px 0px @borderColor inset
;
/* Basic Focus */
@buttonBasicFocusBackground: @buttonBasicHoverBackground;
@buttonBasicFocusTextColor: @buttonBasicHoverTextColor;
@buttonBasicFocusBoxShadow: @basicHoverBoxShadow;

/* Basic Down */
@buttonBasicDownBackground: #F8F8F8;
@buttonBasicDownTextColor: @pressedTextColor;
@basicDownBoxShadow:
  0px 0px 0px @buttonBasicBorderSize rgba(0, 0, 0, 0.15) inset,
  0px 1px 4px 0px @borderColor inset
;
/* Basic Active */
@buttonBasicActiveBackground: @transparentBlack;
@buttonBasicActiveBoxShadow: '';
@buttonBasicActiveTextColor: @selectedTextColor;

/* Basic Inverted */
@buttonBasicInvertedBackground: transparent;
@buttonBasicInvertedFocusBackground: transparent;
@buttonBasicInvertedDownBackground: @transparentWhite;
@buttonBasicInvertedActiveBackground: @transparentWhite;

@buttonBasicInvertedBoxShadow: 0px 0px 0px @buttonInvertedBorderSize rgba(255, 255, 255, 0.5) inset;
@buttonBasicInvertedHoverBoxShadow: 0px 0px 0px @buttonInvertedBorderSize rgba(255, 255, 255, 1) inset;
@buttonBasicInvertedFocusBoxShadow: 0px 0px 0px @buttonInvertedBorderSize rgba(255, 255, 255, 1) inset;
@buttonBasicInvertedDownBoxShadow: 0px 0px 0px @buttonInvertedBorderSize rgba(255, 255, 255, 0.9) inset;
@buttonBasicInvertedActiveBoxShadow: 0px 0px 0px @buttonInvertedBorderSize rgba(255, 255, 255, 0.7) inset;

@buttonBasicInvertedColor: @darkWhite;
@buttonBasicInvertedHoverColor: @darkWhiteHover;
@buttonBasicInvertedDownColor: @darkWhiteActive;
@buttonBasicInvertedActiveColor: @buttonInvertedTextColor;


/* Basic Group */
@buttonBasicGroupBorder: @buttonBasicBorderSize solid @borderColor;
@buttonBasicGroupBoxShadow: none;

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

/* Colors */
@buttonColoredBackgroundImage: none;
@buttonColoredBoxShadow: @buttonShadowBoxShadow;

/* Colored */
@buttonBrownTextColor: @buttonInvertedTextColor;
@buttonBrownTextShadow: @buttonInvertedTextShadow;
@buttonRedTextColor: @buttonInvertedTextColor;
@buttonRedTextShadow: @buttonInvertedTextShadow;
@buttonOrangeTextColor: @buttonInvertedTextColor;
@buttonOrangeTextShadow: @buttonInvertedTextShadow;
@buttonGreenTextColor: @buttonInvertedTextColor;
@buttonGreenTextShadow: @buttonInvertedTextShadow;
@buttonBlueTextColor: @buttonInvertedTextColor;
@buttonBlueTextShadow: @buttonInvertedTextShadow;
@buttonVioletTextColor: @buttonInvertedTextColor;
@buttonVioletTextShadow: @buttonInvertedTextShadow;
@buttonPurpleTextColor: @buttonInvertedTextColor;
@buttonPurpleTextShadow: @buttonInvertedTextShadow;
@buttonPinkTextColor: @buttonInvertedTextColor;
@buttonPinkTextShadow: @buttonInvertedTextShadow;
@buttonBlackTextColor: @buttonInvertedTextColor;
@buttonBlackTextShadow: @buttonInvertedTextShadow;
@buttonOliveTextColor: @buttonInvertedTextColor;
@buttonOliveTextShadow: @buttonInvertedTextShadow;
@buttonYellowTextColor: @buttonInvertedTextColor;
@buttonYellowTextShadow: @buttonInvertedTextShadow;
@buttonTealTextColor: @buttonInvertedTextColor;
@buttonTealTextShadow: @buttonInvertedTextShadow;
@buttonGreyTextColor: @buttonInvertedTextColor;
@buttonGreyTextShadow: @buttonInvertedTextShadow;

/* Inverted */
@buttonLightBrownTextColor: @buttonInvertedTextColor;
@buttonLightBrownTextShadow: @buttonInvertedTextShadow;
@buttonLightRedTextColor: @buttonInvertedTextColor;
@buttonLightRedTextShadow: @buttonInvertedTextShadow;
@buttonLightOrangeTextColor: @buttonInvertedTextColor;
@buttonLightOrangeTextShadow: @buttonInvertedTextShadow;
@buttonLightGreenTextColor: @buttonInvertedTextColor;
@buttonLightGreenTextShadow: @buttonInvertedTextShadow;
@buttonLightBlueTextColor: @buttonInvertedTextColor;
@buttonLightBlueTextShadow: @buttonInvertedTextShadow;
@buttonLightVioletTextColor: @buttonInvertedTextColor;
@buttonLightVioletTextShadow: @buttonInvertedTextShadow;
@buttonLightPurpleTextColor: @buttonInvertedTextColor;
@buttonLightPurpleTextShadow: @buttonInvertedTextShadow;
@buttonLightPinkTextColor: @buttonInvertedTextColor;
@buttonLightPinkTextShadow: @buttonInvertedTextShadow;
@buttonLightBlackTextColor: @buttonInvertedTextColor;
@buttonLightBlackTextShadow: @buttonInvertedTextShadow;
@buttonLightOliveTextColor: @buttonTextColor;
@buttonLightOliveTextShadow: @buttonTextShadow;
@buttonLightYellowTextColor: @buttonTextColor;
@buttonLightYellowTextShadow: @buttonTextShadow;
@buttonLightTealTextColor: @buttonTextColor;
@buttonLightTealTextShadow: @buttonTextShadow;
@buttonLightGreyTextColor: @buttonTextColor;
@buttonLightGreyTextShadow: @buttonTextShadow;


/* Ordinality */
@buttonPrimaryBackgroundImage: @buttonColoredBackgroundImage;
@buttonPrimaryTextColor: @buttonInvertedTextColor;
@buttonPrimaryTextShadow: @buttonInvertedTextShadow;
@buttonPrimaryBoxShadow: @buttonColoredBoxShadow;

@buttonSecondaryBackgroundImage: @buttonColoredBackgroundImage;
@buttonSecondaryTextColor: @buttonInvertedTextColor;
@buttonSecondaryTextShadow: @buttonInvertedTextShadow;
@buttonSecondaryBoxShadow: @buttonColoredBoxShadow;

@buttonPositiveBackgroundImage: @buttonColoredBackgroundImage;
@buttonPositiveTextColor: @buttonInvertedTextColor;
@buttonPositiveTextShadow: @buttonInvertedTextShadow;
@buttonPositiveBoxShadow: @buttonColoredBoxShadow;

@buttonNegativeBackgroundImage: @buttonColoredBackgroundImage;
@buttonNegativeTextColor: @buttonInvertedTextColor;
@buttonNegativeTextShadow: @buttonInvertedTextShadow;
@buttonNegativeBoxShadow: @buttonColoredBoxShadow;

/* Compact */
@buttonCompactVerticalPadding: (@buttonVerticalPadding * 0.75);
@buttonCompactHorizontalPadding: (@buttonHorizontalPadding * 0.75);

/* Attached */
@buttonAttachedOffset: -1px;
@buttonAttachedBoxShadow: 0px 0px 0px 1px @borderColor;
@buttonAttachedHorizontalPadding: 0.75em;
@buttonAttachedZIndex: 2;

/* Floated */
@buttonFloatedMargin: 0.25em;

/* Animated */
@buttonAnimatedVerticalAlign: middle;
@buttonAnimatedZIndex: 1;
@buttonAnimationDuration: 0.3s;
@buttonAnimationEasing: ease;
@buttonFadeScaleHigh: 1.5;
@buttonFadeScaleLow: 0.75;