.btn {
	appearance: button;
	border-radius: var(--border-radius);
	border-style: solid;
	border-width: 1px;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	outline: 0;
	padding: 8px 12px 8px;
	text-align: center;
	transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	text-shadow: 0 1px 1px rgba(0,0,0,.25),	0 0 1px rgba(0,0,0,.15);	
}
.btn:hover {
	transform: translateY(-1px);
	box-shadow: rgba(0, 0, 0, 0.25) 0 3px 3px;
}
.btn:active {
	transform: translateY(0);
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
}
.btn-primary {
	background-color: var(--primary);
	background-image: linear-gradient(var(--primary--200), var(--primary-200));
	color: var(--light);
	border-color: var(--primary-200);
	box-shadow: var(--primary-rgba-10) 0 3px 3px;
}
.btn-primary:hover {
	box-shadow: var(--primary-rgba-20) 0 3px 3px;
}

.btn-secondary {
	background-color: var(--secondary);
	background-image: linear-gradient(var(--secondary--200), var(--secondary-200));
	color: var(--light);
	border-color: var(--secondary-200);
	box-shadow: var(--secondary-rgba-10) 0 3px 3px;
}
.btn-secondary:hover {
	box-shadow: var(--secondary-rgba-20) 0 3px 3px;
}

.btn-tertiary {
	background-color: var(--tertiary);
	background-image: linear-gradient(var(--tertiary--200), var(--tertiary-200));
	color: var(--light);
	border-color: var(--tertiary-200);
	box-shadow: var(--tertiary-rgba-10) 0 3px 3px;
}
.btn-tertiary:hover {
	box-shadow: var(--tertiary-rgba-20) 0 3px 3px;
}

.btn-quaternary {
	background-color: var(--quaternary);
	background-image: linear-gradient(var(--quaternary--200), var(--quaternary-200));
	color: var(--light);
	border-color: var(--quaternary-200);
	box-shadow: var(--quaternary-rgba-10) 0 3px 3px;
}
.btn-quaternary:hover {
	box-shadow: var(--quaternary-rgba-20) 0 3px 3px;
}

.btn-success {
	background-color: var(--success);
	background-image: linear-gradient(var(--success--200), var(--success-200));
	color: var(--light);
	border-color: var(--success-200);
	box-shadow: var(--success-rgba-10) 0 3px 3px;
}
.btn-success:hover {
	box-shadow: var(--success-rgba-20) 0 3px 3px;
}

.btn-info {
	background-color: var(--info);
	background-image: linear-gradient(var(--info--200), var(--info-200));
	color: var(--light);
	border-color: var(--info-200);
	box-shadow: var(--info-rgba-10) 0 3px 3px;
}
.btn-info:hover {
	box-shadow: var(--info-rgba-20) 0 3px 3px;
}

.btn-warning {
	background-color: var(--warning);
	background-image: linear-gradient(var(--warning--200), var(--warning-200));
	color: var(--light);
	border-color: var(--warning-200);
	box-shadow: var(--warning-rgba-10) 0 3px 3px;
}
.btn-warning:hover {
	box-shadow: var(--warning-rgba-20) 0 3px 3px;
}

.btn-danger {
	background-color: var(--danger);
	background-image: linear-gradient(var(--danger--200), var(--danger-200));
	color: var(--light);
	border-color: var(--danger-200);
	box-shadow: var(--danger-rgba-10) 0 3px 3px;
}
.btn-danger:hover {
	box-shadow: var(--danger-rgba-20) 0 3px 3px;
}

.btn-light {
	background-color: var(--light);
	background-image: linear-gradient(var(--light--200), var(--light-200));
	color: var(--dark);
	border-color: var(--light-200);
	box-shadow: var(--dark-rgba-10) 0 3px 3px;
}
.btn-light:hover {
	box-shadow: var(--dark-rgba-20) 0 3px 3px;
}

.btn-dark {
	background-color: var(--dark);
	background-image: linear-gradient(var(--dark--200), var(--dark-200));
	color: var(--light);
	border-color: var(--dark-200);
	box-shadow: var(--dark-rgba-10) 0 3px 3px;
}
.btn-dark:hover {
	box-shadow: var(--dark-rgba-20) 0 3px 3px;
}