/**
 * @section Buttons
 * Styling for CSS buttons.
 */


/**
 * Primary buttons
 */
.btn {
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-white);
	display: inline-block;
	font-size: 0.9375em;
	font-weight: normal;
	line-height: 1.2;
	margin-right: 0.3125em;
	margin-bottom: 0.3125em;
	padding: 0.5em 0.6875em;
	text-decoration: none;
	white-space: normal;

	&,
	&:focus,
	&:visited {
		color: var(--color-white);
	}

	&:hover,
	&:active {
		background-color: var(--color-primary-dark);
		border-color: var(--color-primary-dark);
		color: var(--color-white);
		text-decoration: none;
	}
}


/**
 * Secondary buttons
 */
.btn-secondary {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);

	&:hover,
	&:active {
		background-color: var(--color-secondary-dark);
		border-color: var(--color-secondary-dark);
	}
}


/**
 * Active state
 */
.btn:active {
	box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 1px 0.15625em rgba(0, 0, 0, 0.05);
	outline: 0;
}


/**
 * Disabled state
 */
.btn[disabled] {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}


/**
 * Button size
 */
.btn-large {
	font-size: 1em;
	line-height: normal;
	padding: 0.6875em 0.9375em;
}


/**
 * Block-level buttons
 */
.btn-block {
	display: block;
	margin-right: 0;
	padding-right: 0;
	padding-left: 0;
	width: 100%;
}


/**
 * General styles
 */
.btn,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}


/**
 * Remove right margin on last element and inputs
 */
.btn:last-child,
input.btn {
	margin-right: 0;
}