// stylelint-disable selector-no-qualifying-type

//
// Base styles
//

.btn-reset {
	padding: 0;
	background: transparent;
	vertical-align: middle;
	user-select: none;
	border: none;
	cursor: pointer;

	&:focus,
	&.focus {
		outline: 0;
	}
}

.btn, .btn:active, .btn:focus {
	background-size:300% 100%;
	border-radius: 20px;
	border: none;
	cursor:pointer;
	display: inline-block;
	font-size:14px;
	font-weight:400;
	// height:39px;
	line-height:21px;
	padding:9px 18px;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	transition: 400ms background ease-in-out;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	outline: none;
}
.btn {
	&[disabled],
	&[disabled]:hover {
		background: $dark;
		cursor: default;
	}
}


.btn-primary {
	color:$white;
	background-color:$primary;
	background-image:linear-gradient(90deg,$primary,$secondary,$secondary,$primary);
}

.btn-secondary {
	color:$white;
	background-color:$dark;
	background-image:linear-gradient(90deg,$dark,$dark,$secondary,$primary);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-primary:focus,
.btn-secondary:focus,
.btn-primary:active,
.btn-secondary:active   {
	background-color:$primary;
	background-image:linear-gradient(90deg,$primary,$secondary,$secondary,$primary);
    background-position: 100% 0;
	background-size:300% 100%;
	color: $white;
	box-shadow: none;
}


//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
	font-weight: $font-weight-normal;
	color: $link-color;
	background-color: transparent;

	@include hover {
		color: $link-hover-color;
		background-color: transparent;
		border-color: transparent;
		text-decoration: none;
	}

	&:focus,
	&.focus {
		text-decoration: none;
		border-color: transparent;
		box-shadow: none;
	}

	&:disabled,
	&.disabled {
		color: $gray-600;
		background-color: transparent !important;
		border-color: transparent !important;
	}

	// No need for an active state here
}



//
// Block button
//

.btn-block {
	display: block;
	width: 100%;

	// Vertically space out multiple block buttons
	+ .btn-block {
		margin-top: $btn-block-spacing-y;
	}
}

@include media-breakpoint-only(xs) {
	.btn-block-xs {
		display: block;
		width: 100%;

		// Vertically space out multiple block buttons
		+ .btn-block-xs {
			margin-top: $btn-block-spacing-y;
		}
	}
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
	&.btn-block {
		width: 100%;
	}
}