@mixin input {
	appearance: none;

	padding: 12px;
	font-size: 16px;
	margin-bottom: 12px;

	background: $white;
	border: 2px solid $black;
	box-sizing: border-box;
	color: $black;
	display: block;
	line-height: 1;
	outline: 2px solid transparent;
	vertical-align: top;

	transition-property: background-color, border-color, color, opacity, box-shadow;
	transition-duration: .1s;
	transition-timing-function: ease-out;

	&:focus {
		border-color: $notification;
		box-shadow: $notification;
		outline: 0 none;
		outline-offset: 0;
	}

	&:invalid {
		outline: 0 none;
	}
}

select, textarea{
	@include input;
}
textarea{
	// Allow only vertical resizing of textareas.
    resize: vertical;
}

input {
	&[type='text'],
	&[type='number'],
	&[type='email'],
	&[type='password'] {
		@include input;
	}
}

.button,
button,
[type="button"],
[type="reset"],
[type="submit"]{
	-webkit-appearance: button;
	cursor: pointer;

	padding: 10px 26px;
    margin: 0.6rem 0;
    border: 2px solid $gunmetal;
    background-color: $gunmetal;
    color: $white;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;

    &:hover{
        background-color: lighten($gunmetal, 10%);
        border-color: lighten($gunmetal, 10%);
        color: $white;
    }

	// Remove margin from paragraph wrapped anchors
	p &{
		margin: 0;
	}
}