// --- Variables for Buttons ---

// --- Dimensions ---

@buttonFontWeight:           600;
@buttonFontSize:             @fontSizeS;
// An explanation for        unit(x.y / @buttonFontSize, em);
//                                             |          |
//                                             |          |
//                           relative to font size     result in em
// Why? To get button margins / paddings that are relative to the font size.
// Why? Because our designers designed those values with specific font sizes in mind.
// Why? To make sure we stay backwards-compatible with buttons that were
// sized by setting the font-size on them.
@buttonHeight:               unit(4.0 / @buttonFontSize, em);
@buttonHeightBig:            unit(5.2 / @buttonFontSize, em);
@buttonMinWidth:             unit(10.0 / @buttonFontSize, em);
@buttonMinWidthBig:          unit(13.2 / @buttonFontSize, em);
@buttonLineHeight:           unit(2.0 / @buttonFontSize, em);
@buttonLetterSpacing:        0.2px;

@buttonMarginHorizontal:     @spacingM;
@buttonMarginVertical:       @spacingM;
@buttonStickyMarginVertical: unit(0.7 / @buttonFontSize, em);
@buttonPaddingHorizontal:    unit(2.3 / @buttonFontSize, em);
@buttonPaddingHorizontalBig: @buttonPaddingHorizontal;
@buttonPaddingVertical:      unit(0.9 / @buttonFontSize, em);
@buttonPaddingVerticalBig:   unit(1.5 / @buttonFontSize, em);
@buttonRadius:               4px;

@buttonTextColor:            @white;

// --- Colors/Themes ---
// note: these differ from the official set of colors in some places;

// --- Orange Button
@buttonPrimaryBorder:        #f57000;
@buttonPrimaryBackground:    @color-functional-orange;

// --- Blue Button
@buttonSecondaryBorder:      #00578d;
@buttonSecondaryBackground:  @color-functional-blue-dark;
@buttonSecondaryHoverBase:   @color-functional-blue-light;

// --- ghost button
@buttonGhostBorder:          @color-functional-blue-light;
@buttonGhostBackground:      @white;
@buttonGhostTextColor:       @color-functional-blue-light;
