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

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

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

@medium: 13px;

@verticalPadding   : 0.8em;
@horizontalPadding : 0.8em;
@borderRadius      : @relative3px;
@color             : #222222;
@fontWeight        : normal;
@textTransform     : none;

@backgroundColor      : @white;
@backgroundImage      : linear-gradient(transparent, rgba(0, 0, 0, 0.02));

@solidBorderColor: #DDDDDD;

@borderBoxShadowColor: @solidBorderColor;
@borderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset;
@shadowBoxShadow: 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
--------------------*/

@hoverBackgroundColor: @white;
@hoverBoxShadow:
  @borderBoxShadow,
  0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important
;

@downBackgroundColor: @white;
@downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
@downTextColor: #222222;
@downBoxShadow: @borderBoxShadow;

@activeBackgroundColor: #F0F0F0;
@activeBoxShadow: 0px 0px 0px 1px #DDDDDD;

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

/* Basic */
@basicBorderSize: 0px;
@basicBorderRadius: 4px;
@basicColoredBorderSize: 1px;
@basicHoverBackground: @white;
@basicHoverBoxShadow: @hoverBoxShadow;
@basicDownBackground: @white;
@basicDownBoxShadow: @downBoxShadow;

@basicActiveBackground: #FFFFFF;
@basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);

/* Labeled */
@labeledIconBackgroundColor: transparent;
@labeledIconWidth: 2em;

@labeledLabelBorderOffset: 0px;

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

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

/* Secondary */
@secondaryColor           : #EEEEEE;
@secondaryBackgroundImage : @backgroundImage;
@secondaryTextColor       : @textColor;
@secondaryBoxShadow       : @borderBoxShadow;

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

/* Inverted */
@invertedBorderSize: 1px;