%button-primary {
	background: $alex-orange;
	border-radius: 5px;
	border: none;
	color: #fff;
	font: $museo;
	font-weight: 500;
	font-size: 1.25em;
	line-height: normal;
	padding: 0.7em 0.75em;
	text-align: left;
	margin-bottom: $inner-margin;
	width: 100%;
	max-width: none;
	transition: $transition-main;
	min-height: 50px;
	clear: both;

	@include small-screen {
		max-width: 320px;
	}

	&:hover,
	&:focus {
		background: lighten($alex-orange, 11%);
	}

	&:active {
		transform: scale(0.94);
		transform-origin: center;
		background: darken($alex-orange, 5%);
		transition: transform 50ms ease-in-out;
	}

	&:empty {
		display: none;
	}
}

%button-secondary {
	background: #fff;
	color: $alex-orange;
	font: $museo;
	line-height: normal;
	font-weight: 500;
	font-size: 1.25em;
	padding: 0.5em 0.25em;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: $inner-margin;
	border-radius: 0;
	max-width: 320px;
	transition: $transition-main;
	height: 50px;

	&:hover {
		border-bottom: 2px solid $alex-orange;
	}

	&:active,
	&:focus {
		color: $alex-blue;
		border-bottom: 2px solid $alex-blue;
	}

	&:empty {
		display: none;
	}
}

button {
	display: block;
	cursor: pointer;
	outline: none;

	&:focus,
	&:active {
		outline: none;
	}
}

.button,
button[value="submit"],
.choice button {
	@extend %button-primary;

	.col-6 & {
		@media (min-width: 480px) {
			max-width: 80%;
		}
	}
}

.cancel-button {
	@extend %button-secondary;
}

a {
	color: $alex-orange;
	font: $museo;
	font-weight: 500;
	text-decoration: none;
	transition: $transition-main;
	outline: none;

	&:hover,
	&:focus {
		border-bottom: 2px solid $alex-orange;
		outline: none;
	}

	&:active {
		color: $alex-blue;
		border-bottom: 2px solid $alex-blue;
	}
}