.button {
	@include button();
}

.button {
	&--outline {
		background-color: transparent;
		@include button--background-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01), rgba(0,0,0,0.05), rgba(0,0,0,0.1));
		color: $secondary;
		box-shadow: inset 0 0 0 2px $secondary;
		transition: all 0.2s;
		&:after {
			background-image: url('#{$assets-directory}/img/arrow-secondary.svg');
		}

		&:hover, &:focus {
			color: darken($secondary, 30%);
			box-shadow: inset 0 0 0 2px darken($secondary, 30%);
			&:after {
				background-image: url('#{$assets-directory}/img/arrow-navy.svg');
			}
		}
	}
	&--blue {
		background: $primary;
		@include button--background-gradient($primary, $primary, darken($primary, 10%), darken($primary, 50%));
	}
	&--blue-outline {
		background-color: transparent;
		@include button--background-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01), rgba(0,0,0,0.05), rgba(0,0,0,0.1));
		color: $primary;
		box-shadow: inset 0 0 0 2px $primary;
		transition: all 0.2s;

		&:after {
			background-image: url('#{$assets-directory}/img/arrow-primary.svg');
		}
		&:hover, &:focus {
			color: darken($primary, 30%);
			box-shadow: inset 0 0 0 2px darken($primary, 30%);
			&:after {
				background-image: url('#{$assets-directory}/img/arrow-navy.svg');
			}
		}

	}
}

button[type="submit"], input[type="submit"], input[type="reset"], input[type="button"] {
	&:not([class^='button']) {
		@include button();
	}

	&[disabled] {
		opacity: 0.5;
	}
}
input[type="submit"], input[type="reset"], input[type="button"] {
	padding: 2rem 0.75rem 0.75rem 0.75rem;
}