/**
 * Name: Button
 * Description: Defines core style for buttons, using BEM style selectors
 * Requires: nothing, this is a self sufficent stylesheet
 * Notes: using !important for text color because selectors like `.box td a` trump button class style
 *
 * Component: .button
 *
 * Sub-objects:
 * .button__group
 * .button__toolbar
 *
 * Modifiers:
 * .button--primary
 * .button--action
 * .button--highlight
 * .button--danger
 * .button--inverse
 *
 * .button--mini
 * .button--small
 * .button--large
 * .button--huge
 *
 * .button--block
 * .button--square
 * .button--rounded
 * .button--pill
 *
 * States:
 * .button--active
 * .button--disabled
 *
========================================================================== */

.button {
	margin: 0;
	padding: 0.175em 0.5em;
	display: inline-block;
	vertical-align: top;
	line-height: normal;
	font-size: 1em;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
	color: #fff !important;
	background: #333;
	background: -webkit-linear-gradient(top,#404040,#262626);
	background: linear-gradient(top,#404040,#262626);
	border: 1px solid #242424;
	border-radius: 0.125em;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 2px rgba(0,0,0,0.15);
	-webkit-transition: all 0.125s ease-in-out;
	transition: all 0.125s ease-in-out;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

.button:hover {
	text-decoration: none;
	background: #333;
	background: -webkit-linear-gradient(top,#333333,#333333);
	background: linear-gradient(top,#333333,#333333);
}

.button--active,
.button:active {
	box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3), 0px 1px 0px white;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
	background: #333;
	color: #0b0b0b !important;
}

.button:focus {
	outline: none;
}

.button--disabled,
.button--disabled:hover,
.button--disabled:active,
.button[disabled],
.button[disabled]:hover,
.button[disabled]:active {
	box-shadow: none;
	cursor: not-allowed;
	border: none;
	opacity: 0.5;
}


/**
 * Firefox specific button style
========================================================================== */

.button::-moz-focus-inner,
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.button:-moz-focusring {
	outline-color: rgba(0,0,0,0.85); /* todo: keep consistent w/ other browsers */
}


/**
 * Button color modifiers
========================================================================== */

/* primary = blue */
.button--primary {
	text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
	background: #1e7bed;
	background: -webkit-linear-gradient(top,#3689ef,#126ee0);
	background: linear-gradient(top,#3689ef,#126ee0);
	border: 1px solid #126cdb;
}
.button--primary:hover {
	background: #1e7bed;
	background: -webkit-linear-gradient(top,#1e6aed,#1e8ced);
	background: linear-gradient(top,#1e6aed,#1e8ced);
}
.button--primary:active {
	background: #1e7bed;
	color: #0e59b5 !important;
}

/* action = green */
.button--action {
	text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
	background: #7db500;
	background: -webkit-linear-gradient(top,#8fcf00,#6b9c00);
	background: linear-gradient(top,#8fcf00,#6b9c00);
	border: 1px solid #689600;
}
.button--action:hover {
	background: #7db500;
	background: -webkit-linear-gradient(top,#6eb500,#8cb500);
	background: linear-gradient(top,#6eb500,#8cb500);
}
.button--action:active {
	background: #7db500;
	color: #4c6e00 !important;
}

/* highlight = organge */
.button--highlight {
	text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
	background: #f06a00;
	background: -webkit-linear-gradient(top,#ff760b,#d75f00);
	background: linear-gradient(top,#ff760b,#d75f00);
	border: 1px solid #d15c00;
}
.button--highlight:hover {
	background: #f06a00;
	background: -webkit-linear-gradient(top,#f07e00,#f05600);
	background: linear-gradient(top,#f07e00,#f05600);
}
.button--highlight:active {
	background: #f06a00;
	color: #a94a00 !important;
}

/* danger = red */
.button--danger {
	text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
	background: #d9331a;
	background: -webkit-linear-gradient(top,#e54027,#c22e17);
	background: linear-gradient(top,#e54027,#c22e17);
	border: 1px solid #be2d17;
}
.button--danger:hover {
	background: #d9331a;
	background: -webkit-linear-gradient(top,#d9431a,#d9231a);
	background: linear-gradient(top,#d9431a,#d9231a);
}
.button--danger:active {
	background: #d9331a;
	color: #992412 !important;
}

/* inverse = light gray */
.button--inverse {
	text-shadow: 0 1px 1px white;
	background: #eee;
	background: -webkit-linear-gradient(top,#fbfbfb,#e1e1e1);
	background: linear-gradient(top,#fbfbfb,#e1e1e1);
	border-color: #d4d4d4;
	color: #666 !important;
}
.button--inverse:hover {
	background: #eee;
	background: -webkit-linear-gradient(top,#ffffff,#dcdcdc);
	background: linear-gradient(top,#ffffff,#dcdcdc);
}
.button--inverse:active {
	text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
	background: #eee;
	color: #bbb !important;
}


/**
 * Size modifiers
 * font size estimates based on a standard 16px baseline
========================================================================== */


/* mini / ~12px */
.button--mini {
	font-size: 0.75em !important;
}

/* small / ~13px */
.button--small {
	font-size: 0.85em !important;
}

/* large / ~18px */
.button--large {
	font-size: 1.125em !important;
}

/* huge / ~20px */
.button--huge {
	font-size: 1.25em !important;
}


/**
 * Shape modifiers
========================================================================== */

.button--rounded {
	border-radius: 0.5em;
}
.button--pill {
	border-radius: 1em;
}
.button--block {
	display: block;
	width: 100%;
}


/**
 * Button group sub-object
 * use to group button elements with no space between
========================================================================== */

.button__group {
	position: relative;
	margin-bottom: 1.5em;
}
.button__group:before,
.button__group:after {
	display: table;
	content: "";
}
.button__group:after {
	clear: both;
}
.button__group .button {
	position: relative;
	margin: 0;
	float: left;
	border-radius: 0;
}
.button__group .button--rounded:first-child {
	border-radius: 0.5em 0 0 0.5em;
}
.button__group .button--rounded:last-child {
	border-radius: 0 0.5em 0.5em 0;
}
.button__group .button--pill:first-child {
	border-radius: 1em 0 0 1em;
}
.button__group .button--pill:last-child {
	border-radius: 0 1em 1em 0;
}


/**
 * Button toolbar sub-object
 * use to group multiple inline button groups
========================================================================== */

.button__toolbar .button__group {
	display: inline-block;
}


/**
 * Button actions sub-object
 * use to center a group of buttons, replacing div.button usage mainly on admin tables
========================================================================== */

.button__actions {
	margin: 1em 0 0 0;
	text-align: center;
}


/**
 * Less than elegant fixes for buttons using 2 elements & other edge cases
 * DEPRECATED: please use single elements for buttons when & where possible
========================================================================== */

/* assume `span.button` is always a wrapper for `a` or `input` */
span.button {
	padding: 0;
}

span.button a,
span.button input {
	display: block;
	padding: 0.175em 0.5em;
}

/**
 * Input button w/ wrapper
 */
.button input {
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit; /* does not inherit without this */
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-transition: 0;
	transition: 0;
	cursor: pointer;
}
.button input:active {
	box-shadow: none;
}
.button:hover input {
	background: transparent;
	background-image: none;
}

/**
 * An ugly but necissary hack because we still use IE7 compat in a few places and IE7 does not support inherit
 * Keep in mind this will break button sizes and text colors too.
 */
* + html .button input,
* + html .button a {
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/**
 * Anchor button w/ wrapper
 */
.button a {
	color: inherit !important;
	text-decoration: none;
}

/**
 * List buttons
 */
li.button {
	display: block;
	list-style: none;
}