@import "typography.less";

// --- 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);

@buttonHeightSmall:          unit(5.2 / @buttonFontSize, em);
@buttonHeightMedium:         unit(5.2 / @buttonFontSize, em);
@buttonHeightLarge:          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:     16px;
@buttonMarginVertical:       16px;
@buttonStickyMarginVertical: unit(0.7 / @buttonFontSize, em);
@buttonPaddingHorizontal:    unit(2.3 / @buttonFontSize, em);
@buttonPaddingHorizontalBig: @buttonPaddingHorizontal;

@buttonPaddingHorizontalSmall: @buttonPaddingHorizontal;
@buttonPaddingHorizontalMedium: @buttonPaddingHorizontal;
@buttonPaddingHorizontalLarge: @buttonPaddingHorizontal;


@buttonPaddingVertical:      unit(0.9 / @buttonFontSize, em);
@buttonPaddingVerticalBig:   unit(1.5 / @buttonFontSize, em);

@buttonPaddingVerticalSmall:   unit(0.5 / @buttonFontSize, em);
@buttonPaddingVerticalMedium:   unit(0.9 / @buttonFontSize, em);
@buttonPaddingVerticalLarge:   unit(1.3 / @buttonFontSize, em);


@buttonRadius:               4px;

