.btn {
	display: inline-block;
	text-decoration: none;
	padding: .5em 2em;
	border-radius: .5em;
	border: 2px solid;
	font-size: 1em;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transition: background-color .25s;

}

@each $name, $colour in $button-colours {
	.btn.btn--#{$name}.btn--full {
		background: $colour;
		border-color: $colour;
		color: white;

		@include on-event() {
			background-color: darken-colour($colour);
			border-color: darken-colour($colour);
		}
	}

	.btn.btn--#{$name}.btn--outline {
		background: white;
		border-color: $colour;
		color: $colour;

		@include on-event() {
			background-color: $colour;
			color: white;
		}
	}
}