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

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

@googleFontName : 'Roboto';
@pageFont       : 'Roboto', Arial, sans-serif;

@medium: 13px;

@buttonVerticalPadding   : 0.8em;
@buttonHorizontalPadding : 0.8em;
@buttonBorderRadius      : @relative3px;
@color             : #222222;
@buttonFontWeight        : normal;
@buttonTextTransform     : none;

@buttonBackgroundColor      : @white;
@buttonBackgroundImage      : linear-gradient(transparent, rgba(0, 0, 0, 0.02));

@solidBorderColor: #DDDDDD;

@buttonBorderBoxShadowColor: @solidBorderColor;
@buttonBorderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset;
@buttonShadowBoxShadow: 0px 0px 0px 0px transparent;

@transition:
  opacity 0.3s @defaultEasing,
  background-color 0.3s @defaultEasing,
  color 0.3s @defaultEasing,
  box-shadow 0.3s @defaultEasing,
  background 0.3s @defaultEasing
;
/*-------------------
        State
--------------------*/

@buttonHoverBackgroundColor: @white;
@buttonHoverBoxShadow:
  @buttonBorderBoxShadow,
  0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important
;

@buttonDownBackgroundColor: @white;
@buttonDownBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
@downTextColor: #222222;
@downBoxShadow: @buttonBorderBoxShadow;

@buttonActiveBackgroundColor: #F0F0F0;
@buttonActiveBoxShadow: 0px 0px 0px 1px #DDDDDD;

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

/* Basic */
@buttonBasicBorderSize: 0px;
@buttonBasicBorderRadius: 4px;
@buttonBasicColoredBorderSize: 1px;
@buttonBasicHoverBackground: @white;
@basicHoverBoxShadow: @buttonHoverBoxShadow;
@buttonBasicDownBackground: @white;
@basicDownBoxShadow: @downBoxShadow;

@buttonBasicActiveBackground: #FFFFFF;
@buttonBasicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);

/* Labeled */
@buttonLabeledIconBackgroundColor: transparent;
@buttonLabeledIconWidth: 2em;

@buttonLabeledLabelBorderOffset: 0px;

/* Colored */
@buttonColoredBackgroundImage : @subtleGradient;
@buttonColoredBoxShadow       : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

/* Primary */
@primaryColor       : #4184F3;
@buttonPrimaryBoxShadow   : 0px 0px 0px 1px #0157E4 inset;

/* Secondary */
@secondaryColor           : #EEEEEE;
@buttonSecondaryBackgroundImage : @buttonBackgroundImage;
@buttonSecondaryTextColor       : @buttonTextColor;
@buttonSecondaryBoxShadow       : @buttonBorderBoxShadow;

/* Emotive */
@positiveColor: #3D9400;
@negativeColor: #D34836;

/* Inverted */
@buttonInvertedBorderSize: 1px;