/* 	Buttons */
%btn {
	display: inline-block;
	padding: 1rem 1.5rem;
	min-height: 4rem; /* same as form element height */
	font-family: $font-sec;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: $color01;
	background-color: $theme01;
	border: none; /* necessary for type button */
	transition: all .2s ease-out;
	border-radius: 3px;

	&:hover {
		color: $color01;
		background-color: darken($theme01, 20);
	}
}

.btn {
	@extend %btn;

	&-theme01 {
		@extend %btn;
		background-color: $theme01;
		color: $color01;

		&:hover {
			background-color: darken($theme01, 20);
		}
	}

	&-theme02 {
		@extend %btn;
		background-color: $theme02;
		color: $color01;

		&:hover {
			background-color: darken($theme02, 20);
		}
	}

	&-theme03 {
		@extend %btn;
		background-color: $theme03;
		color: $color01;

		&:hover {
			background-color: darken($theme03, 20);
		}
	}

	&-theme04 {
		@extend %btn;
		background-color: $theme04;
		color: $color02;

		&:hover {
			background-color: darken($theme04, 20);
		}
	}

	&-theme05 {
		@extend %btn;
		color: $color02;
		background-color: $theme05;

		&:hover {
			background-color: darken($theme05, 20);
		}

	}

	// extra utility class to make buttons full width
	&-full {
		clear: both;
		width: 100%;
	}
}