//----------------------------------------------------------------------------------------------------------------------
// BUTTON VARIABLES
//----------------------------------------------------------------------------------------------------------------------

// Font

/// Button font size.
/// @type Length
$button-font-size: $font-size !default;

/// Button font stack.
/// @type String
$button-font-stack: $font-stack !default;

/// Button font weight.
/// @type Number|String
$button-font-weight: $font-weight-normal !default;

// Border

/// Button border width for buttons that use borders.
/// @type Length
$button-border-width: $border-width !default;

/// Button border style for buttons that use borders.
/// @type String
$button-border-style: $border-style !default;


//----------------------------------------------------------------------------------------------------------------------
// BUTTONS
//
// Since buttons are often times meticulously styled, the button mixin is split into 3 separate files. This is the
// base file that is required for the other button styles to work.
//----------------------------------------------------------------------------------------------------------------------

/// Default buttons. These represent primary actions.
/// @group components
.button {
	padding: rhythm(1 2);
	cursor: pointer;
	font-family: $button-font-stack;
	font-size: $button-font-size;
	font-weight: $button-font-weight;
	line-height: 1;
	color: $color-canvas;
	border: none;
	background: $color-base;

	// Compact ("small") button
	&.compact {
		@include padding(rhythm(0.5 1));
	}

	// Full width button
	&.fluid {
		display: block;
		text-align: center;
	}

	@include color-variants {
		color: $color-contrast;
		background: $color;
	}

	&.muted, &[disabled] {
		cursor: not-allowed;
		color: $color-muted-contrast !important;
		background: $color-muted !important;
	}

	// States
	&:hover {
		background: pitch($color-base, 20);

		@include color-variants {
			background: pitch($color, 10);
		}
	}
}