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

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

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

@medium: 13px;

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

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

@solidBorderColor: #ddd;

@borderBoxShadowColor: @solidBorderColor;
@borderBoxShadow: 0 0 0 1px @solidBorderColor inset;
@shadowBoxShadow: 0 0 0 0 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,
    0 2px 3px 0 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: #222;
@downBoxShadow: @borderBoxShadow;

@activeBackgroundColor: #f0f0f0;
@activeBoxShadow: 0 0 0 1px #ddd;

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

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

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

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

@labeledLabelBorderOffset: 0;

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

/* Primary */
@primaryColor: #4184f3;
@primaryBoxShadow: 0 0 0 1px #0157e4 inset;

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

/* Emotive */
@positiveColor: #3d9400;
@negativeColor: #d34836;

/* Inverted */
@invertedBorderSize: 1px;