@import "../constants";

@mixin download-button {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	max-height: 100px;

	&.expanded {
		.btn-group {
			display: flex;
			flex-direction: row;

			button {
				border-radius: 0px;
				cursor: pointer;
				border-right: 3px solid white;
				width: 90px;
				height: 50px;

				&:first-child {
					border-radius: 10px 0px 0px 10px;
				}

				&:last-child {
					border-right: none;
					border-radius: 0px 10px 10px 0px;
				}
			}
		}
	}

	button {
		background-color: #FF7F66;
		color: white;
		font-size: 14px;
		font-weight: 600;
		line-height: 36px;
		padding: 6px 26px;
		border-radius: 4px;
		border: none;
		text-align: center;
		cursor: pointer;
		transition: all 0.5s;
		&:focus {
			outline: none;
		}
		display: flex;
		align-items: center;
		justify-content: center;

		width: 123px;
		height: 50px;

		animation: fadeIn 2s;
		-webkit-animation: fadeIn 2s;
		-moz-animation: fadeIn 2s;
		-o-animation: fadeIn 2s;
		-ms-animation: fadeIn 2s;

		.content-loader {
			border: 3px solid #f3f3f3;
			border-radius: 50%;
			border-top: 3px solid #FF7F66;
			border-bottom: 3px solid #FF7F66;
			-webkit-animation: spin 2s linear infinite; /* Safari */
			animation: spin 2s linear infinite;
			padding: 15px;
			margin-left: 12px;
			margin-right: 12px;
		}

		span {
			cursor: pointer;
			display: inline-block;
			position: relative;
			transition: 0.5s;
		}
	}

	a {
		background-color: #FF7F66;
		text-decoration: none;
		color: white;
		font-size: 14px;
		font-weight: 600;
		line-height: 36px;
		padding: 6px 26px;
		border-radius: 4px;
		border: none;
		&:focus {
			outline: none;
		}

		&:hover {
			filter: grayscale(0.1);;
		}
	}

	@keyframes fadeIn {
		0% {opacity:0;}
		100% {opacity:1;}
	  };
	  
	@-moz-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
	};
	
	@-webkit-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
	};
	
	@-o-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
	};
	
	@-ms-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
	};
}
