/*
Buttons

Styleguide 3.8
*/
/*
Button Object

Display an anchor tag as a button.

.btn           - Display an element as an button.
.btn.btn--full - Set the button width to the width of it's parent element.
.btn:hover     - Standard hover styling for buttons.

Markup:
<button class="{$modifiers}">Send button</button>
<input type="button" class="{$modifiers}" value="Button" />
<input type="reset" class="{$modifiers}" value="Reset" />
<input type="submit" class="{$modifiers}" value="Submit" />
<a class="{$modifiers}">An anchor element.</a>

Styleguide 3.8.1
*/
%btn,
.btn {
	display: inline-block;
	@include rem(margin-bottom, map-get($button, bottomSpacing));
	/**
	 * Set in em's so we can change the size of the button depending on the font-size.
	 */
	padding: map-get($button, innerPadding);
	border: 0;

	background: map-get($button, background);
	border-radius: $brand-border-radius;
	cursor: pointer;

	font-size: map-get($button, fontSize);
	/**
	 * Normalize some rules accross the targeted elements (<input>, <button> and the .btn class).
	 */
	font-weight: normal;
	line-height: 1;
	color: map-get($button, textColor);
	vertical-align: top;

	&,
	&:hover {
		text-decoration: none;
	}
}

.btn--full {
	display: block;
	text-align: center;
	/**
	 * The following is so that this class works properly on inputs as well as anchor tags.
	 */
	padding-right: 0;
	padding-left: 0;
	width: 100%;
}