.btn {
	padding: 8px 12px;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .2s, border-color .2s;

	svg {
		width: 1.25em;
		height: 1.25em;
		vertical-align: middle;
		position: relative;
		top: -0.1em;
		margin-left: auto;
	}

}

.btn--primary {
	background-color: var(--primary);
	color: white !important;
	border: 1px solid var(--primary--hover);

	&:hover, &.btn--primary--active {
		background-color: var(--primary--hover);
		border: 1px solid var(--primary);
	}

	svg {
		stroke: white;
	}
}

.btn--primary-dark {
	background-color: var(--primary-dark);
	color: white !important;
	border: 1px solid var(--primary-dark--hover);

	&:hover, &.btn--primary-dark--active {
		background-color: var(--primary-dark--hover);
		border: 1px solid var(--primary-dark);
	}

	svg {
		stroke: white;
	}
}

.btn--secondary {
	background-color: var(--secondary);
	color: var(--primary-dark) !important;
	border: 1px solid var(--secondary--hover);

	&:hover, &.btn--secondary--active {
		background-color: var(--secondary--hover);
		border: 1px solid var(--secondary);
		color: var(--primary-dark--hover) !important;
	}

	svg {
		stroke: var(--primary-dark);
	}
}

.btn--secondary-dark {
	background-color: var(--secondary-dark);
	color: var(--primary-dark) !important;
	border: 1px solid var(--secondary-dark--hover);

	&:hover, &.btn--secondary-dark--active {
		background-color: var(--secondary-dark--hover);
		border: 1px solid var(--secondary-dark);
		color: var(--primary-dark--hover) !important;
	}

	svg {
		stroke: var(--primary-dark);
	}
}