/**
 * Buttons
 *
 * Description: Styles for buttons
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Primary button
 * 2.0 - Small button
 * 3.0 - Alternative button
 * 4.0 - Negative button
 * 5.0 - Grey button
 * 6.0 - Text button
 * 7.0 - Tab button
 * 8.0 - Leave site button
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Primary button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
	$font-size: 20px;
	font-size: em($font-size);
	line-height: em(25px, $font-size);
	padding: em(15px, $font-size) em(23px, $font-size) em(16px, $font-size);
	position: relative;
	color: $white;
	border: 0;
	display: inline-block;
	background-color: $accent-color;
	//border-radius: $border-radius;

	&:hover {
		color: $white;
		background-color: $accent-color-dark;
		text-decoration: underline;
	}

	&:active {
		color: $white;
		background-color: $accent-color-darker;
		text-decoration: underline;
	}

	&.is-inactive, &.is-disabled {
		pointer-events: none;
		cursor: default;
		opacity: 0.6;
	}

	&.btn-narrow {
		padding-left: em(15px, $font-size);
		padding-right: em(15px, $font-size);
	}

	&.btn-block {
		width: 100%;
		text-align: center;
	}

	&:after {
		display: none;
	}
}



/**
 * 2.0 - Small button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
	&.btn-small {
		$font-size: 15px;
		font-size: em($font-size); 
		line-height: em(19px, $font-size);
		padding: em(10px, $font-size) em(17px, $font-size) em(11px, $font-size);
	}
}



/**
 * 3.0 - Alternative button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
	&.btn-alternative {
		background-color: $white;
		border: 2px solid $accent-color;
		color: $accent-color;

		&:hover {
			border-color: $accent-color-dark;
			color: $accent-color-dark;
		}
		&:active {
			border-color: $accent-color-darker;
			color: $accent-color-darker;
		}

		&.is-active {
			background-color: $accent-color;
			color: $white;

			&:hover {
				background-color: $accent-color-dark;
				color: $white;
			}
			&:active {
				background-color: $accent-color-darker;
				color: $white;
			}
		}
	}
}



/**
 * 4.0 - Negative button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
		&.btn-negative {
		background-color: $white;
		color: $accent-color;

		&:hover {
			background-color: $grey-lighter;
			color: $accent-color-darker;
		}
		&:active {
			background-color: $grey-light;
			color: $accent-color-darker;
		}
	}
}



/**
 * 5.0 - Grey button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
		&.btn-grey {
		background-color: $grey-light;
		color: $text-color;

		&:hover {
			background-color: shade($grey-light, 95%);
		}
		&:active {
			background-color: shade($grey-light, 90%);
		}
	}
}



/**
 * 6.0 - Text button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
	&.btn-text {
		background-color: transparent;
		color: $accent-color;

		&:hover {
			background-color: $grey-lighter;
			color: $accent-color-dark;
			text-decoration: underline;
		}
		&:active {
			background-color: $grey-light;
			color: $accent-color-dark;
			text-decoration: underline;
		}
	}
}



/**
 * 7.0 - Tab button
 * -----------------------------------------------------------------------------
 */

.btn, button, input[type="submit"] {
	&.btn-tab {
		border-radius: $border-radius $border-radius 0 0;
	}
}



/**
 * 8.0 - Leave site button
 * -----------------------------------------------------------------------------
 */

.leave-site-button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8); 
	color: $white;
	text-align: center;
	padding: $margin-standard / 2 0;
	z-index: 100;

	.icon {
		$font-size: 26px;
		display: inline-block;
		font-size: em($font-size);
		padding-left: em(10px, $font-size);
		margin-bottom: -7px;
		vertical-align: bottom;
	}

	&:hover {
		background-color: $black; 
		color: $white;
	}
}



/**
 * 9.0 - CTA button
 * -----------------------------------------------------------------------------
 */

.btn-cta {
	display: table;
	position: relative;
	font-size: em(16px);
	line-height: em(20px, 16px);
	padding: em(11px, 16px) em(18px, 16px);
	margin-bottom: em(8px, 16px);
	color: $white;
	border: 0;

	background-color: $red;

	&:hover {
		color: $white;
		background-color: $red-dark;
		text-decoration: underline;
	}
}

.cta {
	display: table;
	margin-bottom: em(8px);
	padding-left: em(10px);
	@include addLinkArrowBefore();
	color: $black;

	span {
		border-bottom: 2px solid $blue;
	}

	&:hover {
		text-decoration: none;
		color: $black;
		
		span {
			border-bottom: 2px solid $red;
		}
	}
}