/*
	Buttons
	========================================
*/

/* Core */
.btn {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	/* For input.btn */
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--btn-background);
	background-image: linear-gradient(to bottom, var(--btn-background), var(--btn-background-highlight));
	border: 1px solid var(--btn-border);
	border-bottom-color: #b3b3b3;
	/* darken(--btn-border, 10%) */
	border-radius: var(--base-border-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

/* Hover/focus state */
.btn:hover,
.btn:focus {
	color: var(--gray-dark);
	text-decoration: none;
	background-position: 0 -15px;
	transition: background-position 0.1s linear;
}

/* Focus state for keyboard and accessibility */
.btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

/* Active state */
.btn.active,
.btn:active {
	background-image: none;
	outline: 0;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}

/* Disabled state */
.btn.disabled,
.btn[disabled] {
	cursor: default;
	background-image: none;
	opacity: 0.65;
	box-shadow: none;
}

/* Button Sizes */
.btn-large {
	padding: var(--padding-large);
	font-size: var(--font-size-large);
	border-radius: var(--border-radius-large);
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
	margin-top: 4px;
}

/* Small */
.btn-small {
	padding: var(--padding-small);
	font-size: var(--font-size-small);
	border-radius: var(--border-radius-small);
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
	margin-top: 0;
}

.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
	margin-top: -1px;
}

/* Mini */
.btn-mini {
	padding: var(--padding-mini);
	font-size: var(--font-size-mini);
	border-radius: var(--border-radius-small);
}

/* Block button */
.btn-block {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* Vertically space out multiple block buttons */
.btn-block+.btn-block {
	margin-top: 5px;
}

/* Specificity overrides */
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
	width: 100%;
}

/* Alternate buttons */
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
	color: rgba(255, 255, 255, .75);
}

/* Set the backgrounds */
.btn-primary {
	color: var(--white);
	background-color: var(--btn-primary-background);
	background-image: linear-gradient(to bottom, var(--btn-primary-background), var(--btn-primary-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Warning appears as orange */
.btn-warning {
	color: var(--white);
	background-color: var(--btn-warning-background);
	background-image: linear-gradient(to bottom, var(--btn-warning-background), var(--btn-warning-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Danger and error appear as red */
.btn-danger {
	color: var(--white);
	background-color: var(--btn-danger-background);
	background-image: linear-gradient(to bottom, var(--btn-danger-background), var(--btn-danger-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Success appears as green */
.btn-success {
	color: var(--white);
	background-color: var(--btn-success-background);
	background-image: linear-gradient(to bottom, var(--btn-success-background), var(--btn-success-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Info appears as a neutral blue */
.btn-info {
	color: var(--white);
	background-color: var(--btn-info-background);
	background-image: linear-gradient(to bottom, var(--btn-info-background), var(--btn-info-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Inverse appears as dark gray */
.btn-inverse {
	color: var(--white);
	background-color: var(--btn-inverse-background);
	background-image: linear-gradient(to bottom, var(--btn-inverse-background), var(--btn-inverse-background-highlight));
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Cross-browser Jank */
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
	padding: 0;
	border: 0;
}

/* Link buttons */
.btn-link,
.btn-link:active,
.btn-link[disabled] {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

.btn-link {
	border-color: transparent;
	cursor: pointer;
	color: var(--link-color);
	border-radius: 0;
}

.btn-link:hover,
.btn-link:focus {
	color: var(--link-color-hover);
	text-decoration: underline;
	background-color: transparent;
}

.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
	color: var(--gray-dark);
	text-decoration: none;
}