@import '../base/animations';

.btn {
	@include font-primary-bold;
	border: 0;
	border-radius: 100px;
	box-shadow: none;
	font-size: 15px;
	height: 48px;
	letter-spacing: .8px;
	line-height: 19px;
	margin: 10px 0;
	overflow: hidden;
	padding: 14px 30px 15px;
	position: relative;
	text-transform: uppercase;
	transition: all .15s ease;
	width: 100%;
	z-index: 0;

	// Base styles
	&:hover {
		border: 0;
	}

	&:active,
	&:visited {
		box-shadow: none;
	}

	&:disabled {
		cursor: not-allowed;
	}

	&__spinner {
		display: block;
		margin: 0 auto;
		height: 20px;
		left: 50%;
		opacity: 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: opacity .1s $default-easing;
		visibility: hidden;
		width: 20px;

		&::before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		&::after {
			animation: spinnerAnim 1.5s linear infinite;
			border: 4px solid darken($color-blue5, 20);
			border-radius: 50%;
			border-right-color: $color-white;
			border-top-color: $color-white;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	&__text {
		display: block;
		left: 0;
		margin: 0 auto;
		position: relative;
		transition: opacity .1s $default-easing;
		width: 100%;
	}

	&__check,
	&__error {
		left: 50%;
		opacity: 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: all .1s $default-easing;
		visibility: hidden;

		i {
			margin-left: 5px;
		}
	}


	&__error {
		@include font-primary-bold;
		font-size: 24px;
	}


	&__check {
		transition-delay: .1s;
	}

	// Types
	&-link {
		color: $color-blue5;

		&:hover,
		&:focus,
		&:active {
			color: $color-blue6;
		}
	}

	&-default {
		background: $color-blue5;
		color: $color-white;

		&:hover,
		&:focus,
		&:active {
			background: $color-blue6;
		}
	}

	&-primary {
		.btn__spinner {
			&::after {
				border: 4px solid darken($color-orange5, 20);
				border-right-color: $color-white;
				border-top-color: $color-white;
			}
		}
	}

	&-secondary {
		background: transparent;
		border: 2px solid $color-charcoal2;
		line-height: 17px;
		color: $color-charcoal2;

		&:hover,
		&:focus {
			border: $color-charcoal3 2px solid;
			color: $color-charcoal3;
		}

		&:active {
			background: transparent;
		}

		&:disabled {
			&:hover {
				border: 2px solid $color-charcoal2;
				color: $color-charcoal2;
			}
		}

		.btn__spinner {
			&::after {
				border: 4px solid darken($color-charcoal2, 20);
				border-right-color: $color-charcoal2;
				border-top-color: $color-charcoal2;
			}
		}
	}

	&-info {
		border: 2px solid $color-blue5;
		line-height: 17px;

		&:hover,
		&:focus {
			border: $color-blue6 2px solid;
			color: $color-blue6;
		}

		&:disabled {
			color: $color-blue5;
		}

		.btn__spinner {
			&::after {
				border: 4px solid darken($color-blue5, 20);
				border-right-color: $color-blue5;
				border-top-color: $color-blue5;
			}
		}
	}

	// Sizes
	&-lg {
		font-size: 16px;
		height: 60px;
		padding: 20px 40px;

		&.btn-info {
			padding: 18px 28px;
		}
	}

	&-sm {
		font-size: 14px;
		line-height: 18px;
		height: 37px;
		padding: 10px 20px;

		&.btn-info {
			padding: 8px 18px;
		}
	}

	&-xs {
		font-size: 12px;
		line-height: 15px;
		height: 29px;
		padding: 7px 14px;

		&.btn-info {
			padding: 5px 12px;
		}
	}

	&-inline-block {
		display: inline !important;
		width: auto;
	}

	// Variations
	&-next {
		position: relative;

		&::after {
			@include icon-basic;
			content: '\e902';
			font-size: 19px;
			position: absolute;
			right: 15px;
			top: 14px;
		}
	}

	&-back {
		padding: 12px;
		width: 48px;

		&::before {
			@include icon-basic;
			content: '\e901';
			font-size: 20px;
		}

		&--with-text {
			position: relative;
			width: auto;

			&::before {
				left: 15px;
				position: absolute;
				top: 12px;
			}
		}
	}

	// Animations
	&--loading {
		cursor: wait;

		.btn__text {
			visibility: hidden;
		}

		.btn__spinner {
			display: block;
			opacity: 1;
			visibility: visible;
		}

		// Hide arrow for 'next' buttons
		&.btn-next {
			&::after {
				display: none;
			}
		}
	}
}

.secure-text {
	@include font-primary-bold;
	color: $color-charcoal2;
	text-transform: none;
	letter-spacing: auto;
	line-height: 20px;
	position: relative;
	font-size: 9px;
	padding-left: 12px;
	text-align: center;
	margin: -5px auto 0;
	width: 140px;

	&::before {
		@include icon-fill;
		content: '\e903';
		position: absolute;
		left: 0;
		font-size: 9px;
		top: 5px;
	}

	&--dark {
		color: $color-charcoal5;
		font-size: 14px;
		padding-bottom: 15px;
		padding-top: 15px;
		width: 210px;

		&::before {
			top: 17px;
			font-size: 14px;
		}
	}

	&--italics {
		font-style: italic;
		font-weight: bold;
		padding-left: 0;
		width: 100%;

		&::before {
			display: none;
		}
	}
}